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


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


The BlackBerry plaLormScope And DifferenNators



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



Leading Consumer Brands

5

Messaging

Mul;media Social Networking

Browser/Content



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…



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



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



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


http://www.ebay.com/














http://www.viigo.com/wes





http://images.google.com/imgres?imgurl=http://pulse2.com/wp-content/uploads/2009/09/poynt-logo.jpg&imgrefurl=http://pulse2.com/2009/09/17/poynt-blackberry-app-hits-1-million-downloads/&usg=__lOTXB8fepkOld20al6k5a8R8LRM=&h=113&w=114&sz=14&hl=en&start=5&um=1&tbnid=IpNecvYKSALD6M:&tbnh=86&tbnw=87&prev=/images?q=poynt+logo&hl=en&rls=com.microsoft:en-US&sa=N&um=1










http://www.sage.com/index.php






http://www.hp.com/country/us/en/welcomeBC.html







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



BlackBerry Landscape

11

Source: http://us.blackberry.com/developers/choosingtargetos.jsp(V6 numbers not available at this time)


http://us.blackberry.com/developers/choosingtargetos.jsp

http://us.blackberry.com/developers/choosingtargetos.jsp


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 …



Rich mobile applicaNons

13


The New Mobile WebBuilding next-‐generaNon mobile apps



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



JavaScript AJAX

CSS3SenchaBrowser

OpenSourceWeb2.0

FrontEndUsability UserExperience

mobileTouch

The Web

16

HTML5



Manifests

...

Audio

Canvas

Video

Workers

Storage

CSS3

17



Manifests

...

AudioVideo

Workers

Storage

BordersGradients

Animations

Layouts

Web Fonts

Transitions

Paged Media

...CSS3

17



Mobile Graded Browser support

18

Source: http://jquerymobile.com/gbs/



Mobile Browser stats: North America

19

Source: http://gs.statcounter.com



Mobile Browser stats: Worldwide

20

Source: http://gs.statcounter.com



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



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



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


BlackBerry WebWorksTechnical, Business, and Open Source views



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



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



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



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.



Some UI Examples

29

Total ;me to create all the screens seen above: 4 days!



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



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



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



Frameworks… Test/RunNme…Middleware…Developer Tools…

AgnosNc Developer Experience

33



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



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




BlackBerry WebWorksAPIs



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



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>



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




• 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




• 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


BlackBerry WebWorksGeUng Started



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


https://www.blackberry.com/Downloads/contactFormPreload.do?code=DC727151E5D55DDE1E950767CF861CA5&dl=8185E1D15E547FA5D76168608FF54721




https://www.blackberry.com/Downloads/contactFormPreload.do?code=DC727151E5D55DDE1E950767CF861CA5&dl=DF60CF84E28E91E0DD1FF4222A2E5A57




https://www.blackberry.com/Downloads/contactFormPreload.do?code=DC727151E5D55DDE1E950767CF861CA5&dl=5C25F39F505051D17280132B267ABC10





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>



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>


http://www.blackberry.com/ns/widgets

http://www.blackberry.com/ns/widgets


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



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



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



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)


Thanks!


developing mobile web apps for rim bb6

Technology

blackberry webworks

blackberry webworksagenda

blackberry webworkswebkit

blackberry webworksover

blackberry plalormscope

blackberry plalorm scope

new mobile web building

app downloads