BlackBerry WebWorks APIs

THE BLACKBERRY WEB
PLATFORM
SenchaCon’11 – Austin 2011-10-25

LDH (Laurent Hasson)
Technical Director, Web Platform
lhasson@rim.com
@ldhasson

2011-10-25 SenchaCon'11 1

Wednesday, November 2, 11

Agenda

• BlackBerry loves the Web
• Anatomy of an App
• Simulation/Testing with Ripple and WebInspector
• Build, Sign and Submit with WebWorks

2011-10-25 SenchaCon'11 2


BLACKBERRY LOVES THE WEB

2011-10-25 SenchaCon'11 3


BlackBerry Loves the Web

• Industry leading webkit browser with best in class standards support
• position: fixed, overflow: auto, webInspector shipped in Spring 2011 on PB, and late Summer 2011
on BB7 devices
• Full Web Application platform across tablets and smartphones
• Leading edge Web dev tools for inspection, debugging, emulation

2011-10-25 SenchaCon'11 4


But what’s a Web app?
• Lots of controversies and differing opinions from very smart
people on the Web
– Should a mobile Web app be more Webby, or more Appy?
• My take: users today are conditioned to the App Life Cycle
– Download something
– Install something
– Have an icon on the home screen
– The App takes the entire screen real estate
– The App is integrated with the device
 A site is a place you go to. An app is a thing you get.

• The good news though is that users really don’t care how the app
was built!!!
– So use Web technologies for the job!!
2011-10-25 SenchaCon'11 5


Two Dimensions to App Experience

Web App
Contents

Web Site Many ways
to adapt

Life Cycle

2011-10-25 SenchaCon'11 6


Say no to NIBS

- The “Native Is Better” crowd are missing
the point of the Web
- It’s the scale of the market stupid!
- It’s powerful, cross-platform, and an

NIBS
abundant skill set.
- This is not to say that Web is better than
Native
- That would be silly
- But the Web is absolutely competitive
- Most types of apps can now be built very
nicely using Web technologies
- The gap is narrow today, keeps on
getting narrower, and fast.
* Native Is Better Syndrome

2011-10-25 SenchaCon'11 7


BlackBerry WebWorks
• A BlackBerry WebWorks application is created using
standard web technologies, provides full integration
with native APIs and has a native application life
cycle.
• In market since 2009 on BB5. Now on BB5/6/7, and
PlayBook and future QNX super phones
• OSS Community http://www.github.com/blackberry

BlackBerry
WebWorks

2011-10-25 SenchaCon'11 8


ANATOMY OF THE MEDIA VIEWER

2011-10-25 SenchaCon'11 9


Overall application

2011-10-25 SenchaCon'11 10


Media Viewer

DEMO

2011-10-25 SenchaCon'11 11


Folder Structure

2011-10-25 SenchaCon'11 12


Conﬁg.xml

<widget xmlns="http://www.w3.org/ns/widgets” xmlns:rim="http://www.blackberry.com/ns/widgets"
version="0.1.261" id="Viewer" xml:lang="en">
<name>Viewer</name>
<description>This BlackBerry PlayBook web-based app browses media stored on the device.</description>
<author rim:copyright="2011" email="jing@rim.com" href="http://blackberry.com/html5">Jim Ing</author>
<rim:loadingScreen backgroundImage="blackberry_black.jpg" foregroundImage="blackberry_blue.jpg"
onLocalPageLoad="true"/>
<icon src="icon.png"/>
<rim:orientation mode="auto"/>
<content src="index.html"/>
<rim:category name="Media"/>
<rim:permissions>
<rim:permit>access_shared</rim:permit>
<rim:permit>read_device_identifying_information</rim:permit>
</rim:permissions>

<feature id="blackberry.app" required="true" version="1.0.0.0"/>
<feature id="blackberry.app.event" required="true" version="1.0.0.0"/>
<feature id="blackberry.system" required="true" version="1.0.0.0"/>
<feature id="blackberry.system.event" required="true" version="1.0.0.0"/>
<feature id="blackberry.utils" required="true" version="1.0.0.0"/>
<feature id="blackberry.identity" required="true" version="1.0.0.0"/>
<feature id="blackberry.invoke" required="true" version="1.0.0.0"/>
<feature id="blackberry.io.file" required="true" version="1.0.0.0"/>
<feature id="blackberry.io.dir" required="true" version="1.0.0.0"/>

<access subdomains="true" uri="*"/>
</widget>

2011-10-25 SenchaCon'11 13

Evil UA Sniffing

app.isBlackBerrySmartphone = function () {
var ua = navigator.userAgent.toLowerCase();
var isMIDP = (ua.indexOf("midp") >= 0);
var isWebKit = (ua.indexOf("webkit") >= 0);
var isBlackBerry = (ua.indexOf("blackberry") >= 0);
return ((isMIDP || isWebKit) && isBlackBerry);
};

