Tutorial 10 - Mobile User Interfaces

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.

This tutorial introduces how to use Maqetta to author mobile user interfaces. With Maqetta, you can drag/drop mobile widgets with device-native look-and-feel into a life-size replica of a mobile device. The resulting application will automatically adapt its styling to match native look-and-feel for the target device and will automatically include animated slide-in transitions from one "view" (i.e., a full screen of mobile content) to another view.

Set up your authoring canvas to author inside of an iPhone silhouette as follows:

1. ⇒ Go to the Create menu at the top of the application, and issue a "Create Mobile Application" command.
2. ⇒ In the Create dialog, click on the arrow on the device select control to show the list of possible devices that are supported by the current release of Maqetta.
3. ⇒ Set the device to "iphone" using the drop-down menu. You can either accept the default filename (e.g., file1.html) or enter a custom filename. Click on the Create button.
4. ⇒ The page canvas should now show a life-size silhouette of an iPhone.

   

5. ⇒ Look at the toolbar. The second icon from the right is the Document Settings icon. Press that icon and select the "Choose device" command, which will bring up the "Choose a device silhouette" dialog. The dialog looks as follows:

   

6. ⇒ The current release provides authoring support for a handful of popular mobile devices, including both phones and tablets, and supports authoring in both portrait and landscape. Use the Choose Device command to change to other silhouettes (e.g., Android phones, iPad, Blackberry).
7. ⇒ Switch between portrait and landscape modes by issuing a "Rotate device" command, also found on the Document Settings icon at the right side of the toolbar.
8. ⇒ Using the same commands, go back to showing the iPhone silhouette in portrait mode.

Explore the various sections of the Palette.

As you can see, the dojox.mobile widget library offers a wide variety of commonly used mobile widgets:

• View widgets - container widgets that represent switchable alternate views. Typically, one view appears at a time, and when the running application switches to a different view, the old view slides out and the new view slides in:
  • ScrollableView - A container for a full page of mobile content, but which is scrollable (e.g., via a touch vertical-flick gesture).
  • SwapView - A container for a full page of mobile content, but which is swappable with alternate views (e.g., via a touch horizontal-flick gesture).
  • View - Usually, a View is used as a container for a (non-scrollable) full page of mobile content.
• Heading widgets - These are widgets typically used at the top of a mobile screen:
  • Heading - Heading (titlebar) widget.
  • ToolBarButton - A button widget that can be placed inside of a Heading widget.
• List widgets - These are widgets that are used to display a list of information or choices:
  • RoundRectCategory - A heading widget typically used above a RoundRectList or RoundRectDataList.
  • RoundRectList - A list of items displayed as a vertical stacked group of rounded rectangles.
  • RoundRectDataList - Same as RoundRectList, except data comes from a data store.
  • EdgeToEdgeCategory - A heading widget typically used above a EdgeToEdgeList or EdgeToEdgeDataList.
  • EdgeToEdgeList - A list of items displayed in a UI element that spans the full width of the screen.
  • EdgeToEdgeDataList - Same as EdgeToEdgeList, except data comes from a data store.
  • ListItem - Child widget for RoundRectList or EdgeToEdgeList.
• Control widgets - These are low-level UI controls often used in forms:
  • Buttons
    • Button
    • ToggleButton
  • Checkboxes, RadioButtons, Switch
    • Checkbox
    • RadioButton
    • Switch
  • IconContainer
    • IconContainer
    • IconItem
    • IconMenu
    • IconMenuItem
  • Pickers
    • Carousel
    • DataCarousel
    • DataPicker
    • SpinWheel
    • SpinWheelSlot
    • SpinWheelDatePicker
    • SpinWheelTimePicker
    • TimePicker
    • ValuePicker
    • ValuePickerSlot
    • ValuePickerDatePicker
    • ValuePickerTimePicker
  • Select
    • ComboBox
  • Sliders, Spinners
    • Slider
  • TextBox
    • TextBox
    • ComboBox
    • TextArea
  • Toolbars, ButtonBars
    • TabBar
    • TabBarButton
  • Other
    • ProgressIndicator
    • SearchBox
