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.

.

a full screen of mobile content) to another view. 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.. ⇒ Go to the Create menu at the top of the application.e. Choosing a device Set up your authoring canvas to author inside of an iPhone silhouette as follows: 1. You can either accept the default filename (e.html) or enter a custom filename. 2. 4.. 3. file1. and issue a "Create Mobile Application" command. With Maqetta.About this tutorial This tutorial introduces how to use Maqetta to author mobile user interfaces. . ⇒ Set the device to "iphone" using the drop-down menu. you can drag/drop mobile widgets with device-native look-and-feel into a life-size replica of a mobile device. Click on the Create button. ⇒ In the Create dialog.g. The resulting application will automatically adapt its styling to match native look-andfeel for the target device and will automatically include animated slide-in transitions from one "view" (i. ⇒ The page canvas should now show a life-size silhouette of an iPhone.

including both phones and tablets. ⇒ Using the same commands. also found on the Document Settings icon at the right side of the toolbar. ⇒ Look at the toolbar. ⇒ Switch between portrait and landscape modes by issuing a "Rotate device" command. go back to showing the iPhone silhouette in portrait mode. The second icon from the right is the Document Settings icon. Use the Choose Device command to change to other silhouettes (e. Android phones.g. iPad.5.mobile widget library Explore the various sections of the Palette. ⇒ The current release provides authoring support for a handful of popular mobile devices. Press that icon and select the "Choose device" command. and supports authoring in both portrait and landscape. Introducing the dojox. Blackberry). 8.. 7. . which will bring up the "Choose a device silhouette" dialog. The dialog looks as follows: 6.

but which is swappable with alternate views (e.g.. the old view slides out and the new view slides in: o ScrollableView . and when the running application switches to a different view.Heading (titlebar) widget. RadioButtons. the dojox. o ListItem .Same as RoundRectList. but which is scrollable (e.container widgets that represent switchable alternate views.A list of items displayed in a UI element that spans the full width of the screen. via a touch horizontal-flick gesture).These are widgets typically used at the top of a mobile screen: o Heading . o EdgeToEdgeDataList .A container for a full page of mobile content. Heading widgets . o SwapView . Switch  Checkbox  RadioButton  Switch o IconContainer  IconContainer  IconItem  IconMenu  IconMenuItem o Pickers  Carousel  DataCarousel  DataPicker . except data comes from a data store. o EdgeToEdgeList .These are widgets that are used to display a list of information or choices: o RoundRectCategory . a View is used as a container for a (non-scrollable) full page of mobile content.mobile widget library offers a wide variety of commonly used mobile widgets:     View widgets . o EdgeToEdgeCategory .Same as EdgeToEdgeList.A list of items displayed as a vertical stacked group of rounded rectangles.Usually.Child widget for RoundRectList or EdgeToEdgeList. o RoundRectList . Control widgets . one view appears at a time. except data comes from a data store. o RoundRectDataList .These are low-level UI controls often used in forms: o Buttons  Button  ToggleButton o Checkboxes.g. List widgets .A button widget that can be placed inside of a Heading widget.As you can see. via a touch vertical-flick gesture).A heading widget typically used above a EdgeToEdgeList or EdgeToEdgeDataList.. o ToolBarButton .A heading widget typically used above a RoundRectList or RoundRectDataList. Typically. o View .A container for a full page of mobile content.

⇒ Drag/drop a View widget onto the page canvas. For this tutorial we will create 2 of the screens using the "View" widget. ButtonBars  TabBar  TabBarButton o Other  ProgressIndicator  SearchBox Container widgets: o Accordion o Container o Container o FixedSplitter o GridLayout o Pane o RoundRect o ScrollablePane Setting up 2 different views Typically. . Notice that the page canvas now has a gray background. Spinners  Slider o TextBox  TextBox  ComboBox  TextArea o Toolbars.         o o SpinWheel SpinWheelSlot SpinWheelDatePicker SpinWheelTimePicker TimePicker ValuePicker ValuePickerSlot ValuePickerDatePicker ValuePickerTimePicker Select   ComboBox Sliders. This is because the first dojox. 1. mobile user interfaces consist of a series of different screens.mobile widget added to the page brings in the CSS theme stylesheets that provide a native look-and-feel for a particular mobile device.

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

allow Maqetta to make the new View a sibling of the previous View. ⇒ Drag/drop a second View widget onto the page canvas. Right now the "root_view" View is selected (as you can tell by the visibility symbol): 4. here are two options:  You can drop the View widget onto canvas.3. Look at the Scenes palette and take note of the following: o The second View widget has been added as a sibling to the first View widget. Maqetta makes a new View widget a sibling to an existing View widget when the new View is dropped onto the existing View. ⇒ Drag/drop a Heading widget into the middle of the View. ⇒ Look at the Scenes palette. 5. and then you can subsequently . The Heading should now have the label "My Mobile App". By default. If you actually want the new View widget to be a child widget of the existing View widget. Enter "My Mobile App" and click the OK button or hit Return to commit the Heading's text content. An edit box will appear that allows you to enter the text content for the Heading.

With the Dojo Mobile toolkit. 8. The tutorial won't work if the ID is not entered correctly. 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. ⇒ In the Scenes palette. Maqetta mimics this runtime behavior at author time by managing the visibility of View widgets such that whenever one View becomes visible. The second View becomes selected and visible (just like what happens whenever a new widget is added). ⇒ Select the first View so that the "My Mobile App" heading is visible on the page canvas. the other View widget becomes invisible. You will see that when one View widget is selected or made visible. show candidate parents" found at Settings->Preferences->HTML->Visual Editor. ⇒ 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. The top of the Properties palette should now show for: View #alerts_view Make sure that you entered the exact string "alerts_view".  Before adding the second View (that you want to be a child of another View). 7.e. sibling View widgets work such that one and only one View widget is visible at any given time.o rearrange the widget hierarchy in the Outline palette by dragging/dropping the new View widget onto the existing View widget. ⇒ Select the second View widget by either switching to the second View in the Scenes palette. alternatively click on the first and second View widget. 2. and then clicking inside the (empty) second view. the View with id="root_view"): 1. The Heading should now have the label "Alerts". 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. A data entry popup widget should appear. but additionally notice that the first View widget is now invisible . ⇒ With the second View widget selected. all sibling View widgets become invisible. 6. 9. Replace the data with the following three lines: . Enter "Alerts" and click the OK button or hit Return to commit the Heading's text content. showing two lines that say "Item 1" and "Item 2". you can turn on the Preference "When dragging. Completing the root view Perform the following steps to add some content to the first View (i. or clicking on the second View widget in the Outline palette. make sure the second View is visible. ⇒ Drag/drop a RoundRectList widget into the middle of the View. For the following steps..

You should see two values listed on the menu: "root_view" and "alerts_view". Press on the drop-down menu down arrow icon for the "moveTo" property. 5. Choose "alerts_view" from the menu. an arrow icon should appear on the right side of the "Alerts" list item: . Alerts 4. ⇒ Select the first list item ("Alerts"). After hitting Return. Go to the Widget palette.3. 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. and then into the Common subsection. You might have to click on the "show t/r/b/l" checkbox to show the margin-top. Double-click on the empty DIV. go to the HTML section. An edit box will appear that allows you to enter the text content for the Heading. Double-click on the empty DIV. Go to the Margins palette. ⇒ Drag/drop another <div> widget into the middle of the View. and hit Return to commit the new margin value. An edit box will appear that allows you to enter the text content for the Heading. margin-bottom. 2. Drag/drop a <div> widget into the middle of the View. enter the value "1em". ⇒ In the Widgets palette. Enter "Today's alerts" and click the OK button or hit Return to commit the text content. Go to the Margins palette. You will see a blue selection outline surrounding the empty DIV. Enter "10:30am 85% capacity" and click the OK button or hit Return to commit the text content. You will see a blue selection outline surrounding the empty DIV. and hit Return to commit the new margin value. enter the value "1em". Find the property named "margin". For this step. the View with id="alerts_view"): 1.Completing the alerts view Perform the following steps to add some content to the second View (i. "margin-right". be sure to enter a value for the shortcut property "margin" and not the more specific "margin-top". ⇒ Use the Scenes palette to select the second View (the "Alerts" View). margin-right. You should see the heading with the word "Alerts" on the page canvas. "margin-bottom" or "margin_left"..e. Find the property named "margin-left". . and margin-left properties.

. You should see two values listed on the menu: "root_view" and "alerts_view". Enter "Home" as the value for the "Back" property and hit Return to commit the value. 4. ⇒ Click the Save icon to save this page. After completing these operations. iPad. ⇒ Use the Choose Device command on the Document Setting menu (found on the right side of the toolbar) to change to other silhouettes (e.. ⇒ Use the Scenes palette to make the first View visible. Choose "root_view" from the menu. 6. Go to Widget palette. a button labeled "Home" should appear on the left side of the Heading: 5. 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. Android phones. Verifying against different devices and orientations Mobile user interfaces created with Dojox Mobile and Maqetta automatically restyle themselves based on the target device and orientation.You might have to click on the "show t/r/b/l" checkbox to expose the "margin-left" property.g. Now press on the dropdown menu down arrow icon for the "moveTo" property. 1. ⇒ Click on the Heading at the top to select it.

. Here is a snapshot of how the root View looks with an Android theme. with controls at the top for switching devices. landscape). 2. Note that the user interface stretches to fit both landscape or portrait orientations. ⇒ Using the same two commands. click the Preview in Browser icon . go back to showing the iPhone silhouette in portrait mode. 1. 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. Preview and run your mobile application Now let's preview your mobile application and test its interactivity.Blackberry). ⇒ In the toolbar. controlling zoom level and changing orientation (portrait vs. ⇒ 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). including slide-in animations. Notice that the page gets restyled to match the native look-and-feel for different devices. 3.

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

This should cause a slide-in animation to transition back from the alerts view to the root view. Then save your composition as "TutorialMobile. ⇒ Click on the "Home" button.to close the page editor.4.html". ⇒ On the page editor toolbar.. (We might use this file in subsequently in the Review/Commenting tutorial. click on the arrow next to the Save button to bring up the Save menu. Save as TutorialMobile.) 2.html 1. ⇒ Click on the file tab's close button . and click on "Save As". .