0
PhoneGap and BlackBerryWebWorks: Two Allies that SimplifiedDevelopment of Nursing AppMichael Brooks, Nitobi SoftwareCOM12O...
Michael Brooks     @mwbrooks     Nitobi Software     PhoneGap Core Maintainer
PhoneGap
User’s Perspective
Developer’s Perspective
Developer’s Perspectivedocument.addEventListener(‘deviceready’, function() {  // PhoneGap is ready}, false);
Contributor’s Perspective
PhoneGap is a Web view
PhoneGap is a Web view
PhoneGap binds JavaScript to Native
PhoneGap is Cross Platform
RNAO Overview
RNAO Mobile Website
RNAO WantedVendor Store Presence  Offline Application
RNAO Platforms
Visual Differences
RNAO Postmortem
Directory Structure
Command-line Build$   rake   android$   rake   desktop$   rake   ios$   rake   blackberry$   rake   blackberry-webworks
Directory Structure
---                                     Platform Manifest Fileblackberry-widget: truedestination: platforms/blackberry-wid...
Preloaded Database$ rake database    => database.json
JavaScript Librariesxui           JSON2.js      ~71kB              }
Sprite Images
PhoneGap PluginsBlackBerry®        BlackBerry WebWorks   Android™ / iOSURLCache           URLCache              URLCacheDa...
<!DOCTYPE html>                                              index.html<html>    <head>        <meta name="viewport" conte...
UserAgent Sniffing//// Find the current device// @return {{DomString}} blackberryX, android, webkit, desktop//findDevice: f...
//// Preload Images                                                   Preloading Images//// The images are preloaded into ...
External Link Quirks// BlackBerry child browser  if (Application.supports.browser.widget) {     blackberry.invoke.invoke( ...
// @blackberry4 workaround for render issues that display a white// block that proportional in height to the amount scroll...
Ellipsis Support//// Ellipsis Support//// @param {DOMElement} DOM element to apply ellipsis to//Application.help.ellipsis ...
//                                                                    Feature Detection// Detect Browser Features//Applica...
Feature Detectionif (Application.supports.database.sqliteGears) {    // ...}else if (Application.supports.file.reader && A...
//// Search records using the PhoneGap plugin or JavaScript Feature   Detection//if (Application.supports.store.search) { ...
Application.help.getStoragePath = function() {    var storagePath = ;                                      PhoneGap File A...
Performance//// Dispatch a function asynchronously//// This will push the process onto a new// execution stack and allocat...
What would we do different?
Use Backbone.js
Use jQuery Mobile
Use Jasmine BDDdescribe(‘Guidelines’, function() {    it(‘has preloaded content’, function() {        expect(this.guidelin...
Generate small JSON files
Summary• Decouple view from model• Test model programmatically• Test view through QA• Test on real devices• Create a simpl...
THANK YOUMichael BrooksCOM 12October 20, 2011
Upcoming SlideShare
Loading in...5
×

BlackBerry DevCon 2011 - PhoneGap and WebWorks

2,269

Published on

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

No Downloads
Views
Total Views
2,269
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "BlackBerry DevCon 2011 - PhoneGap and WebWorks"

    1. 1. PhoneGap and BlackBerryWebWorks: Two Allies that SimplifiedDevelopment of Nursing AppMichael Brooks, Nitobi SoftwareCOM12October 20, 2011
    2. 2. Michael Brooks @mwbrooks Nitobi Software PhoneGap Core Maintainer
    3. 3. PhoneGap
    4. 4. User’s Perspective
    5. 5. Developer’s Perspective
    6. 6. Developer’s Perspectivedocument.addEventListener(‘deviceready’, function() { // PhoneGap is ready}, false);
    7. 7. Contributor’s Perspective
    8. 8. PhoneGap is a Web view
    9. 9. PhoneGap is a Web view
    10. 10. PhoneGap binds JavaScript to Native
    11. 11. PhoneGap is Cross Platform
    12. 12. RNAO Overview
    13. 13. RNAO Mobile Website
    14. 14. RNAO WantedVendor Store Presence Offline Application
    15. 15. RNAO Platforms
    16. 16. Visual Differences
    17. 17. RNAO Postmortem
    18. 18. Directory Structure
    19. 19. Command-line Build$ rake android$ rake desktop$ rake ios$ rake blackberry$ rake blackberry-webworks
    20. 20. Directory Structure
    21. 21. --- Platform Manifest Fileblackberry-widget: truedestination: platforms/blackberry-widget/wwwhtml: - filename: index.htmlcss: - filename: style/index.css - filename: style/blackberry.cssjavascript: - filename: javascript/app.jsother: - filename: style/image/* - filename: platform/blackberry-webworks/*---
    22. 22. Preloaded Database$ rake database => database.json
    23. 23. JavaScript Librariesxui JSON2.js ~71kB }
    24. 24. Sprite Images
    25. 25. PhoneGap PluginsBlackBerry® BlackBerry WebWorks Android™ / iOSURLCache URLCache URLCacheDatabase restore Database restoreDatabase search Database searchDatabase updateSplashScreen
    26. 26. <!DOCTYPE html> index.html<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no;" /> <meta name="HandheldFriendly" content="true" /> <title>Nursing Best Practice Guidelines</title> <link href="style/index.min.css" type="text/css" rel="stylesheet" /> </head> <body> <script type="text/template" id="splashscreen-template" class="view"> // ... </script> <script type="text/javascript" src="javascript/index.min.js"></script> </body></html>
    27. 27. UserAgent Sniffing//// Find the current device// @return {{DomString}} blackberryX, android, webkit, desktop//findDevice: function() { var userAgent = navigator.userAgent; if (userAgent.match(/browzr/i)) return blackberry4; if (userAgent.match(/blackberryd*/4..*/i)) return blackberry4; if (userAgent.match(/blackberryd*/5..*/i)) return blackberry5; if (userAgent.match(/android/i)) return android; if (userAgent.match(/blackberryd*/6..*/i)) return webkit; if (userAgent.match(/webkit/i)) return webkit; return desktop;}
    28. 28. //// Preload Images Preloading Images//// The images are preloaded into the DOM and then removed.//// @param {DOMString} imgSources is an array of image URLs to preload//Application.help.preloadImages = function(imgSources, callback) { var img = null; var preloadNextImage = function() { if (img !== null) delete img; if (imgSources.length <= 0) { Application.dispatch(callback); return; } img = new Image(); img.onload = preloadNextImage; img.src = imgSources.pop(); } preloadNextImage();};
    29. 29. External Link Quirks// BlackBerry child browser if (Application.supports.browser.widget) { blackberry.invoke.invoke( blackberry.invoke.APP_BROWSER, new blackberry.invoke.BrowserArguments(href) );}// Android child browserelse if (Application.supports.browser.android) { window.android.loadExternalUrl(href);}// Everyone elseelse { document.location = href;}
    30. 30. // @blackberry4 workaround for render issues that display a white// block that proportional in height to the amount scrolled vertically.if (!Application.is(blackberry4)) { x$(element).addClass(selected); Page Target Quirks}hash = hash[0].replace(#, );if (hash !== ) { if (Application.events[hash]) { Application.trigger(hash, element); } else if (Application.is(android) || Application.is(blackberry4)) { document.location.hash = # + hash; } else { var $element = x$(a[name= + hash + ]); $element = ($element.length > 0) ? $element : x$(# + hash); if ($element.length > 0) { $element[0].scrollIntoView(true); } }}
    31. 31. Ellipsis Support//// Ellipsis Support//// @param {DOMElement} DOM element to apply ellipsis to//Application.help.ellipsis = function(element) { if (Application.supports.ellipsis) return; // ... manually create ellipsis};// ...Application.supports.ellipsis = (typeof e.style.textOverflow !== undefined);
    32. 32. // Feature Detection// Detect Browser Features//Application.help.detectFeatures = function() { Application.supports = { browser: { widget: !!(typeof window.blackberry !== undefined && window.blackberry.invoke), android: !!(typeof window.android !== undefined && window.android.loadExternalUrl) }, splashScreen: { hide: !!(window.plugins && window.plugins.splashScreen && window.plugins.splashScreen.hide) }, store: { backup: !!(window.plugins && window.plugins.store && window.plugins.store.backup), restore: !!(window.plugins && window.plugins.store && window.plugins.store.restore), search: !!(window.plugins && window.plugins.store && window.plugins.store.search) } };};
    33. 33. Feature Detectionif (Application.supports.database.sqliteGears) { // ...}else if (Application.supports.file.reader && Application.supports.database.sqlite) { // ...}else if (Application.supports.store.restore) { // ...}
    34. 34. //// Search records using the PhoneGap plugin or JavaScript Feature Detection//if (Application.supports.store.search) { window.plugins.store.search(query, function(response) { jsonResponse.data = response.message.data; jsonResponse.error = response.message.error; renderResults(); });}else { Application.database.all(function(records) { for(var i = 0; i < records.length; i++) { matchRecord(records[i]); } renderResults(); });}
    35. 35. Application.help.getStoragePath = function() { var storagePath = ; PhoneGap File API Quirks if (typeof navigator !== undefined && navigator.fileMgr) { var rootPaths = navigator.fileMgr.getRootPaths(); for (var i = 0; i < rootPaths.length; i++) { // iOS workaround. For some reason it returns an invalid path on the simulator. if (rootPaths[i].match(/document/i)) { storagePath = ./../Documents/; break; } // BlackBerry / Android else if (rootPaths[i].match(/sdcard/i)) { storagePath = rootPaths[i]; break; } } } return storagePath;};
    36. 36. Performance//// Dispatch a function asynchronously//// This will push the process onto a new// execution stack and allocate a new memory// heap. This is very useful for BlackBerry5,// which runs into memory issues on deep// callback stacks. It is important to understand// that dispatch will only fire after the current// execution thread ends.//// @param {Function} function to dispatch. Accepts no args.//dispatch: function(fn) { setTimeout(fn, 10);}
    37. 37. What would we do different?
    38. 38. Use Backbone.js
    39. 39. Use jQuery Mobile
    40. 40. Use Jasmine BDDdescribe(‘Guidelines’, function() { it(‘has preloaded content’, function() { expect(this.guideline.get(sections).length).toEqual(2); });});describe(‘Sections’, function() { it(‘has models’, function() { expect(this.sections.model.length).toEqual(3); });});
    41. 41. Generate small JSON files
    42. 42. Summary• Decouple view from model• Test model programmatically• Test view through QA• Test on real devices• Create a simple build chain• Generate static content to avoid runtime penalties
    43. 43. THANK YOUMichael BrooksCOM 12October 20, 2011
    1. A particular slide catching your eye?

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

    ×