From Android to the Mobile Web

From Android to
the Mobile Web
Copyright © 2013 CommonsWare, LLC

Who's the Target?
● Mass Market
– E.g., distribution on Play Store, App Store
– Pursue maximum fidelity strategy, as UI quirks
are more likely to be noticed
● Niche Market
– Enterprise, small business, government, etc.
– Pursue minimum maintenance strategy, as
budgets preclude otherwise

Objectives... Of Developers
● Maximum Fidelity Strategy
– Native apps for major platforms
– Mobile Web apps for secondary platforms
● Minimum Maintenance Strategy
– Mobile Web apps for all platforms
– Possibly augmented on some platforms


Objectives... Of This Workshop
● Demonstrate Developing for the Mobile Web
– Emphasis on installable apps (vs. HTML5 Web
apps)
● Approach from an Android Mindset
– E.g., widget library vs. low-level HTML
– Seek analogous solutions to help with climbing
the learning curve


Prerequisites
● Experience in Android development
● Basic understanding of JavaScript
● At least a vague concept of the role of CSS
● ~3 hours


Ingredients
● Widget Library: Enyo
– Offshoot of WebOS
– Pros
● Works on desktop (mouse-centric) and mobile
(touch-centric)
● Apache license
– Cons
● Relatively new


Ingredients
● Widget Library Alternative: Sencha Touch
– Pros
● Around longer, plus based on ExtJS (around longer
still)
– Cons
● Mobile-only (similar to, but not identical to, ExtJS)
● Licensing


Ingredients
● Container: Apache Cordova/Adobe PhoneGap
– Wrapper around Web assets for deployable app
(e.g., APK)
– JavaScript library for access to device-specific
capabilities
● For things that are beyond the scope of current
standards


Ingredients
● Cordova/PhoneGap Platform Support
– Android
– iOS
– Windows Phone
– Blackberry (5.x+)
– Symbian
– Bada
– More to come

Demo:
HelloWorld

Playing Around Here
● Option #1: Build Android PhoneGap App
– Set up for command-line build
– Or import into Eclipse or other IDE
● Option #2: Web browser
– Works for the first few samples
– Eventual Limitations
● PhoneGap integration
● AJAX

Local Android PhoneGap Build
● Copy desired Web content into
assets/www/ of PhoneGap template project
● Modify other aspects of project manifest
– Package name, label, icon, …
● Build and run
– Eclipse
– Command line


Enyo: Kinds and Components
● JavaScript: OO, Not Class-Based
– Prototype-based, a la Self
● Kinds: Enyo's Quasi-Class Structure
– Functions ~= Java methods
– Declared in object notation
● Components: Adds Property Management
– ~= Java data members with accessors

Demo:
EnyoHelloWorld

Enyo: Controls
● Android: Activities, Fragments, Widgets, and
Containers
– Loosely coupled constructs
● Enyo: Controls, All The Way Down
– Activity = a control
– Fragments = controls
– Containers = controls
– Widgets = controls

Enyo: Controls
● Key Properties
– name ~= Java class name
– content = the HTML to start with
● Alternative: tag
– classes = CSS classes to apply
● Alternative: style for inline CSS
– components = child controls
● ~= ViewGroup
● Children rendered inside the control itself

Demo:
EnyoHelloWorld,
Revisited

Activity → Top-Level Control
● Contains the rest of the controls
– Simply inline-defined in components array
– First-class custom controls, instantiated via
components array
● Contains top-level behaviors
– Directly or by delegation to some sort of
controller


Onyx
● Partly, a Widget Library
– Enyo has core controls
– Onyx extends, refines, elaborates
– Example: Button vs. ToggleButton
● Partly, a Theme
– Applies a stock style to all widgets
– You tailor via CSS


Common Enyo Controls
● onyx.Button
– ~= Button, ImageButton
● onyx.RadioButton
– ~= RadioButton, ToggleButton
● onyx.ToggleButton
– ~= Switch


Demo: Now


Common Enyo Controls
● onyx.Checkbox
– ~= CheckBox
● onyx.Input, onyx.TextArea
– ~= EditText
● onyx.RichText
– ~= RichTextEdit
● onyx.DatePicker, onyx.TimePicker
– ~= DatePicker, TimePicker

Enyo Containers
● enyo.FittableColumns, enyo.FittableRows
– ~= LinearLayout (horizontal, vertical)
– fit:true on component has it fill space unused
by rest (~= android:layout_weight=“1”)
● enyo.Scroller
– ~= ScrollView


Enyo Containers
● enyo.Panels
– Organizes components according to an arranger
– GridArranger: ~= GridLayout/FlowLayout
– CollapsingArranger: ~= ViewPager
● Can also use for master-detail pattern based upon
available space
– CarouselArranger: ~= ViewPager in “infinite” mode
– CardArranger: ~= ViewSwitcher


Lists in Enyo
● enyo.List
– ~= ListView
– Components are duplicated for each row
– onSetupItem property supplies function to be
called to configure and populate the row
● ~= bindView() in a ListAdapter


Demo:
CommonsBlog,
Native

Demo:
CommonsBlog,
Mobile Web
Part One

Displaying Web Content
● Option #1: Control
– Set allowHtml=true
– Assign HTML to content
– Pros: inline with the rest of your material
– Cons: inline with the rest of your material
● Only use with stuff you reasonably trust


