BlackBerry WebWorks


Published on

BlackBerry WebWorks Workshop

By: Bhasker Thapan

Noida - India

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

BlackBerry WebWorks

  1. 1. Bhasker ThapanDeveloper Group Manager , Noidabhasker@blackberrydevteam.comOctober 10, 2012
  2. 2.
  3. 3. TopicsIntroduction : BlackBerry WebWorksHTML5Web App Vs Native AppWhy BlackBerry WebWorksBlackBerry WebWorks App Development
  4. 4. Introduction to BlackBerry WebWorks Mission…. To create, as a community, a simple to use cross platform SDK for Web Developers to package their Web assets as a mobile application which has Secure access to deeply integrated system level APIs.
  5. 5. Using HTML5 In Your ApplicationHTML5 is a standardized technology • Supported consistently across different platforms and engines • Enhancements to existing standard allow integration with platformSee “HTML reference – BlackBerry browser” documentation • Complete list of BlackBerry supported HTML5 elements • great HTML5 learning resources available online • • • •
  6. 6. Web App Vs Native App Native App Web App Internet Access Not Required Required Performance Yes No Hardware Access Yes No OS Access Yes No Hardware & Yes No Platform Dependent Installation Must be Installed URL link Updates Reinstallation Simple
  7. 7. Why 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.
  8. 8. Why BlackBerry WebWorks ? The richness of device access and reuse of assets . The simplicity of the browser programming model. 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 BlackBerry WebWorks applications are supported on  All BlackBerry PlayBook  All BlackBerry 6 onwards including BlackBerry 10  More than 60 Million Users
  9. 9. What Can a WebWorks App Do?
  10. 10. 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=""/>
  11. 11. How to build BlackBerry WebWorks Applications? 1. Create your application web files. 1. Test and debug your application with the Ripple emulator. 2. Create a BlackBerry WebWorks configuration document (config.xml) 1. Package your application using the Ripple emulator. 1. Deploy your application to a BlackBerry device or simulator.
  12. 12. Let’s Build a WebWorks ApplicationTarget: BlackBerry Smartphone
  13. 13. 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 . Download and Setup Java SDK (min version 1.6):  Step 2. Download and Setup the BlackBerry WebWorks SDK for Smartphone:  Step 3. Download and Setup Ripple (Standalone) 
  14. 14. Hello World my first app
  15. 15. 1. 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>
  16. 16. 2. 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 icon   Image authoring tools (e.g. PhotoShop, GIMP)
  17. 17. 3. 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>
  18. 18. 4. 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 
  19. 19. 4. 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>
  20. 20. 5. Start Writing Code: Folders Keeping your application files organized and well structured.  No IDEs or project files Steps:1. Create folder C:sandboxweb apps1. Create folder C:sandboxweb appshelloWorld1. Save index.html and config.xml in the helloWorld folder
  21. 21. 6. Ripple! : Packaging & Emulating  Launch Ripple : Select ‘WebWorks-OS’ platform  Configure Settings  SDK Path: Bbwp installer root directory Project Root: Application Source Code  Archive Name  Output Folder  Different than project root.
  22. 22. 6. Ripple! : Packaging & Emulating Build Using Ripple : Open options Menu  Package  Package & Sign  Package & Launch
  23. 23. Thank you.