Jeff Yi CS286 PhoneGap is mobile framework that allows - PowerPoint PPT Presentation

Jeff ¡Yi ¡ CS286 ¡

¡ PhoneGap ¡is ¡mobile ¡framework ¡that ¡allows ¡ developers ¡to ¡program ¡applications ¡using ¡ HTML5, ¡JavaScript ¡and ¡CSS3. ¡ ¡ It ¡allows ¡developers ¡to ¡package ¡their ¡current ¡ mobile ¡sites ¡to ¡a ¡native ¡app ¡and ¡also ¡allows ¡ them ¡to ¡program ¡using ¡these ¡web ¡languages ¡ rather ¡than ¡Java ¡or ¡Objective-­‑C ¡

¡ On ¡the ¡most ¡basic ¡level, ¡a ¡developer ¡can ¡ simply ¡package ¡their ¡web ¡pages ¡into ¡an ¡ application. ¡ ¡ ¡ With ¡a ¡little ¡more ¡work, ¡developers ¡can ¡take ¡ advantage ¡of ¡the ¡PhoneGaps ¡API ¡and ¡take ¡ advantage ¡of ¡the ¡mobile ¡device’s ¡hardware, ¡ such ¡as ¡the ¡accelerometer ¡and ¡storage. ¡

¡ Accelerometer ¡ ¡ Camera ¡ ¡ Capture ¡ ¡ Compass ¡ ¡ Connection ¡ ¡ Contacts ¡ ¡ Device ¡ ¡ Events ¡ ¡ File ¡ ¡ Geolocation ¡ ¡ Globalization ¡ ¡ InAppBrowser ¡ ¡ Media ¡ ¡ Notification ¡ ¡ Splashscreen ¡ ¡ Storage ¡

¡ Just ¡go ¡to ¡http://phonegap.com/download ¡ ¡ ¡ There ¡is ¡no ¡installation ¡required, ¡just ¡extract ¡ the ¡folder ¡and ¡you ¡can ¡begin ¡using ¡the ¡tools. ¡

¡ Simply ¡unzip ¡the ¡archive ¡to ¡your ¡home ¡ directory. ¡ ¡ Creating ¡projects ¡is ¡done ¡with ¡command ¡line. ¡ ¡ This ¡project ¡creation ¡creates ¡a ¡base ¡project ¡ for ¡your ¡chosen ¡mobile ¡platform ¡with ¡all ¡of ¡ the ¡necessary ¡files ¡and ¡settings ¡configured. ¡ ¡ All ¡that ¡is ¡needed ¡is ¡moving ¡index.html ¡and ¡ any ¡other ¡files ¡to ¡the ¡assets/www ¡folder ¡in ¡the ¡ project ¡

¡ The ¡mobile ¡web ¡version ¡of ¡the ¡Cinequest ¡app ¡ operates ¡in ¡much ¡the ¡same ¡way ¡as ¡the ¡mobile ¡ apps. ¡ ¡ JQuery ¡and ¡ajax ¡are ¡used ¡to ¡perform ¡a ¡get ¡call ¡ to ¡the ¡Cinequest ¡site ¡for ¡the ¡xml ¡files. ¡ ¡ These ¡xml ¡files ¡are ¡then ¡parsed ¡and ¡HTML ¡ pages ¡are ¡created ¡dynamically ¡with ¡this ¡data. ¡

¡ HTML5 ¡alone ¡will ¡means ¡that ¡a ¡network ¡ connection ¡is ¡needed ¡to ¡view ¡any ¡of ¡the ¡ pages. ¡ ¡ HTML5 ¡has ¡localStorage ¡available ¡to ¡store ¡ data ¡for ¡future ¡use ¡but ¡what ¡about ¡a ¡situation ¡ where ¡there ¡is ¡no ¡network ¡connection? ¡ ¡ PhoneGap ¡can ¡provide ¡a ¡way ¡to ¡store ¡the ¡xml ¡ files ¡locally ¡

¡ Connection ¡to ¡discover ¡current ¡network ¡ ¡ File ¡to ¡download ¡and ¡read ¡the ¡files ¡saved ¡to ¡ storage. ¡

¡ <script ¡type="text/javascript" ¡charset="utf-­‑8" ¡ src="cordova-­‑2.6.0.js"></script> ¡ ¡ document.addEventListener("deviceready", ¡ onDeviceReady, ¡false); ¡ ¡ function ¡onDeviceReady() ¡ ¡

¡ navigator.connection.type ¡– ¡returns ¡the ¡current ¡ connection ¡type ¡ § Connection.UNKNOWN ¡ § Connection.ETHERNET ¡ § Connection.WIFI ¡ § Connection.CELL_2G ¡ § Connection.CELL_3G ¡ § Connection.CELL_4G ¡ § Connection.CELL ¡ § Connection.NONE ¡

¡ FileTransfer ¡– ¡used ¡to ¡download ¡a ¡file ¡to ¡the ¡ filesystem ¡ § download(source,target,successCallback,failureC allback,trustAllHosts,options) ¡ ¡ FileReader ¡– ¡used ¡to ¡open ¡a ¡file ¡and ¡read ¡its ¡ contents ¡ § readAsText(file,encoding) ¡

¡ Lab ¡can ¡be ¡found ¡at: ¡ http://cs10.cs.sjsu.edu/Yi_Jeffrey/ PresentationPaper.html ¡ ¡

¡ “PhoneGap ¡API ¡Documentation”. ¡http:// docs.phonegap.com/en/2.6.0/. ¡