Page Editor Canvas
The Page Editor canvas, located in the center window of the Maqetta workspace, is the user's workspace and where the contents of opened files are displayed. To begin adding content to the canvas you must first either open a new file using the New > HTML File... menu option, or open an existing file from the the Files palette. Once a file is opened, you can view the file's contents in either Design mode, Source mode, or one of the Split modes. The default is Design mode. You can switch modes by clicking on one of the icons in the right side of the Page Editor Toolbar.
In Design mode, the canvas contains real Ajax widgets (vs. raster facsimiles) so it is true WYSIWYG. You add widgets to the canvas by dragging/dropping from the widget palette. The design canvas works closely with the:
- Widgets palette - shows the catalog of widgets that you can add to the HTML page
- Outline palette - shows the object/widget hierarchy
- Properties palette - allows changes to CSS properties and various other widget properties that affect how a widget looks
In Source mode, the canvas shows the HTML source code for your page. The source code you see is the actual HTML source code that is saved by Maqetta. Maqetta is designed to create "developer-ready" UI prototypes in that the code exported by Maqetta is designed to allow developers to modify incrementally to add interaction and business logic while preserving the various visual features (e.g., CSS files and images) that the designers authored in Maqetta.
Maqetta includes bi-directionality between design and source views. For example, you can edit the label text strings in source view and delete widgets in source view, and these changes will be reflected when returning to design view. The Maqetta team is working on sophisticated language parsers (HTML, CSS, JavaScript) that will enhance the product's ability to deal with arbitrary source code in future releases so long as the widgets are represented within HTML markup.