DHTMLX Touch documentation

Quick Start with DHTMLX Touch

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: Firebug.
  • The third tip: Included files.
  • The forth tip: Start of developing.

The first tip. Documentation

Documentation is your main assistant during development. It contains all the basic information needed for the apps creating 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 on the page
  • 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 grid, fill it with data and make sorting.

The solution:

  1. Follow the link Grid from the 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 collectes tutorials, one of which you are reading right now.

Reference

In this chapter we placed API reference which contains the 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. Firebug

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.
At the present time, the handiest tool is Firebug (www.getfirebug.com). Installed Firebug lets you to find out any errors (errors presence is shown in the bottom left corner).
The only shortcoming of the Firebug is that it works just in Firefox (and other browsers based on Mozilla).

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 the <head> tag of your page. Remember, you must specify relative pathes.

<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" media="screen" charset="utf-8">		
	<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    ...
    </body>
</html>

The fourth tip. Start to developing

Firstly, before developing, carefully think about future elements and their placement. And only after, start developing.
Any component starts from view. The following codeline creates it:

dhx.ui({
..
})

Any component must be placed into view, i.e. component defining must be included in dhx.ui({}).
Please,

  • Know the base class of the component. If it's layout, component defining has to succeed cols(rows) parameters.
  • Specify id for refering to element (it can be both component and its control). $$(“someID”) lets you refer to any element.
  • Note, that the alternative to onDocumentReady event is dhx.Ready() function.
  • You can define structure of the page in some var and then just put this var in view (dhx.ui(var)).

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

  • toolbar in the top (add(delete) contact controls)
  • grid contained a list of contacts
  • detailed form (name, surname and phone)

The solution:

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

The full code of the solution.

That were the most essensial tips and we hope that they help you to avoid a number of errors.