● Option #2: InAppBrowser
– Feature supplied by PhoneGap
– Options
● _self = replaces your app with content
● _blank = starts up separate Web container within
your app for the content
● _system = launches the device default browser


● Option #2: InAppBrowser
– Pros: isolates the external material from your
app
– Cons
● Only works on URLs, not HTML you might get from
elsewhere (e.g., Web service call, Atom feed)
● Takes over the screen, not inline with your app


Demo:
CommonsBlog,
Mobile Web
Part Two

Multiple Screen Sizes
● At It's Core, No Different Than Desktop
– Web developers have had to deal with varying
browser window sizes since the dawn of the Web
– Techniques
● CSS media queries
● Detect size in JavaScript and run alternative
branches (e.g., enyo.dom.getWindowWidth())
● User agent/device model sniffing


● Master-Detail in Enyo
– Use enyo.CollapsingArranger with two panels
● Specify size for left-hand panel, right fills space... for
larger sizes
● Automatically switches into one-panel-at-a-time
mode at 800px (where px in CSS ~= dp in Android)
● Swiping to move between panels, plus can change
active panel via JavaScript code


● Want Behavior Change At Other Than 800px?
– narrowFit=false on your Panels
– Use CSS class with media query to determine
actual cutoff
– Optional: override isScreenNarrow() function
● Not used by framework, convenience for developers


Multiple Screen Densities
● CSS Media Queries
– min-device-pixel-ratio to determine
density
● 1.5, 2.0, etc.
– Apply changes
● Different icons
● Different font sizes (should automatically adjust, but
your mileage may vary)


Navigation
● Get Back to Where You Once Belonged
– Android: BACK button
– iOS: Back on-screen button in UI
– Other platforms will have their own conventions
– Challenge: supporting them all


Hooking the BACK Button
● Step #1: Do Not Render Until PhoneGap
Ready
– PhoneGap sends deviceready event
– We get control and render then
● Step #2: Tell Enyo to Route backbutton
– PhoneGap sends backbutton event
– Enyo can route through its standard event
dispatching mechanism

Hooking the BACK Button
● Step #3: Listen for Event in UI
– Add an enyo.Signals component to activity or
something
– Define function for onbackbutton
– Do something useful for navigation
● Back up a panel if first panel is not active
● Exit app via navigator.app.exitApp()


Demo:
CommonsBlog,
Mobile Web
Part Three

AJAX and Internet Access
● What Enyo Provides
– enyo.Async as base kind for asynchronous
operations
– enyo.Ajax for classic JS AJAX requests
– enyo.JsonpRequest for JSONP
● Means in a Web app of getting past cross-origin
restrictions inherent to AJAX


● What PhoneGap Provides
– Whitelist for what domains can be bypassed for
cross-origin restrictions
● For these domains, enyo.Ajax works directly
● Single domain, wildcards, etc.


● AJAX/JSONP Functions
– Constructor: supply URL
– go() to schedule the request
– response() to attach a function to be invoked
upon success, with results
– error() to attach a function to be invoked when
there is some HTTP error


Demo:
CommonsBlog,
Mobile Web
The End

PhoneGap Build
● Hosted Build Service
– Create config.xml describing the app and
requirements (based on W3C widget spec)
– Supply Web assets + config.xml to Build
● ZIP archive
● GitHub repo
– Build automatically creates builds for each
supported platform
● Minor complication with signing keys

Demo:
CommonsBlog,
Mobile Web
Beyond The End

PhoneGap API
● Accelerometer
● Camera
● Capture
● Compass
● Connection
– Determine if on WiFi or mobile data


PhoneGap API
● Device
– Make, model, OS version, etc.
● Events
● File
● Geolocation
● Globalization
● Media

PhoneGap API
● Notification
– Dialogs, beeps, vibrations
● Splashscreen
● Storage
– Web SQL implementation, to fill in for platforms
that lack it


PhoneGap Plugins
● Extends PhoneGap Environment with New
Native Capabilities
– All aforementioned PhoneGap APIs moving to
be plugins
– You can define your own, for whatever platforms
you are supporting
– Many third-party plugins already available
● May not support all your platforms, though

PhoneGap Plugins
● Step #1: Create JS objects/functions
– Call cordova.exec() to pass control to native layer
– Will need to arrange to load this JS
● Step #2: Implement Native Layer
– E.g., Android create CordovaPlugin class
● Step #3: Augment config.xml For Plugin
– Tells PhoneGap, PhoneGap Build to add your
native layer

HTML5 Storage Options
● Local Storage
– Simple associative array, strings to strings
● IndexedDB
– JSON database with developer-defined key
property
● Deprecated: Web SQL
– Still supported by PhoneGap


Summary
● Mobile Web Development: New and Growing
– Reminiscent of Android, circa 2009
● Not Suitable for All Scenarios
– Use where audience will accept it and provides
development, maintenance savings
● Widget Frameworks, PhoneGap Ease
Transition for Android Developers


Speaker Contact
Information

SlideShare


From Android to the Mobile Web

More Related Content

Similar to From Android to the Mobile Web (20)

More from CommonsWare (18)

Recently uploaded (20)

From Android to the Mobile Web