cordova - guide - app development -...

Cordova-Guide-AppDevelopment-BasicsDrNickHayward

AbriefoverviewandintroductiontoApacheCordovaapplicationdevelopmentanddesign.

Contents

introCordovaCLI-buildinitialprojectCordovaApp-structurerecap-appdirectory

www directoryindex.html

addCordovaspecificsaddsomejQueryaddsomejQueryMobile

jQueryMobile-testtransitionsjQueryMobile-navigation

introexamplenavigation

jQueryMobile-usingwidgetslistviewslistviews-examplelistviews-addingsomeformattedcontentlistviews-updatedexample

Cordovaapp-currentdesign

CordovaCLI-buildinitialproject

CordovaappdevelopmentbeginswithcreationofanewappusingtheCordovaCLItool.

Anexamplepatternandusageisasfollowsforinitialprojectcreation.

cd/Users/ancientlives/Development/cordovacordovacreatebasiccom.example.basicBasiccdbasic

createsnewprojectreadyfordevelopment

cordovaplatformaddandroid--savecordovabuild

addssupportfornativeSDK,Androidthenbuildstheprojectreadyfortestinganduseonnativedevice

cordovaemulateandroid

outputscurrentprojectappfortestingonAndroidemulator

CordovaApp-structurerecap-appdirectory

Anewlycreatedprojectwillincludethefollowingtypeofstructurefordesignanddevelopment.

e.g.

|-config.xml|-hooks|-README.md|-platforms|-android|-platforms.json|-plugins||-android.json||-cordova-plugin-whitelist||-fetch.json|-res||-icon||-screen|-www||-css||-img||-index.html||-js

initially,ourmainfocuswillbethe www directory

www directory

Then,anexample www directorywillbeasfollows,

e.g.

|-www||-css||-index.css||-img||-logo.png||-index.html||-js||-index.js

index.html

Theinitial index.html filewillbeasfollows.

<html><head><metahttp-equiv="Content-Security-Policy"content="default-src'self'data:gap:https://ssl.gstatic.com'unsafe-eval';style-src'self''unsafe-inline';media-src*"><metaname="format-detection"content="telephone=no"><metaname="msapplication-tap-highlight"content="no"><metaname="viewport"content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><linkrel="stylesheet"type="text/css"href="css/index.css"><title>HelloWorld</title></head><body><divclass="app"><h1>ApacheCordova</h1><divid="deviceready"class="blink">

<pclass="eventlistening">ConnectingtoDevice</p><pclass="eventreceived">DeviceisReady</p></div></div><scripttype="text/javascript"src="cordova.js"></script><scripttype="text/javascript"src="js/index.js"></script></body></html>

Thefirstthingwe'lldoisclearoutthebodyofourHTMLdocument,andthenstartaddingsomeofourowncontentandstructure.The cordova.js scriptreferenceisalwaysaddedtoanapp,butitisnotsomethingweneedtoexplicitlyaddtotheappinstallitself.Itisprovided,bydefault,aspartoftheCordovacreateandbuildforacurrentproject.

Anexampleupdatedfilemightbeasfollows,

<body><div><h3>TripNotes</h3><p>welcometotripnotes...collectandsavetraveldata</p></div><scripttype="text/javascript"src="cordova.js"></script><scripttype="text/javascript"src="js/index.js"></script></body>

Alackofstylingwillbeanissue.

Image-CordovaApp-Basicv0.01

addCordovaspecifics

Bydefault,theCordovacontainerfortheapplicationwillexposenativeAPIstoourwebapplicationrunningintheWebView.However,ingeneraltheseAPIswillnotbeavailableuntilanapplicablepluginhasbeenaddedtotheproject.ThecontaineralsoneedstoperformsomepreparationbeforetheAPIscanbeused.

Tohelpusasdevelopers,Cordovainformsuswhenthecontainer,andassociatedAPIs,arereadyforuse.Itfiresaspecificevent,calledthe deviceready event.Ineffect,anylogicwithinourapplicationthatrequiresuseofCordova

APIsshouldbeexecutedafterthis deviceready notificationhasbeenreceived.

addsomejQuery

addtofootof <body>

<scripttype="text/javascript"src="js/jquery.min.js"></script>

addtestto trip.js file

functiontripNotes(){alert("JSWorking...");}

$(document).ready(tripNotes);

WecanalsoaddsomejQuery,oranotherrequiredJSlibraryorplainJS,andthenusetheapp'scontainerwithstandardJSfunctions.Forexample,outputtingasimplealert.


addsomejQueryMobile

update head withlocaljQueryMobileCSS

<head>...<linkrel="stylesheet"type="text/css"href="css/jquery.mobile.min.css"/></head>

