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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 7

http://paper.li 7



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

"BlackBerry Webworks : Apps for The Smartphone and Tablet" "BlackBerry Webworks : Apps for The Smartphone and Tablet" Presentation Transcript

  • BlackBerry WebWorks: Apps for theSmartphone and TabletAlan WongDeveloper Relations | Asia Pacificalawong@rim.comNovember 22, 2011
  • Agenda WebWorks Overview Getting Started Let‟s Build a WebWorks App Ripple @twitterhandle – 2
  • 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
  • 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
  • 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/
  • 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.
  • 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
  • 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
  • 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
  • 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)
  • 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 …
  • 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"/>
  • 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
  • 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; } }
  • CSS3 Media QueryReal World Example http://colly.com/ 360x480 1024x600
  • 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
  • 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
  • Let‟s Build a WebWorks ApplicationTarget: BlackBerry Smartphone
  • 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
  • Step 1: Java SDK 1.6 Download Java SDK (min version 1.6):  http://java.sun.com/javase/downloads/index.jsp#jdk
  • Step 2: Set up the SDK Download the BlackBerry WebWorks SDK for Smartphone:  http://developer.blackberry.com/html5/download/sdk
  • Step 2: Set up the SDK
  • Getting Started: Building “Hello World”
  • 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>
  • 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)
  • 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>
  • 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
  • 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>
  • 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
  • Ripple!Packaging & Emulating
  • 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
  • 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
  • Using Ripple Launch Ripple  Select „WebWorks- OS‟ platform Explore features  Change platforms  Switch devices  Use Web Inspector @twitterhandle – 35
  • Configure settings SDK Path  Bbwp installer root directory Project Root  Application source code Archive Name Output Folder  Different than project root @twitterhandle – 36
  • Build using Ripple Open options menu  Package  Package & Sign  Package & Launch @twitterhandle – 37
  • Build using Ripple @twitterhandle – 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
  • For More Information… Online resources:  http://developer.blackberry.com/html5  http://blackberry.github.com/ @twitterhandle – 40
  • Now Let‟s Build Again…Target: BlackBerry PlayBook
  • 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
  • Step 1: Adobe AIR SDK Download AIR SDK (min version 2.7):  http://www.adobe.com/products/air/sdk/
  • Step 2: Set up the SDK Download the BlackBerry WebWorks SDK for Tablet OS:  http://developer.blackberry.com/html5/download/sdk
  • Step 2: Set up the SDK
  • 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
  • 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::
  • Deploying Your Application
  • 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.
  • Leveraging Existing Web Assets
  • 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.
  • 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>
  • More APIs https://developer.blackberry.com/html5/apis @twitterhandle – 53
  • THANK YOUAlan WongDeveloper Relations | Asia Pacificalawong@rim.com