The BlackBerry WebWorks Platform            Alan Wong        alawong@rim.com         February 26, 2011
WEBWHAT?What is the BlackBerry WebWorks platform?
What Is BlackBerry WebWorks?                BlackBerry WebWorks is an application platform that                 enables de...
Examples: What Do They Look Like?
Architecture: How Does It Work?• User interface   – Powered by Web   – HTML5 and CSS 3                                    ...
What Can They Do?   Services &    Content                           BROWSER                WEB        ENGINE              ...
WHY CONSIDER WEBWORKS?      It matters because …
BlackBerry Programming Models                                                          Sweet spot?!?Application  power    ...
Developer Spectrum     Native-based UI      Browser-based UI  Functionality provided by BlackBerry OS    Functionality pro...
How Is This Different Than DevelopingBlackberry Applications Today? • The BlackBerry WebWorks Platform gives you more solu...
Market for WebWorks Applications• BlackBerry WebWorks applications are supported on  – BlackBerry Device Software version ...
Web = Platform plurality    iOS          Android                   BlackBerry & PlayBook • It’s a diverse world out there ...
CREATING APPS USING WEBWORKS        How to get started today
How Do You Create a BlackBerryWebWorks Application?• Using Command Line Utility:   – BlackBerry WebWorks Packager       • ...
Agnostic Developer Experience Developer Tools…   Middleware…   Frameworks…   Test/Runtime…
Index.html• First we will create the content for your BlackBerry WebWorks  application by creating a directory that has an...
Some UI Examples    Total time to create all the screens seen above: 4 days!
WebWorks Configuration Document (config.xml)• Descriptor file for a BlackBerry WebWorks application   – XML file (config.x...
JavaScript Extensions • Objects that connect JavaScript engine with underlying Java   code    – BlackBerry WebWorks apps c...
Sample Code: File Access <script type="text/javascript">    //Offline storage:    function saveToFile(fileContents)    {  ...
Sample Code: Creating a calendar entry<script type="text/javascript">function newCalendarEntry(summary, date){   var appt ...
WebWorks API Examples• Application and system events   – onBackground, onCoverageChange, etc.• Push services   – Both Corp...
WebWorks API Examples• File IO    – Read, write files on eMMC and SDCard• System properties    – Change home screen icon, ...
How Do I Sell My BlackBerryWebWorks Applications? • Same distribution model as existing BlackBerry applications! • BlackBe...
BlackBerry App World
WAIT, THERE’S MORE?Look at what else you can do with WebWorks!
What’s new? WebKit!• WebKit rendering engine added to BlackBerry® 6   – BlackBerry WebWorks applications receive the benef...
WebKit on BlackBerry                       28
HTML5 Support • HTML 5     Audio: Easy integration of audio without the need for plugins     Canvas: Use JavaScript to dra...
CSS 3 and SVG •            CSS 3 allows the creation of stunning transition images and graphic            effects (e.g., s...
WebKit offers Better Performance Performance  • BlackBerry 6 Loads Pages >50% Faster than 5.0!  • BlackBerry 6 Has Signifi...
What’s new? PlayBook!• Use WebWorks to create PlayBook applications   – Command line packager turns Web assets into AIR ap...
Developing for PlayBook with WebWorks                               PlayBook                               WebWorks   Blac...
COMMUNITYWorking together to make WebWorks great
Open Source Community                                          OSS Community                                          Blac...
Open Source Community
Community Learning Resources• BlackBerry Developer Zone:   – http://www.blackberry.com/developers   – Resources: Online Fo...
NEXT STEPSMy Challenge For You
Developer Challenge: Build an app. • Step 1: Build your first PlayBook application (THIS WEEK)    – Download and install t...
LIVE CODING DEMO  Lights! Camera! Action!
Development Example1                          • Initial prototype with nothing but file resources,                        ...
Index.html• First we will create the content for your PlayBook WebWorks  application by creating a directory that has an i...
Config.xml• Then, create the configuration file:     – C:MyDirectoryconfig.xml• This file configures properties for your a...
Packaging• Use the SDK to package your app     – cd "C:Program FilesResearch In MotionBlackBerry WebWorks       Packager“•...
The Simulator• Launch one of the BlackBerry Device  Simulators:   – cd "C:Program FilesResearch In     MotionBlackBerry We...
Your App• Load your app in the simulator    – From the device simulator file menu select "File ->      Load BlackBerry App...
Summary• BlackBerry and PlayBook WebWorks Application Platform• Create standalone applications using Web technologies• Int...
Thank You    Alan Wongalawong@rim.comFebruary 26, 2011
Upcoming SlideShare
Loading in...5
×

Web works presso

2,246

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,246
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web works presso

  1. 1. The BlackBerry WebWorks Platform Alan Wong alawong@rim.com February 26, 2011
  2. 2. WEBWHAT?What is the BlackBerry WebWorks platform?
  3. 3. 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.
  4. 4. Examples: What Do They Look Like?
  5. 5. Architecture: How Does It Work?• User interface – Powered by Web – HTML5 and CSS 3 Your app WebKit Engine• Application logic WebWorks Platform – JavaScript® BlackBerry Platform – BlackBerry WebWorks APIs – Access to BlackBerry OS BBM Security Push Monetization PIM Background Media Storage Multi-Tasking Hardware Compression …
  6. 6. What Can They Do? Services & Content BROWSER WEB ENGINE SERVICES APPLICATION INTEGRATION PUSH SYSTEM EVENTS File MENUS GPS STORAGE System SQLite
  7. 7. WHY CONSIDER WEBWORKS? It matters because …
  8. 8. BlackBerry Programming Models Sweet spot?!?Application power Simplicity of development and maintenance • Hitting the sweet spot means – The richness of device access and reuse of Java assets – The simplicity of the browser programming model
  9. 9. Developer Spectrum Native-based UI Browser-based UI Functionality provided by BlackBerry OS Functionality provided by Browser EngineNative Application WebWorks Platform BlackBerry Browser • Where in the spectrum do developers gravitate to? – Do they create a Native application (Highly functional)? – Do they create Web content for the Browser (Flexible UI and low cost)? – Or a mix of the two? 9
  10. 10. How Is This Different Than DevelopingBlackberry Applications Today? • The BlackBerry WebWorks Platform gives you more solutions to choose from – Developers now have another way to create BlackBerry applications – Choose to develop applications in the way that is most comfortable and suitable to your needs JAVA WEBWORKS WEB • Like writing a native application…but without having to learn the native language
  11. 11. Market for WebWorks Applications• BlackBerry WebWorks applications are supported on – BlackBerry Device Software version 5.0 – BlackBerry 6 – BlackBerry PlayBook http://us.blackberry.com/developers/choosingtargetos.jsp
  12. 12. Web = Platform plurality iOS Android 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 BlackBerry platform – Overcome weaknesses of “Write-once-run-everywhere” approach
  13. 13. CREATING APPS USING WEBWORKS How to get started today
  14. 14. How Do You Create a BlackBerryWebWorks Application?• Using Command Line Utility: – BlackBerry WebWorks Packager • Input: WebWorks archive (*.ZIP) • Output: Packaged BlackBerry WebWorks App (*.COD)• Using Popular Development Environments: – BlackBerry® WebWorks Plug-In for Eclipse – BlackBerry® WebWorks Plug-In for Visual Studio 2008 – Debugging support available http://www.blackberry.com/developers/widget
  15. 15. Agnostic Developer Experience Developer Tools… Middleware… Frameworks… Test/Runtime…
  16. 16. Index.html• First we will create the content for your BlackBerry WebWorks application by creating a directory that has an index.html: – C:MyDirectoryindex.html<html> <head> <meta name="viewport" content="width=device-width,user-scalable=no"/> </head> <body> <h1>Hello World</h1> </body></html>
  17. 17. Some UI Examples Total time to create all the screens seen above: 4 days!
  18. 18. WebWorks Configuration Document (config.xml)• Descriptor file for a BlackBerry WebWorks application – XML file (config.xml), based on the W3C specification for widgets• Define application characteristics and properties – Bindings to platform services – Security Policies
  19. 19. JavaScript Extensions • Objects that connect JavaScript engine with underlying Java code – BlackBerry WebWorks apps can be more than just web content – Enable powerful “Super App” functionality http://www.blackberry.com/developers/docs/widgetapi/
  20. 20. Sample Code: File Access <script type="text/javascript"> //Offline storage: function saveToFile(fileContents) { var data = blackberry.utils.stringToBlob(fileContents); var filePath = "file:///store/home/user/webworks.txt"; blackberry.io.file.saveFile(filePath, data); } </script>
  21. 21. Sample Code: Creating a calendar entry<script type="text/javascript">function newCalendarEntry(summary, date){ var appt = new blackberry.pim.Appointment(); appt.summary = summary; appt.date = date; var args = new blackberry.invoke.CalendarArguments(appt); args.view = 0; //0 = Create, 1 = View blackberry.invoke.invoke(blackberry.invoke.APP_CALENDAR, args);}</script>
  22. 22. WebWorks API Examples• Application and system events – onBackground, onCoverageChange, etc.• Push services – Both Corporate and Consumer push using existing techniques• Identity information – Phone numbers, PIN, email addresses• Personal information management – Search and edit email, calendar, tasks, notepad, contacts, phone logs, etc.• Application launcher – Invoke native apps with data, invoke third-party Java® apps with data
  23. 23. WebWorks API Examples• File IO – Read, write files on eMMC and SDCard• System properties – Change home screen icon, background, etc.• User interface – System Dialogs, Dynamic Menu items• Geolocation – Retrieve live GPS information• Audio – Play and Pause local or remote audio
  24. 24. How Do I Sell My BlackBerryWebWorks Applications? • Same distribution model as existing BlackBerry applications! • BlackBerry WebWorks Development tools produce all necessary deployment files • Users can install your application using: – BlackBerry App World™ storefront – The BlackBerry® Browser – Pushed automatically by the BlackBerry® Enterprise Server
  25. 25. BlackBerry App World
  26. 26. WAIT, THERE’S MORE?Look at what else you can do with WebWorks!
  27. 27. What’s new? WebKit!• WebKit rendering engine added to BlackBerry® 6 – BlackBerry WebWorks applications receive the benefits of WebKit – Combine the power of HTML5 and CSS3 with JavaScript APIs http://www.benjoffe.com/code/
  28. 28. WebKit on BlackBerry 28
  29. 29. HTML5 Support • HTML 5 Audio: Easy integration of audio without the need for plugins Canvas: Use JavaScript to draw graphs & animations Application Cache: Store web resources for use when offline Web Workers: Asynchronous script processing Geolocation: Retrieve GPS or cell site coordinates Web Database: Store local data in SQLite database Forms: Use new interactive form elements.
  30. 30. CSS 3 and SVG • CSS 3 allows the creation of stunning transition images and graphic effects (e.g., scale, rotate using CSS styles) • Create graphics/fonts/animations that scale accurately to zoom level (Eliminates pixelization) http://www.subcide.com/experiments/fail-whale/
  31. 31. WebKit offers Better Performance Performance • BlackBerry 6 Loads Pages >50% Faster than 5.0! • BlackBerry 6 Has Significant Improvement in JavaScript and HTML Performance
  32. 32. What’s new? PlayBook!• Use WebWorks to create PlayBook applications – Command line packager turns Web assets into AIR applications• Powered by enhanced WebKit browser engine – Better support of HTML5 and CSS3 standards• Full support of Flash 10.1 – Package existing Flash content into a PlayBook application
  33. 33. Developing for PlayBook with WebWorks PlayBook WebWorks BlackBerry PlayBook SDK Application (.bar) http://www.gettyicons.com
  34. 34. COMMUNITYWorking together to make WebWorks great
  35. 35. Open Source Community OSS Community BlackBerry WebWorks Platform http://www.github.com/blackberry Github RIM developer •Contribute •Participate OSS Code •Consume (source) App developer •Review •Participate • Create Contributor agreement Apache 2.0 License OS developer Must register WebWorks Application
  36. 36. Open Source Community
  37. 37. Community Learning Resources• BlackBerry Developer Zone: – http://www.blackberry.com/developers – Resources: Online Forums – Resources: Developer Resource Center• BlackBerry Developers Blog – http://devblog.blackberry.com• Twitter – http://twitter.com/BlackBerryDev
  38. 38. NEXT STEPSMy Challenge For You
  39. 39. Developer Challenge: Build an app. • Step 1: Build your first PlayBook application (THIS WEEK) – Download and install the WebWorks SDK for PlayBook – Create a ‘Hello World’ app and load it on the PlayBook simulator • Step 2: Improve your application (NEXT 2 WEEKS) – What is your great idea for a mobile Web application? – Use HTML5 and CSS3 to add functionality and UI to your app • Step 3: Submit your application(s) to App World – http://www.blackberry.com/developers/appworld/ – Free PlayBook offer deadline is March 15, 2011
  40. 40. LIVE CODING DEMO Lights! Camera! Action!
  41. 41. Development Example1 • Initial prototype with nothing but file resources, notepad and Firefox.2 • Adding basic Apache on Localhost to test real HTTP-based resources (Vs. file resources)3 • Eclipse as the development environment, running with Apache Tomcat, and a BB device as the browser on Wi-Fi hitting the dev machine (e.g., 192.168.1.101)
  42. 42. Index.html• First we will create the content for your PlayBook WebWorks application by creating a directory that has an index.html: – C:MyDirectoryindex.html<html> <head> <meta name="viewport" content="width=device-width,user-scalable=no"/> </head> <body> <h1>Hello World</h1> </body></html>
  43. 43. Config.xml• Then, create the configuration file: – C:MyDirectoryconfig.xml• This file configures properties for your app, such as the icon to use for the home screen, bindings to platform services, and security policies<?xml version="1.0" encoding="utf-8"?><widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim=http://www.blackberry.com/ns/widgets version="1.0.0"> <name>My App</name> <content src="index.html" /></widget>
  44. 44. Packaging• Use the SDK to package your app – cd "C:Program FilesResearch In MotionBlackBerry WebWorks Packager“• Run the command line toolsbbwp "C:myapp.zip" /o "C:OutputDirectory">>[INFO] Parsing command line options>>[INFO] Parsing bbwp.properties>>[INFO] Validating WebWorks archive>>[INFO] Parsing config.xml>>[INFO] Populating application source>>[INFO] Compiling WebWorks application>>[INFO] Generating output files>>[INFO] WebWorks application packaging complete
  45. 45. The Simulator• Launch one of the BlackBerry Device Simulators: – cd "C:Program FilesResearch In MotionBlackBerry WebWorks Packagersimpack6.0.0.190” – 9800.bat
  46. 46. Your App• Load your app in the simulator – From the device simulator file menu select "File -> Load BlackBerry Application or Theme...“ – Browse to the "C:OutputDirectory" that you had supplied to the command line tooling – Go to the “StandardInstall” subfolder – Select the "myapp.cod" file – click "Open" on the simulators browse dialog.• Run your app – Scroll to the "Downloads" section on the device simulator – Launch your application "My App"
  47. 47. Summary• BlackBerry and PlayBook WebWorks Application Platform• Create standalone applications using Web technologies• Integration with device functionality and data• Powered by WebKit engine• Open Source
  48. 48. Thank You Alan Wongalawong@rim.comFebruary 26, 2011

×