Developing Mobile Web Apps for RIM BB6
-
Upload
sencha -
Category
Technology
-
view
1.943 -
download
2
Transcript of Developing Mobile Web Apps for RIM BB6
2010-11-16 BlackBerry WebWorks
THE BLACKBERRY WEBWORKS PLATFORMAN INTRODUCTION
SenchaCon ’10 -‐ 2010-‐11-‐16
Laurent Hasson, Technical Director, BlackBerry [email protected]
1
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Agenda
• The BlackBerry plaLorm– Scope and differenNators
• The New Mobile Web– Building next-‐generaNon mobile apps
• What is the new BlackBerry WebWorks PlaLorm?– Overview
– APIs
– GeUng started
• 45 slides, 50mn… Let’s start!
2
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Enterprise Partnerships
4
Voice Systems
Real Time Collabora;on
IBM LotusSametime
QuickrConnections
Novell GroupWise IM
Desktop (email/PIM)
Microsoft ExchangeLotus Notes
Novell GroupWise
Enterprise Applica;ons
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Leading Consumer Brands
5
Messaging
Mul;media Social Networking
Browser/Content
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
BlackBerry 6
6
Fresh new OS that builds upon the tradition and addictive ease of BlackBerry
Simplified app discovery and usageWebKit and Web Application PlatformAdvertising and Payment services for developersNew UI elements, user experience controls, services and
more…
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
BlackBerry WebKit is the backbone for WebWorks
Acid3 Score: 100/100CSS3 Selectors Test: 578/578HTML5Test: 208/300Very efficient data usageTouch event handlingMulti-modal inputOptimized backing store
7
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
WebKit++
Committed to rapid updates and improvements of the browser engineFaster JavaScript
And getting wickedly fasterFaster animations and graphicsEnhanced HTML5Unique text reflowUpdated WebKit code
Leveraging fixes from the community
8
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Super Apps
9
• Tight IntegraNon with Core Apps & Services (Inbox, PIM, Maps, etc.)
• Always-‐on experience, proacNve, noNficaNon-‐driven
• Highly contextualized experience
• Social and connected
• Efficient and designed for the mobile experience
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Over 35 Million App World UsersOver 1.5 Million App Downloads Per Day
70 Countries, 21 Currencies, 6 Languages10,000+ Applications & Themes Available
BlackBerry App World
10
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
BlackBerry Landscape
11
Source: http://us.blackberry.com/developers/choosingtargetos.jsp(V6 numbers not available at this time)
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
BlackBerry ApplicaNons
12
Over 20,000 APIs for Deep UI, Data, and Device Integration
Web APIsTouch Screen APIsOrientation and RotationVirtual KeyboardsDRM APIsCamera APIsMedia Integration APIsDynamic Menu HandlingVideo Recording APIPush APIsAdvertising APIsPayment APIsSynchronization APIsBackground ThreadingLocation APIsCanvas APIsScreen Transition APIsAutocomplete Field APIs …
New Networking APIsGrid Field Manager APIPhone GUI APIMulti Line Listener APIPicture Scrolling APIBiometrics APIBrowser Field APIsCrypto APIsCompression APIsSQLiteLDAP APITransport APIsAddressBook APIsNotification APIsOpenGL ES APIsScripting APIsService Book APIsAccessibility APIs …
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
First GeneraNon Mobile Web
Poor User Experience
Overly Sandboxed
No Disconnected Support
Parallel to the desktop
WML
Mobile Profiles
WAP
XHTML/Mobile
Flash Lite
HDML
TTML
.mobi
15
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
JavaScript AJAX
CSS3SenchaBrowser
OpenSourceWeb2.0
FrontEndUsability UserExperience
mobileTouch
The Web
16
HTML5
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Manifests
...
Audio
Canvas
Video
Workers
Storage
CSS3
17
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Manifests
...
AudioVideo
Workers
Storage
BordersGradients
Animations
Layouts
Web Fonts
Transitions
Paged Media
...CSS3
17
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Mobile Graded Browser support
18
Source: http://jquerymobile.com/gbs/
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Mobile Browser stats: North America
19
Source: http://gs.statcounter.com
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Mobile Browser stats: Worldwide
20
Source: http://gs.statcounter.com
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
PlaLorm plurality
• It’s a diverse world out there• The only technology that allows you to target them all is the Web
– Many reusable assets and skills thanks to strong standards
• But allows you to access the richness and differenNators of each plaLorm
– Write-‐once-‐run-‐everywhere approach may not be appropriate or unrealisNc (lowest common denominator effect)
21
iOS Android BlackBerry V4-V6, PlayBook
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Say no to NIBS
-‐ The “NaNve Is Beger” crowd are missing the point of the Web-‐ It’s the scale of the market stupid!
-‐ This is not to say that Web is beger than NaNve-‐ That would be silly
-‐ But the Web has come a very long way-‐ Most types of apps can now be built very
nicely using web technologies
-‐ They are equalizing-‐ The gap is narrow already, keeps on
geUng narrower, and fast.
22
NIBS* Native Is Better Syndrome
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Say no to NIBS
-‐ Did you say “Performance“?-‐ I heard that when C was taking over
-‐ I heard that when C++ was taking over
-‐ I heard that when Java was taking over
-‐ I am hearing it now when Python/PHP/Ruby/NodeJS are taking over
-‐ I am hearing it now when the Web is taking over
• “Performance” is the last basNon of arguments when plaLorms change and funcNonality is equalizing
– If it were that important, we’d sNll do ASM
• ‘Nuf said
23
NIBS* Native Is Better Syndrome
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
What is a BlackBerry WebWorks App?
• “A BlackBerry® WebWorks app is a standalone applicaNon, created using standard web
technologies, that provides integraNon with naNve BlackBerry® APIs.”
25
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
The Three Pillars
26
Web Standards
1.Huge developer market around Web technologies2.Huge educaNonal material and experience shared around the world3.Strong standards such as HTML5, CSS3 and JavaScript4.Strong market for advanced JavaScript framework as producNvity tools
Agract a dominant developer market to the BlackBerry plaLorm to create great apps
Device integra;on
1. Web apps cannot live in a sandbox
2. Secure integraNon with the device’s hardware and soqware enriches the user experience
3. A service-‐oriented integraNon mechanism into the BlackBerry plaLorm
4. Browser apps are SuperApps and can directly exploit eco-‐system services from security to distribuNon to moneNzaNon
Full eco-‐system integraNon with web-‐based applicaNons running in a secure container
Open Sourcing
1. Open sourcing the WebWorks PlaLorm
2. Includes all Template code, Extensions, JS library, Packager
3. AcNve parNcipaNon in leading open source communiNes such as WebKit, Sencha, JQuery, Dojo and PhoneGap
Open is a proven way to scale and agract best of breed ideas from invested developers
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
High-‐level Architecture
27
WebKit Engine
WebWorks PlaLorm
Security
PIM
Storage
Push
Media
Hardware
BBM
Mone7za7on
Compression
Background
Mul7-‐Tasking
BlackBerry PlaLorm
1. Exploit HTML5, CSS and advanced JavaScript Frameworks
2. Exploit the full BlackBerry plaLorm
3. Open Source
It’s a Web app and a Super App
…
Your app
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Peeling the layers
• Not an onion, but a lychee!
28
the runtime
your application
the browser
the protective shell: packaging the application, managing access to device resources, controlling security …
the juicy part: where all the flavor is, what users really care about.
the core: the engine (WebKit) that the application relies on to run.
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Some UI Examples
29
Total ;me to create all the screens seen above: 4 days!
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Detailed Architecture
30
• Manages Browser instance (through Browser field)• Provides browser-‐targeted integra7on features (caching, cookie, naviga7on model…)• Provides integra7on points into BB plaKorm (extension management)• Manages security model…
Template Code
• JavaScript, CSS• Images, Pages• …
Your Web assets• Security policies• Domain policies• App configura7on
Your Configuration WebKit Engine
COD file
Exploit HTML5, CSS3…
Exploit Sencha, JQuery, Dojo…
Open Source
• PlaKorm services surfaced to browser
Extensions
HTML5 APIs
Security
PIM
Push
BB Platform
Storage
Media
Hardware BBM
Mone7za7onFull BB pla/orm
APIs and ecosystem
App renders and runs in the WebKit engine
Compression
Background
…
Full BlackBerry security, signing, distribu@on…
It’s aWeb App!
Your Web App
Built-‐inOpen Source
Custom
JS APIs
Open Source
Exploit the en7re plaKorm It’s a
SuperApp!
Distribu7on
Packager generates COD/JAD files
Open Source
PackagerWebKit
Open Source
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
An Architecture ConNnuum
• Mixed programming environment that:– Is dominantly browser-‐based– Can make use of Java modules (for business logic for example)– Can mashup local resources and remote resources alike
31
Pure Java Pure Browser
Java-based UI Browser-based UI
All Java logic Mostly Java logic Mostly Browser logic All Browser logic
Some local web resources All remote web resourcesAll local web resources
Web App Platform
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Centers Of Gravity
•Where in the spectrum will developers gravitate to?–There seem to be 5 possible points
–Place your bets!–I think it’s going to be 2/3/4
32
WebWorks PlaLorm
1 2 3 4
Java for business logic and browser for UI 7er
Mostly browser for all app, but includes some Java for some
business logic
All browser-‐based app, using mostly local
resources
Basic shell for security and device access purposes, but using mostly
remote resources
5
“Normal” web site
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Frameworks… Test/RunNme…Middleware…Developer Tools…
AgnosNc Developer Experience
33
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Development Example
34
• Initial prototype with nothing but file resources, notepad and Firefox.
• Adding basic Apache on Localhost to test real HTTP-based resources (Vs. file resources)
• 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)
1
2
3
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Open Source Community
35
RIM developerOSS developer App developer
BB OS Code
OSS Code(source)
App Code
•Consume
•Par7cipate
• Create
•Contribute
•Par7cipate
•Review
•Contribute
•Par7cipate
•Review
Contributor agreementMust register
OSS Code (binary)
BB App OSS Code (binary)
•Normal internal RIM development process
Apache 2.0 LicenseHosted on GitHub
OSS CommunityBlackBerry Web Application Platform
http://www.github.com/blackberry
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
An Example: JS Procedural Approach
<script type="text/javascript"> // Create our Appointment var newAppt = new blackberry.pim.Appointment(); newAppt.location = "Your office"; newAppt.summary = "Talk about new project";
// Create our hour time slot var start = new Date(); newAppt.start = start; var end = start.setHours(start.getHours() + 1); newAppt.end = end;
// Create Attendee var attendees = new Array(); var onlyAttendee = new blackberry.pim.Attendee(); onlyAttendee.address = "[email protected]"; attendees.push(onlyAttendee);
// Save Appointment newAppt.attendees = attendees; newAppt.save();</script>
37
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
An Example: HTML+Service approach
38
<form id=“form1” method=“POST” action=“device://Calendar/New” onSubmit=“return XHR.submit(‘form1’, MyCallback);”> Location : <input type=“text” name=“location” ><BR> Summary : <input type=“text” name=“summary” ><BR> Start : <input type=“datetime” name=“start” >, End : <input type=“datetime” name=“end” ><BR> Mandatory: <input type=“text” name=“mandatory”><BR> Optional : <input type=“text” name=“optional” ><BR></form>
<script>function MyCallBack(code, message) { if (code==0) alert(‘Calendar entry created successfully’); else alert(‘Woops: ‘+message+’\n(error code:’+code+’)’); }</script>
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
WebWorks API Examples
• ApplicaNon and system events– onBackground, onCoverageChange, etc.
• Push services– Both Corporate and Consumer push using
exisNng techniques
• IdenNty informaNon– Phone numbers, PIN, email addresses
• Personal informaNon management– Search and edit email, calendar, tasks,
notepad, contacts, phone logs, etc.
• ApplicaNon launcher– Invoke naNve apps with data, invoke third-‐
party Java® apps with data
39
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
WebWorks API Examples
• File IO– Read, write, traverse local files
on eMMC and SDCard
• System properNes– Change home screen icon,
background, etc.
• User interface– System Dialogs, Dynamic
Menu items
• UNliNes– Parsing URLs, BlobToString,
Generate unique ID, etc.
40
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
WebWorks API Examples
• Home screen– Dynamically change your Home Screen
Icon and display text or change the Home Screen background image
• GeolocaNon– Capture GPS informaNon and also plot
routes and points of interest on BlackBerry® Maps
• NavigaNon– Customize the trackpad/touch
interfaces to create a naNve look and feel
41
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Environment
• Supported BlackBerry devices– BlackBerry devices that are running BlackBerry® Device Soqware 5.0 or newer are capable of running
BlackBerry WebWorks applicaNons.
• Supported opera@ng systems
– Windows® XP (32-‐bit), Windows 7 (32-‐bit or 64-‐bit)
• Java©
– Make sure that you have the Java© SDK 1.6 installed and properly configured
• Supported development environments
– Command line tools (BlackBerry WebWorks SDK)• h_ps://www.blackberry.com/Downloads/contactFormPreload.do?
code=DC727151E5D55DDE1E950767CF861CA5&dl=8185E1D15E547FA5D76168608FF54721
– Eclipse : Eclipse 3.6.0 (32-‐bit), Eclipse Modeling Framework (EMF) 2.6.0, Web Tools PlaLorm (WTP) 3.2.0, GEF 3.6.0
• Plugin at h_ps://www.blackberry.com/Downloads/contactFormPreload.do?code=DC727151E5D55DDE1E950767CF861CA5&dl=DF60CF84E28E91E0DD1FF4222A2E5A57
– Microsoq Visual Studio: Microsoq Visual Studio 2008 Service Pack 1, Standard EdiNon or higher• Plugin at: h_ps://www.blackberry.com/Downloads/contactFormPreload.do?
code=DC727151E5D55DDE1E950767CF861CA5&dl=5C25F39F505051D17280132B267ABC10
43
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Index.html
• First we will create the content for your BlackBerry WebWorks applicaNon by creaNng a directory that has an index.html:
– C:\MyDirectory\index.html
44
<html> <head> <meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no“ /> </head> <body> <h1>Hello World</h1> </body></html>
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Config.xml
• Then, create the configuraNon file:– C:\MyDirectory\config.xml
• This file configures properNes for your app, such as the icon to use for the home screen, bindings to plaLorm services, and security policies
45
<?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“ rim:header="RIM-Widget:rim/widget"> <name>My App</name> <author>Me</author> <content src="index.html" /></widget>
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Packaging
• Use the SDK to package your app– cd "C:\Program Files\Research In MoNon\BlackBerry WebWorks
Packager“
• Run the command line tools
46
bbwp "C:\myapp.zip" /o "C:\OutputDirectory"
>>[INFO] Parsing command line options>>[INFO] Parsing bbwp.properties>>[INFO] Validating widget archive>>[INFO] Parsing config.xml>>[WARNING] Failed to find a <feature> element>>[INFO] Populating widget source>>[INFO] Compiling widget>>[INFO] Generating output files>>[INFO] Widget packaging complete
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
The Simulator
• Launch one of the BlackBerry Device Simulators:
– cd "C:\Program Files\Research In MoNon\BlackBerry WebWorks Packager\simpack\6.0.0.190”
– 9800.bat
47
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
Your App
• Load your app in the simulator– From the device simulator file menu select "File -‐>
Load BlackBerry ApplicaNon 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" secNon on the device
simulator
– Launch your applicaNon "My App"
48
Tuesday, January 4, 2011
2010-11-16 BlackBerry WebWorks
It’s a WebApp!!!
• Because your apps are web apps– You can make your app use server resources instead of local resources
– Use a standard light-‐weight dev cycle for debug/edit
– Configure your network so you can use a device, or a simulator, to run your app
– Not have to re-‐package each Nme you make one change
49
• 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)
Tuesday, January 4, 2011