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