BlackBerry WebWorks: Apps for the Smartphone and Tablet

Alan Wong

Developer Relations | Asia Pacific

alawong@rim.com

November 22, 2011

Agenda

WebWorks Overview

Getting Started

Let‟s Build a WebWorks App

Ripple

@twitterhandle – 2

WebKit rendering engine added to BlackBerry® 6 and BlackBerry Tablet OS

BlackBerry WebWorks applications benefit from strengths of WebKit

Combine the power of HTML5 and CSS3 with JavaScript APIs

http://entanglement.gopherwoodstudios.com/light

Web Platform Powered by WebKit

• HTML5 is a standardized technology

• Supported consistently across different platforms and engines

• Enhancements to existing standard allow integration with platform

• See “HTML reference – BlackBerry browser” documentation

• Complete list of BlackBerry supported HTML5 elements

• http://bit.ly/aGFoub

• Many great HTML5 learning resources available online

• http://diveintohtml5.org/

• http://html5demos.com

• http://www.w3schools.com/html5/default.asp

• http://www.html5test.com

Using HTML5 In Your Application

Touch optimized Web frameworks support multiple platforms

Examples: jQuery Mobile/UI, Sencha Touch, Dojo, AlphaSoftware

Improve the UI and functionality of your application

Save time and money by using existing code!

http://touchsolitaire.mobi/app/

Sencha Touch jQuery Mobile

http://jquerymobile.com/demos/

3rd Party Frameworks

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.

What is BlackBerry WebWorks?

Application power

Simplicity of development and maintenance

Hitting the sweet spot means

The richness of device access and reuse of assets

The simplicity of the browser programming model

BlackBerry Programming Models

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 each platform

BlackBerry Smartphone BlackBerry PlayBook

Web = Platform Plurality

• BlackBerry WebWorks applications are supported on

– BlackBerry PlayBook

– BlackBerry 6

– BlackBerry Device Software version 5.0

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

Market for WebWorks Applications

Superheroes Alliance

(Uken Games) Campus Party

(Contento Media)

Guitar Chords

(My App Catalog)

Hollywood Bowl

(LA Philharmonic)

Sea-Web

(Nitobi)

Loca FM

(Vanatur World Mobile)

Real World Examples

Architecture: How Does it Work?

WebKit Engine

WebWorks Platform

Security PIM

Storage

Push

Media Hardware

BBM Monetization

Compression

Background Multi-Tasking

BlackBerry Platform

…

Your app

• User interface

– Powered by Web

– HTML and CSS

• Application logic

– JavaScript®

– WebWorks APIs

– Access to Platform OS

Services & Content

GPS

WEB SERVICES

PUSH

MENUS

APPLICATION INTEGRATION

STORAGE

SYSTEM EVENTS

SQLite

File System

BROWSER ENGINE

What Can a WebWorks App Do?

• A WebWorks application does not need an active network connection • Created using Web technologies, but designed to function offline

• Web assets of your application can be local: <a href="local:///index.html">Home</a>

<a href="file:///accounts/1000/shared/camera/IMG_01.jpg">

Camera Pic</a>

• Can also use live resources to populate content dynamically

<img src="http://www.mysite.com/image1.png"/>

Live vs. Local Web Content

CSS 3 is a standardized technology

Supported consistently across different platforms and browser engines

Allows you to design great looking application UI with less code

Great learning resources available:

http://www.css3.info/preview

NetTuts: http://bit.ly/aC5yjS

border-radius: 20px;

box-shadow: .2em .2em .5em #000;

@font-face {

font-family: myCustomFont;

src: url('myCustomFont.otf');

}

Making it Look Good

Use Media Queries to target CSS against different screen sizes

Support both BlackBerry PlayBook and BlackBerry Smartphone applications with same CSS.

Easier management of multiple platforms with single code base

/* BlackBerry Playbook */

@media (min-width:480px) and (max-width:1024px) {

body {

font-family: Calibri;

font-size: 2em;

}

}

/* BlackBerry Torch 9800 */

@media (max-width:360px) and (max-height:480px) {

body {

font-family: Verdana;

font-size: 1em;

}

}

CSS3 Media Query

1024x600 360x480

http://colly.com/

CSS3 Media Query Real World Example

1. Setup Development Environment

2. Write application content (HTML, CSS, JavaScript files)

3. Create a ZIP archive containing these Web assets

4. Package your application using the WebWorks SDK

How do you build BlackBerry WebWorks Applications?

Java SDK

BlackBerry

WebWorks SDK for

smartphones

BlackBerry WebWorks

SDK for PlayBook

Adobe AIR SDK

BlackBerry Smartphone

BlackBerry PlayBook

Deploy *.bar

WebWorks

Application

Archive (ZIP)

PlayBook

Development

Smartphone

Development

BlackBerry WebWorks SDK Development Tools

Deploy *.cod

Let‟s Build a WebWorks Application

Target: BlackBerry Smartphone

Dev environment setup

Required to package WebWorks file assets into a BlackBerry application

BlackBerry WebWorks SDK for Smartphone

Java SDK 1.6

BlackBerry WebWorks SDK

Optional: BlackBerry Smartphone simulator (Windows Only)

@twitterhandle – 20

Download Java SDK (min version 1.6):

http://java.sun.com/javase/downloads/index.jsp#jdk

Step 1: Java SDK 1.6

Download the BlackBerry WebWorks SDK for Smartphone:

http://developer.blackberry.com/html5/download/sdk

Step 2: Set up the SDK

Step 2: Set up the SDK

Getting Started: Building “Hello World”

Open your favorite text editor

Create a new file named index.html

Add the following HTML content to this file:

<html>

<head>

<style type="text/css">

body { font-size: 5em; }

</style>

</head>

<body>

<p> Hello World </p>

