BlackBerry WebWorks APIs


Published on

Research In Motion, the maker of BlackBerry mobile phones and tablets, has been investing heavily in Web technologies over the past couple of years, including a number of Open Source projects. In this session, we will present this work: WebWorks, a platform to package Web apps and adopt a native app life cycle; Ripple, a browser-based tool to test your mobile Web apps for any platform (not just BlackBerry), and BlackBerry’s unique remote WebInspector facility, which allows you to remotely debug your mobile Web application from your desktop. This session will walk you through a technical description of the steps involved in building, testing and packaging a Web app with all those modern tools.

Laurent Hasson is the Technical Director responsible for driving strategy, architecture, open source and community relationships around RIM’s Web Platform. He joined RIM in the Spring 2010 and has been focused on the WebKit browser, WebWorks, Ripple, and recently, experimental projects such as AliceJS. Before that, he was at IBM for 14 years, working on enterprise Web projects such as eCommerce, Web frameworks and tooling, Search and Social Software, and participated in open source strategies in the company. Laurent has been deep in web technologies since the mid 90’s and is an avid JavaScript/HTML/CSS, Java and SQL developer for both Desktop and Mobile. He codes and watches at least one movie every day, and he has funny hair.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

BlackBerry WebWorks APIs

  1. 1. THE BLACKBERRY WEB PLATFORM SenchaCon’11 – Austin 2011-10-25 LDH (Laurent Hasson) Technical Director, Web Platform @ldhasson 2011-10-25 SenchaCon11 1Wednesday, November 2, 11
  2. 2. Agenda • BlackBerry loves the Web • Anatomy of an App • Simulation/Testing with Ripple and WebInspector • Build, Sign and Submit with WebWorks 2011-10-25 SenchaCon11 2Wednesday, November 2, 11
  3. 3. BLACKBERRY LOVES THE WEB 2011-10-25 SenchaCon11 3Wednesday, November 2, 11
  4. 4. 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 SenchaCon11 4Wednesday, November 2, 11
  5. 5. 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 SenchaCon11 5Wednesday, November 2, 11
  6. 6. Two Dimensions to App Experience Web App Contents Web Site Many ways to adapt Life Cycle 2011-10-25 SenchaCon11 6Wednesday, November 2, 11
  7. 7. 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 SenchaCon11 7Wednesday, November 2, 11
  8. 8. 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 BlackBerry WebWorks 2011-10-25 SenchaCon11 8Wednesday, November 2, 11
  9. 9. ANATOMY OF THE MEDIA VIEWER 2011-10-25 SenchaCon11 9Wednesday, November 2, 11
  10. 10. Overall application 2011-10-25 SenchaCon11 10Wednesday, November 2, 11
  11. 11. Media Viewer DEMO 2011-10-25 SenchaCon11 11Wednesday, November 2, 11
  12. 12. Folder Structure 2011-10-25 SenchaCon11 12Wednesday, November 2, 11
  13. 13. Config.xml <widget xmlns="” xmlns:rim="" 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="" href="">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> <!-- Universal APIs: The following features are available on both Smartphone and Tablet OS --> <feature id="" required="true" version=""/> <feature id="" required="true" version=""/> <feature id="blackberry.system" required="true" version=""/> <feature id="blackberry.system.event" required="true" version=""/> <feature id="blackberry.utils" required="true" version=""/> <feature id="blackberry.identity" required="true" version=""/> <feature id="blackberry.invoke" required="true" version=""/> <feature id="" required="true" version=""/> <feature id="" required="true" version=""/> <access subdomains="true" uri="*"/> </widget> 2011-10-25 SenchaCon11 13Wednesday, November 2, 11
  14. 14. 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 SenchaCon11 14Wednesday, November 2, 11
  15. 15. Testing for BlackBerry Webworks if ( (window.blackberry === undefined) || ( === undefined) || ( === undefined)) { if (app.debug === true) { console.warn(WebWorks API not supported); } } else ... 2011-10-25 SenchaCon11 15Wednesday, November 2, 11
  16. 16. Getting files (1) var 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 = + / + items[i]); } catch (ex) { console.warn(ex.description + [ + items[i] + ]); } 2011-10-25 SenchaCon11 16Wednesday, November 2, 11
  17. 17. Getting files (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 SenchaCon11 17Wednesday, November 2, 11
  18. 18. 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 SenchaCon11 18Wednesday, November 2, 11
  19. 19. AliceJS; alice.toss({ id: "overlay", duration: 2000, origin: app.randAngle(-45,180)+% +app.randAngle(-45,180)+%, random: 10 }); 2011-10-25 SenchaCon11 19Wednesday, November 2, 11
  20. 20. TESTING AND SIMULATING 2011-10-25 SenchaCon11 20Wednesday, November 2, 11
  21. 21. 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 SenchaCon11 21Wednesday, November 2, 11
  22. 22. 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 SenchaCon11 22Wednesday, November 2, 11
  23. 23. 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-fi actually needed 2011-10-25 SenchaCon11 23Wednesday, November 2, 11
  24. 24. Ripple: Ultimate Browser-based 2011-10-25 SenchaCon11 24Wednesday, November 2, 11
  25. 25. 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 SenchaCon11 25Wednesday, November 2, 11
  26. 26. 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 ipconfig /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 SenchaCon11 26Wednesday, November 2, 11
  27. 27. 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 SenchaCon11 27Wednesday, November 2, 11
  28. 28. 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 SenchaCon11 28Wednesday, November 2, 11
  29. 29. 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 SenchaCon11 29Wednesday, November 2, 11
  30. 30. Web Inspector: Ultimate Web Dev Tool 2011-10-25 SenchaCon11 30Wednesday, November 2, 11
  31. 31. BUILD, SIGN AND SUBMIT 2011-10-25 SenchaCon11 31Wednesday, November 2, 11
  32. 32. Signing • One of the weakest link in the developer experience today – Gotta register with AppWorld – Gotta register with the certificate auth to get a key (CSJ file) – 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 SenchaCon11 32Wednesday, November 2, 11
  33. 33. 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 file, build and deploy) del "" del "" "zip.exe" a -r "" "c:PeekABooWebContent*.*" "C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpbbwp.exe“ “" -gcsk totoxxx -gp12 totoxxx -buildId 101 -o "c:PeekABoo" "C:Program FilesRIMBlackBerry WebWorks PlayBookbbwpblackberry-tablet-sdkbinblackberry-deploy.bat“ -installApp -password totoxxx -device -package "" • 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 SenchaCon11 33Wednesday, November 2, 11
  34. 34. AppWorld • Register, and submit your app – Basic steps to upload your binary (BAR file) – 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 SenchaCon11 34Wednesday, November 2, 11
  35. 35. CONCLUSION 2011-10-25 SenchaCon11 35Wednesday, November 2, 11
  36. 36. 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 SenchaCon11 36Wednesday, November 2, 11
  37. 37. First time… © New Line Cinema 2011-10-25 SenchaCon11 37Wednesday, November 2, 11
  38. 38. And then… Never afraid again! 2011-10-25 SenchaCon11 38Wednesday, November 2, 11
  39. 39. BlackBerry Tooling URLs • Ripple – • BlackBerry WebWorks – • BlackBerry WebWorks Handhelds Downloads – • BlackBerry WebWorks PlayBook Downloads – • WebWorks Open Source on GitHub – 2011-10-25 SenchaCon11 39Wednesday, November 2, 11
  40. 40. Thanks!Wednesday, November 2, 11