BlackBerry WebWorks

Bhasker Thapan
Developer Group Manager , Noida
bhasker@blackberrydevteam.com
October 10, 2012

Topics
Introduction : BlackBerry WebWorks

HTML5

Web App Vs Native App

Why BlackBerry WebWorks

BlackBerry WebWorks App Development

Introduction to BlackBerry WebWorks

Mission….

To create, as a community, a simple to use cross platform SDK for Web
Developers to package their Web assets as a mobile application which
has Secure access to deeply integrated system level APIs.

Using HTML5 In Your Application

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

Web App Vs Native App

Native App Web App

Internet Access Not Required Required

Performance Yes No

Hardware Access Yes No

OS Access Yes No

Hardware & Yes No
Platform Dependent
Installation Must be Installed URL link

Updates Reinstallation Simple

Why 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.

Why BlackBerry WebWorks ?
 The richness of device access and reuse of assets .
 The simplicity of the browser programming model.
 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 WebWorks applications are supported on

 All BlackBerry PlayBook
 All BlackBerry 6 onwards including BlackBerry 10
 More than 60 Million Users

Live vs. Local Web Content

 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"/>

How to build BlackBerry WebWorks Applications?

1. Create your application web files.

1. Test and debug your application with the
Ripple emulator.

2. Create a BlackBerry WebWorks configuration
document (config.xml)

1. Package your application using the Ripple
emulator.

1. Deploy your application to a BlackBerry device
or simulator.

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)

Step 1 . Download and Setup Java SDK (min version 1.6):
http://java.sun.com/javase/downloads/index.jsp#jdk

Step 2. Download and Setup the BlackBerry WebWorks SDK for
Smartphone:
http://developer.blackberry.com/html5/download/sdk

Step 3. Download and Setup Ripple (Standalone)
 http://developer.blackberry.com/html5

1. Start Writing Code: Landing page
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>

2. Start Writing Code: Icon

① 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 icon
 http://www.orison.biz/apps/playbook-icon-maker/
 Image authoring tools (e.g. PhotoShop, GIMP)

3. Start Writing Code: Config
 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>

4. Configuration Document (config.xml)

 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

4. 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>

5. Start Writing Code: Folders

 Keeping your application files organized and well structured.

 No IDEs or project files

 Steps:

1. Create folder C:sandboxweb apps

1. Create folder C:sandboxweb appshelloWorld

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

6. Ripple! : Packaging & Emulating
 Launch Ripple : Select ‘WebWorks-OS’
platform

 Configure Settings

 SDK Path: Bbwp installer root directory

 Project Root: Application Source Code

 Archive Name

 Output Folder

 Different than project root.

6. Ripple! : Packaging & Emulating
 Build Using Ripple : Open options Menu

 Package

 Package & Sign

 Package & Launch

BlackBerry WebWorks

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to BlackBerry WebWorks (20)

Recently uploaded (20)

BlackBerry WebWorks