Tutorial 15 - Desktop Theme Editor

When going through Maqetta's tutorials, it is suggested that you have two side-by-side browser windows open, one showing the tutorial, and the other where you run the application and perform the steps listed in the tutorial.

To create a new CSS theme and launch the theme editor, select Create > Theme... from the Maqetta menu bar. A dialog will appear. In the first field, choose "claro" as the theme to clone. In the second field, enter "myclaro" as the name for the cloned theme. (Note: theme names must not contain spaces or other special characters.) This will create a new CSS styling theme in your workspace named "myclaro" and launch the theme editor on your new "myclaro".

After issuing the Create > Theme command, the Maqetta application should look something like this:

All of the supported widgets are displayed on the theme editor canvas. The widgets are divided into three sections: Global Styling, Primitive Widgets and Container Widgets.

• Click on any widget to select it.
• When a widget is selected, its properties can be customized in the Properties palette.

Subwidget Selection Panel

Some widgets contain subwidgets, which can be customized individually.

When you click on a widget that has subwidgets, a panel pops up displaying a list of the subwidgets:

1. Click on the Calendar widget to display its subwidget panel.
2. Click on each check box and notice how the corresponding subwidget is highlighted in red on the Calendar widget.

• When a subwidget is selected, property changes will be applied to the subwidget.
• When WidgetOuterContainer is selected, property changes will be applied to the main widget.

To close the subwidget panel, you must select a different widget. (In a future release the panel will close when you click anywhere off the widget.)

Global Styling

The Global Styling section is for setting styles that apply globally. There are two types of elements that can be set globally: text and widgets.

Using the Generic text widget to make global changes

The Generic text widget is for setting text styles that apply to all widgets that contain text elements.

1. Select the Generic text widget (at the top under Global Styling).
2. Open the Fonts and Text section of the Properties palette.
3. Set the font color to red.
4. Notice how the text for all the widgets is now red.
5. If you wish to commit this theme change, click on the Save button on the toolbar to save your changes. (Note: You can undo after saving within the same editing session.)
6. Create a new HTML file to see the new font color:
   1. Select Create > Desktop Application from the Maqetta menu bar. You can either accept the default filename (e.g., file1.html) or enter a custom filename. Click on the Create button.
   2. Drag a Button onto the canvas.
      The button's text should be black. This is because each new desktop composition by default starts off using the Claro theme, and the default text color with Claro is black.
   3. Drag the HTML Rich Text widget onto the canvas and type in some text.
   4. Click off of the rich text widget to close it.
   5. Note that all of the text is black.
   6. On the toolbar, choose the "Switch theme" command from the dropdown menu on the Document Settings icon (2nd from right on toolbar). This will bring up a dialog that allows you to switch to a different theme. In the menu, choose "myclaro" as the theme to use.
   7. Note that all of the text is now red.
   8. Save and close the HTML file.

Using the Global Background and Border widget to make global changes

The Global Background and Border widget represents a generic widget and allows you to globally set the background and border for all widgets. These properties are under the Background and Border sections of the Properties palette.

1. Select the Global Background and Border widget in the theme editor.
2. Open the Background section of the Properties palette.
3. Set the background color to a pale green.
4. Notice how the color on the Primitive widgets is now green.
5. Click on the Save icon button on the toolbar to save your changes.
6. Create a new HTML file to see the new background color:
   1. Select Create > Desktop Application from the Maqetta menu bar to create a new HTML file.
   2. Drag a Button onto the canvas.
   3. Drag a Calendar onto the canvas.
   4. Note that both widgets are blue. This is because new HTML files start with the Claro theme.
   5. On the toolbar, choose the "Switch theme" command from the dropdown menu on the Document Settings icon (2nd from right on toolbar). This will bring up a dialog that allows you to switch to a different theme. In the menu, choose "myclaro" as the theme to use.
   6. Note that the two widgets are now green.
   7. Close the HTML file.

Note: Changes made with the Global Background and Border widget will override changes previously made to individual widgets. If you want to customize individual widgets for your theme, you should make all global changes first, then make the individual widget changes.

To customize the visual styling for a particular type of widget, select the widget on the theme editor canvas and modify the styling properties for that widget using the Properties palette.

Customizing the button widget

1. Change the button style in the Theme editor:
   1. Click on the Button widget to select it.
   2. In the Properties palette, open the Fonts and Text section.
   3. Adjust the various text properties (e.g., font family, font size, color).
   4. Notice how the changes are applied to the Button widget on the canvas.
   5. Click on the Save button on the toolbar to save your theme modifications.
