BlackBerry HTML5/WebWorks Applications for the BlackBerry® PlayBook™ Tablet BlackBerry Academic Program Module 2- Tools Installation

Overview This section will guide you through the objectives, recommended pre-requisites and technical requirements for this module.

Objectives This module will cover the following topics: Overview of BlackBerry WebWorks Objectives This module will cover the following topics: Which tools are required for BlackBerry HTML5/WebWorks development for the BlackBerry PlayBook tablet How to install the following tools: Adobe® Air® SDK BlackBerry® WebWorks™ SDK for Tablet OS Ripple™ Emulator VMware® Player BlackBerry PlayBook Simulator

Course Code Prerequisites For this module, the recommended prerequisite skills and areas of knowledge are: • Basic computing knowledge • Application development terminology (Ex. GUI, IDE and USB) • Navigation (Ex. installing software, working with archives, locating and deleting files and folders) •Internet use (Ex. browsing web sites, using a web browser on a computer) These are some of the recommended prerequisites for this module.

Prerequisites Continued Course Code Prerequisites Continued For this module, the recommended prerequisite skills and areas of knowledge are: File types (Ex. JPG, PNG, DOC, PDF and ZIP) • Basic text editing knowledge (Ex. entering text, copying and pasting) • End-user experience/familiarity with a smartphone These are some of the recommended prerequisites for this module.

Technical Requirements Course Code Technical Requirements For this module, the following hardware is recommended for technical setup: • Intel® Pentium® 4 or AMD Athlon™ desktop processor 2 GHz or faster • 1 GB or more available hard disk space • 2 GB RAM or more • Computer monitor with resolution of 1024 x 768 or higher • Windows® XP SP3, Windows Vista® Ultimate or Enterprise, or Windows®7 • Java® Runtime Environment JRE 1.6 These are some of the technical requirements to complete this module. It is important to ensure that your computer has at least 1GB of available hard disk space and 2 GB of RAM so that your computer will be able to load and use all tools.

Technical Requirements Course Code Technical Requirements For this module, the following tools will need to be downloaded and installed on a student’s computer before development can begin: • Adobe AIR SDK v2.7 or above • BlackBerry WebWorks SDK for Tablet OS • Ripple Emulator • BlackBerry PlayBook Simulator • VMware (required to run the BlackBerry PlayBook Simulator) These are some of the technical requirements to complete this module. It is important to ensure that your computer has at least 1GB of available hard disk space and 2 GB of RAM so that your computer will be able to load and use all tools.

Note about OS Options for Tools Course Code Note about OS Options for Tools If students would like to download tools to develop on the Mac OS, they will require the following tools: Adobe AIR SDK BlackBerry WebWorks SDK for Tablet OS for Mac VMware Fusion® Tools can be downloaded from BlackBerry Developer Zone Please visit https://bdsc.webapps.blackberry.com/devzone/ to download tools required Mac OS.

Installing the Adobe AIR SDK This section will guide you through the installation of the Adobe AIR SDK.

Installing the Adobe AIR SDK Course Code Installing the Adobe AIR SDK Go to http://www.adobe.com/special/products/air/sdk/ to download Adobe Air SDK v 2.7 or above. Begin by selecting the OS version that will be installed on your computer. You will have the option of installing the tools for Windows or Mac OS. For this module, we will be installing the tools for Windows OS. If you have an earlier version of the Adobe Air SDK installed on your computer, you must uninstall it before you install a later version of the Adobe Air SDK. If you do not uninstall the earlier version and you just overwrite it, you might receive errors when you compile your WebWorks application. Figure 1: Selecting appropriate OS for SDK download

Installing the Adobe AIR SDK Course Code Installing the Adobe AIR SDK Choose to “save file” to the Program Files folder on the “C:\” directory of the computer. If any Adobe program such as Adobe Reader is installed, there will be a default C:\Program Files\Adobe folder. The SDK files will be extracted in the next step. Save the contents to the “Program Files” directory of your computer. It is recommended to save the extracted files to C:\Program Files\Adobe\folder. Figure 2: Saving content to program files

