Tutorial 9 - Sketching and States

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 Maqetta's application states feature when used in combination with Maqetta's quick UI sketching features. This tutorial covers these topics:

• Tutorial preparation
• Defining custom application states
• Deleting and renaming states
• Setting widget visibility for different states
• Adding widgets into states
• Managing visibility of selected widgets
• Adding interactivity

1. ⇒ Issue a Create Sketch (high-fidelity)... command. In the Create Sketch dialog, click the Create button to create a new file with the default filename.
2. ⇒ In the Palette, click on the Controls section to open that section, then click on the the subsection labelled Buttons.
3. ⇒ Drag a Button widget and drop somewhere near the top/left corner of the canvas. In the data entry popup, enter the text "Show dialog", then click OK.
4. ⇒ In the Palette, click on the Drawing Tools section to open that section.
5. ⇒ Click on the Rectangle widget in the Palette, then move the mouse over the canvas. Then drag out a rectangle about 400px by 400px, with the top of the rectangle just under the Button.

6. ⇒ From the Drawing Tools section of the Palette, drag a Line widget into the Rectangle. Go into the Outline palette and verify that the Line widget is a child of the Rectangle If it is not a child, then undo the operation to remove the Line, and perform the drag operation again to make sure that the Line is dropped inside of the Rectangle so that it will be a child of the Rectangle.
7. ⇒ Drag the left-side nob of the Line widget until it snaps to the left side of the Rectangle, about 50px under the Rectangle's top border.
8. ⇒ Now, while holding down the shift key (to constrain dragging to horizontal or vertical) drag the right-side nob vertically so that has approximately the same y-axis value as the left-side of the Line, and horizontally until it snaps to the right side of the Rectangle. If you perform a mouse-up while the shift key is pressed, you will have a horizontal line. The snapping should ensure that the left and right edges of the Line are coincident with the left and right edges of the Rectangle.

9. ⇒ From the Drawing Tools section of the Palette, drag a Text widget into the top/left corner of the Rectangle. When the data entry popup appears, enter the text "My dialog". Go into the Outline palette and verify that the Text widget is a child of the Rectangle If it is not a child, then undo the operation to remove the Text, and perform the drag operation again to make sure that the Text is dropped inside of the Rectangle so that it will be a child of the Rectangle.
10. ⇒ Drag the Text widget ("My dialog") a few pixels to left, top, right, bottom until it is in a proper location for a dialog title string. Then use the arrow keys to do one-pixel position adjustments.

11. ⇒ From the Controls / Checkboxes, RadioButtons, Switches section of Palette, drag two RadioButton widgets inside the Rectangle, under the title, and close to the left-side, stacked vertically.
12. ⇒ From the HTML / Common section of the Palette, drag two <label> widgets just to the right of each of the RadioButtons. In the data entry popups for the two <label> widgets, enter the values "Show image" and "Show map". Drag the RadioButtons and <label> around until the canvas looks something like this:

13. ⇒ From the Clip Art / User Interface Icons section of Palette, drag a Close widget inside the title part of the Rectangle, close to the right edge of the title region. Drag the Close widget, and/or use the arrow keys on the keyboard, to position the Cloes widget at a suitable place in the right corner until the canvas looks something like this:

14. ⇒ Go into the Outline palette and verify that all of the following widgets are children of the Rectangle: Line, Text, RadioButtons, <label>'s and Close.

Now we have most of the graphics added for our sketch, but we would like to make the sketch "live" by adding some interactivity:

• We want to have the dialog hidden at startup. Only the button should be visible at first.
• Clicking on the Button should expose the dialog.
• Clicking on the two RadioButtons should show an image and a map, respectively.
• Clicking on the close icon should hide the dialog.

To accomplish this, we will define two custom application states: "Show image" and "Show map".

1. ⇒ In the Scenes palette, click on the icon twice to create two custom application states "Show image" and "Show map".

1. ⇒ In the Scenes palette, click on the icon two more times to create two custom application states "State 1" and "State 2".
2. ⇒ Click on "State 1" to make it active.
3. ⇒ In the Scenes palette, click on the to remove "State 1".
Note that Maqetta does not post an "are you sure" dialog before a state is removed. If you make a mistake and accidentally remove a state, click on the Undo icon.
4. ⇒ In the Scenes palette, click on "State 2" to make it active. Click on the to bring up the Modify State dialog. Click on the Rename button to pop up a small supplemental rename text entry area. Enter "abc" into the text field, click on the "Rename" button, then in the Modify State dialog, click on the "Update" button. In the Scenes palette, you should see that the state is now named "abc".
5. ⇒ In the Scenes palette, click on "abc" to make that state active, then click on to remove "abc".

