search

derrell / App-Inventor-Gallery

App Inventor Gallery
20 stars 17 forks source link

Theming #80

Open derrell opened 13 years ago

derrell commented 13 years ago

Create a new qooxdoo theme that will be used with this gallery

derrell commented 12 years ago

This page has the theme links: http://manual.qooxdoo.org/1.5.x/pages/gui_toolkit.html#themes

There is a lot to themes. The documentation will point you to the application's Theme files, which for us are in source/class/aiagallery/theme.

I suggest that you begin by thinking about adjusting only colors, and consider other changes as you get more comfortable with it.

derrell commented 12 years ago

It appears that these are the only qooxdoo classes we currently use, don't worry about any other widget for the moment:

qx.ui.basic.Atom qx.ui.basic.Image qx.ui.basic.Label qx.ui.container.Composite qx.ui.container.Scroll qx.ui.container.SlideBar qx.ui.core.Command qx.ui.core.Spacer qx.ui.core.Widget qx.ui.decoration.Single qx.ui.form.Button qx.ui.form.CheckBox qx.ui.form.List qx.ui.form.ListItem qx.ui.form.SelectBox qx.ui.form.TextField qx.ui.groupbox.GroupBox qx.ui.layout.Grid qx.ui.layout.Grow qx.ui.layout.HBox qx.ui.layout.VBox qx.ui.splitpane.Pane qx.ui.table.ICellEditorFactory qx.ui.table.Table qx.ui.table.cellrenderer.Image qx.ui.table.columnmodel.Resize qx.ui.table.model.Simple qx.ui.tabview.Page qx.ui.tabview.TabView qx.ui.tooltip.ToolTip qx.ui.virtual.behavior.Prefetch qx.ui.virtual.cell.AbstractWidget qx.ui.virtual.core.Scroller qx.ui.virtual.layer.WidgetCell qx.ui.virtual.selection.CellRectangle qx.ui.window.Window

derrell commented 12 years ago

You can find out the appearance name for each of the widgets, using the qooxdoo API viewer. For example, if you look at qx.ui.basic.Label's documentation (http://demo.qooxdoo.org/current/apiviewer/#qx.ui.basic.Label), scroll down to Properties and click on the '+' in front of "appearance" to expand it, you'll see that its initial value is "label". Continuing that example...

Now look in the modern theme's Appearance.js, at QOOXDOO_PATH/framework/source/class/qx/theme/modern/Appearance.js, and find the entry for "label". You'll see that it returns a map with a text-color member that is set to "text-disabled". If you then look at Color.js in that same directory, you'll see that "text-disabled" has a hex value to indicate its color.

Another more sophisticated example: look at the documentation for qx.ui.form.Button in the API viewer. Its appearance property is "button". Now look at Appearance.js, and find the "button" section. It includes "button-frame" which is the interesting part, so find that section, just above. You can see that the 'states' variable tells you about the state the button is in, e.g., whether it is disabled or pressed or whatever. In the case where the button is pressed (states.pressed is true), the text color is changed to "text-hovered" which you can find in Color.js.

You will be making small, incremental changes to the theme, in aiagallery/source/class/aiagallery/theme/* and these classes can extend, and then alter the behavior of, the modern theme.

fgmart-zz commented 12 years ago

For this week, find some icons (e.g., in the Tango set) and hard code them into the tabs.