The document provides an overview of BlackBerry WebWorks, an application development platform allowing developers to create standalone applications using modern web technologies like HTML5, CSS3, and JavaScript. It covers setup, coding, packaging, and deploying apps for BlackBerry smartphones and PlayBook, highlighting tools such as the WebWorks SDK and the Ripple emulator. Additionally, it discusses the integration of web assets, offline functionality, and provides resources for building efficient applications across multiple devices.

1. BlackBerry WebWorks: Apps for the
Smartphone and Tablet
Alan Wong
Developer Relations | Asia Pacific
alawong@rim.com
November 22, 2011

2. Agenda
 WebWorks Overview
 Getting Started
 Let‟s Build a WebWorks App
 Ripple
@twitterhandle – 2

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

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

5. 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/

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

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

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

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

10. 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)

11. 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 …

12. What Can a WebWorks App Do?
Services &
Content
BROWSER
WEB ENGINE
SERVICES APPLICATION
INTEGRATION
PUSH
SYSTEM
EVENTS
File
MENUS GPS STORAGE System
SQLite

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

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

15. 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;
}
}

16. CSS3 Media Query
Real World Example
http://colly.com/
360x480 1024x600

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

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

19. Let‟s Build a WebWorks Application
Target: BlackBerry Smartphone

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

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

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

23. Step 2: Set up the SDK

24. Getting Started: Building
“Hello World”

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

26. 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)

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

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

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

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

31. Ripple!
Packaging & Emulating

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

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

34. Using Ripple
 Launch Ripple
 Select „WebWorks-
OS‟ platform
 Explore features
 Change platforms
 Switch devices
 Use Web Inspector
@twitterhandle – 35

35. Configure settings
 SDK Path
 Bbwp installer root directory
 Project Root
 Application source code
 Archive Name
 Output Folder
 Different than project root
@twitterhandle – 36

36. Build using Ripple
 Open options menu
 Package
 Package & Sign
 Package & Launch
@twitterhandle – 37

37. Build using Ripple
@twitterhandle – 38

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

39. For More Information…
 Online resources:
 http://developer.blackberry.com/html5
 http://blackberry.github.com/
@twitterhandle – 40

40. Now Let‟s Build Again…
Target: BlackBerry PlayBook

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

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

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

44. Step 2: Set up the SDK

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

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

47. Deploying Your Application

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

49. Leveraging Existing Web
Assets

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

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

52. More APIs
 https://developer.blackberry.com/html5/apis
@twitterhandle – 53

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