About Application States

Application states represent the different views that make up an interactive web page. A common scenario is a page that presents a pop-up dialog window to the user. Based on the user's response to the dialog, new elements could be displayed on the page. This can be represented with the following states:

  1. "Normal" state - the page before the dialog window is popped up
  2. "Dialog" state - the page displaying the dialog window
  3. "Completed" state - the page after the dialog window is closed, causing something to change on the page

Note that the state names can be any names defined by the designer, except for the "Normal" state which is provided by Maqetta for all pages. See Scenes Palette for details.

Using Events To Change States

Once your application states are defined, you'll need some event triggers to change from one state to the next.

A button can be presented in the "Normal" state which, when clicked, brings up the "Dialog" state (i.e. pops up the dialog window). To do this in Maqetta, simply edit the button's onclick event property and select "state:Dialog" from the drop-down list (assuming you have previously created a state called "Dialog"). See Event Properties in Properties Palette for details.

Then in the dialog window you'll need a button who's onclick property is set to the "Completed" state. You could also have a Cancel button that is set to the "Normal" state.

See tutorials Task Manager (Scene Graph) and Task Manager (Application States) to create a working example of this scenario.

Previous / Next