Tuesday, August 30, 2011

Introducing DHTMLX Java Tag Designer

One  of the most useful tools I ever used in my career, is Balsamic Mockups.
I have been a Balsamic user since the very first release, and when it was introduced to one of our customers in 2009 it was an hit. Everybody loved it as user interface design tool. Balsamic lets you make great 'hand drawn' mock-ups and focus on the effectiveness of the interface design instead of the style. Developers usually start facing the first challenge as soon the mock-ups are ready and the tedious job of coding begins. Typical examples are: pages that contain too much data and the avoided scroll bar appears;  the labels for some foreign languages are longer than in English; data listed in a table are truncated, etc.  Every developer can tell their own story about facing these challenges.
If you are trying out the DHTMLX Java Tag Library, you can take  advantage of the Tag Designer tool to address some of these challenges.
The DHTMLX Java Tag Designer is not intended as a development tool for replacing your favorite IDE, but rather, a web collaboration prototyping tool, with the objective to create a common work space where analysts, users, and software developers share interface mock-ups. 
A two minute introduction video is available below (use full screen 720HD for optimal view).


Like scaffold for programming , the designer uses the mock-ups to generate the code, in this case, Java Server Pages, on which to build the target application.
The Tag designer  is  an example of a non trivial application coded with the DHTMLX Java Tag Library support, providing a WYSIWYG experience of  the DHTMLX component library. 
Below are some useful features:
  • Drag and Drop
    The components can be moved/reordered  across the containers in the structure window, which are very useful in the early stage of the interface design.
  • Internationalization Support (i18n) 
    Labels, headers, menu items and buttons can be translated using the resource bundle tool, giving an immediate feedback of the interface in multiple languages.
  • Automatic Revision Management
    Every save operation creates a new copy of your design, allowing to step back and start over from an existing mock-up. 
  • Sharing
    Mock-ups can be shared between the users with view/edit grant option for each user.
  • Sticky Notes 
    The Sticky Notes allows to create a message directly on the design area in order to share tasks, messages and ideas.
  • Links 
    Pop-up menu, can link another page for navigation through the interface during a design session. 
  • Custom HTML
    Because "one size does not fit all", custom HTML code or JavaScript frameworks such as jQuery can be included. 
When the mock-up is completed with the code generation function, it is possible to download the code and use it with your favorite framework. The  downloaded package contains all the software needed to start the development, including the Java Tag Library 1.5 and DHTLMX Component Library Standard Edition 2.6, which are distributed under the GNU GPL v2.
You can start using the Tag Designer by registering at, http://www.mylaensys.com/designer.html, which also gives you free access to support forum. 

The designer is compatible with Firefox 4.0, Explorer 8,  Safari 4.0 and Chrome.

1 comment: