Maqetta Menu Bar
The Maqetta Menu Bar has "Maqetta" at the left and the current user's login name on the right (in this case, "localhost user"). To the right of the login name are four drop-down menu commands, and then the logoff link.
The menu commands are as follows:
- New
- HTML File...
- CSS File...
- JavaScript File...
- Project...
- Theme...
- Folder...
- Review...
- Open
- File...
- Theme Editor
- Settings
- Preferences...
- Theme Sets...
- Help
- Documentation
- Tutorials
- Community
- About Maqetta
New
HTML File...
This creates a new User HTML file, which is what you use to create your page designs. The file is created with the tags needed to use the Maqetta widgets and the Maqetta theme files. See About the User HTML File for more information on source that is auto-generated for HTML files.
A dialog window opens where you can enter a filename and specify the folder in which to place the new file. A default filename is provided for convenience, which you can change if desired.
CSS File...
This creates a new CSS file which can be used in addition to or instead of app.css, which is provided by Maqetta as the default application CSS file. If you create your own CSS file, you will need to update the <style> tag in your HTML file (see Source Editing) to link to your CSS file. (app.css is already linked in for you.)
A dialog window opens where you can enter a filename and specify the folder in which to place the new file. A default filename is provided for convenience, which you can change if desired.
JavaScript File
This creates a new JavaScript file. You will need to update your HTML file (see Source Editing) to link to your JavaScript file.
A dialog window opens where you can enter a filename and specify the folder in which to place the new file. A default filename is provided for convenience, which you can change if desired.
Project...
Maqetta supports multiple projects. When you launch Maqetta the first time, you are in the default initial project ("project1"). The New Project command creates a new project in your workspace and updates the Files palette to show the initial contents of your new project.
The New Project dialog includes a checkbox labelled "Eclipse support". By checking this option, your new project will have a file hierarchy that matches the file hierarchy used by the Eclipse IDE and Maqetta will create the various hidden "dot files" (i.e., files whose names begin with the character ".") that hold Eclipse configuration information.
Theme...
This creates a new CSS theme by cloning an existing CSS theme, and then launches the theme editor to allow you to customize your new theme.
Folder
This creates a new folder under the Maqetta root folder or one of its sub-folders. A default folder name is provided for your convenience, which you can change if desired.
Review
This command initiates a web-based review and commenting session with team members. (Note: this feature only works in practice when running Maqetta off of a web server. When installing locally, in most scenarios, you can only successfully invite yourself.)
A dialog wizard comes up that allows you to choose which files (i.e., UI mockups) should be reviewed and the list of other people (via email addresses) who need to be invited to the review activity. Upon filling out the fields in the wizard and clicking "Publish", the invitees will receive email invitations. The emails will include the URL which will launch Maqetta in review mode, where reviewers can look at the mockups and provide feedback via forum-style plain text comments or on-screen annotations.
Open
File...
Opens an existing file under the Maqetta root folder or one of its sub-folders. Scroll through the list to find the desired file, select the file by clicking on it, then click Open to open the file.
Theme Editor
Opens the Theme Editor, where you can view or modify the style properties on one of the CSS themes known to the application.
Settings
Preferences...
The HTML/Visual Editor preferences allow you to specify the following options:
| Visual Editor Preferences | |
|---|---|
| Snap to nearest widget | (Default is checked) Whether dynamic snap lines should show during widget drag operations which allow you to snap the edge of one widget to the edge of another widget. Only applies to widgets that use absolute positioning. |
| When dragging, show possible parents | (Default is unchecked) Whether to show supplemental drag-time user interface that shows the list of possible parents for the current widget at the current (x,y) location. |
| Warn on CSS Override | (Default is checked) Provides a warning message if you attempt to update a style rule from one of the /theme files while making style changes using the Properties palette. |
| z-index for sketch mode: | (Default is 900) When adding widgets using absolute positioning, the z-index value to use for these widgets. (The 999 value helps ensure that widgets placed on top of Dojo Mobile widgets won't be hidden underneath due to lower z-index value). |
The JavaScript/Formatting preferences allow you to specify formatting options that you prefer for the JavaScript that is generated by Maqetta in the User HTML files.
Theme Sets...
Brings up a dialog that allows you to define and manage "theme sets", which are a collection of CSS themes and the association of which theme to use for which device (e.g., use theme A for Android and use theme B for iPhone).
Help
Documentation
Help brings up the Maqetta Documentation (which you are reading now) in a new browser window.
Tutorials
Help brings up the the tutorial section of the Maqetta Documentation (which you are reading now) in a new browser window.
Community
This brings up the Maqetta Community web site, where you can find information and forums about Maqetta and can supply feedback.
About Maqetta
This brings up a small dialog that shows product version number and build number.