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.

Getting Started with DHTMLX Java Tag Library

I have became a fan of the DHTMLX Ajax Toolkit Library after I used it in a “real world” java project for an european company. 
DHTMLX addresses most aspects of the user interface design and development, and offers the most widely used user interface components written in pure Javascript  and is compatible with all main browsers. The solutions offered by DHTMLX may not be the best all over the world, but they are the most reasonable ones that I have used. 

In order to reduce the effort of javascript programming for recurring tasks, Mylaensys created an easy to use Java Tag Library, which automatically generates all the required initialization scripts, resulting in simple pages that are easy to develop and maintain.

In addition, the Java Tag Library provides support for common “real world” application requirements such as:

• Components integration
• Internationalization
• Security

The main advantage of the tag library is that it affects only the view layer of the application, and can be used with any Java web framework  (such as Spring), without spend time  learning a new framework. 
Let's start with a simple example to compare the code required to create a simple Tab Bar component as shown in the picture below.

Using DHTMLX API, the required Javascript programming looks similar to the Javascript code below:
 

1. <script type="text/javascript" language="JavaScript">
2.   var tabbar;
3.   var globalImagePath = 'imgs/';
4.   function initializeDHTMLX() {
5.     try {
6.           window.dhx_globalImgPath = 'imgs/';
7.           tabbar = new dhtmlXTabBar( document.body );
8.           tabbar.setSkin('dhx_skyblue');
9.           tabbar.setImagePath('imgs/');
10.           tabbar.addTab('a1','Tab-a1');
11.           tabbar.setContent('a1','tab_a1');
12.           tabbar.addTab('a2','Tab-a2');
13.           tabbar.setContent('a2','tab_a2');
14.      } catch(err) {
15.           alert("** [" + err.name + "] " + err.message);
16.      }
17.    }
18. </script>

With Java Tag Library you can get the same result with the code below:
 

1. <dhtmlx:body name="initializeDHTMLX" imagePath="imgs/">
2.      <dhtmlx:tabbar name="tabbar" id="document.body">
3.         <dhtmlx:tab name="a1" text="Tab-a1" id="tab_a1"/>
4.         <dhtmlx:tab name="a2" text="Tab-a2" id="tab_a2"/>
5.      </dhtmlx:tabbar>
6. </dhtmlx:body>

The code  required using the Tag Library is short, simple to understand and maintain, which is very useful in projects with many pages.
One of the powerful features available with the DHTMLX toolkit, is the ability to integrate a component within another one. In the picture below is an example of a grid attached to the tab bar highlighted in the first example above. 

To integrate the grid component within the tab container, additional Javascript code is required for grid initialization. The Java Tag Library provides Components Integration using nested  tags. Below is an example of how to add a grid to the tab container using the nested tags.

1. <dhtmlx:body name="initializeDHTMLX" imagePath="imgs/">
2.      <dhtmlx:tabbar name="tabbar" id="document.body">
3.         <dhtmlx:tab name="a1" text="Tab-a1" id="tab_a1">
4.           <!-- Nested Grid -->
5.           <dhtmlx:grid name="grid">
6.              <dhtmlx:column name="Sales" sort="int"/>
7.              <dhtmlx:column name="Book Title" sort="str"/>
8.              <dhtmlx:column name="Author" sort="na"/>
9.              <dhtmlx:column name="Price" align="right" sort="int"/>
10.            </dhtmlx:grid>
11.            <!-- Nested Grid -->
12.          </dhtmlx:tab>
13.         <dhtmlx:tab name="a2" text="Tab-a2" id="tab_a2"/>
14.      </dhtmlx:tabbar>
15. </dhtmlx:body>

The Internationalization provides the ability to translate the labels in the user language. 

The tag library uses standard java resource bundles to store labels. The Java Tag Library provides fine-grained role and permission Security support. When a security constraint has been specified, the tag detects which code must be generated reflecting the security constraint to the component behavior.

1. <dhtmlx:body name="initializeDHTMLX" imagePath="imgs/">
2.      <dhtmlx:tabbar name="tabbar" id="document.body">
3.         <dhtmlx:tab name="a1" text="Tab-a1" hasRole="manager"/>
4.         <dhtmlx:tab name="a2" text="Tab-a2"/>
5.      </dhtmlx:tabbar>
6. </dhtmlx:body>

The library provides a SecurityContext interface which can be used for custom security implementation, specifying the implementation classname into a system variable.

Detailed information is available at: http://www.mylaensys.com/dhtmlx-java-tags.html