Tutorial 14 - Mobile 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.

Maqetta provides a mobile theme editor that allows you to clone and then customize the built-in CSS themes that ship with the Dojo Mobile (dojox.mobile) widget set. Dojo Mobile ships with the following CSS themes:

• android - CSS styling that provides native-looking styling for Android devices
• blackberry - CSS styling that provides native-looking styling for Blackberry devices
• iphone - CSS styling that provides native-looking styling for iPhones
• ipad - CSS styling that provides native-looking styling for iPads (slight variations versus iPhone)

and also the following generic, cross-platform theme:

• custom - A simple theme designed explicitly to provide the basis for company-specific, custom theme development

Maqetta's mobile theme editing and management features allows you to clone and customize any of the above themes.

By default, Dojo and Maqetta delivers native-platform look-and-feel, where the widgets look and act just like the native controls found in the applications that ship standard on the device. At run-time, Dojo's default behavior is to detect which device the widgets are running on and then dynamically load the correct CSS theme that matches the given device (i.e., the "android" theme for Android devices, the "iphone" theme for iPhones, etc.)

With Dojo and Maqetta, you can create your own custom CSS themes and then define which theme should be used for which device. In Maqetta, you can define which themes are used on which devices using the Select theme dialog, which can be invoked in multiple ways (described in subsequent sections). Below is a snapshot of the Select theme dialog.

The above snapshot shows the default associations of CSS themes to mobile devices:

• Under "Dojo 1.7 Mobile Theme", the default value is "(device specific)", meaning that a different CSS theme is used for each different device.
• Android devices will use Dojo's built-in "android" theme
• Blackberry devices will use Dojo's built-in "blackberry" theme
• iPhones will use Dojo's built-in "iphone" theme
• iPads will use Dojo's built-in "ipad" theme
• Other devices will use Dojo's built-in "iphone" theme

You can use this dialog to:

• Choose a different theme for each different device, such as using your own custom "myandroidtheme" for Android devices, your own custom "myiphonetheme" for iPhones, etc.
• Choose a single theme for all devices (or any set of devices). For example, you might choose to use your own custom "mymobiletheme" across all target devices.

For this tutorial, we will clone and customize the "custom" theme (Dojo's generic cross-platform mobile theme CSS).

Note that with Maqetta you can also clone and customize any of the native-looking mobile themes (i.e., "android", "blackberry", "iphone" and "ipad").

To clone and customize the "custom" theme, select the Create> Theme... command from the Maqetta menu bar. A dialog will appear. In the first field, choose "custom" as the theme to clone. In the second field, enter "mymobiletheme" 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 "mymobiletheme" and launch the theme editor on your new "mymobiletheme".

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

The mobile theme editor is divided into the following sections:

• Global Styling - visual styling that applies globally across multiple widgets. There are 3 sub-sections:
  • Page backgrounds and fonts - This control allows you to change page backgrounds and the default font properties used globally across your mobile user interfaces.
  • Heading backgrounds and fonts - This control allows you to change backgrounds and font properties that apply globally across all widgets that share visual styling with the Heading widget (i.e., TabBar and EdgeToEdgeList).
  • Buttons backgrounds and fonts - This control allows you to change backgrounds and font properties that apply globally across all widgets that share visual styling with the Button widget (e.g., ToolbarButton, CheckBox, RadioButton and others).
• Widget Styling - visual styling that applies to specific widgets. There are 3 tabs, each of which shows a collection of widgets:
  • Headings and TabBars - The snapshot above shows the list of widgets in this group.
  • Rects and Lists - See below for a snapshot of the widgets in this group:

    

  • Controls - See below for a snapshot of the widgets in this group:

    

Global Styling - Page Backgrounds and Fonts

1. At the top of the Global Styling section, click inside of the rectangular object that contains the words "Page backgrounds and fonts". This is the "widget" that you can select to customize background and font properties that apply at a full page level. After clicking, you should see a blue selection border surrounding the widget:

   

2. Open the Background section of the Properties palette.
3. Change the background color to green by choosing "green" from the dropdown menu for the background-color property.

   

   The page background should now be green inside the various sections of the mobile theme editor.

4. Change the background color again by clicking on the rectangular color swatch that is just to the right of the dropdown menu. (The color swatch should have turned green after the previous operation.) After clicking on the color swatch, a color picker popup should appear:

   

   Select a light purple color from the color picker and then click OK.

   The page background should now be light purple inside the various sections of the mobile theme editor.

5. Click on the any of the "..." buttons to bring up the Background dialog:

   

   Notice that you can change the 'background-color' property on this dialog, also. The Background dialog is good for defining advanced backgrounds such as images and gradients. But for now, just click on the Cancel button.
6. Open the Fonts and Text section of the Properties palette.
7. For the 'color' property, enter the string "#606" into the text entry field so that the default text color is a dark purple.

   Various text strings, particularly straight HTML text, should be dark purple instead of charcoal.

8. For the 'font-size' property, see if the value appears as '14px'. If not, enter '14px' as the value of 'font-size. Now, click on the "+" icon twice to change font size from 14px to 16px.

   Various text strings in the mobile theme editor should be larger.

9. Click on the Save button on the toolbar to save your theme changes.

Global Styling - Headings and Buttons

1. Within the Global Styling section, click inside of the rectangular object that contains the words "Heading backgrounds" to select the Heading Backgrounds and Fonts widget. This is the "widget" that you can select to customize background and font properties that apply Headings, TabBars and EdgeToEdgeCategory widgets.

2. Open the Background section of the Properties palette.
3. We will now create a background gradient for these widgets. Click on any of the "..." buttons on the right side of the Backgrounds sections to bring up the Backgrounds dialog.
4. Set the color value for the first gradient stop to "#FAF" (light purple) and the second gradient stop to "#828" (darker purple).

   The color swatch at the top right of the dialog should show a gradient that starts with light purple at the top and transitions into dark purple at the bottom.

   Click OK at the bottom of the dialog.

   The Heading, TabBar and EdgeToEdgeCategory widgets should now have the purple gradient for their backgrounds.

5. Repeat the above steps for the "Button backgrounds" widget. Click inside of the rectangular object that contains the words "Button backgrounds" to select the Button Backgrounds and Fonts widget. This is the "widget" that you can select to customize background and font properties that apply various Button widgets, CheckBox and Radio Button. Once again, click any of the "..." buttons on the right side of the Backgrounds sections to bring up the Backgrounds dialog. Set the color value for the first gradient stop to "#FAF" (light purple) and the second gradient stop to "#828" (darker purple). Click OK at the bottom of the dialog. The mobile theme editor should now look like this:

   

6. Click on the Save icon to save your theme changes.

Widget Styling

1. In the Widget Styling section, you can do extensive and deep customizations of the CSS styling properties on a widget-by-widget basis. At this point, click on each of the 3 tabs in the Widget Styling section and review the list of widgets.
2. Click on the Controls tab, then click on the "TextBox/ComboBox" widget to select it. Go to the "Padding/Margins" section of the Properties palette and enter "5px" for the 'padding' property.

   One page editor canvas, you should see a large white space around the text for the TextBox/ComboBox widget.

3. Click on the Rects & Lists tab, then click on the "ListItem" widget to select it (e.g., click on the string "Item 1"). Notice the popup that appears that shows 3 subwidgets: WidgetOuterContainer, ListItem and MoveTo. Initially WidgetOuterContainer is selected. Go to the "Borders" section of the Properties palette, set the "show" option to "props", and then enter "blue" as the value for the the 'border-color' property.

   One page editor canvas, the border around the list widgets should now be blue.

4. In the subwidget popup, click on "ListItem" to select that sub-widget.

   One page editor canvas, you should see a red-dashed rectangle around the ListItem labeled "Item 1". This red-dashed rectangle highlights one piece of the widget that corresponds to the currently selected subwidget.

5. Go to the "Backgrounds" section of the Properties palette and then enter "#FCF" as the value for the the 'background-color' property.

   One page editor canvas, the background on the 2 ListItem widgets "Item 1" and "Item 2" should be light purple.

6. In the subwidget popup, click on "MoveTo" to select that sub-widget.

   One page editor canvas, you should see a red-dashed rectangle around the right-pointing arrow.

7. Go to the "Borders" section of the Properties palette, set the "show" option to "props", and then enter "#808" as the value for the the 'border-color' property.

   One page editor canvas, the arrow should be purple.

   

8. Click on the Save icon to save your theme changes.

Using your custom theme in a new HTML page

1. Go to the New menu at the top of the application, and issue a "Create Mobile Application" command. In the Create dialog, set device type to "iphone" using the drop-down menu. You can either accept the default filename (e.g., file1.html) or enter a custom filename.
2. Click on the Theme... button to bring up the Switch/Select Theme dialog. In the dialog, for the entry labeled "Dojo 1.7 mobile theme", choose "mymobiletheme" from the dropdown menu.

   

3. Click OK on the Select Theme dialog and then click on the Create button on the New HTML File dialog.

   The mobile page editor should open, showing the device silhouette for an iPhone.

4. In the Palette, drag the following widgets onto the canvas:
   • View (found in the Views section)
   • Heading (found in the Heading section)
   • EdgeToEdgeList (found in the Lists section)
   • Button (found in the Buttons subsection of the Controls subsection)

   The widgets should be styled using the purple-colored styling from "mymobiletheme".

   

Previous / Next