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:
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.
Components' documentation has the similar structure to simplify searching. The mandatory sections are:
The situation: you have to create grid, fill it with data and make sorting.
The solution:
Server-side work is described here. So, if you need to 'take' data from or 'pass' data to server - follow one of its links.
We've already mentioned how-tos. Exactly here, you can find information concerning components actions.
Here we collectes tutorials, one of which you are reading right now.
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.
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).
As any other library, DHTMLX Touch requires some included files (containing its functionality). In our case these are:
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>
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,
The situation: you have to create a simple contact book. You decided that the front-end of the app will contain:
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.