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:
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.
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.
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:
OUTPUT: You've built User Interface
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):
<!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:
dhx.ui({ ..\\ here you will place any component you would like to place on a page })
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.