Tutorial 6 - Page Editor Basics (1)

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:

• Undo/Redo
• Using the widget filter
• Adding HTML elements to the page
• Add an image to the page
• Selecting widgets
• Data entry popup (available for many widgets)
• Cut/Copy/Paste/Delete
• Context menus
• Resizing widgets
• Moving widgets
• Alt/Option key for copying widgets
• Save and Save As

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.

A new blank HTML file is opened in the page editor

2. ⇒ In the Palette, click on the Controls section to open that section, then click on the the subsection labelled TextBox.
3. ⇒ Drag a TextBox widget onto the canvas.
4. ⇒ Click on the Undo icon on the toolbar. This will undo the previous operation, causing the TextBox widget to disappear. Now click on the Redo icon . The TextBox widget will re-appear.
   Maqetta supports multiple undo. Operations can be undone back to the last Open or Save operation.
5. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

Sometimes its faster to search for a widget by typing text into the filter box at the top of the palette.

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. ⇒ Find the widget filter box at the top of the Palette:

3. ⇒ Start typing the word "calendar" into the filter textbox. As you type, you should see a filtered list of widgets until (most likely) only a single Calendar widget appears in the Palette.
4. ⇒ Drag a Calendar widget onto the canvas.
5. ⇒ Repeat this operation for ColorPalette and ComboBox: Start to type "ColorPalette" into the filter textbox until you see a ColorPalette widget. Then drag a ColorPalette widget onto the canvas. Start to type "ComboBox" into the filter textbox until you see a ComboBox widget. Then drag a ComboBox widget onto the canvas.
6. ⇒ Remove all text from the filter textbox, so that the filter textbox is empty. The full set of widgets should reappear.
If you use the filter textbox, be sure to remember to remove the text content when done so that the full list of widgets will reappear.
7. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

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. ⇒ In the Palette, click on the HTML section to open that section, then click on the the subsection labelled Common.
3. ⇒ Drag a <div> widget onto the canvas.
4. ⇒ Drag a <label> widget onto the <div> on the canvas. This will put the <label> inside the <div>.
5. ⇒ Enter some text for the <label> and hit Return.
6. ⇒ Click on the HTML section title to close the section.
Maqetta supports both widget libraries (such as Dojo) and raw HTML elements such as <div>, <span>, <h1>, <p>, <label>, <input>, <select> and <button>. You can richly style raw HTML element using CSS using Maqetta's various CSS-focused property palettes (Layout, Margins, Padding, Background, Borders, Fonts/Text).

1. ⇒ Go to the Files palette is in the lower-left section of the Maqetta workspace. Click on the "+" icon to the left of the word "samples" to open up the samples folder, making sure that you can see file "SampleBanner.jpg".
If the samples folder is scrolled out of view, you can either adjust the scrollbar on the Files palette to bring the samples folder into view, or drag on the horizontal splitter that is just above the Files palette to give more vertical space to the Files palette.
2. ⇒ Put the mouse over file "SampleBanner.jpg" and then drag it from the Files palette and drop onto the page canvas.
To add your own images to a composition, you first have to upload your images into your Maqetta cloud workspace, possibly using the Upload files... command found on the context menu when the mouse is over one of the files listed in the Files palette.
3. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

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/drop an HTML <div> element, then drag/drop a TextBox and Button widget, and finally a Calendar widget. (You learned how to add these widgets earlier in the tutorial.)

You can select a widget in multiple ways, some of which you will try out in the following steps:

3. ⇒ Click on the TextBox widget. You should a blue rectangular selection box around the TextBox.
4. ⇒ Go into the Outline palette and click on the Button widget's entry in the Outline palette. On the canvas, you should see that the Button now has the blue selection box.
5. ⇒ Maqetta provides an area select feature, where you can drag out a rectangle, and all widgets that are fully inside that rectangle get selected. To try this out, put the mouse on the canvas in the white part of the canvas to the right and below the Button widget. Then drag out a selection rectangle from bottom-right to top-left that totally surrounds the Button, and then let up the mouse. The Button should be selected.
The current release of Maqetta has a shortcoming where the area select feature has difficulty if the selection rectangle extends to the edge of the canvas. This problem is on the list of issue to address in future releases.
6. ⇒ On the page editor's toolbar, press and hold on the down arrow just to the right of the "Source" button (which might say "Split-H" or "Split-V") and choose the "Split Vertically" command. Your screen will now show side-by-side view, with the visual design canvas on the left, and the document's HTML source code on the right. In the HTML source code view, click on the line of HTML that looks like this:

