Step-by-step example


Related sample: Task Manager

Requirements

Device an app will work on

App is intended for using on iPad.

Functionality

Purpose - task manager.
Features:

  • Ability to add, edit, delete tasks.
  • Data's stored in database.
  • Task is characterized by subject, description, priority (high, medium, low) and 'due-by' date.

Designing

App's architecture

To be handy and useful, app should show at the same time a list of existed tasks and details of a single selected task. Layout-based architecture is more appropriate in this case.

Used Components

To implement the functionality in question the following components were chosen:

  • toolbar - to name the app and present its main purpose.
  • list - to show existed tasks.
  • form - to place elements for presenting, editing details of tasks.
    • text - subject of task
    • textarea - description of task
    • richselect - dropdown list with priority values: high, medium, low
    • datepicker - 'due-by' date
    • 3 buttons - buttons “Add”, “Delete” and “Save”. “Add” allows to add a new row. “Delete” allows to delete a row. “Save” allows to save changes made in form.

Coding

Development tools

Preview browser - Google Chrome.

Included files and basic tips

<!DOCTYPE HTML>
<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>
  <script>
       dhx.ready(function(){
            // your basic code will be here
       })
  </script>
</body>
</html>

Components definitions

dhx.ready(function(){
            dhx.ui({
                    rows:[{ view:"toolbar", 
                            ...
			  },
			  { cols:[{ view:"list", 
				    ...
  				  },
				  {
				    view:"form", 
				    ...
                                  }
	                  ]}
]})})

Functions and server-side integration

3 functions (built-in button click handlers. See details here):

  • add_task ( adds a new row to the list)
  • delete_task ( deletes task from the list and database)
  • save_task ( saves changes made in form into list and database )

Server-side Integration:

  • dp - dataProcessor that simplifies server-side work and the method bind() that links list with form See details here.

Server-specific code must be put into dhx.ready(). Functions' code must be placed out of dhx.ready().

// dataProcessor and binding
var dp = new dhx.DataProcessor({
		master:$$('mylist'),
		url:"xml/tasks.php"
});
 
$$('myform').bind('mylist');
 
// functions
function save_task(){
	$$('myform').save();
};
 
function add_task(){
	var newRecord = {id:dhx.uid()};
	$$("mylist").add(newRecord);
};
 
function delete_task(){
	$$('mylist').remove($$('mylist').getSelected());
};

Related sample: Task Manager