BlackBerry DevCon 2011 - PhoneGap and WebWorks

PhoneGap and BlackBerry
WebWorks: Two Allies that Simplified
Development of Nursing App
Michael Brooks, Nitobi Software
COM12
October 20, 2011

Michael Brooks
@mwbrooks
Nitobi Software
PhoneGap Core Maintainer

Developer’s Perspective

document.addEventListener(‘deviceready’, function() {
// PhoneGap is ready
}, false);

PhoneGap binds JavaScript to Native

RNAO Wanted

Vendor Store Presence

Ofﬂine Application

Command-line Build

$ rake android
$ rake desktop
$ rake ios
$ rake blackberry
$ rake blackberry-webworks

--- Platform Manifest File
blackberry-widget: true
destination: platforms/blackberry-widget/www
html:
- filename: index.html
css:
- filename: style/index.css
- filename: style/blackberry.css
javascript:
- filename: javascript/app.js
other:
- filename: style/image/*
- filename: platform/blackberry-webworks/*
---

Preloaded Database

$ rake database
=> database.json

JavaScript Libraries

xui JSON2.js
~71kB

}

PhoneGap Plugins

BlackBerry® BlackBerry WebWorks Android™ / iOS

URLCache URLCache URLCache
Database restore Database restore
Database search Database search
Database update
SplashScreen

<!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 Snifﬁng
//
// 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 browser
else if (Application.supports.browser.android) {
window.android.loadExternalUrl(href);
}
// Everyone else
else {
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 Detection

if (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);
}

Use Jasmine BDD

describe(‘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);
});
});

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 YOU
Michael Brooks
COM 12
October 20, 2011

BlackBerry DevCon 2011 - PhoneGap and WebWorks

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à BlackBerry DevCon 2011 - PhoneGap and WebWorks

Similaire à BlackBerry DevCon 2011 - PhoneGap and WebWorks (20)

Dernier

Dernier (20)

BlackBerry DevCon 2011 - PhoneGap and WebWorks

Notes de l'éditeur