"BlackBerry Webworks : Apps for The Smartphone and Tablet " Alan Wong, Developer Relations, Asia Pacific, The BlackBerry ® Developer Day in Bangkok ,22 November 2011, Software Park Thailand.

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