2. Create a new HTML file to use the new button style:
   1. Select Create > Desktop Application from the Maqetta menu bar to create a new HTML file.
   2. Drag two buttons from the Widget palette onto the canvas.
   3. On the toolbar, choose the "Switch theme" command from the dropdown menu on the Document Settings icon (2nd from right on toolbar). This will bring up a dialog that allows you to switch to a different theme. In the menu, choose "myclaro" as the theme to use.
   4. Notice how the two buttons reflect the styling settings that you defined in the theme editor.
   5. In the page editor toolbar, click the Preview in Browser icon. This will launch a new browser window that contains the HTML page you just created.

Sometimes changes made in the theme editor don't show up in the page editor until you do a browser refresh. Save and close the theme editor before doing a browser refresh, then reopen it if needed.

Changing background colors

1. Change Button's background color:
   1. Select the Button widget in the theme editor.
   2. Open the Background section of the Properties palette.
   3. Click on the color input field to bring up the Color Picker
   4. Pick a green color.
   5. Click off the Color Picker to close it.
   6. Note that Button's color is now green.
2. Change Calendar's background color:
   1. Select the Calendar widget in the theme editor.
   2. A window will pop up containing a list of all the subwidgets for Calendar.
   3. Check the box next to the SelectedDate subwidget.
   4. Open the Background section of the Properties palette.
   5. Click on the color input field to bring up the Color Picker
   6. Note that the same green color is still selected.
   7. Click off the Color Picker to accept the same color and close the picker.
   8. Note that the background on the currently selected date is now green.
3. Change TitlePane's background color:
   1. Select the TitlePane widget in the theme editor (container widget that has Pane at the top).
   2. A window will pop up containing a list of all the subwidgets for TitlePane.
   3. Check the box next to the TitlePaneTitle subwidget.
   4. Open the Background section of the Properties palette.
   5. Click on the color input field to bring up the Color Picker
   6. Note that the same green color is still selected.
   7. Click off the Color Picker to accept the same color and close the picker.
   8. Note that the TitlePane's title color is now green.

Changing background colors for different states

When a tab is selected on TabContainer, it puts the tab in the Selected state. Any tab that is not selected is considered to be in the Normal state. This exercise shows how to set tab background color for the Normal state, and then the Selected state.

1. Change TabContainer for the Normal state:
   1. Select TabContainer.
   2. A window will pop up containing a list of all the subwidgets for TabContainer.
   3. Check the box next to the Tab subwidget.
   4. Make sure Normal is selected in the States palette.
   5. Open the Background section of the Properties palette.
   6. Click on the color input field to bring up the Color Picker
   7. Pick a green color.
   8. Click off the Color Picker to close it.
2. Change TabContainer for the Selected state:
   1. Make sure that TabContainer is still selected and the Tab subwidget box is checked in the popup.
   2. Select the Selected state in the States palette.
   3. Open the Background section of the Properties palette.
   4. Click on the color input field to bring up the Color Picker
   5. Click off the Color Picker to accept the same color and close the picker.
3. View TabContainer in various states:
   1. Click on the Save button on the toolbar to save your changes.
   2. Open a new HTML file (select Create > Desktop Application from the Maqetta menu bar).
   3. On the toolbar, choose the "Switch theme" command from the dropdown menu on the Document Settings icon (2nd from right on toolbar). This will bring up a dialog that allows you to switch to a different theme. In the menu, choose "myclaro" as the theme to use.
   4. Drag a TabContainer onto the canvas (accept the default tab names).
   5. Click on each tab to view the color differences.
   6. Click the Preview in Browser icon in the toolbar. This will launch a new browser window that contains the HTML page you just created.
   7. Click on each tab to view the color differences.
   8. Note the difference in color when you hover over each tab. This is controlled by the Hover state. Try changing the tab color for the hover state, then view the results.

The styling assigned to certain widgets will have an indirect effect on other widgets.

For example, Accordion, TabContainer and BorderContainer use ContentPanes as wrapper widgets for each of their sub-panes, so these widgets will be affected by any changes made to ContentPane.

Styling inheritance exercises

