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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BlackBerry DevCon 2011 - PhoneGap and WebWorks

2,237
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 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