Sencha Touch and PhoneGap

ubiquitousstrumpetΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 4 χρόνια και 21 μέρες)

80 εμφανίσεις

Indy CocoaHeads
February 2012
WiFi: E-g Guest
Password: W3LC0M3!
Sunday, August 12, 12
Thanks to Our Sponsors
...for our meeting
space and grub
...for our domain
and web hosting
...for our presence
on meetup.com
www.e-gineering.com
www.secondgearsoftware.com
www.apphands.com
Sunday, August 12, 12
Follow Us!
Twitter.com/indycocoaheads
Facebook.com/IndyCocoaHeads
...for news, meeting info, etc.
Meetup.com/IndyCocoaHeads
IndyCocoaHeads.org
Sunday, August 12, 12
Show & Tell
Don’t be shy!
Sunday, August 12, 12
Sencha Touch,
PhoneGap & PhoneGap
plugins for iOS
Chris Patterson
E-gineering, LLC
www.e-gineering.com
Sunday, August 12, 12
Sencha Touch
JavaScript framework for mobile web apps.
Like jqTouch & jQuery Mobile, but all
JavaScript & CSS.
Provides default themes for iOS, Android,
BB6, Sencha Touch UI.
Includes a rich set of UI controls:
buttons, tables, sliders, switches, alerts,
popovers, action sheets, etc.
http://www.sencha.com/touch/
Sunday, August 12, 12
Sencha Touch
Provides themable UI using SASS and
Compass.
SASS: Syntactically Awesome Stylesheets
-- adds variables, nesting, functions to
CSS3.
(
http://sass-lang.com
/)
Compass: Core SASS code library
(
http://compass-style.org
/)
styles.sass compiles to styles.css.
Sunday, August 12, 12
Sencha Touch
Code to display a simple view with navbar:
Sunday, August 12, 12
Sencha Touch
Same code, different stylesheets:
Sunday, August 12, 12
Sencha Touch
Real world example (my current project):
Sunday, August 12, 12
PhoneGap
PhoneGap allows you to turn a web app into a
native app.
Provides access to native APIs (GPS, camera,
accelerometers, contacts, filesystem, etc.).
Supports iOS, Android, BB6, WP7 (more or
less)
Does NOT provide any UI.
Sencha Touch (1.1) and PhoneGap work well
together!
Sunday, August 12, 12
PhoneGap
Consists of two
parts:
JavaScript file
included in web
app HTML page.
Cocoa wrapper app
and library you
create in Xcode
with project
templates.
Sunday, August 12, 12
PhoneGap
Taking a picture using the device camera:
Sunday, August 12, 12
How Does it Work?
JavaScript method PhoneGap.exec() passes
method call info via “gap://” protocol.
Cocoa class PhoneGapDelegate implements
UIWebViewDelegate method
-webView:shouldStartLoadWithRequest:navigationType:
“gap://” requests are mapped to PhoneGap
plugin classes -- subclasses of
PGPlugin.
Plugin results are returned to UIWebView
as JSON via method
-stringByEvaluatingJavaScriptFromString:
Sunday, August 12, 12
Extending PhoneGap
Implement AppDelegate method
-webView:shouldStartLoadWithRequest:navigationType:
Implement AppDelegate method
-getCommandInstance:
Implement a custom PGPlugin class...
Sunday, August 12, 12
Writing a PhoneGap Plugin
Create
PluginName.{h,m}
which subclasses
PGPlugin in project Plugins folder.
Add mapping of Class to String in
PhoneGap.plist.
Create
PluginName.js
file which
implements JavaScript wrapper around
PhoneGap.exec() call.
Add
PluginName.js
<script> tag to page.
Sunday, August 12, 12
EGAutoUpdate Plugin
Provides ability to deliver software
updates of web app code over the air.
Moves root of web app (www folder) to
Documents.
Checks update server for zip archive
containing updated www content.
Unzips new content into new www folder and
reloads web view from new location.
Bla bla! Show me the codez!...
Sunday, August 12, 12
Door Prizes
Sunday, August 12, 12
Next Meeting
March 5, 6:30pm @ E-gineering
Mastering App Debugging
with Instruments
Brandon Alexander
Special Guest!
co-author of “
Pro iOS 5 Tools:
Xcode Instruments & Build Tools”
Sunday, August 12, 12