HTML5 WebWorks
-
Upload
raul-jimenez -
Category
Technology
-
view
2.523 -
download
0
description
Transcript of HTML5 WebWorks
Building HTML5 apps with native capabilitiesJorge del Casar – @jorgecasar
February 29, 2013
HTML5 is good for developers
Community momentum
What can you do with HTML5?
Geolocation Web Sockets Offline storage Audio / Video Notifications WebGL … and more
Slacker
ScoreMobile Tablet
5
HTML5Test.com
http://html5test.com/compare/browser/bb07/rimtabletos20/bb10.html
BlackBerry WebWorks
“A cross-platform HTML5 application framework for creating standalone BlackBerry applications “
Real Examples in App World
News360The Economist
Huffington Post Pesktop Canada’s Got Talent
HockeyCentral
HTML5 powered by WebWorks
HTML5, CSS3, JavaScript
WebKit engine
WebWorks platform
BlackBerry Developer APIs
https://developer.blackberry.com/html5/api
Web Assets WebWorks Tools BlackBerry Applications
How to get there?
Connect HTML5 with native device capabilitiesSoftware & hardware & data … oh my!
10
Storage
HTML5 localStorage Name-value pairs
HTML5 Web DB Structured relational database
localStorage.clear(); localStorage.setItem("Greeting", "Hello World");
key = localStorage.key(0); // "Greeting" item = localStorage.getItem(key); // "Hello World"
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
Separate Notification() with app-likeexperience, BlackBerry Hub
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();
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
Chrome extension Multi-platform support
BlackBerry 10, Tablet OS and BlackBerry OS
Build and sign BlackBerry apps
BlackBerry 10 and Ripple
2 x
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
C/C++JavaScript
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 Tablet OS = AIR BlackBerry 10 = C/C++
LensboostMblware Ltd
Custom WebWorks APIs
WebWorks SDK for BlackBerry 10 Platforms = BlackBerry 10 Native language = C/C++
javascript
client.js index.js manifest.json
native
jnext.cpp jnext.hpp
Custom WebWorks APIs
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