"BlackBerry Webworks : Apps for The Smartphone and Tablet"

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

Web Platform Powered by WebKit
 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

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

3rd Party Frameworks
 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!

Sencha Touch jQuery Mobile

http://touchsolitaire.mobi/app/ http://jquerymobile.com/demos/

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.

BlackBerry Programming Models

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

Web = Platform Plurality
BlackBerry Smartphone 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 each platform

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

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

Real World Examples

Hollywood Bowl
Loca FM (LA Philharmonic)
Guitar Chords
(Vanatur World Mobile) (My App Catalog)

Superheroes Alliance Campus Party
(Uken Games) Sea-Web (Contento Media)
(Nitobi)

Architecture: How Does it Work?

• User interface
– Powered by Web
– HTML and CSS Your app
WebKit Engine
WebWorks Platform
• Application logic
BlackBerry Platform
– JavaScript®
– WebWorks APIs
– Access to Platform OS BBM Security Push
Monetization PIM Background
Media Storage Multi-Tasking
Hardware Compression …

What Can a WebWorks App Do?
Services &
Content

BROWSER
WEB ENGINE
SERVICES APPLICATION
INTEGRATION

PUSH
SYSTEM
EVENTS
File
MENUS GPS STORAGE System

SQLite

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

Making it Look Good
 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

border-radius: 20px;
box-shadow: .2em .2em .5em #000;
@font-face {
font-family: myCustomFont;
src: url('myCustomFont.otf');
}

 Great learning resources available:
 http://www.css3.info/preview
 NetTuts: http://bit.ly/aC5yjS

CSS3 Media Query

 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
Real World Example

http://colly.com/

360x480 1024x600

How do you build BlackBerry WebWorks
Applications?
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

BlackBerry WebWorks SDK
Development Tools
PlayBook
Development BlackBerry PlayBook

Adobe AIR SDK

Deploy
*.bar

BlackBerry WebWorks
SDK for PlayBook

WebWorks
Application
Archive (ZIP)

Java SDK Deploy
*.cod

Smartphone BlackBerry
Development WebWorks SDK for
smartphones
BlackBerry Smartphone

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: Java SDK 1.6
 Download Java SDK (min version 1.6):
 http://java.sun.com/javase/downloads/index.jsp#jdk

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

Getting Started: Building
“Hello World”

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>

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

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>

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

Configuration Document (config.xml)
 Define visual characteristics for your application

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

<name>helloWorld</name>


<content src="index.html"/>

</widget>

Start Writing Code: Folders
 Keeping your application files organized and well
structured.
 No IDEs or project files

 Steps:
1. Create folder C:sandboxweb apps

2. Create folder C:sandboxweb appshelloWorld

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

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


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

Using Ripple

 Launch Ripple
 Select „WebWorks-
OS‟ platform

 Explore features
 Change platforms
 Switch devices
 Use Web Inspector


Configure settings

 SDK Path
 Bbwp installer root directory

 Project Root
 Application source code

 Archive Name

 Output Folder
 Different than project root

Build using Ripple

 Open options menu

 Package

 Package & Sign

 Package & Launch


Build using Ripple


Optional: BlackBerry Simulator

 Simulator included in BBWP install

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


For More Information…

 Online resources:
 http://developer.blackberry.com/html5
 http://blackberry.github.com/


Now Let‟s Build Again…
Target: BlackBerry PlayBook

Required Development Tools:
 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

Step 1: Adobe AIR SDK
 Download AIR SDK (min version 2.7):
 http://www.adobe.com/products/air/sdk/

Step 2: Set up the SDK
 Download the BlackBerry WebWorks SDK for Tablet OS:
 http://developer.blackberry.com/html5/download/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 ~bbwpblackberry-tablet-sdk folder

Deploying Your Application
 Use “blackberry-deploy” from the BlackBerry Tablet OS SDK
 Installed as part of the BlackBerry WebWorks SDK for PlayBook

C:Program FilesResearch In MotionBlackBerry WebWorks Pack
ager for PlayBookbbwpblackberry-tablet-sdk>blackberry-deploy -
installApp -device 192.168.198.134 -package "c:sandbox
web appshelloWorldbinhelloWorld.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

BlackBerry Tablet OS SDK
 Installing an application:
blackberry-deploy –installApp -device 192.168.198.134
-package "c:sandboxweb appshelloWorldbinhelloWorld.bar"
-password pass

 Deleting an application:
blackberry-deploy –deleteApp -device 192.168.198.134
-package "c:sandboxweb appshelloWorldbinhelloWorld.bar"
-password pass

 View list of all installed applications:
blackberry-deploy –listInstalledApps -device 192.168.198.134
-password pass

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

Leveraging Existing Web
Assets

Web Launcher
 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
 Building a Web Launcher application:
 Create folder C:sandboxweb appsdevBlog
 Create the following config.xml file in this folder:


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

<name>devBlog</name>


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

</widget>

More APIs

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


THANK YOU
Alan Wong
Developer Relations | Asia Pacific
alawong@rim.com

"BlackBerry Webworks : Apps for The Smartphone and Tablet"

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to "BlackBerry Webworks : Apps for The Smartphone and Tablet"

Similar to "BlackBerry Webworks : Apps for The Smartphone and Tablet" (20)

More from Software Park Thailand

More from Software Park Thailand (20)

Recently uploaded

Recently uploaded (20)

"BlackBerry Webworks : Apps for The Smartphone and Tablet"