BlackBerry DevCon 2011 - PhoneGap and WebWorks
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

BlackBerry DevCon 2011 - PhoneGap and WebWorks

on

  • 2,654 views

 

Statistics

Views

Total Views
2,654
Views on SlideShare
2,643
Embed Views
11

Actions

Likes
1
Downloads
29
Comments
0

5 Embeds 11

http://paper.li 6
http://a0.twimg.com 2
http://us-w1.rockmelt.com 1
https://duckduckgo.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

  • 1. PhoneGap and BlackBerryWebWorks: Two Allies that SimplifiedDevelopment of Nursing AppMichael Brooks, Nitobi SoftwareCOM12October 20, 2011
  • 2. Michael Brooks @mwbrooks Nitobi Software PhoneGap Core Maintainer
  • 3. PhoneGap
  • 4. User’s Perspective
  • 5. Developer’s Perspective
  • 6. Developer’s Perspectivedocument.addEventListener(‘deviceready’, function() { // PhoneGap is ready}, false);
  • 7. Contributor’s Perspective
  • 8. PhoneGap is a Web view
  • 9. PhoneGap is a Web view
  • 10. PhoneGap binds JavaScript to Native
  • 11. PhoneGap is Cross Platform
  • 12. RNAO Overview
  • 13. RNAO Mobile Website
  • 14. RNAO WantedVendor Store Presence Offline Application
  • 15. RNAO Platforms
  • 16. Visual Differences
  • 17. RNAO Postmortem
  • 18. Directory Structure
  • 19. Command-line Build$ rake android$ rake desktop$ rake ios$ rake blackberry$ rake blackberry-webworks
  • 20. Directory Structure
  • 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. Preloaded Database$ rake database => database.json
  • 23. JavaScript Librariesxui JSON2.js ~71kB }
  • 24. Sprite Images
  • 25. PhoneGap PluginsBlackBerry® BlackBerry WebWorks Android™ / iOSURLCache URLCache URLCacheDatabase restore Database restoreDatabase search Database searchDatabase updateSplashScreen
  • 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. 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. //// 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. 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. // @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. 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. // 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. Feature Detectionif (Application.supports.database.sqliteGears) { // ...}else if (Application.supports.file.reader && Application.supports.database.sqlite) { // ...}else if (Application.supports.store.restore) { // ...}
  • 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. 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. 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. What would we do different?
  • 38. Use Backbone.js
  • 39. Use jQuery Mobile
  • 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. Generate small JSON files
  • 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. THANK YOUMichael BrooksCOM 12October 20, 2011