• Container widgets:
  • Accordion
  • Container
  • Container
  • FixedSplitter
  • GridLayout
  • Pane
  • RoundRect
  • ScrollablePane

Typically, mobile user interfaces consist of a series of different screens. For this tutorial we will create 2 of the screens using the "View" widget.

1. ⇒ Drag/drop a View widget onto the page canvas. Notice that the page canvas now has a gray background. This is because the first dojox.mobile widget added to the page brings in the CSS theme stylesheets that provide a native look-and-feel for a particular mobile device.

   

   Also notice that there is a selection rectangle around the entire page. This is because the View is selected and it has default width and height of 100%.
   If you want the View to have dimensions, particularly height, less than 100%, you can change dimensions in the Layout section of the Properties palette.
2. ⇒ In order to allow easy authoring of multiple screens, the Dojox Mobile widget uses the 'id' attribute to put a referenceable name on widgets. To put a name on this View widget, open up the "Widget" palette (found on the top-right side of the application). and look at the top part of that palette. Type "root_view" as the value for the 'id' attribute and then hit Return to complete the operation. The top of the Properties palette should now show for: View #root_view:

   

   Make sure that you entered the exact string "root_view". The tutorial won't work if the ID is not entered correctly.
3. ⇒ Look at the Scenes palette. Right now the "root_view" View is selected (as you can tell by the visibility symbol):

   

4. ⇒ Drag/drop a Heading widget into the middle of the View. An edit box will appear that allows you to enter the text content for the Heading.

   

   Enter "My Mobile App" and click the OK button or hit Return to commit the Heading's text content. The Heading should now have the label "My Mobile App".


5. ⇒ Drag/drop a second View widget onto the page canvas. Look at the Scenes palette and take note of the following:
   
   
   • The second View widget has been added as a sibling to the first View widget. By default, Maqetta makes a new View widget a sibling to an existing View widget when the new View is dropped onto the existing View.
     If you actually want the new View widget to be a child widget of the existing View widget, here are two options:

     • You can drop the View widget onto canvas, allow Maqetta to make the new View a sibling of the previous View, and then you can subsequently rearrange the widget hierarchy in the Outline palette by dragging/dropping the new View widget onto the existing View widget.
     • Before adding the second View (that you want to be a child of another View), you can turn on the Preference "When dragging, show candidate parents" found at Settings->Preferences->HTML->Visual Editor. This allows you to use the arrow keys during drag/drop widget creation to choose which existing widget should be the parent of the new View widget.
   • The second View becomes selected and visible (just like what happens whenever a new widget is added), but additionally notice that the first View widget is now invisible . With the Dojo Mobile toolkit, sibling View widgets work such that one and only one View widget is visible at any given time. Maqetta mimics this runtime behavior at author time by managing the visibility of View widgets such that whenever one View becomes visible, all sibling View widgets become invisible.
   
   
6. ⇒ In the Scenes palette, alternatively click on the first and second View widget. You will see that when one View widget is selected or made visible, the other View widget becomes invisible. For the following steps, make sure the second View is visible.
7. ⇒ Select the second View widget by either switching to the second View in the Scenes palette, and then clicking inside the (empty) second view, or clicking on the second View widget in the Outline palette.
8. ⇒ With the second View widget selected, go to the top of the Properties palette and type "alerts_view" as the value for the 'id' attribute and then hit Return to complete the operation. The top of the Properties palette should now show for: View #alerts_view
   Make sure that you entered the exact string "alerts_view". The tutorial won't work if the ID is not entered correctly.
9. ⇒ Drag/drop a Heading widget into the middle of the View. An edit box will appear that allows you to enter the text content for the Heading. Enter "Alerts" and click the OK button or hit Return to commit the Heading's text content. The Heading should now have the label "Alerts".

Perform the following steps to add some content to the first View (i.e., the View with id="root_view"):

1. ⇒ Select the first View so that the "My Mobile App" heading is visible on the page canvas.
2. ⇒ Drag/drop a RoundRectList widget into the middle of the View. A data entry popup widget should appear, showing two lines that say "Item 1" and "Item 2". Replace the data with the following three lines:

   Alerts
   Status
   News

   The result should look like this:

   

   Note: You can edit the list of items either by double-clicking on the RoundRectList widget.
