Maqetta Application Visualization Tool Could Be Just What the Doctor Ordered

Development Tools
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

 While still in its infancy, the open-source tool generated interest at the recent IBM Rational Innovate 2012 conference.

A few years ago, when IBM was urging RPG developers to learn Java, a friend of mine who had decided to take the plunge stopped by the house on the final day of her intensive two-week training program in the cross-platform language. She was very bright and an accomplished RPG programmer, so I was stunned when she sheepishly confessed how difficult she had found the course material. And here I thought I was the only bonehead when it came to programming!


That was 15 years ago, and the RPG programmer community was then so traumatized by the exposure to Java that they retreated into their collective shell and took an oath never to attend another training class in any computer language (other than RPG) as long as they lived. And don't trust IBM if it ever again tries to pry your cold dead hands from your RPG-friendly keyboard.


Despite EGL being a more comprehensive language than PHP and able to shield the programmer from the complexities of client-side user interfaces requiring HTML, CSS, and JavaScript, the RPG community has fallen in love with PHP! Go figure. Today, when the task of building a stylish Web user interface is multiplied fourfold by the challenge of designing interfaces for a variety of mobile devices, programmers are looking for help. Companies like ASNA, Profound Logic, LANSA, looksoftware, mrc, and BCD are all ahead of the power curve with great tools for mobile development. IBM Worklight looks like a full-featured platform as well. But the open-source community, seeded by IBM, has been working on its own solution that holds great promise for developers who are looking to build mobile apps that run in a browser.


Called Maqetta (pronounced mah-KETTA) and derived from the Spanish word maqueta, for mock-up, the product is an HTML5 WYSIWYG editor and application visualization tool that raised a few eyebrows this week among attendees at IBM Rational's Innovate 2012 conference meeting in Orlando, Florida. Maqetta allows you to drag and drop live widgets onto a visual canvas, which then has the working HTML code and integrated styles behind it to form the foundation for your mobile or Web user interface. You still need a developer to connect it to a database or your back-end application, but much of the client-side work is already complete without any HTML, CSS, or JavaScript programming. For RPG programmers who have adopted PHP, this is exactly the piece they have found to be a challenge. There are few if any prototyping tools out there that leave you with working code, although iRise is doing some interesting things with its iRise CodeGen product.


While Maqetta was introduced last year, much work by the Maqetta team at Dojo Foundation was done to add new features and track down bugs during the past 12 months. Officially, Maqetta is still at the Technology Preview stage, and not yet released as V1.0, but a number of users apparently have found it operational enough to use for project development, based on forum comments. Nevertheless, there still are bugs, important features not yet fully implemented, and performance and usability issues. The team, however, is pushing for release of V 1.0 during the second half of 2012.

Here are a few highlights of Maqetta's features:

Drag-and-Drop Page Assembly

  • Edit on-screen visually
  • Drag/drop from Widget palette
  • Drag/drop images from Files palette
  • Drag/drop rearrangement on canvas or in Outline palette
  • Resize widgets
  • Control data pop-up
  • Control/change widget's parent

Toolbar for Common Editing Operations

  • Cut/copy/paste/delete
  • Undo/redo
  • Preview in browser
  • Save and save as
  • Switch theme
  • Flow versus absolute layout
  • Sticky notes
  • View modes: source versus design versus split

Other feature highlights include:

  • Widget Palette: Choose HTML elements or widget libraries
  • Properties Palette: Customize widgets
  • Outline Palette: Order page hierarchy, rearrange widgets, control visibility

The design of Maqetta is intended to keep it "toolkit independent," and it currently uses industry standard OpenAjax Widgets to package widget metadata. This format has been found to work with most popular widget libraries, such as HTML, JavaScript, and CSS, according to the development team. Maqetta presently contains a basket of Dojo widgets, both desktop and mobile, and a sampling of JQuery and YUI widgets. Extension points aren't all there for users to configure a version for use with their particular widget library, short of tweaking the source code, but the Maqetta team has the extension points on its hit list.


To try the current preview release, you can either launch the hosted version of the application at or download the code and run the application locally on a desktop or Web server (advisable if you wish to protect your files). You can even try the hosted version without registering, although your files will disappear when your session ends.


The Maqetta team is looking for a few good programmers and other volunteers, so if you find you are intrigued by this project, there are a number of ways that you can help the community bring this open-source project to fruition, all outlined on the Web site.