Create menu
 |
Create menu commands:
|
Open menu
 |
Open menu commands:
|
Top-right menus
|
Top-right menus: User menu:
Application settings menu:
Help menu:
|
File tabs
Listing of all currently open files.
Asterisk indicates that the file is "dirty" (i.e., changed since most recent save operation).
File tabs have a short context menu that includes a "Close all tabs" command.
Asterisk indicates that the file is "dirty" (i.e., changed since most recent save operation).
File tabs have a short context menu that includes a "Close all tabs" command.
Save commands
You can click on Save to save the currently open file.
The drop-down menu contains these commands:
The drop-down menu contains these commands:
- Save - Same as clicking on the Save button
- Save As - Save current file under a different name
- Save As Widget - Saves the currently selected widget as a re-usable component. This new widget will appear in the Palette in the "User widgets" section of the palette.
Undo/redo commands
Undo and redo commands
Clipboard commands
Clipboard commands: cut, copy, paste
Delete command
Delete command: delete currently selected widget, without affecting clipboard
Add sticky note
Add a sticky note that will overlay the page.
The command will create a default note and immediately bring up a rich text editing control, which will allow for various text styling options, such as bullets and italics.
Sticky notes are a good way for an author to include supplemental comments that help explain the application or sketch to reviewers.
The command will create a default note and immediately bring up a rich text editing control, which will allow for various text styling options, such as bullets and italics.
Sticky notes are a good way for an author to include supplemental comments that help explain the application or sketch to reviewers.
Table commands
Pressing this icon causes a drop-down menu to appear with a series of table operations.
Most of these operations are only active when selecting components of an HTML table,
such as table cells. Commands include:
- Select table - For currently selected table cell, selects the parent table widget
- Select row - For currently selected table cell, selects the current table row
- Select column - For currently selected table cell, selects the current table column. Note that users can control HTML table column width and background by selecting a table column and changing the 'width' or background properties in the various Properties palette found on the right side of the application.
- Insert column before - For currently selected table cell, insert a table column before current column
- Insert column after - For currently selected table cell, insert a table column after current column
- Remove column - Remove the column containing the currently selected table cell
- Insert row before - For currently selected table cell, insert a table row before current column
- Insert row after - For currently selected table cell, insert a table row after current column
- Remove row - Remove the row containing the currently selected table cell
View controls
These controls allow you to switch between the four viewing modes:
The button for the currently active mode will show a "pressed" look.
You can switch to Design or Source by clicking on the corresponding button. To switch to one of the split modes, use the drop-down menu. Note that if you switch to a split mode, the second button's text will change to reflect the most recent source viewing mode (i.e., Source vs Split-H vs Split-V).
In split view, changes in the design page are immediately reflected in the source pane, and vice versa.
- Design - (The default) Only show the visual editor
- Source - Only show the source editor
- Split vertical - Show design and source view simultaneously, with design on the left and source on the right.
- Split horizontal - Show design and source view simultaneously, with design on the top and source on the bottom.
The button for the currently active mode will show a "pressed" look.
You can switch to Design or Source by clicking on the corresponding button. To switch to one of the split modes, use the drop-down menu. Note that if you switch to a split mode, the second button's text will change to reflect the most recent source viewing mode (i.e., Source vs Split-H vs Split-V).
In split view, changes in the design page are immediately reflected in the source pane, and vice versa.
Flow vs absolute
This dropdown button controls whether new widgets will be added using flow layout or absolute layout.
The dropdown button's text indicates the current setting (i.e., flow vs absolute).
Widgets that use flow layout are arranged in a left-to-right, top-to-bottom text flow within the parent widget, similar to how word processors operate on textual content. Widgets that use absolute layout are positioned at particular (x,y) locations relative to their parent widget.
Note that this control only applies to new widgets that will be adding in the future. This control does not apply to the currently selected widget. To change the layout method for the currently selected widget, go to the Layout palette and adjust the 'position' property. (position:absolute for absolute layout, position:static for flow layout)
Widgets that use flow layout are arranged in a left-to-right, top-to-bottom text flow within the parent widget, similar to how word processors operate on textual content. Widgets that use absolute layout are positioned at particular (x,y) locations relative to their parent widget.
Note that this control only applies to new widgets that will be adding in the future. This control does not apply to the currently selected widget. To change the layout method for the currently selected widget, go to the Layout palette and adjust the 'position' property. (position:absolute for absolute layout, position:static for flow layout)
Document settings
Pressing this icon causes a drop-down menu to appear with various settings and operations
for the currently opened document. Commands include:
- Switch theme - Switch to a different CSS theme (or theme set) for the current document
- Choose device - Switch to a different mobile device (e.g., from iPhone to an Android device)
- Rotate device - Toggles between portrait and landscape mode (only applies when a mobile silhouette is showing).
- Select parent - Selects the parent widget
- Select ancestor... - Shows a dialog that shows a list of ancestor widgets and allow you to select one of the ancestors
- Unselect all - Unselect all currently selected widgets
- Move to front - (Absolutely positioned widgets only) Make this widget the last child of its parent, which will usually cause this widget to be rendered after its other siblings
- Move forward - (Absolutely positioned widgets only) Move this widget to the position after its next sibling
- Move backward - (Absolutely positioned widgets only) Move this widget to the position before its previous sibling
- Move to back - (Absolutely positioned widgets only) Make this widget the first child of its parent, which will usually cause this widget to be rendered before its other siblings
- Surround with <div> - Surround currently selected widgets with an HTML <div> element. At end of operation, the widget will be a child of the <div>.
- Surround with <span> - Surround currently selected widgets with an HTML <span> element. At end of operation, the widget will be a child of the <span>.
- Surround with <a> - Surround currently selected widgets with an HTML <a> element. At end of operation, the widget will be a child of the <a>.
Preview in browser
Opens up a new browser tab/window and run the currently open document
within that browser tab. In preview mode, the application will be fully interactive.
Collapse icon
Clicking on this small icon will cause the palettes to collapse such that only palette tabs are showing.
To show a particular palette, click on its palette tab (at the very left- and right- edges of the Maqetta browser window). Clicking on the same palette tab a second time toggles its current state (collapsed vs expanded).
You can control the size of the expanded palettes by dragging on the splitter that separates the palettes and the canvas. There is also a splitter between the top palettes and the bottom palettes.
To show a particular palette, click on its palette tab (at the very left- and right- edges of the Maqetta browser window). Clicking on the same palette tab a second time toggles its current state (collapsed vs expanded).
You can control the size of the expanded palettes by dragging on the splitter that separates the palettes and the canvas. There is also a splitter between the top palettes and the bottom palettes.
Widgets Palette
The Palette contains the list of widgets that you can add to your document.
To add widgets, open up the appropriate section of the Palette, and then drag/drop widgets onto the canvas. You can also add widgets using a two-click approach, where you first click on a widget in the Palette, and then either click on the canvas or drag out a rectangle on the canvas. If you drag out a rectangle, then widgets that are resizable will have an initial size that matches the size of the rectangle you dragged out.
Maqetta shows a different list of sections in the Palette depending on the type of composition (mobile application vs. desktop application vs. sketch). For a desktop application, the Palette has the following top-level sections:
To add widgets, open up the appropriate section of the Palette, and then drag/drop widgets onto the canvas. You can also add widgets using a two-click approach, where you first click on a widget in the Palette, and then either click on the canvas or drag out a rectangle on the canvas. If you drag out a rectangle, then widgets that are resizable will have an initial size that matches the size of the rectangle you dragged out.
Maqetta shows a different list of sections in the Palette depending on the type of composition (mobile application vs. desktop application vs. sketch). For a desktop application, the Palette has the following top-level sections:
- Containers - Widgets that can contain other widgets. These include various Dojo containers such as BorderContainer, TabContainer, Accordion, Toolbar and Menubar. BorderContainer is the commonly used for controlling layouts, particularly fullscreen layouts.
- Controls - Widgets that are primitive controls. This section contains a long list of widgets that commonly used controls such as textboxes, buttons, lists, sliders, date pickers.
- HTML - HTML elements that are commonly used in web applications.
Some notes:
<div>and<span>elements are commonly used as containers for other widgets<label>is commonly used for simple text strings<table>is commonly used for achieving row/column layouts
- Clip Art - A collection of resizable, commonly-used user interface clip art. Includes small-size icons such as "close", "help", "home" along with a few larger placeholder graphics such as "map" and "image". Also includes device silhouettes for some common mobile devices.
- Drawing Tools - Simple drawing tool widgets such as Rectangle and Arrow. These widgets are added to the page in absolute mode even if the current setting is "flow".
- Other - Catch-all section for any widgets that aren't in any of the above categories.
Outline palette
|
The Outline palette shows a hierarchy view of the widgets in your document.
You can reorder your widgets via drag/drop within the Outline palette. The Outline palette also includes a context menu which allows many of the same widget operations (e.g., delete) that are available on the page editor canvas. |
 |
