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

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 …
  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.,
  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