Posted By

kengajunior on 01/20/15

Tagged

Versions (?)

Last Edited at 01/20/15 10:04pm

Statistics

Viewed 1063 times

Favorited by 0 user(s)

Related snippets

Creating a Mobile App with PhoneGap and Webix

/ Published in: JavaScript

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.

Highlighted TextExpand

;%JAVA_HOME%\bin;%ANT_HOME%\bin
;C:\Development\adt-bundle\sdk\platform-tools;C:\Development\adt-bundle\sdk\tools

phonegap create myapp
<link rel="stylesheet" type="text/css" href="webix/skins/touch.css">
<script type="text/javascript" src="webix/webix.js"></script>
webix.ready(function(){
    var toolbar = { view:"toolbar",
        elements:[
            { view:"search", value:"", on:{
                onTimedKeyPress:function(){
                    $$('list').filter("firstname", this.getValue());
                }
            }}
        ]
    };

var template = { template:"html->item_details", scroll:true, id:"details" };

webix.ui.fullScreen();
    webix.ui({
        rows:[
            toolbar,
            { cells:[ list, template], id:"multiview" }
        ]
    });
});

<div id="item_list" style="display:none">
    #firstname# #lastname# <span style='float:right; color:#aaa'>#zip#</span>
</div>

<div id="item_details" style="display:none">
    <h2>#firstname# #lastname#</h2>
    <div class='infoline'><h4>Email</h4> #email#</div>
    <div class='infoline'><h4>Phone</h4> #phone#</div>
    <div class='infoline'><h4>Address</h4> #city# #zip#</div>
    <div class='infoline'><h4>Works at</h4> #work#</div>
    <p style='max-width:320px'>#details#</p>
</div>

[
    {"firstname": "Nero", "lastname": "Perry", "phone": "1 30 449 3970-3976", "city": "Castiglione del Lago", "zip": "93674", "email": "et@Nunc.com", "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."},
    {"firstname": "Hayden", "lastname": "Knowles", "phone": "1 84 924 2122-4191", "city": "Grimbergen", "zip": "16780", "email": "ante@montesnascetur.co.uk", "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"},
    {"firstname": "Cade", "lastname": "Griffin", "phone": "1 85 309 5226-7368", "city": "Bungay", "zip": "43023", "email": "Class.aptent@Cras.edu", "details": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed tortor. Integer aliquam adipiscing", "work": "Fusce Mollis LLC"}
]

Deploying the app to a device

phonegap run android

height=device-height, target-densitydpi=device-dpi" />

document.addEventListener("deviceready", function(){
        document.addEventListener("backbutton", function(){
            if (!$$("list").isVisible())
                $$("list").show();
        }, false);
    }, false);

Back button

{ 
    view:"toolbar",
    id:"mainbar",

visibleBatch:"main", 
    elements:[
        { view:"search", value:"", on:{
            onTimedKeyPress:function(){
                $$('list').filter("firstname", this.getValue());
            }
        }, batch:"main" },
        { view:"button", value:"Back", width:150, batch:"details", click: function(){
            $$("list").show();
            $$("mainbar").showBatch("main");
         }}
    ]
};

onItemClick:function(id){
    $$("mainbar").showBatch("details");
    $$('details').show();
    $$('details').setValues(this.getItem(id));
}

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.