update body forbasicapp

<body><divdata-role="page"><divdata-role="header"><h3>tripnotes</h3></div><divrole="main"class="ui-content"><p>recordnotesfromvariouscitiesandplacedvisited..</p></div><divdata-role="footer"><h5>footer...</h5></div></div><scripttype="text/javascript"src="cordova.js"></script><scripttype="text/javascript"src="js/index.js"></script><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/jquery.mobile.min.js"></script><scripttype="text/javascript"src="js/trip.js"></script></body>

jQueryMobile-testtransitions

WecanalsoaddsomejQueryMobiletransitions,andtestsomebasicinternalnavigation.

update index.html toaddpagecontainers,transitions...

<divdata-role="page"id="page1">

<divdata-role="header"><h3>tripnotes</h3><p>recordnotesfromvariouscitiesandplacedvisited..</p></div><divrole="main"class="ui-content"><p>View-<ahref="#page2"data-transition="slidedown">page2</a></p></div><divdata-role="footer"><h5>footer-page1</h5></div></div><divdata-role="page"data-dialog="true"id="page2"><divdata-role="header"><h3>page2</h3></div><divrole="main"class="ui-content"><p><ahref="#page1"data-rel="back">Cancel</a></p></div><divdata-role="footer"><h5>footer-page2</h5></div></div>

jQueryMobile-navigation

WemayalsousejQueryMobiletomanagethenavigationstackwithintheCordovaapp.

intro

So,we'vejustaddedsomejQueryMobiletoaninitialCordovaapp.Thisincludedsomeinitialpages,transitions,andbasicnavigation.

TohelpusbuildthisoutwithjQueryMobile,forexample,we'llbrieflyneedtolookatnavigationwithinourapps.Forthepurposesofmobiledevelopment,thisnavigationthankfullyfollowsanasynchronouspattern.

So,navigationinjQuerymobile,forexample,isbaseduponloadingpagesintotheDOMusingAJAX.Thiswillmodifythepage'scontent,andthenre-renderfordisplaytotheuser.Itwillalsoincludeasetofaestheticallypleasing,anduseful,animationstohelpinformtheuserofchangesinstate,andthereforeappropriateupdatesinthecontent.

Thisnavigationsystemeffectivelyhijacksalinkwithinapage'scontentcontainer,andthenroutesitthroughanAJAXrequest.Thebenefitfordevelopersisaparticularlyuseful,andalmostpainless,approachtoasynchronousnavigation.Mostofthetime,wearenotevenawareofthisupdatedrequest.Inspiteofhijackingthelinkrequest,itisstillabletosupportstandardconceptssuchasanchorsanduseofthebackbuttonwithoutbreakingthecoherenceandlogicoftheapplication.

Therefore,jQueryMobileisabletoloadandviewgroupsofdisparatecontentinpageswithinourinitialhomedocument.Inessence,themanycombiningtoformtheonecoherentapplication.

ItssupportforcoreJavaScripteventhandling,inparticularforURLfragmentidentifierswith hashchange andpopstate ,allowstheapplicationtopersist,atleasttemporarily,arecordofusernavigationandpathsthroughthe

content.Wecanalsotapintothisinternalhistoryoftheapplication,andagainhijackcertainpatternstohelpusbetterinformtheuseraboutstatechanges,differentpaths,content,andsoon.

examplenavigation

ThefollowingisanexampleofusingthejQueryMobilestandardnavigatemethod, $.mobile.navigate ,whichisusedasaconvenientwaytotrackhistoryandnavigationevents.

Withthissimpleexample,wecansetourrecordinformationforthelink,effectivelyanyusefulinformationforthelinkoraffectedchangeinstate.Wecanthenlogtheavailabledirectionfornavigation,inthisexamplethefactwecangoback,theurlforthenavstate,andanyavailablehash.Inourexample,thesimpleappendedhashintheurl, #nav1 .

Whatthisallowsustodoiskeepaclearrecordofusertraversalthroughtheapplication,logitasrequiredbygivenstatechanges,andthenuseittoinformourapplication'slogic,ouruser,andsoon.

Demo-jQueryMobilenav

jQueryMobile-usingwidgets

Withinourapp'swebviewcontainer,wecanaddstandardHTMLelementsforanyrequiredcontentcontainers.

Forexample,standardHTMLandHTML5elementssuchas p , headings , lists , sections ,andsoon.

Thankfully,wedon'tnecessarilyhavetobuildthewholeapplicationfromscratch.

jQueryMobileincludesawide-rangeofpre-fabricatedwidgetswecanaddtoourapplications.Thesearenaturallytouch-friendly,andincludecollapsibleelements,forms,responsivetables,dialogs,andmanymore.We'vealreadyseenanexamplewiththeoverall pageContainer widget.

