1. The BlackBerry WebWorks Platform Alan Wong email@example.com 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?
6. What Can They Do? Services & Content BROWSER WEB ENGINE SERVICES APPLICATION INTEGRATION PUSH SYSTEM EVENTS File MENUS GPS STORAGE System SQLite
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 http://us.blackberry.com/developers/choosingtargetos.jsp
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 http://www.blackberry.com/developers/widget
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
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!
28. WebKit on BlackBerry 28
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/
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) http://www.gettyicons.com
34. COMMUNITYWorking together to make WebWorks great
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
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. 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., 192.168.1.101)
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="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. 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. The Simulator• Launch one of the BlackBerry Device Simulators: – cd "C:Program FilesResearch In MotionBlackBerry WebWorks Packagersimpack220.127.116.11” – 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