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.
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. What Can They Do?
Services &
Content
BROWSER
WEB ENGINE
SERVICES APPLICATION
INTEGRATION
PUSH
SYSTEM
EVENTS
File
MENUS GPS STORAGE System
SQLite
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 Engine
Native 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 Developing
Blackberry 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
14. How Do You Create a BlackBerry
WebWorks 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
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. 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. 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. 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 BlackBerry
WebWorks 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
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/
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)
http://www.subcide.com/experiments/fail-whale/
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)
http://www.gettyicons.com
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
41. Development Example
1
• 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 tools
bbwp "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
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 simulator's 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 Wong
alawong@rim.com
February 26, 2011
