Maqetta is an open source project hosted by the Dojo Foundation

Mobile Authoring

Maqetta offers a number of features to enable visual authoring of HTML5 users interfaces for mobile user interface development. Mobile features includes:

  • Support for a large collection of mobile widgets support for dojox.mobile widgets - The current release of Maqetta supports most mobile widgets found in Dojo 1.7.2. You can drag/drop roughly 30 different widgets from the Widgets palette onto the canvas for drag/drop assembly of user interfaces. In the coming months, the Maqetta project is likely to add support for more mobile widgets, including support for new widgets in Dojo 1.8.
  • Mobile device silhouettes - The New HTML File dialog includes a “Composition type” drop-down menu which allows you to choose an initial mobile device which will be the starting point when constructing your user interface. For example, if you choose “iPhone” in the New HTML File dialog, then the page editor will show a life-size replica (silhouette) of an iPhone, and you can then drag/drop widgets into the silhouette for true WYWIWYG authoring. The visual page editor includes an icon on the editor toolbar that allows you to switch to a different device, and a second icon on the editor toolbar that rotates the silhouette so that he author can see how the application will look in both portrait and landscape modes for the target device.
  • Multi-screen authoring and interactivity, without programming - Maqetta provides the ability to author multi-screen mobile applications that include interactivity (e.g., pressing on a control causes screen switching), all without programming.
  • Mobile CSS theme editor - Maqetta provides a comprehensive visual theme editor for mobile CSS themes. You can clone any of the built-in mobile themes (android, blackberry, ipad, iphone or custom) and then customize the cloned themes using the mobile theme editor. The mobile theme editor allows customizing most common CSS properties (fonts, colors, background, borders, padding, etc) either on a global, cross-widget basis, or on a widget-specific basis. You can also control styling for “sub-widgets” (e.g., particular pieces of widgets) and on particular interactive states (e.g., when pressed).
  • Control over which CSS theme applies to which device - By default, Maqetta uses device-specific CSS themes that emulate native look-and-feel, but the user has full ability to use a custom CSS theme either on a cross-device basis or use specific custom CSS themes for specific devices.
  • Mobile review/commenting - Maqetta includes a web-based review/commenting feature. For mobile UIs, reviewers can add comments and on-screen annotations (e.g., rectangles, arrows, text) on specific mobile views (aka screens).