Bottom/left palettes
|
Files shows your file system in the cloud (see image at right).
The Files palette toolbar includes commands for creating and managing projects,
creating and managing project templates, downloading files and uploading files. Reviews shows the list of review sessions which either you initiated or to which you have been invited. |
 |
Properties palettes
The various Properties palettes (Widget, Events, Layout, etc) are where you can change
widget-specific property values. The various sections are:
At the top of each of the various Properties palette are controls for setting the class and/or id values for the currently selected widget.
- Widget - This section lists widget-specific properties - e.g., a Checkbox widget has a "checked" property, whereas most other widgets will not have such a property. For most widgets, a 'title' property appears at the top. This corresponds to the HTML 'title' attribute and is often used for specifying tooltip text for a given widget.
- Events - Defines the actions to take when certain events occur on a particular widget. Includes mouse events (e.g., onclick) and focus events for text entry widgets (i.e., onfocus and onblur).
- Layout - Various CSS properties in the general area of layout. Includes CSS properties regarding size (e.g., 'width' and 'height') and location (e.g., 'left' and 'top'). Also includes CSS properties such as 'position', 'display', 'float', 'overflow' and 'opacity'.
- Padding - CSS padding properties, including the 'padding' shortcut and the specific properties 'padding-top', 'padding-right', 'padding-bottom' and 'padding-left'.
- Margin - CSS margin properties, including the 'margin' shortcut and the specific properties 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left'.
- Background - CSS background properties. The "..." buttons can be used to bring up the Background dialog, which allows picking background image and defining gradients.
- Border - CSS border properties.
- Fonts/Text - CSS properties having to do with text styling.
- SVG - CSS properties that only apply to SVG content. These properties typically are used only for widgets from the Drawing Tools section of the Palette.
At the top of each of the various Properties palette are controls for setting the class and/or id values for the currently selected widget.
Scenes palette
The Scenes palette enables two things.
- Application states - Maqetta includes an "application states" feature which allows users to define interactivity without programming. With the application states feature, you can organize your application into different states, and then define which widgets are visible (or styled differently) in each different states. State changes can be triggered using the Events palette.
- Switching between Dojo Mobile Views - If you create a mobile application and include Dojo Mobile view widgets (View, ScrollableView or SwapView) in your application, the Scenes palette will show both the list of views, plus the hierarchy of views. You can easily switch between views by clicking on one of the view in the Scenes palette.
Visual design canvas
|
This area is where you create your HTML application.
To add widgets to the page, simply drag/drop widgets from the Palette to the canvas. When adding a new widget, sometimes Maqetta presents a data entry popup or dialog. On the right, you can see the data entry popup for a Button widget. You can click on the "?" icon to see what text entry options and rules apply to the format of the data for this particular widget. To adjust widget options and CSS properties, click to select a particular widget and then change properties using the right-side properties palette (e.g., Widget, Events, Layout, etc.). |
 |
Keyboard shortcuts
The Maqetta page editor supports the following keyboard shortcuts:
| Ctrl-z: | undo | (Cmd-z on Mac) |
| Ctrl-Shift-z: | redo | (Cmd-Shift-z on Mac) |
| Ctrl-x: | cut | (Cmd-x on Mac) |
| Ctrl-c: | copy | (Cmd-c on Mac) |
| Ctrl-v: | paste | (Cmd-v on Mac) |
| DEL or BS: | delete | |
| Ctrl-s: | save | (Cmd-s on Mac) |
| Ctrl-Shift-s: | saveAs | (Cmd-Shift-s on Mac) |
| Ctrl-o: | open file | (Cmd-o on Mac) |
| Ctrl-0: | preview in browser | (Cmd-0 on Mac) |
| Ctrl-1: | design view | (Cmd-1 on Mac) |
| Ctrl-2: | source view | (Cmd-3 on Mac) |
| Ctrl-3: | split vertically view | (Cmd-3 on Mac) |
| Ctrl-4: | split horizontally view | (Cmd-4 on Mac) |
| F1: | open new window showing Maqetta documentation |