Previous / Next

Maqetta Preview 6

Preview 6 release notes

The Preview 6 release includes the following updates:

• Visual editor enhancements and improvements - Preview 6 contains many improvements to the visual page editor:

  • Selection chrome has new look (and revised behavior) - In preview releases, the selection chrome around a widget was a gray hash pattern. With Preview 6, the selection chrome is a two-tone blue rectangle, with circular resize nobs at the corners. With Preview 6, you can resize horizontally by pulling on the left or right edges of the selection chrome, resize vertically by pulling on top or bottom edges, and change both width and height by pulling on the corner resize nobs.
  • Ability to drag a widget by mouse-down on interior - In preview releases, to move a widget, you had to first select the widget and then mouse-down on the selection chrome that surrounds the widget. (Dragging on interior of a selected widget would do nothing). Now with Preview 6, you can move selected widgets by dragging anywhere within the bounds of the widget (i.e., widget interior or border).
  • Elastic band select - With Preview 6, you can now drag out a selection rectangle to select all widgets that are enclosed by that rectangle. Elastic band select starts with a mouse down within the document area of visual page canvas. (NOTE: If the mouse down operation occurs over a currently selected widget, then the drag operation will move the selected widget rather than initiate elastic band selection. Also, if the mouse down operation occurs over a primitive widget such as a Button, the drag operation will immediately select the primitive widget and initiative a move operation on that widget.)
  • Alt-key or Option-key to copy a widget with drag operation - When you drag on the currently selected widget, you move that widget. With Preview 6, if you hold down the Alt key (Windows) or Option key (Mac), then the drag operation will copy the selected widgets, and place the copied widgets at the drop location.
  • Select parent, Select ancestor, Unselect all - Preview 6 adds three commands to the context menu on the visual page editor that provide some convenient operations related to widget selection:
    • Select parent - switches selection from the current widget to that widget's parent
    • Select ancestor - brings up a small dialog that list the current widget's parent and all other ancestors, and allows the user to change the selection to any of the ancestors.
    • Unselect all - makes it so that no widgets are selected
    These commands are only enabled when the current selection consists exclusively of absolutely positioned widgets, and amount to changing the position of the currently selected child widget within its parent's list of children. For example, "Move to front" makes the currently selected widget the last child, which in most cases causes that widget to be drawn on top of its sibling widgets.
  • Move to front, move to back, etc (absolutely positioned widgets) - Preview 6 adds four commands to the context menu on the visual page editor that allow convenient reordering of widgets, particularly to allow obscured widgets to come to the front visually:
    • Move to front
    • Move to back
    • Move forward
    • Move backward
    These commands are only enabled when the current selection consists exclusively of absolutely positioned widgets, and amount to changing the position of the currently selected child widget within its parent's list of children. For example, "Move to front" makes the currently selected widget the last child, which in most cases causes that widget to be drawn on top of its sibling widgets.

• Properties palette improvements - Preview 6 contains various improvements to the Properties palette:

  • 'moveTo' properties provide drop-downs of current mobile views - (Mobile UIs only) Various mobile widgets have a 'moveTo' property which indicates the mobile view to which the application should jump if the user presses on the current widget. With Preview 6, we have included a drop-down for the 'moveTo' property that shows the IDs of all of the Views in the current document.
  • 'class' attribute provides drop-down list of currently used classes - The 'class' attribute field in the Properties palette now provides a drop-down list of currently used classes. This is convenient if the author needs to apply the same class to multiple widgets.
  • 'class' and 'id' 'fields on separate lines, and are stretchable - The 'class' and 'id' fields are now on separate lines in Properties palette, and the fields stretch in size as the Properties palette's widget is changed (typically by pulling on the splitter between the Properties palette and the visual page editor canvas).

• GridX support, with creation wizard that allows for column control - Preview 6 now supports the powerful GridX widget for advanced display of tabular data. Upon dropping a GridX widget or double-clicking on an existing one, a 3-pane wizard appears:

  • Pane 1 - choose data source - either user-entered dummy data, data file from user workspace (either JSON or CSV), or remote data from arbitrary URL (JSONP))
  • Pane 2 - choose columns - user decides which columns to include or exclude
  • Pane 3 - column widths

