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 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.
Components' documentation has the similar structure to simplify searching. The mandatory sections are:
The situation: you have to create a 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 collects tutorials, one of which you are reading right now.
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.
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/.
As any other library, DHTMLX Touch requires some included files (containing its functionality). In our case these are:
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>
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:
dhx.ui({ ..\\ here you will place all your components })
The situation: you have to create a simple contact book. You decided that the front-end of the app would contain:
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", }] }] }] }) |