HTML5 WebWorks

Building HTML5 apps with native
capabilities
Jorge del Casar – @jorgecasar
February 29, 2013

What can you do with HTML5?

Geolocation
Web Sockets
Offline storage
Audio / Video ScoreMobile Tablet

Notifications
WebGL
… and more
Slacker

HTML5Test.com

http://html5test.com/compare/browser/bb07/rimtabletos20/bb10.html
5

BlackBerry WebWorks

“A cross-platform HTML5 application framework for
creating standalone BlackBerry applications “

Real Examples in App World

The Economist News360 HockeyCentral

Huffington Post Pesktop Canada’s Got Talent

HTML5 powered by WebWorks

HTML5, CSS3, JavaScript

WebKit engine

WebWorks platform

BlackBerry Developer APIs

https://developer.blackberry.com/html5/api

How to get there?

Web Assets WebWorks Tools BlackBerry Applications

Connect HTML5 with native device
capabilities
Software & hardware & data … oh my!

10

Storage

HTML5 localStorage
 Name-value pairs
localStorage.clear();
localStorage.setItem("Greeting", "Hello World");

key = localStorage.key(0); // "Greeting"
item = localStorage.getItem(key); // "Hello World"

HTML5 Web DB
 Structured relational database

var size = 2 * 1024 * 1024;
db = window.openDatabase("WebDB", "1.0", "Example", size, onInit);

HTML5 File System

Read/Write native file-system
Able to un-sandbox when wrapped in WebWorks
function gotFile(fileEntry) {
fileEntry.createWriter(gotWriter, errorHandler);
}
function gotFs(fs) {
fs.root.getFile(blackberry.io.sharedFolder +
"/downloads/blackberry.jpg",
{create: true}, gotFile, errorHandler);
}
...

blackberry.io.sandbox = false;
window.webkitRequestFileSystem(PERSISTENT, 10 * 1024, gotFs,
errorHandler);
}

Touch

Define custom touch event handlers
 Up to 4-finger touch events supported
 See “Sample Code – SketchPad Application” http://bit.ly/hz67JX

document.ontouchstart = function(event) {

//Tell browser engine not to scroll/span/zoom
// when user touches screen:
event.preventDefault();

var touch = event.changedTouches[0];
alert(touch.pageX + "," + touch.pageY);
Pong-port sample
}
http://spaceport.io

Accelerometer, Magnetometer

HTML5 Device motion, Orientation
 Respond to physical user input
window.addEventListener("devicemotion",
function(event) {

var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;

// Facing up from the Earth’s surface is:
// { x : 0, y : 0, z : 9.81 }

}, true);

Aura sample app

GPS

HTML5 Geolocation
 Retrieve users’ GPS coordinates
 Provide location-aware content
function onSuccess(position) {

console.log("lat = " + pos.coords.latitude);
console.log("lon = " + pos.coords.longitude);

}

var ops = { enableHighAccuracy : true };

navigator.geolocation.getCurrentPosition(
onSuccess, onError, ops);

Web Notification

HTML5 API for generating system messages
 Proactively notify users about application events
var icon = "http://testuri.com/icon.png";
var title = "Web Notification";
var msg = "Sent from the Kitchen Sink app.";

var notification =
webkitNotifications.createNotification(icon, title, msg);

notification.show();

 Separate Notification() with app-like
experience, BlackBerry Hub

HTML5: Media Capture

Capture Picture/Video
Leverages System Camera app
<input type="file" accept="image/*" capture="camera">

HTML5 API: Sockets

Real-time communication using persistent connections
 Frameworks: Socket.io, Pusher.js
 E.g. Twitter
 Requires server component

var url = "ws://my.url.com:8001";
var socket = new WebSocket(url);

socket.onmessage = function(e) {
displayMessage(e.data);
}

wordsquared.com

HTML5 API: WebGL

3D graphics powered by OpenGL ES
 Frameworks: three.js, CopperLicht, SceneJS, GLGE
 GPU provides hardware acceleration

Tunnel Tilt game
 Free download in App World
 Source code in Github
https://github.com/blackberry/WebGL-Samples

BlackBerry 10
WebWorks reborn

20

WebWorks APIs

JavaScript wrappers for OS developer APIs
 http://developer.blackberry.com/html5/api
 Identity, Invoke, System…

Learning resources
 http://github.com/blackberry/WebWorks-Samples
 See “kitchen sink” sample application for demos

BlackBerry 10 WebWorks SDK

JavaScript framework, backed by Native C/C++
 No longer Java J2ME or Adobe AIR

JavaScript packager
 Running in Node.js

API evolution
 W3C/Cordova alignment
 Build plan for future move

BlackBerry 10 and Ripple

Chrome extension
Multi-platform support
 BlackBerry 10, Tablet
OS and BlackBerry OS
Build and sign
BlackBerry apps

Ripple mobile emulator

 Development tool for web developers
 Preview, test and build BlackBerry web applications
 Emulate device-specific APIs and capabilities

Remote Web Inspector

What is it?
 Debug web content running on a remote device.
 Profile to optimize web page performance.
 Works with simulators or live devices

BlackBerry 10 WebWorks APIs

blackberry.app

blackberry.event

blackberry.system

blackberry.identity

JavaScript C/C++

BlackBerry 10 WebWorks

<script type="text/javascript" src="webworks.js"></script>

function onLoad() {
document.addEventListener("webworksready", start);
}

Config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.100"
id="webworkspim"
xml:lang="en">

<name>PIM Contacts</name>
<author>Research In Motion</author>
<content src="index.html"/>
<icon src="appicon.png" />

<feature id="blackberry.pim.contacts" />

Some recent API additions

Invoke
 Invoke other apps, card
 Be invoked
PIM
 Contacts
 Calendar, Messages on their way
BBM
 Update profile, invite to download

Custom Extensions
Building your own WebWorks APIs

30

Custom WebWorks APIs

Build your own APIs
 Access native layer functionality
 Go beyond HTML5 and core WebWorks

JavaScript interface for platform code
 BlackBerry OS = Java
Lensboost
 Tablet OS = AIR Mblware Ltd

 BlackBerry 10 = C/C++


WebWorks SDK for BlackBerry 10
 Platforms = BlackBerry 10
 Native language = C/C++

javascript native
client.js index.js manifest.json jnext.cpp jnext.hpp


Open Source
 http://github.com/blackberry/WebWorks-Community-APIs
 Get started using TEMPLATE sample in Github

Resources
Places to go, people to see, what’s coming
next

34

WebWorks Roadmap

Frequent releases
Incremental APIs, emulation

http://developer.blackberry.com/downloads/roadmap

For more information

http://developer.blackberry.com/html5

THANK YOU
Jorge del Casar - @jorgecasar
February 29, 2013

HTML5 WebWorks

Related slideshows

More Related Content

HTML5 WebWorks

Editor's Notes