Techumber
Home Blog Work

Getting Started With DHTMLX

Published on April 8, 2014

There are so many libraries coming out every day to build a client side web application on Web Browsers. Few of them focus on building application along with amazing effects (Jquery, dojo), some only focus on DOM manipulation. There are few libraries to build widget type of applications. For example KendoUI, JqueryUI. But the problem with them is we need to access DOM. There are some libraries by with we can create a rich widget type client-side application without manipulating any DOM. One such library is DHTMLX.

Getting Started

There is two DHTMLX suite edition available for us. One is standard edition which comes under the GPL-licensed project for free. You can use it for your personal as well as commercial projects. Second is a professional edition. You need to buy a license for this. Both are almost same except for Professional edition we will get customer support and few extra features and components. We will go ahead with the standard edition. Let’s download our edition from //www.dhtmlx.com/x/download/regular/dhtmlxSuite.zip (version 3.6 at the time of writing this article). Once you downloaded you edition extracts it. You will see separate DHTMLX components like dhtmlxAccordion, dhtmlxAjax, etc… in that folder. These are to include a single feature in your application. Let’s say we want to use all features in our applications. So to include all features extract dhtmlx_std_full.zip which is inside your extracted standard edition. Inside it, you will be having dhtmlx.js, dhtmlx.css, imgs and types. Now create a folder called codebase3.5 in your application and move all these filed and folders in that folder Make Your overall application structure as below.

app
|
|-codebase3.6
|-js
|-app.js
|-css
|-app.css
|-index.html

One Important note is open your DHTMLX application only from a localhost(HTTP protocol) not from the file system(file:// protocol not support).

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Dhtmlx Application</title>
    <link rel="stylesheet" type="text/css" href="codebase3.6/dhtmlx.css" />
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script type="text/javascript" src="codebase3.6/dhtmlx.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        App.init();
      };
    </script>
  </head>

  <body></body>
</html>

This is your minimal HTML code you need to write. From here we won’t modify anything in this file.

app.css

* {
  border: 0;
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}

This very important to give your body with and height to 100%, Otherwise DHTML component won’t render properly. From now onwards we’ll write all code samples on app.js file. Let’s first write our minimal app.js code in a modular pattern.

app.js

//app.js file
var App = (function() {
  //our private functions and variables

  //our public functions and variables
  return {
    init: function() {
      console.log('initilizing app.js');
    },
  };
})();

Working with Containers

We have different components like Accordion,Calender,etc. We need some thing to hold those components. In DHTML we basically use two major type of containers to hold our components. 1)Layouts 2)Windows Let’s start with layouts concepts. Change your app.js file as below.

//app.js file
var App = (function() {
  //our private functions and variables
  var dhxLayout;
  //our public functions and variables
  return {
    init: function() {
      this.buildUI();
    },
    buildUI: function() {
      dhxLayout = new dhtmlXLayoutObject(document.body, '1C');
    },
  };
})();

This code will give your single column attached to your HTML body. Here 1C represents layout type DHTMLX support number of different types of layouts. To see list of support layout have a look at //dhtmlx.com/docs/products/dhtmlxLayout/ or //www.dhtmlx.com/docs/products/dhtmlxLayout/samples/02_conf/01_patterns.html If you open index.html in your browser you should get dthmlx tutorial web application development Now let’s add a component to our layout.

//app.js file
var App = (function() {
  //our private functions and variables
  var dhxLayout, loginFormJson;
  //our public functions and variables
  return {
    init: function() {
      this.buildUI();
    },
    buildUI: function() {
      dhxLayout = new dhtmlXLayoutObject(document.body, '1C');
      this.addLoginForm();
    },
    addLoginForm: function() {
      loginFormJson = [
        {
          type: 'settings',
          position: 'label-top',
        },
        {
          type: 'fieldset',
          name: 'Login',
          label: 'Login',
          list: [
            {
              type: 'input',
              name: 'uname',
              label: 'Username:',
            },
            {
              type: 'password',
              name: 'pass',
              label: 'Password:',
            },
            {
              type: 'button',
              name: 'login',
              value: 'Login',
            },
          ],
        },
      ];
      loginForm = dhxLayout.cells('a').attachForm(loginFormJson);
    },
  };
})();

dhtmlx tutorial web application development Here, loginFormJson is formed structure we want to create. We can create formStucture in either XML or JSON. But for the sake of simplicity and fast rendering always use JSON format. To add any component to layout first we need to capture a cell and then only we should attach our component. So, now we attached our login Form to your layout. Similar way we can attach any component to the layout.

Window Container

The second type of container is dhtmlxWindow. This is very useful one. Let’s modify the above code.

//app.js file
var App = (function() {
  //our private functions and variables
  var dhxWindowObj;
  //our public functions and variables
  return {
    init: function() {
      this.buildUI();
    },
    buildUI: function() {
      dhxWindowObj = new dhtmlXWindows();
      dhxWindowObj.setImagePath('codebase3.6/imgs/');
      var win = dhxWindowObj.createWindow('MyWindow', 500, 100, 600, 600);
    },
  };
})();

dthmlx tutorial web application development To deal with dhtmlxWindow first we need to great a window abject. setImagePath will be used to point where DHTMLX imgs and icons reside. By default, it will point to codebase but since we changed to codebase 3.6 we need to set path properly. We use the createWindow function of dhxWindow object to create dhx window. In above code “MyWidow” will be the name of the window we will use it to identify the window in our application. If we want to access our created window we will use dhxWindowObj.window(“MyWindow”)code. 500 will be the distance from the left side. 100 will be the distance from the top. 600X600 will be window width and height. Now, let’s add the form that we added to the layout before.

//app.js file
var App = (function() {
  //our private functions and variables
  var dhxWindowObj, loginForm;
  //our public functions and variables
  return {
    init: function() {
      this.buildUI();
    },
    buildUI: function() {
      dhxWindowObj = new dhtmlXWindows();
      dhxWindowObj.setImagePath('codebase3.6/imgs/');
      var win = dhxWindowObj.createWindow('MyWindow', 500, 100, 600, 600);
      this.addLoginForm();
    },
    addLoginForm: function() {
      loginFormJson = [
        {
          type: 'fieldset',
          name: 'Login',
          label: 'Login',
          list: [
            {
              type: 'input',
              name: 'uname',
              label: 'Username:',
            },
            {
              type: 'password',
              name: 'pass',
              label: 'Password:',
            },
            {
              type: 'button',
              name: 'login',
              value: 'Login',
            },
          ],
        },
      ];
      loginForm = dhxWindowObj.window('MyWindow').attachForm(loginFormJson);
    },
  };
})();

dhx web application development Similar to Layout Concept we can add any control to the window.

Conclusion

This very beginner level tutorial to interduce you DHTMLX. I will write a more advanced level post on DHTMLX soon. Stay tuned.