Extracting the Adobe AIR SDK Files Course Code Extracting the Adobe AIR SDK Files Open the “Adobe Air SDK” file saved in the C:\Program Files\Adobe folder. Extract the contents of the Air SDK to your computer by clicking on the “Extract all Files” link. Figure 3: Extracting the SDK Files

Extracting the Adobe AIR SDK Files Course Code Extracting the Adobe AIR SDK Files By clicking on the “Extract all Files” link shown on the previous slide, the Extraction Wizard should automatically start. Click the “Next’ button to continue. Figure 4: Extracting the SDK Files

Installing the BlackBerry WebWorks SDK This section will guide you through the installation of the BlackBerry WebWorks SDK.

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Go to the HTML5/WebWorks microsite to the “Downloads” page http://wbt20ykf/html5/download/sdk Select the “Tablet OS SDK” option. Figure 5: WebWorks SDK versions for smartphone or tablet

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Once you have downloaded the SDK to your local host computer, select “Run” to start the installation wizard. Figure 6: WebWorks SDK download options

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Waiting for the installation to initialize. Figure 7: Start of the Installation Wizard

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Click “Next” to begin. Figure 8: The Installation Wizard

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Review the Software License Agreement and click “I accept” if you accept the terms. You will not be able to install the WebWorks SDK without accepting the terms and conditions. Figure 9: Accepting the terms and conditions

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Select the folder where you would like the SDK to install. Remember this location. Figure 10: Selecting a folder to install the SDK

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Click “Install”. Figure 11: Pre-Installation summary for the BlackBerry WebWorks SDK

Installing the BlackBerry WebWorks SDK for Tablet OS Course Code Installing the BlackBerry WebWorks SDK for Tablet OS Click “Done” Figure 12: Installation of the BlackBerry HTML5 WebWorks SDK

The Ripple Emulator This section will guide you through the installation of the Ripple Emulator.

What is the Ripple Emulator? Course Code What is the Ripple Emulator? A multi-platform mobile environment emulator Custom-tailored to mobile HTML5 application development and testing Can be used to perform JavaScript debugging, HTML DOM inspection, automated testing in real time Can be used to emulate multiple device and screen resolutions in real- time without redeploying the application or restarting the emulator Reduces the challenges faced by mobile developers caused by platform fragmentation in the marketplace With the Ripple emulator, you can quickly see how your application looks and functions on multiple mobile devices and platforms, while using BlackBerry WebWorks and PhoneGap APIs in a quick, browser-like environment. The Ripple emulator includes a set of emulated APIs that reflect the APIs available on the platform you choose. For more information on the APIs supported for BlackBerry HTML5/WebWorks applications in the Ripple emulator, see the API section.

What is Included in the Ripple Emulator? Course Code What is Included in the Ripple Emulator? The panels and settings in the Ripple emulator allow you to perform many actions, including the following: Change device types and platform versions. Simulate accelerometer actions. Modify location information, including latitude, longitude, and altitude coordinates. Determine how an application responds to events by choosing specific events to trigger. Validate the elements and attributes in the configuration file for your application. Trigger phone call events. Access to the Web Inspector tool The Ripple Emulator allows you to perform the functions listed above. It also allows you to test your BlackBerry HTML5/WebWorks application using the Ripple emulator. To do this, place the application on a local web server and point the Ripple emulator to the site. You can test various scenarios without recompiling or reloading the application on a device simulator or device. After you update your application, you can complete your testing on a device simulator or device to ensure that the application runs as it should for users.

Downloading the Ripple Emulator Course Code Downloading the Ripple Emulator Download from the BlackBerry Jam “HTML5/WebWorks” site Note that there is a link to download the Mac OS version of the Ripple Emulator. For the purposes of this module, we will download the Ripple Emulator for a Windows OS. Figure 13: Downloading the Ripple Emulator

