Tutorial 12 - Desktop Apps and States (2)

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.

In the previous tutorial we created the content for each of the three "states" for our Task Manager.
In this tutorial we will add interactivity by defining the states, and then wiring the states to onclick events.

The Outline palette is in the top left of the Maqetta Page Editor.

1. ⇒ Collapse the Outline palette entries so you see only the two top-level entries: TabContainer and ContentPane.
2. ⇒ Click on the eye icon to the left of the Content Pane.
3. ⇒ Observe that the Add new task ContentPane disappears from the editing canvas and the eye is now closed.

Click on the image to enlarge it.


4. ⇒ Click on the plus icon to expand the Tab Container.
5. ⇒ Collapse the entries so you see just the three Content Pane entries under Tab Container (one for each tab in the TabContainer).

Click on the image to enlarge it.


6. ⇒ Expand the first ContentPane, then click on the first <div> to select it.
7. ⇒ Observe how the associated the <div> containing the New and Del buttons is selected on the editing canvas.

Click on the image to enlarge it.


8. ⇒ Click the second <div> in the Outline palette to select it.
9. ⇒ Observe how the associated the <div> containing the Sort-by: label and Name ComboBox is selected on the editing canvas.

Click on the image to enlarge it.


10. ⇒ Collapse the parent TabContainer entry.
11. ⇒ Un-hide the last ContentPane by clicking on the closed eye icon.
12. ⇒ Click on the ContentPane entry in the Outline palette to select that widget.

Click on the image to enlarge it.

1. ⇒ Click on the Scenes palette tab (located at the lower right of page editor).
2. ⇒ Click on the plus icon to bring up the Create New State dialog.
3. ⇒ Enter "Add Task" and click Create.

4. ⇒ Click on the plus icon again to bring up the Create New State dialog.
5. ⇒ Enter "Task Added" and click Create.
   
   You should now have three states:

6. ⇒ Click on the Save button on the toolbar to save your changes.

Configure the Background State

1. ⇒ In the Scenes palette, click on Background to put your application into the Background state.
2. ⇒ In the Outline palette, close the eye icon for the ContentPane for the Add Task dialog.
3. ⇒ The Add new task dialog should now be invisible.
4. ⇒ In the Outline palette, close the eye icon for the MultiSelect widget.
5. ⇒ The MultiSelect widget should now be invisible.


Click on the image to enlarge it.

Configure the "Add Task" State

1. ⇒ In the Scenes palette, click on Add Task to put your application into the "Add Task" state.
2. ⇒ In the Outline palette, open the eye icon for the ContentPane for the Add new task dialog.
3. ⇒ The Add new task dialog should now be visible.

Configure the "Task Added" State

1. ⇒ In the Scenes palette, click on "Task Added" to put your application into the "Task Added" state.
2. ⇒ In the Outline palette, under the TabContainer open the eye icon for the MultiSelect widget.
3. ⇒ The MultiSelect widget should now be visible.
4. ⇒ Click on the Save button on the toolbar to save your changes.

Test the State Configurations

1. ⇒ In the Scenes palette, alternatively click on Background, Add Task and Task Added.
2. ⇒ Observe how things appear and disappear as you changes states.

1. ⇒ In the Scenes palette, click on Background to put your application into the Background state.
2. ⇒ In the TabContainer, click on the New button to select it.
   
3. ⇒ In the Properties palette, open the Events section.
4. ⇒ In the drop-down for the onclick event select State:Add Task.
   (Note that this is one of the events that we added in the Scenes palette.)
   
5. ⇒ In the Scenes palette, click on Add Task to put your application into the Add Task state. This will make the "Add Task" dialog visible.
6. ⇒ In the Add New Task ContentPane, click on the Add button to select it.
   
7. ⇒ In the Properties palette Events section, set onclick to State:Task Added.
8. ⇒ Click on the Save button on the toolbar to save your changes.

1. ⇒ In the toolbar, click the Preview in Browser icon . This will launch a new browser window that contains the HTML page you just created.
2. ⇒ Click on the button. The Add Task dialog should appear.
3. ⇒ Enter "Task 1" and click the button.
4. ⇒ The Multi Select widget should appear with "Task 1" in the list.
   
   

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

This completes the tutorial.

Different widget properties for different states

The exercise above illustrates how to make widgets visible or invisible as the application moves from one state to another. Maqetta also allows widget property values to have different values for different application states. For example, in one state a widget might have a blue background, red text, and a width of 300px, but in another state that same widget might have a green background, yellow text and a width of 200px.

To change the values of CSS properties such as size, position or color for a particular state, follow these steps:

• Set widget properties for the "Background" state.
• In the Scenes palette, create whatever states you need.
• For each widget that needs different CSS properties for states other than normal:
  • In the Scenes palette, switch to the appropriate state.
  • On the canvas or in the Outline palette, click on the appropriate widget to select it.
  • In the Properties palette, go to the appropriate property and click on the ">" arrow to the right of the widget to show the CSS Details for that widget.
  • In the CSS Details section, scroll down to the bottom and turn on the checkbox that says "Apply only to current state".
  • Scroll back to the top of the CSS Details section and assign a new value for the given CSS property.
• You can also tell Maqetta that move and resize changes should only apply to the current state (assuming the current state is different than Background) by holding down the s key while performing the operation. Note that the s key must be down at the completion of the move or resize operation (i.e., when you lift up on the mouse); otherwise, the move and resize command will apply to the Background state.

Previous / Next