v0.1 BlackBerry HTML5/WebWorks Applications for the BlackBerry ® PlayBook™ Tablet BlackBerry Academic Program Module 5 - Writing HTML5/WebWorks API Extensions

© 2012 Research In Motion Limited Overview

© 2012 Research In Motion Limited Objectives In this module, the learner will be introduce to: What is a HTML5/WebWorks API Why Use HTML5/WebWorks APIs How to include a BlackBerry HTML5/WebWorks API into the “Hello World” application How to write a custom API extension for a BlackBerry PlayBook Tablet application using the HTML5/WebWorks APIs 3 Overview of BlackBerry WebWorks

© 2012 Research In Motion Limited Prerequisites For this module, the recommended prerequisite skills and areas of knowledge are: Completion of the “Hello World” application from Module 3 (creation the “index.html” and “config.xml” files) Familiarity with object-oriented programming concepts such as APIs Completion of the installation of the Ripple ® Emulator software from Module 2 Accessing files from a Remote Web Server for testing in the Ripple Emulator (from Module 3) Completion of the Installation of the BlackBerry ® WebWorks™ SDK for Tablet OS from Module 2 4 Course Code

© 2012 Research In Motion Limited Software Requirements 5 Course Code In order to complete this module, the following software components are required: An HTML editor (such as Notepad) The index.html and config.xml files from the “Hello World” application from Module 3 Installation of the BlackBerry WebWorks SDK for Tablet OS Installation of the Ripple Emulator software Access to a Remote Web Server (such as Dropbox ® ) for testingDropbox In order to complete this module, the following are recommended if available: Access to a web authoring and editing software such as Adobe ® Dreamweaver ® CS5.5

© 2012 Research In Motion Limited APIs

© 2012 Research In Motion Limited What is an API? API – Application Programming Interface A language and message format used by an application program to communicate with the operating system APIs are implemented by writing function calls within the application, which provide the linkage to the required protocol for execution 7 Course Code

© 2012 Research In Motion Limited What is a BlackBerry HTML5/WebWorks API Extension? An additional feature which lets the user interact with the BlackBerry PlayBook Tablet’s system functionalities Example: the User Interface (UI) API consists of Dialog functionality, allowing developers to integrate standard system dialog boxes into a BlackBerry HTML5/WebWorks Application and control the application flow based on user responses. This API can be accessed by adding the feature element in the config.xml document 8 Course Code

© 2012 Research In Motion Limited Why Use HTML5/WebWorks APIs? Although APIs are designed for programmers and developers, they are ultimately good for users because they guarantee that all applications using a common API will have similar interfaces This makes it easier for users to learn new applications 9 Course Code

© 2012 Research In Motion Limited Including a BlackBerry HTML5/WebWorks API in the “Hello World” App

© 2012 Research In Motion Limited Including a BlackBerry HTML5/WebWorks API in the “Hello World” App 1. Create the main HTML file for your “Hello World” application by creating a directory that includes an index.html file Example: C:\HelloWorld\index.html 11 Course Code

© 2012 Research In Motion Limited Including a BlackBerry WebWorks API in the “Hello World” App 2.Then add a simple BlackBerry WebWorks specific API to your application's source code: function doAlert() { alert('The name of my app is: ' + blackberry.app.name); } Hello World 12 Course Code

© 2012 Research In Motion Limited Including a BlackBerry WebWorks API in the “Hello World” App 3. Create a config.xml file for the application in the same directory as the “Hello World” index.html file Example: C:\HelloWorld\config.xml 4. Edit the config.xml file to include a declaration for the desired API: Hello World Me 13 Course Code

© 2012 Research In Motion Limited Including a BlackBerry WebWorks API in the “Hello World” App 5. To view the index.html file in the Ripple Emulator, save the file for access to an external web server (like Dropbox) 6. Once saved to the “Public folder” in Dropbox, select the “Copy Public Link” option 7. In the address bar in Ripple, paste the public link for the index.html file The following dialog box should appear: 14 Course Code

© 2012 Research In Motion Limited How to Write a Custom API Extension

© 2012 Research In Motion Limited How to Write a Custom API Extension The following example will demonstrate how to create a custom API extension The API will be for saving data from an application to the PlayBook Tablet This API could allow a developer to write any string of data into a file and have it stored 16 Course Code

© 2012 Research In Motion Limited How to Write a Custom API Extension To find the existing BlackBerry WebWorks API extensions for the Tablet OS, go to: C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS \bbwp\ext 17 Course Code

© 2012 Research In Motion Limited How to Write a Custom API Extension 1. Create the files and directories following the directory structure shown in the figure 18 Course Code

© 2012 Research In Motion Limited How to Write a Custom API Extension 2. Implement the library.xml file: This file specifies the basic structure and feature element which will be used in the application to invoke functionalities of this custom extension 19 Course Code

© 2012 Research In Motion Limited How to Write a Custom API Extension 3. Create the custom_file_dispatcher.js: This file implements the basic functions that will be used to read and write data into the BlackBerry PlayBook Tablet The code for the custom_file_dispatcher.js file can be viewed on the following slide 20 Course Code

© 2012 Research In Motion Limited custom_file_dispatcher.js 21 Course Code

© 2012 Research In Motion Limited How to Write a Custom API Extension 4.Create the custom_file_ns.js file 5.Create the ActionScript file which interacts with the BlackBerry PlayBook Tablet 22 Course Code

© 2012 Research In Motion Limited 23 Course Code ActionScript file that interacts with the BlackBerry PlayBook

© 2012 Research In Motion Limited 24 Course Code ActionScript file that interacts with the BlackBerry PlayBook

© 2012 Research In Motion Limited How to Use the blackberry.custom.file Extension To read data to a file, include the feature element in the config.xml file To write data to a file, include the feature element in the config.xml file 25 Course Code

© 2012 Research In Motion Limited Summary and Next Steps

© 2012 Research In Motion Limited Summary In this module the following topics were covered: What is a HTML5/WebWorks API? Why Use HTML5/WebWorks APIs? How to include a BlackBerry WebWorks API into the “Hello World” application How to write a custom API extension for a BlackBerry PlayBook Tablet application using the WebWorks APIs 27 Course Code

© 2012 Research In Motion Limited Next Steps To integrate additional BlackBerry HTML5/WebWorks APIs into applications, please refer to the API Reference GuideAPI Reference Guide Additional code samples and sample applications utilizing APIs for HTML5/WebWorks applications are also available from the BlackBerry HTML5/WebWorks portalBlackBerry HTML5/WebWorks portal 28 Course Code

© 2012 Research In Motion Limited Legal Disclaimer © 2012 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion® and related trademarks, names and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countries around the world. Ripple is a trademark of tinyHippos, Inc.; Dropbox is a trademark of Dropbox, Inc. Corporation; Adobe and Dreamweaver are trademarks of Adobe Systems Incorporated; Windows is a trademark of Microsoft Corporation; Mac is a trademark of Apple Inc. All other trademarks are the property of their respective owners. This documentation is provided "AS IS" and without condition, endorsement, guarantee, representation or warranty, or liability of any kind by Research In Motion Limited and its affiliated companies, all of which are expressly disclaimed to the maximum extent permitted by applicable law in your jurisdiction. 29 Course Code 29