Your SlideShare is downloading. ×

Web works presso


Published on

  • 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. The BlackBerry WebWorks Platform Alan Wong February 26, 2011
  • 2. WEBWHAT?What is the BlackBerry WebWorks platform?
  • 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. Examples: What Do They Look Like?
  • 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 …
  • 7. WHY CONSIDER WEBWORKS? It matters because …
  • 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. 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. 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. Market for WebWorks Applications• BlackBerry WebWorks applications are supported on – BlackBerry Device Software version 5.0 – BlackBerry 6 – BlackBerry PlayBook
  • 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. CREATING APPS USING WEBWORKS How to get started today
  • 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
  • 15. Agnostic Developer Experience Developer Tools… Middleware… Frameworks… Test/Runtime…
  • 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. Some UI Examples Total time to create all the screens seen above: 4 days!
  • 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. 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
  • 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";, data); } </script>
  • 21. Sample Code: Creating a calendar entry<script type="text/javascript">function newCalendarEntry(summary, date){ var appt = new blackberry.pim.Appointment(); appt.summary = summary; = 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. 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. 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. 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. BlackBerry App World
  • 26. WAIT, THERE’S MORE?Look at what else you can do with WebWorks!
  • 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
  • 28. WebKit on BlackBerry 28
  • 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. 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)
  • 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. 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. Developing for PlayBook with WebWorks PlayBook WebWorks BlackBerry PlayBook SDK Application (.bar)
  • 34. COMMUNITYWorking together to make WebWorks great
  • 35. Open Source Community OSS Community BlackBerry WebWorks Platform 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. Open Source Community
  • 37. Community Learning Resources• BlackBerry Developer Zone: – – Resources: Online Forums – Resources: Developer Resource Center• BlackBerry Developers Blog –• Twitter –
  • 38. NEXT STEPSMy Challenge For You
  • 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 – – Free PlayBook offer deadline is March 15, 2011
  • 40. LIVE CODING DEMO Lights! Camera! Action!
  • 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.,
  • 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. 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="" xmlns:rim= version="1.0.0"> <name>My App</name> <content src="index.html" /></widget>
  • 44. Packaging• Use the SDK to package your app – cd "C:Program FilesResearch In MotionBlackBerry WebWorks Packager“• Run the command line toolsbbwp "" /o "C:OutputDirectory">>[INFO] Parsing command line options>>[INFO] Parsing>>[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. The Simulator• Launch one of the BlackBerry Device Simulators: – cd "C:Program FilesResearch In MotionBlackBerry WebWorks Packagersimpack6.0.0.190” – 9800.bat
  • 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. 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. Thank You Alan Wongalawong@rim.comFebruary 26, 2011