1. ⇒ In the Scenes palette, make sure that the Background state has an eyeball icon, indicating that that state is now active. (See picture above, which shows the eyeball icon on the Background state.)
2. ⇒ Go to the Outline palette and click on the eyeball icon next to the Rectangle widget. The eyeball icon for the Rectangle should now have a white interior, and the Rectangle should now be invisible on the canvas.

You have just made the Rectangle invisible in the Background state.

Note that by making the container widget (the Rectangle) invisible, all of its embedded children are invisible also, even though the children's eyeball icons are still showing as visible. For a widget to be visible, the widget itself must have its eyeball turned on, and so must all of its container widgets.
3. ⇒ In the Scenes palette, click on the "Show image" state to make it active. (The eyeball icon should move to that state.)
4. ⇒ Go to the Outline palette and notice that the Rectangle widget's icon is still indicating that the Rectangle is invisible. Click on the eyeball icon next to the Rectangle widget to make it visible in the current state (i.e., the "Show image" state).
5. ⇒ In the Scenes palette, alternately click on "Background" and "Show image". You should see that the Rectangle (and its children) are hidden in the Background state and visible in the "Show image" state.
6. ⇒ In the Scenes palette, click on the "Show map" state to make it active. (The eyeball icon should move to that state.)
7. ⇒ Go to the Outline palette and notice that the Rectangle widget's icon is still indicating that the Rectangle is invisible. Click on the eyeball icon next to the Rectangle widget to make it visible in the current state (i.e., the "Show map" state).
8. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". You should see that the Rectangle (and its children) are hidden in the Background state and are visible in the "Show image" and "Show map" state.
9. ⇒ Save and verify your work. On the page editor's toolbar, click on the Save button to permanently save your composition. Click on the file tab's close button - - to close the page editor. Double-click on the file you just created to re-open.
10. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". You should see that the Image is visible in both the Show image state and the Show mapRectangle (and its children) are hidden in the Background state and are visible in the "Show image" and "Show map" state.
11. ⇒ It's sometimes a good idea to save intermediate versions of your compositions in case you make a mistake (or run into a software or network glitch). On the page editor's toolbar, click the right arrow next to the Save button to bring up the Save button's dropdown menu, and choose a "Save As" command. Save your file under a different name (e.g., file1a.html).

Let's make sure the fifth and sixth icons in the Scenes palette have proper values.

1. ⇒ Look at the fifth icon in the Scenes palette and make sure it looks like this: (which indicates that new widgets get added to the Background) and not like this: (which indicates that new widgets get added to the current state). This is a toggle icon - alternate clicks will switch between the two alternate settings. If you hover over this icon, the tooltip will indicate its current value.
2. ⇒ Look at the sixth icon in the Scenes palette and make sure it looks like this: (which indicates that backgrounds widgets are not highlighted) and not like this: (which indicates that background widgets are highlighted when a custom state is active). This is a toggle icon - alternate clicks will switch between the two alternate settings.
3. ⇒ In the Scenes palette, click on "Show image" to make that the currently active state. (The eyeball icon should move to that state.)
4. ⇒ From the Controls / Buttons section of the Palette, drag a Button widget and drop just to the right of the "Show dialog" button. In the data entry popup, enter the text "Second button", then click OK.
5. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". You should see that the second button is visible in all three states.
Even though the current state is "Show image", the new widget (the second button) is added to the Background, and therefore shines through to the two custom states. The widget was added to the Background because the fifth icon is set to "to background".
6. ⇒ In the Scenes palette, click on "Show image" to make that the currently active state. (The eyeball icon should move to that state.)
7. ⇒ Click on the fifth icon and make sure it looks like this: so that new widgets will get added to the current state.
8. ⇒ From the Clip Art / Media section of Palette, click on the Image widget to select that widget. Then move the mouse over the Rectangle. Drag out a box that is about 120px in each direction so that the canvas looks like this:

9. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". You should see that the Image is visible only in the "Show image" state.
10. ⇒ In the Scenes palette, click on "Show map" to make that the currently active state. (The eyeball icon should move to that state.)
11. ⇒ From the Clip Art / Media section of Palette, click on the Map widget to select that widget. Then move the mouse over the Rectangle. Drag out a box that is about 120px in each direction so that the canvas looks like this:

12. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". You should see that the Map is visible only in the "Show map" state.
13. ⇒ Click the "Save" button on the page editor's toolbar. Click the right arrow next to the Save button to bring up the Save button's dropdown menu, and choose a "Save As" command. Save your file under a different name (e.g., file1b.html).

1. ⇒ In the Scenes palette, click on "Show map" to make that the currently active state.
2. ⇒ Look at the fifth icon in the Scenes palette and make sure it looks like this: (which indicates that new widgets get added to the current state). and not like this: (which indicates that new widgets get added to the Background).
3. ⇒ From the Controls / Buttons section of the Palette, drag a Button widget and drop just to the right of the "Second button" button. In the data entry popup, enter the text "Third button", then click OK.
4. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". You should see that the third button is visible only in the Show map state.

Let's suppose that we want the third button to be visible in all three states, just like the first two buttons. There are multiple ways to achieve this. For example, we could click on Undo, then change the fifth icon to , and then drag a new Button onto the canvas, and that Button will go into the Background. But in the steps that follow, we will explore two alternate approaches using the fourth icon (Manage Widget Visibility for Different States).

5. ⇒ On the canvas, select the third button.
6. ⇒ In the Scenes palette, click on the fourth icon to bring up the Manage Widget Visibility for Different States dialog. The dialog should look like this:

7. ⇒ In the dialog, click at least twice on each of the eyeball icons until the eyeball shows for all three states, with no supplemental messages on the right side of the dialog. The dialog should look like this:

8. ⇒ Click on the "Update" icon in the dialog.
9. ⇒ In the Scenes palette, alternately click on "Background", "Show image" and "Show map". You should see that the third button is now visible in all three states. That's because we explicitly set the third button to be visible in all three states.
10. ⇒ Click on the sixth icon in the Scenes palette and make sure it looks like this: (which indicates that background widgets are highlighted when a custom state is active) and not like this: (which indicates that backgrounds widgets are not highlighted). You should see red highlights on the screen for the first two Buttons, but not the third button:

This is because the first two widgets are "Background only" widgets - they are visible on the Background, and then shine through to all of the custom states - whereas the third button isn't shining through from the Background, and instead has been flagged explicitly as visible in all three states.

Let's move the third button to the Background.

11. ⇒ On the canvas, select the third button.
12. ⇒ In the Scenes palette, click on the fourth icon to bring up the Manage Widget Visibility for Different States dialog. Click on the "Background only" hyperlink. The dialog should now look like this:


Notice the supplemental text "Visible from Background" that shows for the two custom states. That text indicates that the Button will be visible in the custom states because it is shining through from the Background.

13. ⇒ Click on the "Update" icon in the dialog. The canvas should now look like this:

14. ⇒ Click on the sixth icon in the Scenes palette again to turn off highlighting of Background widgets.

1. ⇒ In the Scenes palette, make sure that either the "Show image" or "Show map" state is selected (and therefore the dialog is showing on the canvas).
2. ⇒ On the canvas, click on the first RadioButton to select it. Go to the "Widget" palette on the top/right. Click on the "Checked" property to set its value to true. On the canvas, the RadioButton should now be checked.
3. ⇒ On the canvas, click on the "Show dialog" button to select it. Go to the "Events" palette on the top/right. Find the "onclick" property. Use the drop-down menu for the "onclick" and choose "State:Show image". As a result, at run-time, when the user clicks on the "Show dialog" button, the application will switch to the "Show image" state.
4. ⇒ On the canvas, click on the first RadioButton to select it. Go to the "Events" palette on the top/right. Find the "onclick" property. Use the drop-down menu for the "onclick" and choose "State:Show image".
5. ⇒ On the canvas, click on the second RadioButton to select it. Go to the "Events" palette on the top/right. Find the "onclick" property. Use the drop-down menu for the "onclick" and choose "State:Show map".
6. ⇒ On the canvas, click on the Close icon (at top/right of dialog) to select it. Go to the "Events" palette on the top/right. Find the "onclick" property. Use the drop-down menu for the "onclick" and choose "State:Background".
7. ⇒ On the page editor's toolbar, click on the Preview-in-browser icon . This will open a browser tab/window where your composition will run in the browser directly.
8. ⇒ In this new browser window, click on the "Show dialog" button. The dialog should appear. Click on the "Show map" radio button. The map should show. Click on the "Show image" radio button. The image should show. Click on the Close icon. The dialog should disappear.
9. ⇒ Close the preview browser tab/window.

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 "TutorialSketch.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