The Palettes
Widgets Palette
The Widgets palette shows the set of widgets that can be dragged and dropped onto the page canvas. Note that different hosting platforms might offer different collections of widgets. Some of the categories you might see include the following categories: Dojo Containers, Dojo Controls, HTML, Dojox Mobile, Clip art and Drawing tools.
Files Palette
The Files palette displays the files in your user workspace folder, where all of your Maqetta files are stored. If you are accessing Maqetta from the server then this is a folder associated with your username on the Maqetta server. If you are running Maqetta locally then this is the local Maqetta workspace folder specified in the Maqetta startup file. See Accessing / Installing Maqetta for more information.
The Files palette has toolbar with three icons:
- Download workspace - Download the entire workspace into a ZIP. A dialog appears with download options.
- Download selected files - Download only selected files.
- Manage libraries - Manage the JavaScript libraries that are available to your workspace.
The Files palette has a context menu with 4 commands:
- New folder... - creates a new folder in your Maqetta workspace
- Upload file - uploads files from your local file system to your Maqetta workspace
- Delete resource - deletes the currently selected file from your Maqetta workspace
- Download - zips and downloads the currently selected file(s) to your local system.
Properties Palette
The Properties palette is grouped into the following sections:
- Widget label - displays the currently selected widget's type (e.g. Button) and label (e.g. "Login")
- Class attribute - The 'class' attribute is always visible at the top of the palette.
- ID attribute - The 'id' attribute is always visible at the top of the palette.
- Common - contains core HTML attributes that are common to all widgets and HTML elements.
- Widget Specific - contains properties that are specific to the type of widget that is selected.
- Events - contains properties that control user events.
- Layout - contains CSS properties that control the dimension and positioning of widgets and HTML elements.
- Padding/Margins - contains CSS properties for setting the widget's the padding and margins.
- Background - contains CSS properties for setting the widget's background color and background image.
- Border - contains CSS properties for setting the widget's border styles.
- Fonts and Text - contains CSS properties for styling and aligning the widget's text.
- Graphics/SVG - contains CSS properties that are specific to the SVG graphical objects found in the Drawing Tools widgets.
Outline Palette
The Outline palette shows the object/widget hierarchy for the current page. You can select a widget or subwidget from the Outline palette and the corresponding widget will become selected on the page editor canvas.
The Outline palette also provides a way to show/hide widgets in various states (e.g. show a dialog box when a button is clicked). Click on the eye icon to toggle the visibility of the widget on the page editor canvas.
Scenes Palette
The States palette is for creating interactive states for your page. Every page has an initial state, which is represented in the States palette by the entry called Normal state. You can add additional states that define what the page should look like after a given user action. For example, if a dialog box should appear when a user clicks on a button, a new state can be created that displays the dialog box.