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.


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.