Note that you can add your own custom raster or vector clipart by
simply uploading your images to your Maqetta workspace and then dragging/dropping
the uploaded images from the Files palette onto the canvas.
Your custom images can be either rasters (e.g., *.png, *.jpg, *.gif) or
vectors (i.e., *.svg).
Simple drawing tools -
For situations where you can't find a widget or clipart that represents
the UI control that you want to include in your application's UI,
Maqetta Preview 4 offers some simple drawing tools for common shapes:
rectangles, rounded rectangles, circles/ellipses, lines (horizontal, vertical, arbitrary orientation),
lines with arrows and point text. With the actual HTML page content, each of these shapes is
a shape widget that under the hood is rendered as SVG.
There is a new section of the Properties palette labelled "Graphics and SVG" where
you can control SVG-specific styling properties for the shape widgets: 'fill',
'stroke' and ''stroke-width'.
Better default sizes for container widgets in sketch mode -
Preview 4 sets better initial sizes for Dojo container widgets
(BorderContainer, TabContainer, Accordion, etc.) when sketching out a UI
using absolute positioning (which is what you get when opening a New HTML File
with either Desktop hi-fi sketch of Desktop lo-fi sketch).
Previously, these widgets would default to 100% for both flow and absolute layout.
Now, these widgets default to 100% only in particular flow layout scenarois and default to (roughly) 300px for absolute layouts.
Drag out widget size at widget creation time -
Preview 4 now allows you to click a widget in the Widgets palette
and then drag out a rectangle on the canvas for the initial size and position (when using absolute layout)
for the widget. (Note that some widgets are not resizable.)
Improvements to snapping -
Preview 4 includes various enhancements and fixes to the dynamic snapping
feature, including the ability to snap any edge to any edge (e.g., right edge
of one widget to the left edge of another widget).
Shift key for constrained move and resize -
For any widgets, HTML elements (e.g., images), clipart or shapes, Preview 4 now
allows the shift key to turn on "constrained mode". When moving a widget using
the mouse, holding down the shift key will constrain movement to horizontal or
vertical. When resizing a widget, the shift key will either preserve aspect ratio
(for images and clipart) or force square size (w=h).
Arrow key fixes - now move widgets by 1px -
Preview 4 includes multiple fixes when using the keyboard arrow keys
to move widgets. In particular, arrow keys now move the selected widget(s)
by 1px. If you are holding down the shift key, the widgets will move by 10px.
Choose Parent UI while dragging (and reparenting) -
Preview 4 includes a preference (Settings->Preferences->HTML->Visual Editor->"When dragging, show possible parents")
that allows you to turn on supplemental
user interface for drag operations that shows you, for the widget being dragged,
which container widget will become the parent widget, and what other candidate
parent widgets are also at the current mouse location. While dragging, you can
press number keys from the keyboard (1, 2, etc) to tell Maqetta to choose a different parent.
The Choose Parent user interface is operational when dragging a widget from the Widgets palette
to the canvas and when dragging an existing widget around on the canvas.
If the preference is off, you can still toggle on the Choose Parent user interface
by holding down the shift key while dragging.
New HTML File dialog improvements -
The Preview 4 release has a revamped New HTML File dialog (i.e., the dialog that appears
when you issue a New->HTML File... command.
- Choose "Composition type" at page creation time -
With Preview 4, you can decide at page creation time what type of composition
you want to create. Maqetta will then set various page editing options
so that it will be easy for you to accomplish a particular task (e.g., quick UI sketch,
detailed design of the HTML/CSS final application, mobile UI creation, etc.).
With Preview 4, the following composition types are available:
- Desktop hi-fi page -
This is when you are defining the detailed UI for a desktop web application
and/or detailed UI for a piece of user interface (e.g., a dialog).
The new HTML page will be for desktop browsers (i.e., no mobile device silhouette),
using a high-fidelity CSS theme suitable for final product delivery such as claro,
and will open using flow layout.
(This was the default mode in previous releases.)
- Desktop hi-fi sketch -
This is when you want to quickly sketch out the proposed UI for a desktop web application
and/or quick sketching of a piece of user interface (e.g., a dialog).
With this option, you will be start off in absolute positioning mode ("sketch mode")
which allows drawing out a user interface as if in a simple drawing tool application.
(See notes above about Quick UI Sketching).
Like the previous option, the new HTML page will be for desktop browsers
(i.e., no mobile device silhouette),
using a high-fidelity CSS theme suitable for final product delivery such as claro.
- Desktop lo-fi page -
Same as "Desktop hi-fi page" except the page will be initialized using
the "sketch" theme which provides a pseudo hand-drawn look and feel where
most widgets are rendered in black-and-white with thick strokes on the widget outlines.
Low fidelity mode is sometimes useful in early wireframing scenarios.
- Desktop lo-fi sketch -
Same as "Desktop hi-fi sketch" (i.e., suitable for quick UI sketching)
except the page will be initialized using
the "sketch" theme (see "Desktop lo-fi page").
- Particular mobile device (iPhone, iPad, Android, etc.) -
The other available composition types represent specific mobile devices.
If you are creating a mobile UI, you usually will want to choose one of these devices.
Note that you can always switch devices within the page editor - the device you choose
here is just the initial device when the page editor opens. In the Preview 4 release,
mobile UI authoring is constrained to flow layout and high fidelity CSS themes, only.
- Collapse/expand file listing -
With Preview 4, the New HTML File dialog hides the file list control by default.
You can open the file list control by clicking on the right-pointing arrow
to the right of the "Where" control.
- New Folder... button -
You can now create new folders in the New HTML File dialog by opening up the file listing
(see previous bullet) and then clicking on the New Folder button.
- Theme... button -
In the lower-left corner of the New HTML File dialog, there is a "Theme..." button
which allows you to choose the initial CSS theme(s) that you want to use
in your HTML page.
CSS3 gradients and Background dialog -
Preview 4 adds a Background dialog that is available by clicking on any of the "..." buttons
in the Background section of the Properties palette. The Background dialog provides
improved UI for existing background styling features (e.g., ability to preview background image options),
but more importantly now allows creation and editing of CSS3 gradients.
Both linear and radial gradients are supported and can have any number of gradient stops.
Maqetta includes advanced logic that allows it to import various browser-specific CSS3 gradient syntaxes
including the original WebKit/Apple gradient syntax (now deprecated but still supported in WebKit)
and generates multiple 'background-image' property declarations so that the generated gradients will work correctly
across different browsers (WebKit, Mozilla, IE and Opera). (This feature is similar to the CSS3 gradient
generator tools available on the Web today.)
Theme sets -
Preview 4 adds a Theme sets... dialog (available from top menubar at Settings->Theme sets...)
that allows you to organize your various CSS themes into "theme sets", which represent a collection
of related themes. This feature is mostly for advanced mobile authoring scenarios where authors
are experimenting with different CSS styling approaches.
Dojo 1.7 GA support -
Whereas Preview 3 supported a beta release of Dojo 1.7, Preview 4 supports the final Dojo 1.7 GA release.
Progress on transition to AMD loader -
With Preview 4, we are about 50% complete with transitioning all aspects of Maqetta
from the old-style Dojo loader (dojo.provide, dojo.require) to the new AMD loader.
We hope to finish this transition with our next milestone release.
Once that transition is complete, various key performance issues with Preview 4 (and earlier releases)
will improve.
Progress on security issues -
With Preview 4, we have started to address security issues within the
Maqetta server and client-side logic. We will continue to address security issues
in upcoming releases.
Many other bug fixes -
Preview 4 includes over 280 miscellaneous bug fixes. Some of those fixes
can be seen by going to
this URL which lists bugs closed against the Preview 4 release.
Previous / Next