BlackBerry DevCon 2011 - PhoneGap and WebWorks

2,668 views

Published on

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

No Downloads
Views
Total views
2,668
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
31
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
  • 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

    ×