develop using the blackberry webworks sdk for blackberry...

Develop using the BlackBerry WebWorks SDK for BlackBerry

Tablets (1 of 4)

1February 1, 2011

“Getting Started”

Adam Stanley

Prosanta Bhattacherjee

BlackBerry Developer Relations

2

BlackBerry WebWorks Application Platform Overview

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?

BlackBerry and PlayBook features.

Application

power

BlackBerry Programming Models

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

Native Application BlackBerry Browser

Native-based UI Browser-based UI

Functionality provided by BlackBerry OS Functionality provided by Browser Engine

WebWorks Platform

Developer Spectrum

5

• 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?

BlackBerry Smartphone BlackBerry PlayBook

Web = Platform Plurality

• 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

Hollywood Bowl

(LA Philharmonic)Loca FM

Real World Examples

Superheroes Alliance

(Uken Games)Campus Party

(Contento Media)

Guitar Chords

(My App Catalog)

(LA Philharmonic)

Sea-Web

(Nitobi)

Loca FM

(Vanatur World Mobile)

8

Features and Capabilities

Services &Content

WEBSERVICES APPLICATION

INTEGRATION

BROWSER ENGINE

What Can a WebWorks App Do?

GPS

PUSH

MENUS

INTEGRATION

STORAGE

SYSTEM EVENTS

SQLite

FileSystem

• 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

Web Platform Powered by WebKit

http://entanglement.gopherwoodstudios.com/light

• Improved high fidelity WebKit browser engine

• Better support of HTML5 and CSS3 standards

• Package existing Flash content into a PlayBook application

• Full support of Adobe Flash 10.1

PlayBook Web Platform

• Faster hardware

• 1Ghz dual core processor

• 1Gb Ram

WebWorks JavaScript Extensions

• Custom objects that can connect browser engine with

underlying Java code

• BlackBerry WebWorks apps can be more than just web content

• Enables “Super App” functionality

http://www.blackberry.com/developers/docs/webworks/api/playbook/

WebWorks API Examples

• Application and system events

• onBackground, onCoverageChange, etc.

• Application launcher

• Invoke native apps with data, invoke third-party apps with invoke third-party apps with data

• System properties

• Change home screen icon,

background, etc.

• User interface

• System Dialogs

Sample Code: Application Integration

<script type="text/JavaScript">function openVideoCamera(){var args = new blackberry.invoke.CameraArguments();args.view = blackberry.invoke.CameraArguments.VIEW_RECORDER;blackberry.invoke.invoke(blackberry.invoke.APP_CAMERA, args);

}</script></script>

15

Architecture

Architecture: How Does it Work?

WebKit EngineWebKit Engine

Your app

• User interface

– Powered by Web

– HTML and CSS

• Application logicWebWorks PlatformWebWorks Platform

SecuritySecurity

PIMPIM

StorageStorage

PushPush

MediaMedia

HardwareHardware

BBMBBM

MonetizationMonetization

CompressionCompression

BackgroundBackground

Multi-TaskingMulti-Tasking

BlackBerry Platform

……

• Application logic

– JavaScript®

– WebWorks APIs

– Access to Platform OS

RIM developer

OSS CommunityBlackBerry WebWorks Platform

Contribute

Github

Open Source Community

RIM developer

OS developer

App developer

OSS Code

(source)Consume

Participate

• Create

Contribute

Participate

Review

WebWorks

Application

http://www.github.com/blackberry

• BlackBerry WebWorks applications are supported on

– BlackBerry PlayBook

– BlackBerry 6

– BlackBerry Device Software version 5.0

Market for WebWorks Applications

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

19

Development Tools

1. Setup Development Environment

2. Write application content (HTML, CSS, JavaScript

files)

How do you build BlackBerry WebWorks Applications?

3. Create a ZIP archive containing these Web assets

4. Package your application using the WebWorks SDK

BlackBerry WebWorks

SDK for PlayBook

Adobe AIR SDK

BlackBerry PlayBook

PlayBook

Development

BlackBerry WebWorks SDK Development Tools

SDK for PlayBook

WebWorks

Application

Archive (ZIP)

HTML

CSS

JavaScript

BlackBerry WebWorks

SDK for PlayBook

Adobe AIR SDK

BlackBerry PlayBook

*.bar

PlayBook

Development

BlackBerry WebWorks SDK Development Tools

Java SDK

BlackBerry

WebWorks SDK

SDK for PlayBook

BlackBerry Smartphone

WebWorks

Application

Archive (ZIP)

*.cod

Smartphone

Development

• Adobe AIR SDK

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

• BlackBerry WebWorks SDK for Tablet OS

• http://us.blackberry.com/developers/tablet/webworks.jsp

Required Development Tools

• VMware Player

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

• BlackBerry PlayBook Simulator

• http://us.blackberry.com/developers/tablet/webworks.jsp

24

Installing the Adobe AIR SDK

• Download the AIR SDK from Adobe’s website:

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

Step 1: Installing the Adobe AIR SDK

• Extract the contents of the AIR SDK to your computer:

• Recommend “C:\Program Files\Adobe\AirSDK” for Windows

Step 1: Installing the Adobe AIR SDK

Step 1: Installing the Adobe AIR SDK

28

Setting Up The WebWorks SDK For PlayBook

• Download the BlackBerry WebWorks SDK for Tablet OS:

• http://us.blackberry.com/developers/tablet/webworks.jsp

Step 2: Setting up the SDK

Step 2: Setting up the SDK

Step 2: Setting up the SDK

• Enter the location of where you extracted the

contents of the AIR SDK in Step 1

Step 2: Setting up the SDK