Installing the Ripple Emulator Course Code Installing the Ripple Emulator Click “Next” Figure 14: Installation Wizard for the Ripple Emulator

Installing the Ripple Emulator Course Code Installing the Ripple Emulator After reviewing the Software License Agreement terms, click “I agree” to continue. You will have to agree to the terms and conditions in order to download the Ripple Emulator. Figure 15: Software License Agreement for Ripple Emulator installation

Installing the Ripple Emulator Course Code Installing the Ripple Emulator Select an installation folder; the location on your computer that you would like the files installed. Remember this location. Click “Next”. Figure 16: Selecting an installation folder

Installing the Ripple Emulator Course Code Installing the Ripple Emulator Review the installation summary. Click “Install” to complete the installation. Keep in mind that the installation may take a few minutes. Figure 17: Installation Summary

Installing the Ripple Emulator Course Code Installing the Ripple Emulator Click “Done” to finish up the installation process. Figure 18: Ripple Emulator installation has completed

Configuring the Ripple Emulator Course Code Configuring the Ripple Emulator When the installation is complete, open the Ripple Emulator and: On the “Devices” options menu, select “BlackBerry PlayBook” Ensure that under the “Platform” menu, select the “WebWorks- Tablet OS” option To open Ripple, navigate to the C:\Program Files\Research In Motion\Ripple folder To develop WebWorks applications for BlackBerry smartphones such as the BlackBerry Bold 9900 or the BlackBerry Torch 9800, select the “WebWorks” option on the “Platform” menu Open the Ripple Emulator. To configure the Ripple Emulator, open the “Devices” options menu and select “BlackBerry PlayBook”. Ensure that under the “Platform” menu, select the “WebWorks-Tablet OS” option. To open Ripple, navigate to the C:\Program Files\Research In Motion\Ripple folder . To develop WebWorks applications for BlackBerry smartphones such as the BlackBerry Bold 9900 or the BlackBerry Torch 9800, select the “WebWorks” option on the “Platform” menu.

Configuring the Ripple Emulator Course Code Configuring the Ripple Emulator To open a menu item, click on the “Menu” title. Figure 19: Ripple Emulator for Tablet OS

Installing VMware Player Course Code Installing VMware Player This section will guide you through the installation of VMware Player.

Installing VMware Player Course Code Installing VMware Player The VMware Player is required to run the BlackBerry PlayBook simulator Visit VMware Player website to download the VMware tool A VMware account is required to download the tool If you do not have a VMware account, register for a free account It is recommended that you have a minimum 1GHz processor and 1GB RAM to effectively host the operating system For additional details on minimum PC requirements, please see the VMware Player Documentation. To run the virtual machine, it is recommended that you have a 1 GHz or faster processor (2GHz recommended) and 1GB RAM minimum (2GB RAM recommended). You must have enough memory to run the host operating system, plus the memory required for each guest operating system (example: the PlayBook Tablet OS) and for applications on the host and guest.

Installing VMware Player Course Code Installing VMware Player Select the VMware Player for Windows version. The VMware Player is available for other OS, but for the purposes of this module, we will be downloading the VMware Player for Windows. Make sure that the host computer has enough RAM for both the host and the virtual machine to successfully complete the installation and effectively use the tools. Figure 20: Downloading the VMware Player

Installing VMware Player Course Code Installing VMware Player Click “Install” to start the VMware installation. Figure 21: Beginning installation of the VMware Player

Installing VMware Player Course Code Installing VMware Player Save the folder to a local location on your computer. When the file has been downloaded, click “Launch” Figure 22: Launching the installation of VMware Player

Installing VMware Player Course Code Installing VMware Player Now, the download manager will begin. Figure 23: VMware Player installation

Installing VMware Player Course Code Installing VMware Player After selecting all of the installation options, click “Continue” to begin installation. Figure 24: Successful installation of the VMware Player

Installing VMware Player Course Code Installing VMware Player Now, the installation of the VMware player will begin. Figure 25: Installation of the VMware Player

