Tutorial 5 - Page Editor Introduction - Composition Types

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:

• The Create menu
• Creating a new Mobile Application
• Composition types: mobile app vs desktop versus vs sketch (hi-fi and lo-fi)
• Other features in the Create dialog
• Creating a new Desktop Application
• Creating a new Sketch (high-fidelity) in the page editor
• Creating a new Sketch (low-fidelity) in the page editor

1. ⇒ Press on the Create button found on the top/center menubar.

You will see the following commands:



Creating a new Mobile Application

2. ⇒ From the Create menu, choose the command Create -> Mobile Application.
3. ⇒ In the Create Mobile Application dialog, click on the "Create" button to accept the default options. Maqetta will open the page editor within an actual size replica of the selected device. With the current release of Maqetta, mobile composition types always use a high fidelity CSS theme and always initialize with flow layout.

Click on the image to enlarge it.

Notice the Palette on the left side of the application. It shows a list of widgets that users often will want to use when creating a mobile application.


Maqetta shows a different set of widgets, and a different order of widgets, depending on the composition type (mobile app vs desktop app vs sketch).
4. ⇒ In the Palette, click on the Heading section to open that section, then drag a Heading widget onto the canvas.
5. ⇒ In the Palette, click on the Controls section to open that section, then click on the Buttons sub-section to open that sub-section. Drag/drop a Button widget onto the canvas.
Note that the mobile widgets snap to the top of the canvas and are styled appropriately for mobile devices.
6. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

The Create menu lets use choose between multiple composition types:

1. ⇒ Once again, from the Create menu, choose the command Create -> Mobile Application.
When you first run Maqetta, the Create dialog by default will place your HTML file in the root folder of your workspace. You can view the contents of your workspace by clicking on the right arrow icon to the right of the "Where" drop down menu. The dialog will grow to show the contents of your workspace:

Click on the image to enlarge it.

Note that a New Folder... button appears. This allows you to create folders from the Create dialog.

Finally, notice the Theme... button at the lower-left. This button brings up the Select theme... dialog in case you would like the page editor to open using particular CSS theme(s). This is a more advanced feature that we won't be covering in this tutorial.

2. ⇒ Click the Cancel button on the Create Mobile Application dialog.

1. ⇒ Bring up the Create Desktop Application... dialog. The dialog will be show a default filename.
2. ⇒ Click the Create button to create a new file with the default filename.

A new blank HTML file is opened in the page editor, with the filename displayed at the top. Your workspace should now look something like this:


Click on the image to enlarge it.

Notice the Palette on the left side of the application. It shows a list of widgets that users often will want to use when creating a desktop application.


3. ⇒ In the Palette, click on the Controls section to open that section, then click on the the subsection labelled TextBox.
4. ⇒ Find the TextBox widget (might be first one in the list). Drag a TextBox widget onto the canvas.
5. ⇒ Find the Button widget in the list of Buttons subsection of Controls. Drag/drop 2 Button widgets onto the canvas.

Click on the image to enlarge it.
Note that the TextBox and Buttons have final-form visual styling (using the "claro" theme from Dojo) and are using flow layout.
6. ⇒ In the Palette, click on the Controls section title to close the section.
7. ⇒ Click the "x" button on the editor tab just under the toolbar to close this page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

1. ⇒ Using the Create menu, issue a Create Sketch (high-fidelity) command.
2. ⇒ Click the Create button to create a new file with the default filename.

Notice the Palette on the left side of the application. It shows a list of widgets that users often will want to use when creating a UI sketch.


3. ⇒ In the Palette, click on the Controls section to open that section, then click on the the subsection labelled TextBox.
4. ⇒ Drag a TextBox widget onto the canvas.
5. ⇒ Find the Button widget in the list of Buttons subsection of Controls. Drag/drop 2 Button widgets onto the canvas.

Click on the image to enlarge it.
Note that the TextBox and Buttons have final-form visual styling (using the "claro" theme from Dojo) but are positioned at absolute locations on the page. (Your screen probably looks much different than this snapshot because you probably dropped the widgets at different locations that what is shown here.)
As you dragged the Buttons onto the page, you might have noticed magenta-colored horizontal and vertical lines appear and disappear. These are "snap lines" that help you align widgets to one another. Snap lines only work for widgets that are positioned on the page absolutely.
6. ⇒ In the Palette, click on the Controls section title to close the section.
7. ⇒ Click the "x" button on the file tab to close this page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

1. ⇒ Using the Create menu, issue a Create Sketch (low-fidelity) command.
2. ⇒ Click the Create button to create a new file with the default filename.
3. ⇒ In the Palette, click on the Controls section to open that section, then click on the the subsection labelled TextBox.
4. ⇒ Drag a TextBox widget onto the canvas.
5. ⇒ Find the Button widget in the list of Buttons subsection of Controls. Drag/drop 2 Button widgets onto the canvas.

Click on the image to enlarge it.
Note that the TextBox and Buttons have pseudo hand-drawn, black-and-white visual styling and are positioned at absolute locations on the page.
6. ⇒ In the Palette, click on the Controls section title to close the section.
7. ⇒ Click the "x" button on the editor tab just under the toolbar to close this page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

Previous / Next