Creating Content

In this documentation, the term widget refers to both widgets and HTML tags.

You create content in Maqetta using the Maqetta Page Editor, comprised of the page editor canvas and its associated palettes. To create content, you must first have a file opened in the page editor canvas. You can either create a new HTML file or open an existing file (see the Maqetta Menu Bar for details).

Once you have an opened file you can create content by dragging widgets from the Widgets palette and dropping them onto the canvas. When a widget is first dropped onto the canvas it is automatically set to selected, indicated by a thick gray border, so you can immediately work with it (e.g. move it, resize it, or set its properties).

Some widgets provide a data entry popup where a text window pops up for you to enter the widget's text. You can enter some text or just accept the default. Simply click off the text window to close it. You can later re-open it by double-clicking on the widget. See Widget Data Entry Popup for details.

You can use app.css to create custom style rules for your application. You can also edit the default Claro theme to make system-wide style changes for your organization. Or you can use one of the other themes available in Maqetta.

Here are some tips for working with widgets:

Drag widgets from the Widgets palette onto the canvas.
You can drop widgets inside of container widgets, but not inside of control widgets.
To work with a widget you must first select it by clicking on it (or by selecting it in the Outline palette).
Once a widget is selected you can move it, resize it, or set its properties.
Use app.css to create your own style rules.
Many widgets contain sub-widgets, which can be selected and have their own set of properties.
Many widgets contain a data entry popup that allows you to easily set the widget's text.
The Outline palette shows the widget hierarchy and is handy for selecting sub-widgets or nested widgets.

Widget Context Menu

Each widget has a context menu with the following commands:

Cut - delete the currently selected widget and copy it to your clipboard.
Copy - copy the currently selected widget to your clipboard.
Paste - paste the widget from your clipboard (click paste, then click your cursor where you want to make the paste).
delete - delete the currently selected widget.
Select parent - select the parent of the currently selected widget.
Select ancestor... - brings up a dialog that shows the list of ancestors of the current selected widget, allowing you to select one of the ancestors.
Unselect all - remove selection on all widgets, with that result that nothing is selected.
Surround with <A> - select 1 or more widgets and enclose in a <a>.
Surround with <DIV> - select 1 or more widgets and enclose in a <div>.
Surround with <SPAN> - select 1 or more widgets and enclose in a <span>.
Move to front - (absolutely positioned widgets only) moves currently selected widget(s) to be front-most among all widgets with same parent (i.e., widgets become last children of parent)
Move to back - (absolutely positioned widgets only) moves currently selected widget(s) to be back-most among all widgets with same parent (i.e., widgets become first children of parent)
Move forward - (absolutely positioned widgets only) moves currently selected widget(s) one position forward among all widgets with same parent
Move backward - (absolutely positioned widgets only) moves currently selected widget(s) one position backward among all widgets with same parent

Table cells add the following commands to the context menu:

Insert column after
Insert column before
Remove column
Insert row after
Insert row before
Remove row

To use the widget's context menu, first select the widget, then right-click (ctrl-click on Mac) on the widget.

The Widgets Palette

The widgets are grouped into different sections, depending on the type of composition (Mobile Application vs Desktop Application vs Sketch). For mobile applications, the sections are:

Filter... - allows you to search for widgets using a keyword.
Views - View widgets from Dojo Mobile toolkit.
Heading - Heading widgets from Dojo Mobile toolkit.
Lists - List widgets from Dojo Mobile toolkit.
Controls - Primitive UI controls such as TextBox, ComboBox, CheckBox, RadioButton and Button.
Containers - Containers such as Accordion.
HTML - HTML tags and an HTML Rich Text editor.
Clip Art - A collection of common UI clip art that you can use in your compositions.
Drawing Tools - Simple graphics tools such as rectangles, circles, lines and arrows.
Other - Other widgets that do not fall into any of previous categories.

For desktop applications, the sections are:

Containers - Containers such as Accordion.
Controls - Primitive UI controls such as TextBox, ComboBox, CheckBox, RadioButton and Button.
HTML - HTML tags and an HTML Rich Text editor.
Filter... - allows you to search for widgets using a keyword.
Clip Art - A collection of common UI clip art that you can use in your compositions.
Drawing Tools - Simple graphics tools such as rectangles, circles, lines and arrows.
Other - Other widgets that do not fall into any of previous categories.

For sketching, the sections are:

Filter... - allows you to search for widgets using a keyword.
Drawing Tools - Simple graphics tools such as rectangles, circles, lines and arrows.
Clip Art - A collection of common UI clip art that you can use in your compositions.
Controls - Primitive UI controls such as TextBox, ComboBox, CheckBox, RadioButton and Button.
Containers - Containers such as Accordion.
HTML - HTML tags and an HTML Rich Text editor.
Heading - Heading widgets from Dojo Mobile toolkit.
Lists - List widgets from Dojo Mobile toolkit.
Other - Other widgets that do not fall into any of previous categories.

Widget Libraries

Maqetta uses widgets from the following open source widget libraries:

Dojo Toolkit - an open source Javascript toolkit (or library) managed by the Dojo Foundation.

Previous / Next