Advanced Search

Creating a Mobile App with PhoneGap and Webix

/ Published in: JavaScript
Save to your folder(s)
This step-by-step tutorial describes how to build an HTML5-based mobile web app by means of Webix library (open source, GPL) and PhoneGap framework. As a result you’ll get an awesome native app for Android devices with rich UI and high performance.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ;%JAVA_HOME%\bin;%ANT_HOME%\bin
  2. ;C:\Development\adt-bundle\sdk\platform-tools;C:\Development\adt-bundle\sdk\tools
  3.  
  4. phonegap create myapp
  5. <link rel="stylesheet" type="text/css" href="webix/skins/touch.css">
  6. <script type="text/javascript" src="webix/webix.js"></script>
  7. webix.ready(function(){
  8.     var toolbar = { view:"toolbar",
  9.         elements:[
  10.             { view:"search", value:"", on:{
  11.                 onTimedKeyPress:function(){
  12.                     $$('list').filter("firstname", this.getValue());
  13.                 }
  14.             }}
  15.         ]
  16.     };
  17.  
  18.     var list = { 
  19.         view:"list", id:"list", select:true,
  20.         template:"html->item_list",
  21.         url:"contacts.json",
  22.         on:{
  23.             onItemClick:function(id){
  24.                 $$('details').show();
  25.                 $$('details').setValues(this.getItem(id));
  26.             }
  27.         }
  28.     };
  29.  
  30.     var template = { template:"html->item_details", scroll:true, id:"details" };
  31.  
  32.     webix.ui.fullScreen();
  33.     webix.ui({
  34.         rows:[
  35.             toolbar,
  36.             { cells:[ list, template], id:"multiview" }
  37.         ]
  38.     });
  39. });
  40.  
  41. <div id="item_list" style="display:none">
  42.     #firstname# #lastname# <span style='float:right; color:#aaa'>#zip#</span>
  43. </div>
  44.  
  45. <div id="item_details" style="display:none">
  46.     <h2>#firstname# #lastname#</h2>
  47.     <div class='infoline'><h4>Email</h4> #email#</div>
  48.     <div class='infoline'><h4>Phone</h4> #phone#</div>
  49.     <div class='infoline'><h4>Address</h4> #city# #zip#</div>
  50.     <div class='infoline'><h4>Works at</h4> #work#</div>
  51.     <p style='max-width:320px'>#details#</p>
  52. </div>
  53.  
  54.  
  55. [
  56.     {"firstname": "Nero", "lastname": "Perry", "phone": "1 30 449 3970-3976", "city": "Castiglione del Lago", "zip": "93674", "email": "[email protected]", "details": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing lacus. Ut nec urna et arcu", "work": "Eget Lacus Mauris Inc."},
  57.     {"firstname": "Hayden", "lastname": "Knowles", "phone": "1 84 924 2122-4191", "city": "Grimbergen", "zip": "16780", "email": "[email protected]", "details": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing lacus. Ut nec urna et arcu imperdiet ullamcorper. Duis at lacus. Quisque purus sapien, gravida", "work": "Arcu Vivamus Corporation"},
  58.     {"firstname": "Cade", "lastname": "Griffin", "phone": "1 85 309 5226-7368", "city": "Bungay", "zip": "43023", "email": "[email protected]", "details": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing", "work": "Fusce Mollis LLC"}
  59. ]
  60.  
  61. Deploying the app to a device
  62.  
  63. phonegap run android
  64.  
  65. height=device-height, target-densitydpi=device-dpi" />
  66.  
  67.  document.addEventListener("deviceready", function(){
  68.         document.addEventListener("backbutton", function(){
  69.             if (!$$("list").isVisible())
  70.                 $$("list").show();
  71.         }, false);
  72.     }, false);
  73.  
  74.  
  75. Back button
  76.  
  77. { 
  78.     view:"toolbar",
  79.     id:"mainbar",
  80.  
  81.     visibleBatch:"main", 
  82.     elements:[
  83.         { view:"search", value:"", on:{
  84.             onTimedKeyPress:function(){
  85.                 $$('list').filter("firstname", this.getValue());
  86.             }
  87.         }, batch:"main" },
  88.         { view:"button", value:"Back", width:150, batch:"details", click: function(){
  89.             $$("list").show();
  90.             $$("mainbar").showBatch("main");
  91.          }}
  92.     ]
  93. };
  94.  
  95. onItemClick:function(id){
  96.     $$("mainbar").showBatch("details");
  97.     $$('details').show();
  98.     $$('details').setValues(this.getItem(id));
  99. }

URL: http://webix.com/blog/creating-a-mobile-app-with-phonegap-and-webix/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.