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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

"BlackBerry Webworks : Apps for The Smartphone and Tablet"


Published on

"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

  • 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