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

▶

Mar 05, 2023 344 likes •494 views

Jeff Yi CS286 PhoneGap is mobile framework that allows developers to program applications using HTML5, JavaScript and CSS3. It allows developers

SLIDE 1

Jeff ¡Yi ¡ CS286 ¡

SLIDE 2

¡ 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 ¡

SLIDE 3

¡ 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. ¡

SLIDE 4

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

SLIDE 5

¡ Just ¡go ¡to ¡http://phonegap.com/download ¡ ¡ ¡ There ¡is ¡no ¡installation ¡required, ¡just ¡extract ¡

the ¡folder ¡and ¡you ¡can ¡begin ¡using ¡the ¡tools. ¡

SLIDE 6

¡ 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 ¡

SLIDE 7

¡ The ¡mobile ¡web ¡version ¡of ¡the ¡Cinequest ¡app ¡

perates ¡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. ¡

SLIDE 8

¡ 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 ¡

SLIDE 9

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

storage. ¡

SLIDE 10

¡ <script ¡type="text/javascript" ¡charset="utf-‑8" ¡

src="cordova-‑2.6.0.js"></script> ¡

¡ document.addEventListener("deviceready", ¡

nDeviceReady, ¡false); ¡

¡ function ¡onDeviceReady() ¡ ¡

SLIDE 11

¡ 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 ¡

SLIDE 12

¡ 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) ¡

SLIDE 13

¡ Lab ¡can ¡be ¡found ¡at: ¡

http://cs10.cs.sjsu.edu/Yi_Jeffrey/ PresentationPaper.html ¡ ¡

SLIDE 14