Web works presso

The BlackBerry WebWorks Platform
Alan Wong
alawong@rim.com
February 26, 2011

WEBWHAT?
What is the BlackBerry WebWorks platform?

What Is BlackBerry WebWorks?

BlackBerry WebWorks is an application platform that
enables developers to create standalone applications
using modern and standardized web technologies.

WebWorks applications can be fully-featured “Super
Apps” through their ability to integrate with native
BlackBerry and PlayBook features.

Examples: What Do They Look Like?

Architecture: How Does It Work?

• User interface
– Powered by Web
– HTML5 and CSS 3 Your app

WebKit Engine
• Application logic
WebWorks Platform
– JavaScript®
BlackBerry Platform
– BlackBerry WebWorks
APIs
– Access to BlackBerry OS

BBM Security Push
Monetization PIM Background
Media Storage Multi-Tasking
Hardware Compression …

What Can They Do?

Services &
Content

BROWSER
WEB ENGINE
SERVICES APPLICATION
INTEGRATION

PUSH

SYSTEM
EVENTS

File
MENUS GPS STORAGE System

SQLite

WHY CONSIDER WEBWORKS?
It matters because …

BlackBerry Programming Models

Sweet spot?!?

Application
power

Simplicity of development
and maintenance

• Hitting the sweet spot means
– The richness of device access and reuse of Java assets
– The simplicity of the browser programming model

Developer Spectrum

Native-based UI Browser-based UI

Functionality provided by BlackBerry OS Functionality provided by Browser Engine

Native Application WebWorks Platform BlackBerry Browser

• Where in the spectrum do developers gravitate to?
– Do they create a Native application (Highly functional)?
– Do they create Web content for the Browser (Flexible UI and low cost)?
– Or a mix of the two?

9

How Is This Different Than Developing
Blackberry Applications Today?

• The BlackBerry WebWorks Platform gives you more solutions
to choose from
– Developers now have another way to create BlackBerry applications
– Choose to develop applications in the way that is most comfortable
and suitable to your needs

JAVA WEBWORKS WEB

• Like writing a native application…but without having to learn
the native language

Market for WebWorks Applications

• BlackBerry WebWorks applications are supported on
– BlackBerry Device Software version 5.0
– BlackBerry 6
– BlackBerry PlayBook

http://us.blackberry.com/developers/choosingtargetos.jsp

Web = Platform plurality

iOS Android BlackBerry & PlayBook

• It’s a diverse world out there for developers
• Strong Web standards offer support across multiple platforms
– Reuse Web assets and developer skills to create BlackBerry apps
• Each platform seeing growth in access to native functionality
– Access the richness and differentiators of BlackBerry platform
– Overcome weaknesses of “Write-once-run-everywhere” approach

CREATING APPS USING WEBWORKS
How to get started today

How Do You Create a BlackBerry
WebWorks Application?

• Using Command Line Utility:
– BlackBerry WebWorks Packager
• Input: WebWorks archive (*.ZIP)
• Output: Packaged BlackBerry WebWorks App (*.COD)

• Using Popular Development Environments:
– BlackBerry® WebWorks Plug-In for Eclipse
– BlackBerry® WebWorks Plug-In for Visual Studio 2008
– Debugging support available

http://www.blackberry.com/developers/widget

Agnostic Developer Experience

Developer Tools… Middleware… Frameworks… Test/Runtime…

Index.html

• First we will create the content for your BlackBerry WebWorks
application by creating a directory that has an index.html:
– C:MyDirectoryindex.html

<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no"/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Some UI Examples

Total time to create all the screens seen above: 4 days!

WebWorks Configuration Document (config.xml)

• Descriptor file for a BlackBerry WebWorks application
– XML file (config.xml), based on the W3C specification for widgets
• Define application characteristics and properties
– Bindings to platform services
– Security Policies

JavaScript Extensions
• Objects that connect JavaScript engine with underlying Java
code
– BlackBerry WebWorks apps can be more than just web content
– Enable powerful “Super App” functionality

http://www.blackberry.com/developers/docs/widgetapi/

Sample Code: File Access
<script type="text/javascript">
//Offline storage:
function saveToFile(fileContents)
{
var data = blackberry.utils.stringToBlob(fileContents);
var filePath = "file:///store/home/user/webworks.txt";
blackberry.io.file.saveFile(filePath, data);
}
</script>

Sample Code: Creating a calendar entry
<script type="text/javascript">
function newCalendarEntry(summary, date)
{
var appt = new blackberry.pim.Appointment();
appt.summary = summary;
appt.date = date;

var args = new blackberry.invoke.CalendarArguments(appt);
args.view = 0; //0 = Create, 1 = View

blackberry.invoke.invoke(blackberry.invoke.APP_CALENDAR, args);
}
</script>

WebWorks API Examples

• Application and system events
– onBackground, onCoverageChange, etc.
• Push services
– Both Corporate and Consumer push
using existing techniques
• Identity information
– Phone numbers, PIN, email addresses
• Personal information management
– Search and edit email, calendar, tasks,
notepad, contacts, phone logs, etc.
• Application launcher
– Invoke native apps with data, invoke
third-party Java® apps with data

WebWorks API Examples

• File IO
– Read, write files on eMMC and SDCard
• System properties
– Change home screen icon, background,
etc.
• User interface
– System Dialogs, Dynamic Menu items
• Geolocation
– Retrieve live GPS information
• Audio
– Play and Pause local or remote audio

How Do I Sell My BlackBerry
WebWorks Applications?

