Related sample: Task Manager
App is intended for using on iPad.
Purpose - task manager.
Features:
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.
To implement the functionality in question the following components were chosen:
Preview browser - Google Chrome.
<!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>
dhx.ready(function(){ dhx.ui({ rows:[{ view:"toolbar", ... }, { cols:[{ view:"list", ... }, { view:"form", ... } ]} ]})})
3 functions (built-in button click handlers. See details here):
Server-side Integration:
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