Learning DHTMLX Suite UI: Create your first single-page JavaScript application using multiple DHTMLX components and a touch of HTML5

DHTMLX requires the application be used on a web server to allow all functionality to work. There are several preconfigured web server packages available for downloading on the Internet.

One of the options for Windows is WampServer. It is available at http://www.wampserver.com. For Mac users, one of the popular web server packages is MAMP. It is available at http://www.mamp.info.

Each of these websites provides instructions on using their packages.

Once you have a web server running, you must locate a directory accessible through the web server where you would like to create the application. The examples in this book will be using the root of an installed web server as the application directory and accessing the application at http://localhost/. The book will also refer to the root as the application directory.

Before downloading the DHTMLX components library, we need to create the application directory structure on our web server.

Locate the directory accessible on the web server where you will be hosting the application. This directory will be your application directory.

Now, create a new folder named js in the application directory. Inside the js folder, create a new folder named application and another named dhtmlx. Your directory structure should appear as shown in the following figure:

We will place all of the JavaScript files that we create for the application inside the application folder. The DHTMLX library code will be placed inside the dhtmlx folder.

Now, we are going to download the DHTMLX library from their website and select which files will be used.

Open up your favorite web browser and navigate to www.dhtmlx.com. Here you will see a Download link in the menu. Click on the link. You should now see a page that looks like the following screenshot:

We want to download the entire library of components. DHTMLX calls this the Suite. Locate the Download link on the page for the Standard Edition of the Suite and click on the link. This will begin the download of a ZIP file. Download it to a location other than the application directory so that we can extract and choose which files we will use.

Open the extracted folder in your file manager to view its contents. You will see that it contains many folders, a license file, a readme file, an index.html file, and several more ZIP files.

The folders you see contain the individual components, which...

The first application file is the app.js file. This will contain all of the JavaScript to create the components and interactions.

Let's start by creating the app.js file in the js/application directory.

Inside this file, add a config object at the top as shown in the following snippets:

var config = {
   imagePath: "js/dhtmlx/imgs/",
   iconPath: ""
}

This config object contains the global properties for the DHTMLX components. The imagePath property is the path where the images reside for the components styling. The second one which we left blank is the path where the icons will be stored. Icons can be used in several different components like the Modal Window header and the toolbar buttons.

Icons do not come with DHTMLX and have to be added from a free or purchased icons library.

The next file which we will create for the application is the storage.js file. This file will contain the mini data access layer that will speak to HTML5 localStorage. It will contain all of the CRUD methods for the users and displays.

Now, create a new JavaScript file in the js/application directory named storage.js. We will add code to this later.

Next, we will add an HTML file that will join the application code together.

The application will be accessed through the index.html file located in the root of the application directory. We will set this up now.

In the root of the application directory, add a new file named index.html. This should be accessible from http://localhost/index.html.

Now, add the markup for an HTML5 document and include the external DHTMLX files:

<!DOCTYPE html>
<html lang="en">
   <head>
   <title>Users</title>
   <link href="js/dhtmlx/dhtmlx.css" type="text/css" 
      rel="stylesheet" />  
   <style>
      /* layout css */
      html, body { height: 100%; width: 100%; }
   </style>    
<script src="js/dhtmlx/dhtmlx.js"></script>
<script src="js/application/storage.js"></script>
<script src="js/application/app.js"></script>
   </head>
   <body>    
</body>
</html>

We now have the necessary file structure and the index.html file created. This file includes the external DHTMLX CSS and JavaScript files for the application.

Next, we will talk about the Chrome developer tools and test if the DHTMLX library files were included correctly.

Open the Chrome web browser and navigate to http://localhost/ or http://localhost/index.html, loading the index.html file.

You should see a blank page displayed.

To make JavaScript development easy, Chrome provides the developer tools. This provides many useful tools for developing applications on the Web. The tool that we will focus on is the console. There are two ways to access the Chrome developer tools console window: through the Chrome menu or through keyboard shortcuts. Let's use the keyboard shortcuts approach. On Windows and Linux, the keyboard shortcut is Ctrl + Shift + J, and for Mac, it is Cmd + Opt + J. With the provided keyboard shortcuts, open the developer tools console window...

In this chapter, we covered downloading the DHTMLX Suite and the local documentation. We also created all of the necessary files to start the application, and explored using the Chrome developer tools. We touched on global configuration variables and what the storage file will be used for. You should be pretty comfortable for future chapters when asked to open one of these files or developer tools to add lines of code.

In the next chapter, we will start writing code that will access the storage and create the data structures for the components.