Step 2: Setting up the SDK

C:\Program Files\Research In Motion\BlackBerry WebWorks Packager for PlayBook

Step 2: Setting up the SDK

35

Installing VMware Player

• Download the VMware player from VMware's website:

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

Step 3: Installing VMware Player

Step 3: Installing VMware Player

Step 3: Installing VMware Player

Step 3: Installing VMware Player

• VMware installation requires a system restart

• Coffee break …

Step 3: Installing VMware Player

41

BlackBerry PlayBook Simulator

• Download the BlackBerry PlayBook Simulator:

• http://us.blackberry.com/developers/tablet/webworks.jsp

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

• Choose a location to install simulator

• Installation unpacks a ISO file that will be used by the VMware player

• Recommend “C:\device simulators\<simulator name>” on Windows

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

• Browse to location where you installed simulator ISO file

• C:\device simulators\<simulator name>\<ISO file>

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

To direct input to virtual machine, press CTRL + G

To return to your computer, press CTRL + ALT

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

Step 4: Setting Up The Simulator

63

Writing An App“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">

Start Writing Code

<style type="text/css">

body { font-size: 5em; }

</style>

</head>

<body>

<p> Hello World </p>

</body>

</html>

• 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"

Start Writing Code

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

xmlns:rim="http://www.blackberry.com/ns/widgets"

version="1.0.0.0">

<name>helloWorld</name>

<content src="index.html"/>

</widget>

• Create an archive (ZIP) named helloWorld.zip containing

the index.html and config.xml files

Start Writing Code

• Using the BlackBerry WebWorks Packager (bbwp.exe) • Command line tool used to package the ZIP file

• From a command prompt navigate to the WebWorks SDK

installation folder:

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

Packager for PlayBook\bbwp

bbwp [drive:][path]archive [/s [dir]] [/o dir]

Start Writing Code

bbwp [drive:][path]archive [/s [dir]] [/o dir]

archive Specifies the .zip file to compile/s Save source. The default behavior is to not save

the source files. If dir is specified then creates dir\src\ directory structure. If no dir specifiedthen the path of archive is assumed

/o Redirects output file location to dir. If both /oand dir are not specified then the path of archive is assumed

/v Turn on verbose messages/h Display this usage information

C:\Program Files\Research In Motion\BlackBerry WebWorks Packager for PlayBook\bbwp>bbwp "c:\sandbox\web apps\helloWorld\helloWorld.zip"[INFO] Parsing command line options

• Run the BlackBerry WebWorks Packager (bbwp.exe)• Packages the helloWorld.zip file into a helloWorld.bar PlayBook application

Start Writing Code

[INFO] Parsing command line options[INFO] Parsing bbwp.properties[INFO] Validating WebWorks archive[INFO] Parsing config.xml[WARNING] Failed to find a <feature> element[WARNING] Failed to find the <author> element[INFO] Populating application source[INFO] Compiling WebWorks application[INFO] Packaging the bar file[INFO] Bar packaging complete[INFO] WebWorks application packaging complete

Start Writing Code

70

Deploying An Application

Deploying Your Application

Deploying Your Application

Deploying Your Application

Deploying Your Application

Deploying Your Application

Deploying Your Application

Deploying Your Application

• Use the BlackBerry Tablet OS SDK

• Installed as part of the WebWorks SDK for PlayBook

• Open a command prompt and navigate to:

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

Packager for PlayBook\bbwp\blackberry-tablet-sdk

Deploying Your Application

Packager for PlayBook\bbwp\blackberry-tablet-sdk

• Contains developer tools for BlackBerry Tablet OS:

• bin\blackberry-packager

• bin\blackberry-deploy

• bin\blackberry-signer

blackberry-deploy -installApp -device <device IP>

-package <BAR file path> -password <device password>

C:\Program Files\Research In Motion\BlackBerry WebWorks Packager 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

Deploying Your Application

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

Sending Install request...Info: Action: InstallInfo: File size: 40731Info: Installing ...actual_dname::helloWorld1a833da63a6b7e2098dae6d0662e1.MjA5OGRhZTZkMDY2MmUxICAgICAactual_id::MjA5OGRhZTZkMDY2MmUxICAgICAactual_version::1.0.0.0result::success

Deploying Your Application

Deploying Your Application

82

Getting Help

• BlackBerry WebWorks SDK for Tablet OS:

• http://us.blackberry.com/developers/tablet/webworks.jsp

• Getting started guides for Windows and Mac

• Developer tools and sample code downloads

• Development and API reference guides

Where To Find Help?

• BlackBerry Development Community

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

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

• Community Web Forum: http://bit.ly/8o5EMp

Where To Find Help?

Weather

Download sample code from the BlackBerry

Development Knowledge Base: http://bit.ly/bisiGf

SketchPad RSS Reader

• Developing using BlackBerry WebWorks SDK for BlackBerry

Tablets

– February 1, 2011: Getting Started

– February 3, 2011: My First App

– February 8, 2011: BlackBerry PlayBook Integration

Webcast Series

– February 10, 2011: User Interface Guidelines and Best Practices

http://webcast.streamlogics.com/audience/index.asp?eventid=49950807

• BlackBerry and PlayBook WebWorks Application Platform

• Create standalone applications using Web technologies

• Extensions can provide integration with device functionality

Summary

• Extensions can provide integration with device functionality

• Use Command Line Tools to build and deploy applications to

PlayBook

Questions and Answers

• Free BlackBerry PlayBook tablet offer

• www.blackberry.com/developers/blackberryplaybookoffer

• Next webcast on Feb 3 at 2:00 pm EST

• My First App

87