Start coding with DHTMLX TOUCH

Developing an app with DHTMLX TOUCH as in any other library can be divided into some stages. We decided to separate out 3 key points:

  • Requirements
  • Designing
  • Coding

These stages're built on one another, taking the outputs from the previous stage, adding some additional stuff and producing result used as the input for the next step.

Requirements

Generally, at this stage developers perform requirement analysis, establish basic structure and evaluate feasibility. We won't enumerate all you can perform, make and find out herein, confined ourselves by mentioning two most important points which will be enough for your first app:

1. Define the device your app will work on and evaluate feasibility of usage such device.
2. Define common functionality of the app, its main purpose.

OUTPUT: You sure that the app will work correctly on the device in question, clearly understand what it will make and roughly see how it will look.

Related documentation

Designing

INPUT: You thoroughly realize which functionality the app must have.

Now we should define the components that will implement this functionality. We can divide this stage into 2 steps:

1. Building app architecture
At this step you should define a basic container where you will place your components. All the details you can find in the related chapter - Building app architecture.

2. Choosing components
Here you should select components for you app. You can make it guiding by the related documentation (Components) or using online UI Designer. The second variant is preferable by 2 reasons:

  1. You can place, remove, customize components in realtime choosing the most appropriate composition.
  2. You can immediatly get script of the developed interface.

OUTPUT: You've built User Interface

Related documentation

Coding

INPUT: You have User Interface of the app.

1. Start this stage with the tools you can use while developing. You can find them here.

2. Then, include the required files and tags
As any other library, DHTMLX Touch requires some included files. In our case these are (please note, you must specify relative paths):

  • touchui.css
  • touchui.js

    We recommend to add meta tag as well. It'll protect you from zooming on a touch device.
    We recommend to specify the HTML5 document type for your page, in order to HTML5-based apps work correctly.

    <!DOCTYPE HTML>// specifies document type
    <html>
        <head>
            <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">// meta tag
    	<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css"> // dhtmlx touch file	
    	<script src="../../../codebase/touchui.js" type="text/javascript"></script>  // dhtmlx touch file
        </head>
        <body>
        ...
        </body>
    </html>

3. Now, some basic tips:

  • Any TOUCH component in program exists inside view component (it's a basic component-container) and can't be used independently. So, whatever component you're going to place on the page you should place it into view.

    dhx.ui({
    ..\\ here you will place any component you would like to place on a page
    })
  • Specify id for referring to element (it can be both master component and control). $$(“someID”) lets you refer to any element.
  • View's parameter container lets you place component in the desired container.
  • The alternative to 'onDocumentReady' event is dhx.Ready(function(){…}) function. So, to ensure that your code will be executed as soon as the page finishes loading, put all your code inside this function.
  • Remember about tutorials (read more here). They'll provide you with detailed information that is extremely important when you just start to use DHTMLX TOUCH.

4. By next step, you need to add definitions of the components you chose at the previous stage - in other words, build interfaces which will be used in the application.

5. Then, you will add the needed event handlers and functions to interact with user and between components on the page. Details you can find in the related chapters - Event handling and Common tasks.

6. Server-side integration
Most probably you will need to 'communicate' with server to get and send data to. So, next you should realize server-side interactions. See details in the related chapter -Server-side Integration.

OUTPUT: Ready-to-use application.

Related documentation