• Same distribution model as existing BlackBerry applications!
• BlackBerry WebWorks Development tools produce all
necessary deployment files
• Users can install your application using:
– BlackBerry App World™ storefront
– The BlackBerry® Browser
– Pushed automatically by the BlackBerry® Enterprise Server

WAIT, THERE’S MORE?
Look at what else you can do with WebWorks!

What’s new? WebKit!

• WebKit rendering engine added to BlackBerry® 6
– BlackBerry WebWorks applications receive the benefits of WebKit
– Combine the power of HTML5 and CSS3 with JavaScript APIs

http://www.benjoffe.com/code/

WebKit on BlackBerry

28

HTML5 Support

• HTML 5
Audio: Easy integration of audio without the need for plugins
Canvas: Use JavaScript to draw graphs & animations
Application Cache: Store web resources for use when offline
Web Workers: Asynchronous script processing
Geolocation: Retrieve GPS or cell site coordinates
Web Database: Store local data in SQLite database
Forms: Use new interactive form elements.

CSS 3 and SVG

•
CSS 3 allows the creation of stunning transition images and graphic
effects (e.g., scale, rotate using CSS styles)
•
Create graphics/fonts/animations that scale accurately to zoom
level (Eliminates pixelization)

http://www.subcide.com/experiments/fail-whale/

WebKit offers Better Performance
Performance
• BlackBerry 6 Loads Pages >50% Faster than 5.0!

• BlackBerry 6 Has Significant Improvement in JavaScript and
HTML Performance

What’s new? PlayBook!
• Use WebWorks to create PlayBook applications
– Command line packager turns Web assets into AIR applications

• Powered by enhanced WebKit browser engine
– Better support of HTML5 and CSS3 standards

• Full support of Flash 10.1
– Package existing Flash content into a PlayBook application

Developing for PlayBook with WebWorks

PlayBook
WebWorks BlackBerry PlayBook
SDK Application (.bar)

http://www.gettyicons.com

COMMUNITY
Working together to make WebWorks great

Open Source Community
OSS Community
BlackBerry WebWorks Platform
http://www.github.com/blackberry

Github

RIM developer •Contribute

•Participate
OSS Code •Consume
(source) App developer
•Review •Participate

• Create

Contributor agreement Apache 2.0 License
OS developer Must register
WebWorks
Application

Community Learning Resources

• BlackBerry Developer Zone:
– http://www.blackberry.com/developers
– Resources: Online Forums
– Resources: Developer Resource Center

• BlackBerry Developers Blog
– http://devblog.blackberry.com

• Twitter
– http://twitter.com/BlackBerryDev

NEXT STEPS
My Challenge For You

Developer Challenge: Build an app.

• Step 1: Build your first PlayBook application (THIS WEEK)
– Download and install the WebWorks SDK for PlayBook
– Create a ‘Hello World’ app and load it on the PlayBook simulator

• Step 2: Improve your application (NEXT 2 WEEKS)
– What is your great idea for a mobile Web application?
– Use HTML5 and CSS3 to add functionality and UI to your app

• Step 3: Submit your application(s) to App World
– http://www.blackberry.com/developers/appworld/
– Free PlayBook offer deadline is March 15, 2011

LIVE CODING DEMO
Lights! Camera! Action!

Development Example

1

• Initial prototype with nothing but file resources,
notepad and Firefox.

2

• Adding basic Apache on Localhost to test real
HTTP-based resources (Vs. file resources)

3

• Eclipse as the development environment, running
with Apache Tomcat, and a BB device as the browser
on Wi-Fi hitting the dev machine (e.g., 192.168.1.101)

Index.html

• First we will create the content for your PlayBook WebWorks
application by creating a directory that has an index.html:
– C:MyDirectoryindex.html

<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no"/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Config.xml

• Then, create the configuration file:
– C:MyDirectoryconfig.xml
• This file configures properties for your app, such as the icon to
use for the home screen, bindings to platform services, and
security policies
<?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">
<name>My App</name>
<content src="index.html" />
</widget>

Packaging

• Use the SDK to package your app
– cd "C:Program FilesResearch In MotionBlackBerry WebWorks
Packager“
• Run the command line tools
bbwp "C:myapp.zip" /o "C:OutputDirectory"

>>[INFO] Parsing command line options
>>[INFO] Parsing bbwp.properties
>>[INFO] Validating WebWorks archive
>>[INFO] Parsing config.xml
>>[INFO] Populating application source
>>[INFO] Compiling WebWorks application
>>[INFO] Generating output files
>>[INFO] WebWorks application packaging complete

The Simulator

• Launch one of the BlackBerry Device
Simulators:
– cd "C:Program FilesResearch In
MotionBlackBerry WebWorks
Packagersimpack6.0.0.190”
– 9800.bat

Your App

• Load your app in the simulator
– From the device simulator file menu select "File ->
Load BlackBerry Application or Theme...“
– Browse to the "C:OutputDirectory" that you had
supplied to the command line tooling
– Go to the “StandardInstall” subfolder
– Select the "myapp.cod" file
– click "Open" on the simulator's browse dialog.

• Run your app
– Scroll to the "Downloads" section on the device
simulator
– Launch your application "My App"

Summary

• BlackBerry and PlayBook WebWorks Application Platform

• Create standalone applications using Web technologies

• Integration with device functionality and data

• Powered by WebKit engine

• Open Source

Thank You
Alan Wong
alawong@rim.com
February 26, 2011

Web works presso

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Web works presso (20)

More from momoahmedabad (14)

Web works presso