Part 1. Create app's interface? Easily!

To make your first work with DHTMLX Touch as easy as possible we've prepared a set of tips showing the most essential points of the library.

Shortly, they look as:

  • The first tip: documentation.
  • The second tip: debugging tools.
  • The third tip: included files.
  • The fourth tip: start developing.

The first tip. Documentation

Documentation is your main assistant during development. It contains all the basic information needed for the apps creation and more than 30 examples with detailed explanation. That's why it's extremely important to be able to find the desired information quickly.

A little documentation digest.

Components:

Components' documentation has the similar structure to simplify searching. The mandatory sections are:

  • Initialization - how to create a component.
  • Parameters - all the main component's parameters.
  • Related how-tos - the articles, listed here, will guide you through basic actions you can perform on a component.

The situation: you have to create a grid, fill it with data and make sorting.

The solution:

  1. Follow the link Grid from Components page.
  2. Use information from Initialization section to create and fill up the grid.
  3. Then, go to the section Related how-tos and search the needed action (in our case, it's How to implement sorting).
  4. If you don't find the desired information, follow the link The full list of how-tos. Most probably, you can find it there.

Server-side integration.

Server-side work is described here. So, if you need to 'take' data from or 'pass' data to server - follow one of its links.

How-tos

We've already mentioned how-tos. Exactly here, you can find information concerning components actions.

Acquitance with library

Here we collects tutorials, one of which you are reading right now.

Reference

In this chapter we placed API reference which contains a full list of the methods, parameters and events used in the library.
Here you can also find links to useful online tools.

The second tip. Debugging tools

At the beginning of working with the library you certainly face errors. That's why it's important to have a right instrument for their capture.
As the most suitable browser for developing DHTMLX Touch apps is Google Chrome, we recommend to use for debugging its built-in tools.
Description of all available in Google Chrome developer tools you can find at www.code.google.com/intl/ru-RU/chrome/devtools/.

The third tip. Included files

As any other library, DHTMLX Touch requires some included files (containing its functionality). In our case these are:

  • touchui.css
  • touchui.js

Write them into <head> tag of your page. Remember, you must specify relative paths.

We recommend to add meta tag as well. It'll protect you from zooming on a touch device.

<html>
    <head>
        <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
	<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css">		
	<script src="../../../codebase/touchui.js" type="text/javascript"></script>
    </head>
    <body>
    ...
    </body>
</html>

The fourth tip. Start developing

Firstly, before developing, carefully think about future elements and their disposition: which components to use, what functionality they must implement (to estimate available API) and where they will be located on the page. And only after, start developing.

Our notes:

  • Whatever component you're going to create it must be placed into view. View defines page appearance and contains all its elements.
dhx.ui({
..\\ here you will place all your components
})
  • Declare elements subject to their nesting, starting with the base (see common declaration details).
  • Specify id for refering to element (it can be both component and its control). $$(“someID”) lets you refer to any element.
  • You can attach an event to any component but not to its controls.
  • The alternative to onDocumentReady event is dhx.Ready(function(){…}). It will ensure that your code will be executed as soon as the page finishes loading.
  • You can define structure of the page in some var and then just put this var into view (dhx.ui(var)).

The situation: you have to create a simple contact book. You decided that the front-end of the app would contain:

  • a toolbar in the top (add(delete) contact buttons)
  • a grid contained a list of contacts
  • a detailed form

The solution:

Create a view
dhx.ui({ //just a clean page
})
Create a layout
dhx.ui({
	rows:[ //the first (top) row
	      {	
	      },
	      {cols:[ //divides the second row into 2 columns
		     { // the first column 
		     },
		     { // the second column
		     }]
	      }]
})
Create a toolbar
dhx.ui({
        rows:[
              { view:"toolbar", type:"MainBar", // creates toolbar in the first row
                data:[{type:"roundbutton", label:"Add"}, // specifies toolbar controls 
                      {type:"roundbutton", label:"Delete"}]
              },
              {cols:[ 
	             {
	             },
	             { 
	             }]
        }]
}) 
Create a grid
dhx.ui({
	rows:[
	      { view:"toolbar", type:"MainBar", 
		data:[{type:"roundbutton", label:"Add"},
		      {type:"roundbutton", label:"Delete"}]
	      },
	      {cols:[{ 
	             },
                     // creates grid in the second column of the second row
                     {id:"grid", view:"grid", header:true,
		                  fields:[{ id:"Name", // specifies the first column of the grid, its id and name
			                    label:"Name",
 			                  },
			                  { id:"email", //specifies the second column of the grid
			                    label:"email",
			                  }]
		     }]
	      }] 
}) 
Create a form
dhx.ui({
	rows:[
	      { view:"toolbar", type:"MainBar", 
		data:[{type:"roundbutton", label:"Add"},
		      {type:"roundbutton", label:"Delete"}]
	      },
	      {cols:[ //creates a form with 2 text fields in the first column of the second row
                     {view:"form",data:[{type:"text", label: 'Name', position: "label-left"}, 
				       {type:"text", label: 'email', position: "label-left"}]  
	             },
		     {id:"grid", view:"grid", header:true,
		                  fields:[{ id:"Name",
			                    label:"Name",
 			                  },
			                  { id:"email",
			                    label:"email",
			                  }]
		     }] 
	      }] 
}) 

Full code of the solution.