0
From Android tothe Mobile Web     Copyright © 2013 CommonsWare, LLC
Whos the Target?●   Mass Market    –   E.g., distribution on Play Store, App Store    –   Pursue maximum fidelity strategy...
Objectives... Of Developers●   Maximum Fidelity Strategy    –   Native apps for major platforms    –   Mobile Web apps for...
Objectives... Of This Workshop●   Demonstrate Developing for the Mobile Web    –   Emphasis on installable apps (vs. HTML5...
Prerequisites●   Experience in Android development●   Basic understanding of JavaScript●   At least a vague concept of the...
Ingredients●   Widget Library: Enyo    –   Offshoot of WebOS    –   Pros         ●   Works on desktop (mouse-centric) and ...
Ingredients●   Widget Library Alternative: Sencha Touch    –   Pros         ●   Around longer, plus based on ExtJS (around...
Ingredients●   Container: Apache Cordova/Adobe PhoneGap    –   Wrapper around Web assets for deployable app        (e.g., ...
Ingredients●   Cordova/PhoneGap Platform Support    –   Android    –   iOS    –   Windows Phone    –   Blackberry (5.x+)  ...
Demo:HelloWorld  Copyright © 2013 CommonsWare, LLC
Playing Around Here●   Option #1: Build Android PhoneGap App    –   Set up for command-line build    –   Or import into Ec...
Local Android PhoneGap Build●   Copy desired Web content into    assets/www/ of PhoneGap template project●   Modify other ...
Enyo: Kinds and Components●   JavaScript: OO, Not Class-Based    –   Prototype-based, a la Self●   Kinds: Enyos Quasi-Clas...
Demo:EnyoHelloWorld     Copyright © 2013 CommonsWare, LLC
Enyo: Controls●   Android: Activities, Fragments, Widgets, and    Containers    –   Loosely coupled constructs●   Enyo: Co...
Enyo: Controls●   Key Properties    –   name ~= Java class name    –   content = the HTML to start with         ●   Altern...
Demo:EnyoHelloWorld,   Revisited     Copyright © 2013 CommonsWare, LLC
Activity → Top-Level Control●   Contains the rest of the controls    –   Simply inline-defined in components array    –   ...
Onyx●   Partly, a Widget Library    –   Enyo has core controls    –   Onyx extends, refines, elaborates    –   Example: Bu...
Common Enyo Controls●   onyx.Button    –   ~= Button, ImageButton●   onyx.RadioButton    –   ~= RadioButton, ToggleButton●...
Demo: Now  Copyright © 2013 CommonsWare, LLC
Common Enyo Controls●   onyx.Checkbox    –   ~= CheckBox●   onyx.Input, onyx.TextArea    –   ~= EditText●   onyx.RichText ...
Enyo Containers●   enyo.FittableColumns, enyo.FittableRows    –   ~= LinearLayout (horizontal, vertical)    –   fit:true o...
Enyo Containers●   enyo.Panels    –   Organizes components according to an arranger    –   GridArranger: ~= GridLayout/Flo...
Lists in Enyo●   enyo.List    –   ~= ListView    –   Components are duplicated for each row    –   onSetupItem property su...
Demo:CommonsBlog,   Native    Copyright © 2013 CommonsWare, LLC
Demo:CommonsBlog, Mobile Web  Part One    Copyright © 2013 CommonsWare, LLC
Displaying Web Content●   Option #1: Control    –   Set allowHtml=true    –   Assign HTML to content    –   Pros: inline w...
Displaying Web Content●   Option #2: InAppBrowser    –   Feature supplied by PhoneGap    –   Options         ●   _self = r...
Displaying Web Content●   Option #2: InAppBrowser    –   Pros: isolates the external material from your        app    –   ...
Demo:CommonsBlog, Mobile Web  Part Two    Copyright © 2013 CommonsWare, LLC
Multiple Screen Sizes●   At Its Core, No Different Than Desktop    –   Web developers have had to deal with varying       ...
Multiple Screen Sizes●   Master-Detail in Enyo    –   Use enyo.CollapsingArranger with two panels         ●   Specify size...
Multiple Screen Sizes●   Want Behavior Change At Other Than 800px?    –   narrowFit=false on your Panels    –   Use CSS cl...
Multiple Screen Densities●   CSS Media Queries    –   min-device-pixel-ratio to determine        density         ●   1.5, ...
Navigation●   Get Back to Where You Once Belonged    –   Android: BACK button    –   iOS: Back on-screen button in UI    –...
Hooking the BACK Button●   Step #1: Do Not Render Until PhoneGap    Ready    –   PhoneGap sends deviceready event    –   W...
Hooking the BACK Button●   Step #3: Listen for Event in UI    –   Add an enyo.Signals component to activity or        some...
Demo:CommonsBlog, Mobile Web  Part Three    Copyright © 2013 CommonsWare, LLC
AJAX and Internet Access●   What Enyo Provides    –   enyo.Async as base kind for asynchronous        operations    –   en...
AJAX and Internet Access●   What PhoneGap Provides    –   Whitelist for what domains can be bypassed for        cross-orig...
AJAX and Internet Access●   AJAX/JSONP Functions    –   Constructor: supply URL    –   go() to schedule the request    –  ...
Demo:CommonsBlog, Mobile Web   The End    Copyright © 2013 CommonsWare, LLC
PhoneGap Build●   Hosted Build Service    –   Create config.xml describing the app and        requirements (based on W3C w...
Demo:CommonsBlog,  Mobile WebBeyond The End    Copyright © 2013 CommonsWare, LLC
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, t...
PhoneGap Plugins●   Extends PhoneGap Environment with New    Native Capabilities    –   All aforementioned PhoneGap APIs m...
PhoneGap Plugins●   Step #1: Create JS objects/functions    –   Call cordova.exec() to pass control to native layer    –  ...
HTML5 Storage Options●   Local Storage    –   Simple associative array, strings to strings●   IndexedDB    –   JSON databa...
Summary●   Mobile Web Development: New and Growing    –   Reminiscent of Android, circa 2009●   Not Suitable for All Scena...
Speaker Contact    Information       SlideShare       Copyright © 2013 CommonsWare, LLC
Upcoming SlideShare
Loading in...5
×

From Android to the Mobile Web

585

Published on

from the January 2013 Mobile+Web DevCon

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
585
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "From Android to the Mobile Web"

  1. 1. From Android tothe Mobile Web Copyright © 2013 CommonsWare, LLC
  2. 2. Whos 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 Copyright © 2013 CommonsWare, LLC
  3. 3. 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 Copyright © 2013 CommonsWare, LLC
  4. 4. 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 Copyright © 2013 CommonsWare, LLC
  5. 5. Prerequisites● Experience in Android development● Basic understanding of JavaScript● At least a vague concept of the role of CSS● ~3 hours Copyright © 2013 CommonsWare, LLC
  6. 6. Ingredients● Widget Library: Enyo – Offshoot of WebOS – Pros ● Works on desktop (mouse-centric) and mobile (touch-centric) ● Apache license – Cons ● Relatively new Copyright © 2013 CommonsWare, LLC
  7. 7. 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 Copyright © 2013 CommonsWare, LLC
  8. 8. 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 Copyright © 2013 CommonsWare, LLC
  9. 9. Ingredients● Cordova/PhoneGap Platform Support – Android – iOS – Windows Phone – Blackberry (5.x+) – Symbian – Bada – More to come Copyright © 2013 CommonsWare, LLC
  10. 10. Demo:HelloWorld Copyright © 2013 CommonsWare, LLC
  11. 11. 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 Copyright © 2013 CommonsWare, LLC
  12. 12. 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 Copyright © 2013 CommonsWare, LLC
  13. 13. Enyo: Kinds and Components● JavaScript: OO, Not Class-Based – Prototype-based, a la Self● Kinds: Enyos Quasi-Class Structure – Functions ~= Java methods – Declared in object notation● Components: Adds Property Management – ~= Java data members with accessors Copyright © 2013 CommonsWare, LLC
  14. 14. Demo:EnyoHelloWorld Copyright © 2013 CommonsWare, LLC
  15. 15. 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 Copyright © 2013 CommonsWare, LLC
  16. 16. 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 Copyright © 2013 CommonsWare, LLC
  17. 17. Demo:EnyoHelloWorld, Revisited Copyright © 2013 CommonsWare, LLC
  18. 18. 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 Copyright © 2013 CommonsWare, LLC
  19. 19. 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 Copyright © 2013 CommonsWare, LLC
  20. 20. Common Enyo Controls● onyx.Button – ~= Button, ImageButton● onyx.RadioButton – ~= RadioButton, ToggleButton● onyx.ToggleButton – ~= Switch Copyright © 2013 CommonsWare, LLC
  21. 21. Demo: Now Copyright © 2013 CommonsWare, LLC
  22. 22. Common Enyo Controls● onyx.Checkbox – ~= CheckBox● onyx.Input, onyx.TextArea – ~= EditText● onyx.RichText – ~= RichTextEdit● onyx.DatePicker, onyx.TimePicker – ~= DatePicker, TimePicker Copyright © 2013 CommonsWare, LLC
  23. 23. 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 Copyright © 2013 CommonsWare, LLC
  24. 24. 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 Copyright © 2013 CommonsWare, LLC
  25. 25. 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 Copyright © 2013 CommonsWare, LLC
  26. 26. Demo:CommonsBlog, Native Copyright © 2013 CommonsWare, LLC
  27. 27. Demo:CommonsBlog, Mobile Web Part One Copyright © 2013 CommonsWare, LLC
  28. 28. 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 Copyright © 2013 CommonsWare, LLC
  29. 29. Displaying Web Content● 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 Copyright © 2013 CommonsWare, LLC
  30. 30. Displaying Web Content● 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 Copyright © 2013 CommonsWare, LLC
  31. 31. Demo:CommonsBlog, Mobile Web Part Two Copyright © 2013 CommonsWare, LLC
  32. 32. Multiple Screen Sizes● At Its 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 Copyright © 2013 CommonsWare, LLC
  33. 33. Multiple Screen Sizes● 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 Copyright © 2013 CommonsWare, LLC
  34. 34. Multiple Screen Sizes● 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 Copyright © 2013 CommonsWare, LLC
  35. 35. 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) Copyright © 2013 CommonsWare, LLC
  36. 36. 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 Copyright © 2013 CommonsWare, LLC
  37. 37. 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 Copyright © 2013 CommonsWare, LLC
  38. 38. 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() Copyright © 2013 CommonsWare, LLC
  39. 39. Demo:CommonsBlog, Mobile Web Part Three Copyright © 2013 CommonsWare, LLC
  40. 40. 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 Copyright © 2013 CommonsWare, LLC
  41. 41. AJAX and Internet Access● 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. Copyright © 2013 CommonsWare, LLC
  42. 42. AJAX and Internet Access● 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 Copyright © 2013 CommonsWare, LLC
  43. 43. Demo:CommonsBlog, Mobile Web The End Copyright © 2013 CommonsWare, LLC
  44. 44. 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 Copyright © 2013 CommonsWare, LLC
  45. 45. Demo:CommonsBlog, Mobile WebBeyond The End Copyright © 2013 CommonsWare, LLC
  46. 46. PhoneGap API● Accelerometer● Camera● Capture● Compass● Connection – Determine if on WiFi or mobile data Copyright © 2013 CommonsWare, LLC
  47. 47. PhoneGap API● Device – Make, model, OS version, etc.● Events● File● Geolocation● Globalization● Media Copyright © 2013 CommonsWare, LLC
  48. 48. PhoneGap API● Notification – Dialogs, beeps, vibrations● Splashscreen● Storage – Web SQL implementation, to fill in for platforms that lack it Copyright © 2013 CommonsWare, LLC
  49. 49. 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 Copyright © 2013 CommonsWare, LLC
  50. 50. 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 Copyright © 2013 CommonsWare, LLC
  51. 51. 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 Copyright © 2013 CommonsWare, LLC
  52. 52. 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 Copyright © 2013 CommonsWare, LLC
  53. 53. Speaker Contact Information SlideShare Copyright © 2013 CommonsWare, LLC
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×