• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 

BlackBerry DevCon 2011 - PhoneGap and WebWorks

on

  • 2,515 views

 

Statistics

Views

Total Views
2,515
Views on SlideShare
2,504
Embed Views
11

Actions

Likes
1
Downloads
28
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 BlackBerry DevCon 2011 - PhoneGap and WebWorks Presentation Transcript

  • PhoneGap and BlackBerryWebWorks: Two Allies that SimplifiedDevelopment of Nursing AppMichael Brooks, Nitobi SoftwareCOM12October 20, 2011
  • 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-widget/wwwhtml: - filename: index.htmlcss: - filename: style/index.css - filename: style/blackberry.cssjavascript: - filename: javascript/app.jsother: - filename: style/image/* - filename: platform/blackberry-webworks/*---
  • Preloaded Database$ rake database => database.json
  • JavaScript Librariesxui JSON2.js ~71kB }
  • Sprite Images
  • PhoneGap PluginsBlackBerry® BlackBerry WebWorks Android™ / iOSURLCache URLCache URLCacheDatabase restore Database restoreDatabase search Database searchDatabase updateSplashScreen
  • <!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>
  • 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;}
  • //// 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();};
  • 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;}
  • // @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); } }}
  • 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);
  • // 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) } };};
  • Feature Detectionif (Application.supports.database.sqliteGears) { // ...}else if (Application.supports.file.reader && Application.supports.database.sqlite) { // ...}else if (Application.supports.store.restore) { // ...}
  • //// 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(); });}
  • 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;};
  • 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);}
  • What would we do different?
  • Use Backbone.js
  • Use jQuery Mobile
  • 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); });});
  • Generate small JSON files
  • 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
  • THANK YOUMichael BrooksCOM 12October 20, 2011