Your SlideShare is downloading. ×
  • Like
"BlackBerry Webworks : Apps for The Smartphone and Tablet"
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

"BlackBerry Webworks : Apps for The Smartphone and Tablet"


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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. BlackBerry WebWorks: Apps for theSmartphone and TabletAlan WongDeveloper Relations | Asia Pacificalawong@rim.comNovember 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
  • 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 • • Many great HTML5 learning resources available online • • • •
  • 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
  • 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 ModelsApplication 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
  • 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 …
  • 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=""/>
  • 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:   NetTuts:
  • 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 QueryReal World Example 360x480 1024x600
  • 17. How do you build BlackBerry WebWorksApplications?1. Setup Development Environment2. Write application content (HTML, CSS, JavaScript files)3. Create a ZIP archive containing these Web assets4. 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 ApplicationArchive (ZIP) Java SDK Deploy *.cod Smartphone BlackBerry Development WebWorks SDK for smartphones BlackBerry Smartphone
  • 19. Let‟s Build a WebWorks ApplicationTarget: 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): 
  • 22. Step 2: Set up the SDK Download the BlackBerry WebWorks SDK for Smartphone: 
  • 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   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="" xmlns:rim="" version=""> <name>Hello World</name> <icon src="icon.png"/> <content src="index.html"/> </widget>
  • 28. Configuration Document (config.xml) XML document based on W3C spec  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 
  • 29. Configuration Document (config.xml) Define visual characteristics for your application <?xml version="1.0" encoding="UTF-8"?> <widget xmlns="" version=""> <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  Install standalone Ripple  Suggest using recommended installation folder Optional: Ripple extension for Chrome  Required: Google Chome browser  @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:   @twitterhandle – 40
  • 40. Now Let‟s Build Again…Target: BlackBerry PlayBook
  • 41. Required Development Tools: Adobe AIR SDK  VMware Player  BlackBerry WebWorks SDK for Tablet OS 
  • 42. Step 1: Adobe AIR SDK Download AIR SDK (min version 2.7): 
  • 43. Step 2: Set up the SDK Download the BlackBerry WebWorks SDK for Tablet OS: 
  • 44. Step 2: Set up the SDK
  • 45. Run the PlayBook Simulator VMware player is available from VMwares website:  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 PlayBookC:Program FilesResearch In MotionBlackBerry WebWorks Packager for PlayBookbbwpblackberry-tablet-sdk>blackberry-deploy -installApp -device -package "c:sandboxweb" -password passSending Install request...Info: Action: InstallInfo: File size: 40731Info: Installing ...actual_dname::helloWorld1a833da63a6b7e2098dae6d0662e1.MjA5OGRhZTZkMDY2MmUxICAgICAactual_id::MjA5OGRhZTZkMDY2MmUxICAgICAactual_version::
  • 47. Deploying Your Application
  • 48. BlackBerry Tablet OS SDK  Installing an application:blackberry-deploy –installApp -device -package "c:sandboxweb" -password pass  Deleting an application:blackberry-deploy –deleteApp -device -package "c:sandboxweb" -password pass  View list of all installed applications:blackberry-deploy –listInstalledApps -device -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="" version=""> <name>devBlog</name> <icon src="icon.png"/> <content src=""/> </widget>
  • 52. More APIs @twitterhandle – 53
  • 53. THANK YOUAlan WongDeveloper Relations | Asia