From Android to the Mobile Web

Copyright © 2013 CommonsWare, LLC

From Android to the Mobile Web


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 WebPart 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 WebPart 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 WebPart 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 WebThe 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 WebBeyond 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 ContactInformation

SlideShare

Date post:	31-Aug-2014
Category:	Technology
Upload:	commonsware
View:	785 times
Download:	3 times

From Android to the Mobile Web

Technology