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

Published in: Technology
  • 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 : Apps for The Smartphone and Tablet"

  1. 1. BlackBerry WebWorks: Apps for theSmartphone and TabletAlan WongDeveloper Relations | Asia Pacificalawong@rim.comNovember 22, 2011
  2. 2. Agenda WebWorks Overview Getting Started Let‟s Build a WebWorks App Ripple @twitterhandle – 2
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. CSS3 Media QueryReal World Example http://colly.com/ 360x480 1024x600
  17. 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. 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. 19. Let‟s Build a WebWorks ApplicationTarget: BlackBerry Smartphone
  20. 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. 21. Step 1: Java SDK 1.6 Download Java SDK (min version 1.6):  http://java.sun.com/javase/downloads/index.jsp#jdk
  22. 22. Step 2: Set up the SDK Download the BlackBerry WebWorks SDK for Smartphone:  http://developer.blackberry.com/html5/download/sdk
  23. 23. Step 2: Set up the SDK
  24. 24. Getting Started: Building “Hello World”
  25. 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. 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. 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=""> <name>Hello World</name> <icon src="icon.png"/> <content src="index.html"/> </widget>
  28. 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. 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=""> <name>helloWorld</name> <icon src="icon.png"/> <content src="index.html"/> </widget>
  30. 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. 31. Ripple!Packaging & Emulating
  32. 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. 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. 34. Using Ripple Launch Ripple  Select „WebWorks- OS‟ platform Explore features  Change platforms  Switch devices  Use Web Inspector @twitterhandle – 35
  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. 36. Build using Ripple Open options menu  Package  Package & Sign  Package & Launch @twitterhandle – 37
  37. 37. Build using Ripple @twitterhandle – 38
  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. 39. For More Information… Online resources:  http://developer.blackberry.com/html5  http://blackberry.github.com/ @twitterhandle – 40
  40. 40. Now Let‟s Build Again…Target: BlackBerry PlayBook
  41. 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. 42. Step 1: Adobe AIR SDK Download AIR SDK (min version 2.7):  http://www.adobe.com/products/air/sdk/
  43. 43. Step 2: Set up the SDK Download the BlackBerry WebWorks SDK for Tablet OS:  http://developer.blackberry.com/html5/download/sdk
  44. 44. Step 2: Set up the SDK
  45. 45. Run the PlayBook Simulator VMware player is available from VMwares website:  http://www.vmware.com/products/player Open BlackBerryPlayBookSimulator.vmx virtual machine  Found in ~bbwpblackberry-tablet-sdk folder
  46. 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 appshelloWorldbinhelloWorld.bar" -password passSending Install request...Info: Action: InstallInfo: File size: 40731Info: Installing ...actual_dname::helloWorld1a833da63a6b7e2098dae6d0662e1.MjA5OGRhZTZkMDY2MmUxICAgICAactual_id::MjA5OGRhZTZkMDY2MmUxICAgICAactual_version::
  47. 47. Deploying Your Application
  48. 48. BlackBerry Tablet OS SDK  Installing an application:blackberry-deploy –installApp -device -package "c:sandboxweb appshelloWorldbinhelloWorld.bar" -password pass  Deleting an application:blackberry-deploy –deleteApp -device -package "c:sandboxweb appshelloWorldbinhelloWorld.bar" -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. 49. Leveraging Existing Web Assets
  50. 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. 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=""> <name>devBlog</name> <icon src="icon.png"/> <content src="http://devblog.blackberry.com/"/> </widget>
  52. 52. More APIs https://developer.blackberry.com/html5/apis @twitterhandle – 53
  53. 53. THANK YOUAlan WongDeveloper Relations | Asia Pacificalawong@rim.com