</body>

</html>

Start Writing Code: Landing page

Create a home screen icon named icon.png

Recommended dimensions: 92 x 92 pixels

Recommended file format: PNG

Use existing assets:

Re-use images from your own Web site

Royalty free images online

Create your own icons

http://www.orison.biz/apps/playbook-icon-maker/

Image authoring tools (e.g. PhotoShop, GIMP)

Start Writing Code: Icon

Create a second file named config.xml

Add the following XML content to this file:

<?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.0">

<name>Hello World</name>

<icon src="icon.png"/>

<content src="index.html"/>

</widget>

Start Writing Code: Config

XML document based on W3C spec

http://www.w3.org/TR/widgets/#configuration-document0

Used to define system properties and application permissions

Application name, description, version and icon

Maintains a list of domain and feature permissions

See “Code sample: Creating a BlackBerry WebWorks configuration document” for full details

http://bit.ly/fdOiO6

Configuration Document (config.xml)

Define visual characteristics for your application

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets" version="1.0.0.0">

<name>helloWorld</name>

<icon src="icon.png"/>

<content src="index.html"/>

</widget>

Configuration Document (config.xml)

Keeping your application files organized and well structured.

No IDEs or project files

Steps:

1. Create folder C:\sandbox\web apps

2. Create folder C:\sandbox\web apps\helloWorld

3. Save index.html and config.xml in the helloWorld folder

Start Writing Code: Folders

Ripple!

Packaging & Emulating

What is Ripple?

A multi-platform mobile emulator

Renders standardized Web content similar to a web browser

Web inspector debugging & profiling

Emulation of device specific APIs and features

Package and sign BlackBerry applications

@twitterhandle – 32

Installing Ripple

Download installer for standalone Ripple

http://developer.blackberry.com/html5

Install standalone Ripple

Suggest using recommended installation folder

Optional: Ripple extension for Chrome

Required: Google Chome browser

http://ripple.tinyhippos.com

@twitterhandle – 33

Using Ripple

Launch Ripple

Select „WebWorks-OS‟ platform

Explore features

Change platforms

Switch devices

Use Web Inspector

@twitterhandle – 35

Configure settings

SDK Path

Bbwp installer root directory

Project Root

Application source code

Archive Name

Output Folder

Different than project root @twitterhandle – 36

Build using Ripple

Open options menu

Package

Package & Sign

Package & Launch

@twitterhandle – 37

Build using Ripple

@twitterhandle – 38

Optional: BlackBerry Simulator

Simulator included in BBWP install

Launch the Simulator and Load your app using the “Package & Launch” option in Ripple

@twitterhandle – 39

For More Information…

Online resources:

http://developer.blackberry.com/html5

http://blackberry.github.com/

@twitterhandle – 40

Now Let‟s Build Again…

Target: BlackBerry PlayBook

Adobe AIR SDK

https://www.adobe.com/special/products/air/sdk/

VMware Player

http://www.vmware.com/products/player/

BlackBerry WebWorks SDK for Tablet OS

https://bdsc.webapps.blackberry.com/html5/download/sdk

Required Development Tools:

Download AIR SDK (min version 2.7):

http://www.adobe.com/products/air/sdk/

Step 1: Adobe AIR SDK

Download the BlackBerry WebWorks SDK for Tablet OS:

http://developer.blackberry.com/html5/download/sdk

Step 2: Set up the SDK

Step 2: Set up the SDK

Run the PlayBook Simulator

VMware player is available from VMware's website:

http://www.vmware.com/products/player

Open BlackBerryPlayBookSimulator.vmx virtual machine

Found in ~\bbwp\blackberry-tablet-sdk folder

Use “blackberry-deploy” from the BlackBerry Tablet OS SDK

Installed as part of the BlackBerry WebWorks SDK for PlayBook

Deploying Your Application

C:\Program Files\Research In Motion\BlackBerry WebWorks Pack

ager for PlayBook\bbwp\blackberry-tablet-sdk>blackberry-deploy -

installApp -device 192.168.198.134 -package "c:\sandbox\

web apps\helloWorld\bin\helloWorld.bar" -password pass

Sending Install request...

Info: Action: Install

Info: File size: 40731

Info: Installing ...

actual_dname::helloWorld1a833da63a6b7e2098dae6d0662e1.MjA5OG

RhZTZkMDY2MmUxICAgICA

actual_id::MjA5OGRhZTZkMDY2MmUxICAgICA

actual_version::1.0.0.0

result::success

Deploying Your Application

Installing an application:

Deleting an application:

View list of all installed applications:

Run “blackberry-deploy” without any arguments for a complete list of options.

blackberry-deploy –installApp -device 192.168.198.134

-package "c:\sandbox\web apps\helloWorld\bin\helloWorld.bar"

-password pass

blackberry-deploy –deleteApp -device 192.168.198.134

-package "c:\sandbox\web apps\helloWorld\bin\helloWorld.bar"

-password pass

blackberry-deploy –listInstalledApps -device 192.168.198.134

-password pass

BlackBerry Tablet OS SDK

Leveraging Existing Web Assets

Display live content from your Website

Define the <content> element to be a remote URL instead of a local HTML file

Enormous opportunity for Web developers

If you have a Blog, News site, Web site or any online presence, you MUST at the very least create a Tablet OS Web launcher.

Web Launcher

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets" version="1.0.0.0">

<name>devBlog</name>

<icon src="icon.png"/>

<content src="http://devblog.blackberry.com/"/>

</widget>

Building a Web Launcher application:

Create folder C:\sandbox\web apps\devBlog

Create the following config.xml file in this folder:

Web Launcher

More APIs

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

@twitterhandle – 53

THANK YOU

Alan Wong

Developer Relations | Asia Pacific

alawong@rim.com