listviews

Agoodexampleofthistypeofpre-fabricatedwidgetisalistview.

jQueryMobilehelpsusstyle,renderandthenmanipulatestandarddataoutputandcollections,includingrenderingoflistsasinteractive,animatedviews.

Theselistsarecodedwitha data-role attribute,aswesawearlierwithapagevalueforadatarole...

data-role="listview"

Thisallowsustostyleandrenderourlistswithadditionaloptionssuchasadynamicsearchfilter.

http://linode4.cs.luc.edu/teaching/cs/demos/422/demo-nav/

Demo-jQueryMobilelistview1Demo-jQueryMobilelistview2

listviews-example

<div><uldata-role="listview"><li>Cannes</li><li>Marseille</li><li><ahref="#page3"data-transition="slide">Monaco</a></li><li>Nice</li></ul></div>

simplelistviewwithslidetransition

<divdata-role="page"id="page3"><divdata-role="header"><h3>page3</h3></div><divrole="main"class="ui-content"><p><adata-rel="back"class="ui-btn">Return</a></p><sectionclass="image-view"><imgsrc="media/images/monaco1.jpg"><section></div><divdata-role="footer"><h5>footer-page3</h5></div></div>

newpageforMonacoimageDemo-jQueryMobilelistview3

Listviewsarealotoffunandveryusefulforeasilyorganisingourdata,aswe'vejustseen.

However,wecanalsousealistviewtoaddfilteringandlivesearchoptionstoourlists.

Wesetasimpleclient-sidefilterbyaddinganattributefor data-filter ,andthensetthevalueto true

data-filter="true"

jQueryMobilewillthenaddasearchqueryinputfieldtothetopofourlistwidget,andsetafilterfortheenteredsearchquery.Effectively,it'sperformingapatternmatchusingapartiallyenteredstringagainststringsinadesignatedlist.Itcanmatchpartialfragmentsofalistitem,andthendynamicallyfilterourlistcontent.

Wecanalsosetsomedefault,helpfultextfortheinputfield.Ourwayofpromptingtheusertointeractwith,andthereforeusethisfeaturecorrectly.

data-filter-placeholder="SearchCities"

Totidyupthepresentationofourlist,wecanalsoaddaninsetusingtheattribute

data-inset="true"

Now,wehaveamuchbetterdesignforourlists,andsomeusefulfilteringoptionsaswell.

Demo-jQueryMobilelistview4

http://linode4.cs.luc.edu/teaching/cs/demos/422/week5/demo1/

listviews-addingsomeformattedcontent

OneofthefunaspectsofworkingwithaframeworksuchasjQueryMobile,andotherssuchastheexcellentIonicframeworkandOnsenUI,isthesimplewaywecanorganiseandformatourdatapresentationsandviews.

Forexample,ifwehaveagroupeddataset,wecanstillpresentitusinglists.However,wecanalsoaddinformativeheadings,linkstodifferentcategorieswithinthisdataset,andsimplestylingtohelpdifferentiatecomponentswithinthelistinterface.

Therefore,westructurethelistasnormal,withsub-headings,paragraphs,andsoon.Then,jQueryMobilegivesusasimpleoptionforsettingcertainlistcontentasanaside.Forexample,

<pclass="ui-li-aside">1image</p>

Therearemanysimilartweaksandadditionswecanaddtohelpimproveorganisationandrenderingoflistdata.Furtherdetailscan,ofcourse,befoundinthejQueryMobileAPI.

listviews-updatedexample

<uldata-role="listview"data-inset="true"><lidata-role="list-divider"role="heading">FrenchCities</li><li><ahref="#page3"data-transition="slide"><h3>Monaco</h3><p><strong>PrincipalityofMonaco</strong></p><p>Monacoisasovereigncity-state,andformspartoftheFrenchRiviera...</p><pclass="ui-li-aside"><strong>1</strong>image</p></a></li><li><ahref="#"><h3>Nice</h3><p>LocatedinthesouthofFrance,closetotheborderwithItaly...</p></a></li></ul>

Demo-jQueryMobilelistview5

Image-jQueryMobile-addsomeorganisation


Image-Cordovaapp-TripNotes-example1

Cordovaapp-currentdesignOurcurrentdesignincludesasimpleheader,main,andafooter.Tohelpwiththerenderingofourapp'spage,wecanfixthisfootertothebottomoftheviewbyadding,forexample,thefollowingattributeintheHTML,

<divdata-role="footer"data-position="fixed"><h5>footer-page3</h5></div>

Wecansetthisattributeonanyofourfootersectionsinanyoftheviews.

cordova - guide - app development -...

Documents