使用PhoneGap和Webix创建移动应用程序

Posted 2021-02-23

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.

;%JAVA_HOME%in;%ANT_HOME%in
;C:Developmentadt-bundlesdkplatform-tools;C:Developmentadt-bundlesdk	ools
 
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 list = { 
        view:"list", id:"list", select:true,
        template:"html->item_list",
        url:"contacts.json",
        on:{
            onItemClick:function(id){
                $$('details').show();
                $$('details').setValues(this.getItem(id));
            }
        }
    };
 
    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": "[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."},
    {"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"},
    {"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"}
]
 
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));
}