Previous / Next

Tutorial 7 - Page Editor Basics (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.

This tutorial covers the following topics:

Container widgets vs primitive widgets (i.e., "controls")
  1. ⇒ Issue a Create Desktop Application... command.
  2. ⇒ In the Palette, click on the Containers section to open that section, then click on the the subsection labelled Dojo.
  3. ⇒ Drag a TabContainer widget onto the canvas. When the data entry popup appears, click OK or click away to accept the default values.
  4. ⇒ In the Palette, click on the Controls section to open that section, then click on the the subsection labelled TextBox.
  5. ⇒ Drag a TextBox widget onto the canvas, dropping the Button inside of the TabContainer.
  6. ⇒ In the Palette, click on the Controls section to open that section (if not already open), then click on the the subsection labelled Buttons.
  7. ⇒ Drag a Button widget onto the canvas, dropping the Button inside of the TabContainer. When the data entry popup appears, click OK or click away to accept the default values.
  8. ⇒ Go to the far-left of the Maqetta window and click on the large Outline palette button to expose the Outline palette, which shows your document's widget hierarchy.
    9. Note that the Outline shows that the TextBox and Button widgets are nested inside the TabContainer. In fact, the hierarchy is TabContainer, with two ContentPane children (one for each tab in the TabContainer), and then the TextBox and Button widgets are children of the first ContentPane.

    By default, Maqetta adds new widgets as children of the container widget at the widget drop location.
  9. ⇒ Go to the far-left of the Maqetta window and click on the large Palette palette button to expose the Palette palette to show the widget palette once again.

Choose parent preference
  1. ⇒ In the main menubar, at the top/right of the application, click on the application settings icon and then choose "Preferences" to bring up the Preferences dialog.
    2. image
  2. ⇒ Turn option "When dragging, show possible parents:" on by clicking on the checkmark for that item, then click Save to update your preferences.
    3. Note that preference changes stay active forever, even across sessions, until you change them again.
  3. ⇒ In the Palette, click on the Controls section to open that section (if not already open), then click on the the subsection labelled Buttons.
  4. ⇒ Observe the screen while you perform the following operation. Drag a ComboButton widget onto the canvas and hover over the TabContainer, but don't let up on the mouse yet. Instead, notice that Maqetta shows an annotation next to the mouse that shows the list of possible parent widgets for the ComboButton. While still holding the mouse, your screen should look something like this:
    5. image
  5. ⇒ Let up on the mouse over the TabContainer so that the ComboBox is dropped into the TabContainer, and will become a child of the ContentPane (just like what happened previously with the TextBox and Button).
  6. ⇒ Drag a second ComboButton widget onto the canvas and hover over the white area under the TabContainer. Notice that the only candidate parent will by the <body>.
  7. ⇒ While still dragging the ComboButton, move the mouse once again over the TabContainer. The list of candidate parents will once again show two candidate parents: the ContentPane and the <body>.
  8. ⇒ While still dragging and hovering over the ContentPane, on your keyboard, press the number "2" key. Notice that list of candidate parents now has the arrow pointing to the <body>. At this point, let up on the mouse to complete the drop operation. The new ComboBox should be added under the TabContainer because you told Maqetta to choose <body> as the parent, instead of the ContentPane, and as a result, the ComboBox has become a sibling to the TabContainer. (Note: you can look at the Outline palette to verify that the ComboBox is indeed a sibling to the TabContainer.)
    9. The choose parent user interface shows both at widget creation time (when dragging/dropping from the Palette onto the canvas), and when dragging existing widgets around on the canvas.
  9. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

Inline vs block widgets
  1. ⇒ Issue a Create Desktop Application... command. In the Create Desktop Application dialog, click the Create button to create a new file with the default filename.
  2. ⇒ Drag the following widgets onto the canvas: TextBox, Button, ComboButton, HTML <label>, Calendar, HTML <div>.
    3. Note that some widgets are added to the right of the previous widget and other widgets are added under the previous widget. This is because some widgets default as "block-level" widgets, which means they, in effect, also establish their own separate block (or "paragraph"), whereas other widgets are designed as "inline" widgets, which means they are placed inline within the current block (or "paragraph") and behave from a layout perspective similar to typed text or small inline images. Maqetta simply honors the default layout behavior for each widget.
  3. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

Flow vs absolute layout

HTML5 uses CSS for layout and styling. CSS offers two primary layout mechanisms:

  1. ⇒ Issue a Create Desktop Application... command.
  2. ⇒ Look at the page editor toolbar for a drop-down button that says either "Flow" or "Absolute". (Note: it probably says "Flow".) This indicates that the page editor will add new widgets using flow layout.
  3. ⇒ Change the Flow/Absolute button to "Absolute".
  4. ⇒ Drag/drop a Calendar widget onto the canvas.

    5. Notice that the Calendar widget is positioned absolutely at the position where you dropped the Calendar.

    The flow-vs-absolute setting is document-specific and persists throughout the lifetime of the document, until you change the value.

    Click on the Undo icon to remove the Calendar you just added.

  5. ⇒ Change the Flow/Absolute button back to "Flow".
  6. ⇒ Once again, drag/drop a Calendar widget onto the canvas.

    7. Notice that the Calendar widget is positioned using flow layout, and ends up at the top/left of the canvas.

  7. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

Previous / Next