app.isBlackBerryPlayBook = function () {
var ua = navigator.userAgent.toLowerCase();
var isWebKit = (ua.indexOf("webkit") >= 0);
var isTablet = (ua.indexOf("playbook") >= 0);
return (isWebKit && isTablet);
};

2011-10-25 SenchaCon'11 14


Testing for BlackBerry Webworks

if ( (window.blackberry === undefined)
|| (blackberry.io === undefined)
|| (blackberry.io.file === undefined))
{
if (app.debug === true)
{
console.warn('WebWorks API not supported');
}
}
else
...

2011-10-25 SenchaCon'11 15


Getting ﬁles (1)

var Dir = blackberry.io.dir;
var path = "";
if (app.isBlackBerryPlayBook()) {
path = eval('Dir.appDirs.shared.' + subfolder + '.path');
}
else if (app.isBlackBerrySmartphone()) {
path = 'file:///store/home/user/' + subfolder;
}

var items = Dir.listFiles(path);
var props;
for (var i = 0; i < items.length; i++) {
try {
props = blackberry.io.file.getFileProperties(path + '/' + items[i]);
}
catch (ex) {
console.warn(ex.description + ' [' + items[i] + ']');
}

2011-10-25 SenchaCon'11 16


Getting ﬁles (2)

if (props.fileExtension.match(patt)) { // expected media extensions
if (items[i].indexOf(" ") === -1) {// skip filenames with spaces
data.push({
"filePath": path,
"fileName": items[i],
"fileExt": props.fileExtension,
"fileSize": props.size,
"dateCreated": props.dateCreated,
"dateModified": props.dateModified,
"isHidden": props.isHidden,
"isReadonly": props.isReadonly,
"mimeType": props.mimeType
});
}
else {
console.log('Skipped "' + items[i] + '" because it contains spaces.');
}
}
else {
console.log('Skipped "' + items[i] + '" because it does not match "'
+ filetypes + '".');
}

2011-10-25 SenchaCon'11 17


Overlay

var overlay = new Ext.Panel({
id: 'overlay',
floating: true,
modal: true,
centered: true,
padding: '0',
dockedItems: overlayToolbar,
scroll: false,
hideOnMaskTap: false,
hidden: true,
html: '',
});

2011-10-25 SenchaCon'11 18


AliceJS

overlay.show();
alice.toss({
id: "overlay",
duration: 2000,
origin: app.randAngle(-45,180)+'% '+app.randAngle(-45,180)+'%',
random: 10
});

2011-10-25 SenchaCon'11 19


TESTING AND SIMULATING

2011-10-25 SenchaCon'11 20


A day in the life…

Native Developer
Writing Code Test on Simulator Test on Device

Desktop Web Developer
Writing Code Test in Desktop Browsers

Mobile Web Developer
Writing Code Test in Desktop Browser Test On Simulator Test on Device

2011-10-25 SenchaCon'11 21


Web Testing

• WebKit is king today
– For desktop testing of your mobile app, both Safari (5 and up)
and Google Chrome (13 and up) are really good and take you a
long way.
• There are emerging solutions to test your application in
a mobile browser
– Weinre, JSConsole, Firebug Lite…
• There are also the standard native simulators
– But they are so big, and so slow
– And they are never quite accurate enough that you don’t need a
physical device in the end anyway
• And you’ll always have alert()!

2011-10-25 SenchaCon'11 22


But BlackBerry Does Web Testing

• BlackBerry Ripple allows you to do device simulation and testing
right on your desktop’s Google Chrome browser
– Simulate device attribute such as screen res, skin etc…
– Simulate device APIs and Sensors
– Not 100% accurate, but small, fast, and conveniently browser-based

• The BlackBerry stack supports remote WebInspector directly to
debug a Web app running on-device
– You can do anything (including stepping through JS) that you can
normally do in WebInspector on a desktop WebKit browser.

• Plus, plug you PlayBook on the USB port of your laptop, and you
have IP connectivity
– No wi-ﬁ actually needed

2011-10-25 SenchaCon'11 23


Ripple: Ultimate Browser-based

2011-10-25 SenchaCon'11 24


A day in the life…

Native Developer
Writing Code Test on Simulator Test on Device

Desktop Web Developer
Writing Code Test in Desktop Browser

Mobile Web Developer
Writing Code Test in Desktop Browser Test On Simulator Test on Device

Mobile Web Developer (with Ripple)
Writing Code Test in Ripple Test on

2011-10-25 SenchaCon'11 25


Setting up a device for Web testing

• At some point though, you need to go on device!
• Plug in your device through USB, or on a Wi-Fi network
reachable from your dev machine (laptop/desktop)
– A simple ipconﬁg /all (on Windows) shows you the device’s IP
address when connected via USB
That’s actually the address of the
development machine

And that’s actually the address of
the device

• Yeah, the device can call your web server on your dev
machine, and vice-versa, just through USB (no Wi-Fi
required).
2011-10-25 SenchaCon'11 26


Setting up device security

• Go to your device options
– Go to the Security tab
– Activate the development mode
– Set up a password

2011-10-25 SenchaCon'11 27


Enabling WebInspector

• Go to the browser on you device
– Go to Options
– Go to the Privacy and Security tab
– Enable Web Inspector

• Information will be displayed as to how to connect to
the browser

2011-10-25 SenchaCon'11 28


Refresh

• Web Apps run full screen, without a browser chrome
– For testing, how do you refresh a page?
– You have to build a “refresh widget” for testing only
• Some funny gesture
• Some semi-transparent button in a corner
– location.reload(true) from WebInspector

2011-10-25 SenchaCon'11 29


Web Inspector: Ultimate Web Dev Tool

2011-10-25 SenchaCon'11 30


BUILD, SIGN AND SUBMIT

2011-10-25 SenchaCon'11 31


Signing

• One of the weakest link in the developer experience
today
– Gotta register with AppWorld
– Gotta register with the certiﬁcate auth to get a key (CSJ ﬁle)
– Gotta sign your machine
pushd "C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpbin"
..blackberry-tablet-sdkbinblackberry-signer.bat -csksetup -cskpass totoxxx
..blackberry-tablet-sdkbinblackberry-signer.bat -register -csjpin titixxx -cskpass totoxxx
C:PeekABooclient-RDK-1234567890.csj
..blackberry-tablet-sdkbinblackberry-keytool.bat -genkeypair -keystore sigtool.p12
-storepass totoxxx -dname "cn=MyCo"
-alias author
popd

• Not pretty and error prone, but you do it once and it’s
done

2011-10-25 SenchaCon'11 32


BlackBerry WebWorks works

• Overall developer experience is less than stellar
– 3 things to download (Adobe AIR SDK, PlayBook SDK, WebWorks SDK)
• Installers are very basic, but you should pay attention: RTFM!
– Build is tedious (you have to create a ZIP ﬁle, build and deploy)
del "c:PeekABooPeekABoo.zip"
del "c:PeekABooPeekABoo.bar"
"zip.exe" a -r "c:PeekABooPeekABoo.zip" "c:PeekABooWebContent*.*"

"C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpbbwp.exe“
“C:PeekABooPeekABoo.zip" -gcsk totoxxx -gp12 totoxxx -buildId 101 -o "c:PeekABoo"

"C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpblackberry-tablet-sdkbinblackberry-deploy.bat“
-installApp -password totoxxx -device 192.168.1.105 -package "c:projectsPeekABoo.bar"

• But the result works as advertized: it’s an App!
– It performs very well, and come on! It’s just a simple build script!

2011-10-25 SenchaCon'11 33


AppWorld

• Register, and submit your app
– Basic steps to upload your binary (BAR ﬁle)
– Works OK

• The only trap is that each time you submit a new
binary, YOU MUST increment your build number or else,
the world stops!
– -buildId parameter for bbwp.exe in the build script

2011-10-25 SenchaCon'11 34


CONCLUSION

2011-10-25 SenchaCon'11 35


Summary

• THE MOBILE WEB IS A POWERFUL OPTION FOR DEVELOPING MOBILE APPS
• Desktop WebKit browsers are really good for a lot of app dev
• There is a next generation of browser-based debugging and
testing tools
• WebWorks SDK, code signing process and BlackBerry AppWorld are
not easy
– But come on, once the initial pain is over, it’s pretty easy

2011-10-25 SenchaCon'11 36


And then… Never afraid again!

http://www.snorgtees.com/friday-the-12th

2011-10-25 SenchaCon'11 38


BlackBerry Tooling URLs

• Ripple
– http://ripple.tinyhippos.com/
• BlackBerry WebWorks
– http://us.blackberry.com/developers/browserdev/
• BlackBerry WebWorks Handhelds Downloads
– http://us.blackberry.com/developers/browserdev/widgetsdk.jsp
• BlackBerry WebWorks PlayBook Downloads
– http://us.blackberry.com/developers/tablet/webworks.jsp
• WebWorks Open Source on GitHub
– https://github.com/blackberry

2011-10-25 SenchaCon'11 39


Thanks!


BlackBerry WebWorks APIs

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie BlackBerry WebWorks APIs

Ähnlich wie BlackBerry WebWorks APIs (20)

Mehr von Sencha

Mehr von Sencha (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

BlackBerry WebWorks APIs