• Drawing tool improvements: drag/click-select creation of lines and polylines - Preview 6 replaces the old line widgets (Line, Arrow, Horizontal Line, Vertical Line) with a different collection: Line, Arrow, Polyline, Polyline Arrow.

  To create Lines or Arrows, either:

  • Drag a Line or Arrow widget from Widget palette onto canvas. The result will be a default widget (horizontal) which you can modify by pulling on nobs.
  • Click on widget in Widgets palette, then click on canvas. Just like previous bullet, the result will be a default widget (horizontal).
  • Click on widget in Widgets palette, then drag out the desired position and size on canvas.

  To create Polylines or Polyline Arrows:

  • Drag a PolyLine or Polyline Arrow widget from Widget palette onto canvas. The result will be a default widget (two segements) which you can modify by pulling on nobs.
  • Click on widget in Widgets palette, then click on canvas. Just like previous bullet, the result will be a default widget (two segments).
  • Click on widget in Widgets palette, then repeatedly click on canvas to define end points. To stop adding points, either click a second time on the last point or press the Esc key.

• Mobile UI sketching, including clip art widgets for some mobile devices - In previous releases, it wasn't feasible to use do quick UI sketching using mobile widgets, but with Preview 6, there have been numerous improvements around mobile UI sketching:

  • Mobile device silhouetts as clip art widgets Preview 6 includes the follow six new clipart widgets that are pixel-accurate silhouettes for a handful of popular mobile devices. In some scenarios, users want to do quick UI sketching of mobile UIs where the picture of the device is in the background, and other widgets are placed on top of the device silhouette (using absolute positioning). For all six of these clipart widgets, the default orientation is portrait, but orientation can be changed to landscape by selecting the given widget and changing the 'orientation' property in the Widget-Specific section of the Properties palette.
    • iPhone
    • iPad
    • Android devices: Android_340x480, Android_480x800, AndroidTablet
    • Blackberry phone
  • Mobile widget improvements in sketch mode Preview 6 includes countless fixes so that Dojo Mobile widgets can be used in sketch mode. In sketch mode, users can drag/drop widgets, clip art, and shapes (using the Drawing Tools widgets), where Maqetta acts like a simple drawing tool. Sketch mode is good for quick&dirty mockups in very early phases of a UI design.
  • New mobile sketching tutorial The documentation for Preview 6 includes a new tutorial on quick sketching of mobile user interfaces.

• Mobile UI improvements

  • Mobile silhouette orientation now persists.
  • moveTo property now lists existing mobile view ids. Also supports hash values.
  • You can now drag and drop widgets into ListItems.
  • IconContainer now has a easier to use editing tool.
  • Leverage of data-dojo-config attribute for more robust mobile theme switching, as a result cloned a mobile theme will require modification of the dojo-theme-editor.html file of the cloned theme. The html source editor can be used to change the line: <script type="text/javascript" src="/maqetta/app/static/lib/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true"></script> to: <script type="text/javascript" src="/maqetta/app/static/lib/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, async: true, 'themeMap':[['.*',null,[]]],'mblThemeFiles':[]"></script>

• Limited PHP file support -

  Preview 6 includes limited support for *.php files. If you double-click on a *.php file in the Files palette, the HTML visual page editor opens. The visual editor ignores any <?php ... ?> constructs in the *.php file (treating them the same as HTML comments). If you click on preview-in-browser for a *.php file, then the file is downloaded to the browser with mime-type text/html, which results in the browser doing whatever it does if cases when a *.html file happens to contain <? ... ?> constructs (usually ignored).

  This feature can be useful for web application developers where they need to include small amounts of PHP in their files, but note that Maqetta has no ability to actually run a PHP engine against the PHP constructs; all that Maqetta does is do its best to ignore everything within a <?php ... ?> block.

  Developers who attempt to use this feature need to be careful that their *.php file (assuming <?php ... ?> constructs are ignored) can be interpreted by the Maqetta page parser as a well-formed HTML file.

• CSV data file support - Preview 6 now supports using CSV files for widgets that consume data (such as GridX, DataGrid or EdgeToEdgeDataList) and a sample csv file (sample.csv) is included. Previously only JSON files could be consumed.

• Many bug fixes - Preview 6 includes many miscellaneous bug fixes. Some of those fixes can be seen by going to this URL which lists bugs closed against the Preview 6 release.

Migration of User Workspaces

Preview 6 changes how files are constructed and stored in users' workspaces. If you are using Preview 5 and wish to deploy Preview 6, you can migrate the users' files by using the m5-m6-migrate.sh script. Download and script and run from within your "users" directory.

Note: The script only works on Unix-based systems.

Previous / Next