Theme Editor

A “theme” is a related collection of CSS files that provides consistent styling for a collection of widgets (a “widget library”). Maqetta includes a theme editor that allows the user to customize the CSS styling rules within a theme that control the visual styling of widgets within a widget library.

Intelligent/deep widget styling leveraging theme metadata - To enable Maqetta’s various CSS-related authoring features, including the theme editor, Maqetta has defined a theme metadata format that defines the mapping between CSS rules within a theme and the widgets in the collection. (More precisely, the theme metadata maps a particular CSS rules to a particular {property P on widget W for widget sub-component C for interactive state S}.) This allows deep and intelligent customization of CSS styling on particular widgets. For example of the level of detail control you have with the Maqetta theme editor, you can control the background color and text color for the section (“sub-widget”) of the Calendar widget for the currently selected date, including different colors for different interactive states (e.g., Normal vs Hover).
Built-in desktop themes - Maqetta ships with two desktop themes, Claro and Sketch, both of which apply to widgets found in Dojo’s Dijit library of widgets. Claro is a high-quality and highly-detailed CSS styling theme for Dijit that takes advantages of CSS3 features for optimal look-and-feel on modern browsers and reasonable fallback on older browsers. Sketch provides a hand-drawn (“sketch”) look for Dijit widgets that is useful for wireframing scenarios where the author would like reviewers to focus in on the flow of the application rather than visual details (to avoid reviewers focusing on colors and fonts). The Sketch theme was built using the Maqetta theme editor via incremental editing of the Claro theme.
Built-in mobile themes - Maqetta ships with five mobile themes, android, blackberry, ipad, iphone and custom, all of which apply to widgets found in Dojo’s dojox.mobile library of mobile widgets. The first four themes (android, blackberry, ipad and iphone) provide native styling so that dojox.mobile widgets will look and act like built-in, native UI controls on the respective mobile device. The other theme, custom, is a generic, cross-platform CSS styling theme that was designed to enable users to customize to transform into their own CSS theme.
Custom theme creation - Maqetta allows a user to clone any existing theme into a custom theme using the New Theme… command available on the New dropdown menu on the main application menu. For example, the user can clone the “claro” theme into a new theme named “myclaro”. After creating a new theme, the user can open the new theme in the Theme Editor to incrementally restyle to fit his needs.
Ability to switch between themes in visual page editor - The visual page editor provides a “switch theme” icon on the editor toolbar that allows the author to view his HTML page using different styling themes. For Dojo/Dijit widgets, the author can switch between “claro” (full visual styling) and “sketch” (hand-drawn look). The author can also switch to view any custom themes he has created. This allows the author to try out various experimental styling themes and visually how his HTML pages look using each of these themes.