Installing VMware Player Course Code Installing VMware Player After VMware Player is installed, a restart is required. Make sure to restart your computer to complete installation. Figure 26: Restarting your computer to finalize installation

BlackBerry PlayBook Simulator Set-up This section will guide you through setting up the BlackBerry PlayBook Simulator.

BlackBerry PlayBook Simulator Set-up Course Code BlackBerry PlayBook Simulator Set-up The BlackBerry PlayBook Simulator Virtual Machine is included in the BlackBerry WebWorks SDK installation folder, as it is a part of the WebWorks SDK. Navigate to C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.1.0.6\bbwp\blackberry-tablet-sdk to find the BlackBerry PlayBook Simulator Virtual Machine. Figure 27: Navigating to the PlayBook Simulator

BlackBerry PlayBook Simulator Set-up Course Code BlackBerry PlayBook Simulator Set-up Navigate to “BlackBerry WebWorks SDK” folder. Open the BlackBerryPlayBookSimulator.vmx file. Navigate to the location on your local computer where the “BlackBerry WebWorks SDK” was installed. The location of the WebWorks SDK folder should be C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.1.0.6\bbwp\blackberry-tablet-sdk . Figure 28: Navigating to the PlayBook Simulator

BlackBerry PlayBook Simulator Set-up Course Code BlackBerry PlayBook Simulator Set-up Click on the “BlackBerry PlayBook Simulator” link under the “Home” link. After clicking on the “BlackBerry PlayBook Simulator” link, click on the “Play Virtual Machine” to start the BlackBerry PlayBook simulator. Figure 29: Launching the BlackBerry PlayBook Simulator using VMware Player

BlackBerry PlayBook Simulator Set-up Course Code BlackBerry PlayBook Simulator Set-up Now, the BlackBerry PlayBook Tablet OS virtual machine will boot. Figure 30: BlackBerry PlayBook Tablet virtual machine

BlackBerry PlayBook Simulator Set-up Course Code BlackBerry PlayBook Simulator Set-up After the BlackBerry PlayBook Tablet OS starts in the virtual machine, you will be prompted to enter a password. The default password to enter is “playbook”. Figure 31: BlackBerry PlayBook Tablet OS start-up

BlackBerry PlayBook Simulator Set-up Course Code BlackBerry PlayBook Simulator Set-up After entering the default password “playbook”, the home screen of the PlayBook simulator will appear in the virtual machine. Figure 32: BlackBerry PlayBook Tablet Simulator home screen

Summary and Next Steps

Course Code Summary and Next Steps In this module, the following topics were covered: Which tools are required for BlackBerry HTML5/WebWorks development for the tablet How to install the following tools: Adobe Air SDK BlackBerry WebWorks SDK for Tablet OS VMware Player BlackBerry PlayBook simulator Next steps including writing, packaging and loading an application onto the BlackBerry PlayBook Simulator After having completed the steps outlined in this module, you will have downloaded all of the tools necessary to create your first BlackBerry PlayBook tablet application. Next steps include writing, packaging and loading an application onto the BlackBerry PlayBook Simulator.

Course Code Additional Resources HTML5 WebWorks Boot Camp Explanation – Mobile World Congress 2011 Building your first BlackBerry Application using HTML5 WebWorks PhoneGap and Ripple Demo

Course Code 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. Adobe and AIR are trademarks of Adobe Systems Incorporated.; Ripple is a trademark of tinyHippos, Inc.; VMware is a trademark of VMware, Inc. ; Intel and Pentium are trademarks of Intel Corporation; AMD Athlon is a trademark of Advanced Micro Devices, Inc; Windows is a trademark of Microsoft Corporation.; Java is a trademark of Oracle America, Inc.; Ripple is a trademark of tinyHippos, Inc.; Mac OS is a trademark of Apple Inc.; Web Inspector is a trademark of Wintriss Engineering Corporation.; PhoneGap is a trademark of Adobe Systems Incorporated .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. 53