<input type="text" data-dojo-type="dijit.form.TextBox"></input>

You should see a blue selection box around the TextBox to show that it is selected.

On the canvas, you can use Ctrl key (Command key on Mac) to add additional widgets to the selection.

1. ⇒ In the Palette, click on the Controls section to open that section, then click on the the subsection labelled Buttons.
2. ⇒ Drag a Button widget onto the HTML page canvas to add a button to the page. Notice that Maqetta automatically pops up the widget's data entry popup so that you can immediately define the text for the button's label.


Maqetta automatically prompts the user for initial data for a number of widgets, such as Button, ComboBox, DataGrid, Tree, <label>, <a> and <h1> - <h3>.

3. ⇒ Enter some text (e.g., "Press me") and hit Return. You will see a button with the label you provided.

For some widgets, you can close the data entry by simply hitting Return. For widgets that accept multi-line text, however, you have to click the OK button.

4. ⇒ Double-click on the Button widget. Notice that Maqetta re-opens the data entry popup.
5. ⇒ Change the text to say "Click me" and then click somewhere outside of the data entry popup.

For some widgets, you can close the data entry by simply clicking away from the popup.

6. ⇒ In the Palette, click on the Containers section to open that section.
7. ⇒ Drag a TabContainer widget onto the HTML page canvas. Click on the "?" icon in the lower-left corner of the data popup dialog. You should see a short explanation of the expected format of the data for the TabContainer widget.
For each widget that includes a data entry popup, the "?" icon will explain the required format for the widget's data.
8. ⇒ In the data entry popup for TabContainer, enter this text:

   North, South, East, West

   Then click OK to accept the values. Notice that the TabContainer has four sections labelled North, South, East and West.
9. ⇒ In the Palette, click on the HTML section to open that section, then click on the the subsection labelled Common.
10. ⇒ Drag an <label> widget onto the HTML page canvas. Enter the following text:

    Birth date <i>(YYYY/MM/DD)</i>

11. ⇒ Notice that two radio buttons appear: Plain text and HTML markup. Click on the radio button for HTML markup, then click on the OK button for the data entry popup. On the canvas, the parenthetical text "(YYYY/MM/DD)" should be italicized.
Many widgets allow their content to be rich HTML content. You can tell Maqetta to treat the widget's data as rich HTML content by clicking on the "HTML markup" radio button.
12. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

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 a TextBox and a Button widget onto the canvas. When the data popup appears for the Button widget, enter "New", then click OK or click away from the data popup to close it.
3. ⇒ Drag a second Button widget onto the canvas. When the data popup appears, enter "Edit" as the value for the widget, then click OK or click away from the data popup to close it.
4. ⇒ With the second Button selected, find the copy icon on the page editor toolbar . Click on the copy icon to put the second Button onto the clipboard.
5. ⇒ Find the paste icon on the page editor toolbar . Click on the paste icon, then move the mouse over the canvas and position it just to the right of the second Button. Then click on the canvas. Note that the second Button has been duplicated.
With Maqetta, when you perform a paste operation, you have to follow the paste command with a mouse click on the canvas. This is because Maqetta needs to know where in your document to perform the paste. Maqetta uses the (x,y) location of the mouse click to decide where to insert the copied widget(s).
6. ⇒ Double-click on the third Button. When the data popup appears for the Button widget, enter "Delete", then click OK or click away from the data popup to close it.
Maqetta also offers a Cut icon, which removes the selected widget(s) from the document and adds the widget(s) to the clipboard, and a Delete icon, which removes the selected widget(s) without adding the widgets to the clipboard.

1. ⇒ (Continuing from previous exercise) With the third Button still selected, bring up the context menu (perhaps using right-mouse-click or Ctrl-click on a Mac). You'll see a list of context menu commands, starting with Cut, Copy, Paste and Delete.