3. ⇒ Select the first list item ("Alerts"). Go to the Widget palette. Press on the drop-down menu down arrow icon for the "moveTo" property. You should see two values listed on the menu: "root_view" and "alerts_view". Choose "alerts_view" from the menu.

   

   After hitting Return, an arrow icon should appear on the right side of the "Alerts" list item:

   

Perform the following steps to add some content to the second View (i.e., the View with id="alerts_view"):

1. ⇒ Use the Scenes palette to select the second View (the "Alerts" View).

   

   You should see the heading with the word "Alerts" on the page canvas.
2. ⇒ In the Widgets palette, go to the HTML section, and then into the Common sub-section. Drag/drop a <div> widget into the middle of the View. You will see a blue selection outline surrounding the empty DIV. Double-click on the empty DIV. An edit box will appear that allows you to enter the text content for the Heading. Enter "Today's alerts" and click the OK button or hit Return to commit the text content. Go to the Margins palette. Find the property named "margin", enter the value "1em", and hit Return to commit the new margin value.
   For this step, be sure to enter a value for the shortcut property "margin" and not the more specific "margin-top", "margin-right", "margin-bottom" or "margin_left".
3. ⇒ Drag/drop another <div> widget into the middle of the View. You will see a blue selection outline surrounding the empty DIV. Double-click on the empty DIV. An edit box will appear that allows you to enter the text content for the Heading. Enter "10:30am 85% capacity" and click the OK button or hit Return to commit the text content. Go to the Margins palette. You might have to click on the "show t/r/b/l" checkbox to show the margin-top, margin-right, margin-bottom, and margin-left properties. Find the property named "margin-left", enter the value "1em", and hit Return to commit the new margin value.
   You might have to click on the "show t/r/b/l" checkbox to expose the "margin-left" property.

   

4. ⇒ Click on the Heading at the top to select it. Go to Widget palette. Enter "Home" as the value for the "Back" property and hit Return to commit the value. Now press on the drop-down menu down arrow icon for the "moveTo" property. You should see two values listed on the menu: "root_view" and "alerts_view". Choose "root_view" from the menu. After completing these operations, a button labeled "Home" should appear on the left side of the Heading:

   

5. ⇒ Use the Scenes palette to make the first View visible. Click on the View with 'id' of root_view so that you will now see the "My Mobile App" heading on the top of the page canvas.
6. ⇒ Click the Save icon to save this page.

Mobile user interfaces created with Dojox Mobile and Maqetta automatically restyle themselves based on the target device and orientation.

1. ⇒ Use the Choose Device command on the Document Setting menu (found on the right side of the toolbar) to change to other silhouettes (e.g., Android phones, iPad, Blackberry). Notice that the page gets restyled to match the native look-and-feel for different devices. Here is a snapshot of how the root View looks with an Android theme.

   

2. ⇒ Switch between portrait and landscape modes by issuing Rotate Device commands (also found on the Document Settings menu on the right side of the toolbar). Note that the user interface stretches to fit both landscape or portrait orientations.
3. ⇒ Using the same two commands, go back to showing the iPhone silhouette in portrait mode.

Now let's preview your mobile application and test its interactivity, including slide-in animations.

1. ⇒ In the toolbar, click the Preview in Browser icon . This will launch a new browser window that contains the mobile application you just created running inside of the same mobile device silhouette as you see in the page editor, with controls at the top for switching devices, controlling zoom level and changing orientation (portrait vs. landscape).

   

2. ⇒ Use the controls at the top of the device to preview for different devices, zoom in and out, and switch orientation.
3. ⇒ Click on the "Alerts" list item. This should cause a slide-in animation to transition from the root view to the alerts view.

   

4. ⇒ Click on the "Home" button. This should cause a slide-in animation to transition back from the alerts view to the root view.

1. ⇒ On the page editor toolbar, click on the arrow next to the Save button to bring up the Save menu, and click on "Save As". Then save your composition as "TutorialMobile.html". (We might use this file in subsequently in the Review/Commenting tutorial.)
2. ⇒ Click on the file tab's close button - - to close the page editor.

Previous / Next