• Changing ContentPane affects multiple widgets:
  1. Click on the ContentPane widget (the 1^st widget in the Container widgets section) to select it.
  2. In the Properties palette under Fonts and Text, set font color to a dark blue color.
  3. Notice that the same font color is used for ContentPane, Accordion, TabContainer and BorderContainer. This is because Accordion, TabContainer and BorderContainer use ContentPanes as a wrapper widget for each of their sub-panes. (Note that TitlePane's font color does not change, because TitlePane does not use ContentPanes.)
  4. Click the Undo icon to undo the changes.
• Changing the Global Styling font:
  1. Click on the Generic text block under Global Styling at the top of the theme editor.
  2. In the Properties palette under Fonts and Text and note that the default font-family is "Verdana,Arial,Helvetica,sans-serif".
  3. Set the font-family to Arial Black.
  4. Notice that all widget fonts are now set to Arial Black.
  5. Now select the Button widget and set the font-family to Courier New.
  6. Notice that all buttons are now set to Courier New (including Toolbar which contains Buttons as subwidgets).
  7. Setting the font on individual widgets will override the global font set on the Generic text block.
  8. Click the Undo icon twice to undo the Button and Generic text changes.

• Changing the Global Background and Border widget affects multiple widgets:
  1. Click on the Global Background and Border widget under Global Styling.
  2. In the Properties palette under Background, set the color to pale yellow.
  3. Notice that the background color for many of the Primitive widgets changes to the selected color.
  4. (Notice that the background color for the container widgets does not change. Use ContentPane to globally change the background for container widgets.)
  5. Click on the Save button on the toolbar to save your theme changes.
  6. Open Sample1.html and Sample2.html, for each file switch to the "myclaro" theme (using the "Switch theme" command from the dropdown menu on the Document Settings icon (2nd from right on toolbar)), and preview them in the browser (using the Preview in Browser toolbar icon) to see the affects this change.

Some complex widgets, such as Calendar, allow different styling for different "subwidgets", which are particular sub-elements to the given widget. For Calendar, you can customize the styling on several things, including the year, the month, the days of the week (Sun to Sat), and the dates (0 to 31).

Experiment with subwidgets

1. Click on the Calendar widget to select it.
2. In the subwidget popup, check the box next to SelectedDate.
3. In the Properties palette, change the font color to red.
4. Notice how the font color for the month name changes on the Calendar widget.
5. In the subwidget popup check the box next to CalendarDayLabel and change the font color.
6. Continue to select other subwidgets and change the styling.
7. Click on the Save button on the toolbar to save your theme changes.
8. Create a new HTML file (select Create > Desktop Application from the Maqetta menu bar).
9. On the toolbar, choose the "Switch theme" command from the dropdown menu on the Document Settings icon (2nd from right on toolbar). This will bring up a dialog that allows you to switch to a different theme. In the menu, choose "myclaro" as the theme to use.
10. Drag a Calendar widget onto the canvas.
11. Notice that the theme changes you made to the Calendar widget are visible in the HTML page editor.

The term widget states refers to the various interactive states that a widget might have. For example, the Dojo Button widget has three widget states: Normal, Hover and Disabled. For each state Dojo displays a different set of CSS properties, such as border color, font color, and background properties, in order to provide visual feedback at runtime.

Experiment with widget states

1. Understanding the States palette:
   1. Close all files except the Claro theme editor (claro.theme).
   2. Open the Claro theme editor if it is not already open.
   3. In the States palette, select the Active state.
   4. Notice that some widgets are grayed out. This indicates that these widgets do not have an Active state. Any widgets that are not grayed out (such as Button) do have an Active state.
   5. Select the Disabled state in the States palette.
   6. Notice that Button and Checkbox are light gray, indicating that these widgets are styled as light gray when they are disabled.
   7. Select the Hover state in the States palette.
   8. Notice that many of the widgets have a slightly darker blue coloring than they do in the Normal state. This styling is displayed when you hover over the widget with your mouse.
   9. Select the Selected state in the States palette.
   10. Notice that the CheckBox widget now displays with a check mark, to show that it displays as checked in the Selected state. (At runtime the Checkbox widget toggles between the Selected and Normal states when you click on it.)
2. Change the styling for different states:
   1. In the States palette, make sure the Normal state is highlighted (it is by default).
   2. In the Styling palette, change the Button's styling (e.g., font family, font size or font color). This will change the styling for the Button's Normal state.
   3. Notice how the button's appearance changes on the theme editor canvas updates as you change styling properties.
   4. Now select Hover in the States palette.
   5. Notice that the Button's styling now shows the current styling for the Hover state.
   6. In the Styling palette, change the Button's styling for the Hover state, making it different from the styling you gave it for the Normal state.
   7. In the States palette, alternately click on the Normal and Hover states and observe the style changes on the Button widget.
   8. Click on the Save button on the toolbar to save your theme changes.
3. Test your theme changes:
   1. Select Create > Desktop Application from the Maqetta menu bar open up a new HTML page.
   2. On the toolbar, choose the "Switch theme" command from the dropdown menu on the Document Settings icon (2nd from right on toolbar). This will bring up a dialog that allows you to switch to a different theme. In the menu, choose "myclaro" as the theme to use.
   3. Drag a Button widget onto the canvas.
   4. In the page editor toolbar, click the Preview in Browser icon. This will launch a new browser window that contains the HTML page you just created (which only contains the Button widget).
   5. The button should reflect the styles you set for the Normal state.
   6. Hover your mouse over the button to observe the styling for the Hover state.

Previous / Next