2. ⇒ With the third Button still selected, go to the Outline palette. Put the mouse over the entry for the third Button (it should be highlighted in the Outline palette). Bring up the context menu (perhaps using right-mouse-click or Ctrl-click on a Mac). You'll see the same list of context menu commands as on the page editor.
3. ⇒ Click on the file tab's close button - - to close the page editor. (Click Discard on the Save/Discard/Cancel alert that appears.)

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.
Drag/drop the following widgets onto the page: TextBox, Button, Calendar, HTML <div>.
2. ⇒ Alternatively, click-select each of the widgets. Notice the blue selection chrome that appears around each widget, along with the resize handles (the blue circular nobs):
   • The TextBox shows two resize handles on the left- and right-side edges. This is because the TextBox can only be resized horizontally.
   • The Button shows no resize handles. This is because a Button widget is auto-sized based on the size of its label.
   • The Calendar shows four resize handles, one on each corner. This is because a Calendar widget can be resized in both directions.
   • The <div> shows four resize handles, one on each corner. This is because a <div> can be resized in both directions.
3. ⇒ Resize the TextBox, Calendar and <div> widgets by first click-selecting the given widget and then dragging on the widget's selection nobs. Notice that the widgets resize.
4. ⇒ Select the Calendar widget. Put the mouse over the right edge of the selection chrome. Drag the right edge of the selection chrome to change the width of the Calendar.
5. ⇒ Select the Calendar widget (if not already selected).
6. ⇒ Look at the right/top of the application where you will see the various property palettes (Widget, Events, Layout, etc.). Click on the large button with the label Layout to show various CSS layout properties. Click on the "+" icon for the 'width' property several times. Notice that the Calendar's width grows by 1 pixel each time you click on "+".
7. ⇒ Type '400px' into the textbox for the 'width' property, then either press the Return key or click away from the textbox for 'width'. Notice that the Calendar's width is now '400px'.
As has been mentioned previously, Maqetta creates actual running HTML5 applications, which are styled by CSS. The 'width' property is a CSS property, and CSS requires a unit specification, in this case the px unit (px=pixels). You can't just enter "400" because browsers will not accept that value, and instead have to say "400px".

In flow layout, you can move widgets in two ways, which we will try out in the following steps:

1. ⇒ On the canvas, select the Button widget, then place the mouse over the interior of the widget and then drag it to a different location within the existing "flow" of widgets. You should see a drop-point vertical line appear to show you where the Button widget will get dropped when you let up with the mouse.
2. ⇒ On the Outline palette, find the Button widget. Click-select it on the Outline palette. Then Drag the item corresponding to the Button to a new location within the Outline palette. (The Outline palette allows widgets to be moved into any position in the widget hierarchy.)
This exercise demonstrates how to move widgets when all of the widgets use flow layout. If a widget is positioned absolutely on the page, then you will not see a drop-point as you drag the widget around; instead, you may see snap lines. (Absolute layout is covered in the Quick UI Sketching tutorial.)

If you hold down the Alt key (on Windows) or Option key (on Mac) while dragging a widget, Maqetta will perform a copy operation rather than a move operation.

1. ⇒ On the canvas, select the Button widget, then place the mouse over the interior of the widget and then drag it to a different location within the existing "flow" of widgets. While dragging, hold down the Alt key (on Windows) or Option key (on Mac). You should see a "+" cursor appear. If you are pressing the Alt or Option key at the time of the mouse-up action, then the selected widget(s) will be copied rather than moved.

Click on the Save button on the page editor toolbar to save the current HTML file.

Use Save as to save the file under a different file name:

1. Click on the arrow to the right of the Save button to show the Save menu, and then choose the Save as command.
2. A dialog window will pop up with the directory list from your user workspace folder (which is also displayed in the Files palette).
3. File name: - enter a new file name or select an existing file from the list (using an existng filename will overwrite the existing file).
4. Where: - the current folder into which the file can be saved. To the right of the Where dropdown menu is a right-pointing arrow that, when clicked, shows a list of files in your workspace where you can select any folder from the workspace or create a New Folder. Do not use the themes folder since this is reserved for Maqetta theme files.
5. The file will be saved with the new file name, and will also remain open on the canvas with the new file name.

Previous / Next