This section describes how to use Ripple to test your HTML5 app in an emulated environment before running it on the target device.
To test your WebWorks "Hello World" app, you'll use the Ripple emulator that you installed earlier. You can point to either a local or remote website that's running your WebWorks app and emulate the entire WebWorks SDK environment without compiling your code or launching a simulator. Testing with the Ripple emulator provides a similar experience to desktop browser development. So, making changes is as easy as editing your source code and pressing Refresh in the Ripple emulator.
In your Google Chromium browser go to your web server by entering its address (for example, http://localhost/CarControl/). Make sure you're running your web server as Administrator, and that the appropriate permissions are set for your server.
A great tool in Google Chromium is the Web Inspector, which allows you to inspect the DOM of your app, including CSS styles and JavaScript code. To get started with Web Inspector, simply open your "Hello World" app in Chromium, right-click on any element in the page, and select Inspect Element. This will open another window where you can inspect and modify the DOM and CSS styles, set JavaScript breakpoints, and view network request traffic. You can also access the JavaScript console to examine console logging and execute arbitrary JavaScript commands.
For help with Web Inspector, visit the Web Inspector wiki site or https://developer.blackberry.com/html5/documentation/getting_started_webinsp_microsite_1987477_11.html.
If you don't have a web server set up, you can open files directly from the local file system on your computer by completing the following tasks:
Your app opens in the browser. Here’s what you should see:
It looks pretty good, but it doesn't do much.
This should reload the page in the Ripple emulator.
If this is the first time you're starting the Ripple emulator, review the license agreement, and then choose to accept or decline the terms.
Since this is the first time you've enabled Ripple for this particular URL, you must select the platform that your app is intended for. The Ripple emulator will remember this selection and load it automatically the next time you reload the "Hello World" URL .
Your "Hello World" app runs in the center of the browser window, with emulator information areas on either side. Explore the other panels in the Ripple emulator to see the additional settings you can use to test your "Hello World" app.
You can now access all of the APIs on the HMI.
On the right-hand side of the screen, you'll find Ripple extensions that let you simulate HMI system information. For example, if you change the volume from Ripple, your app will receive the same event that will occur in the vehicle. You can use the user interface to simulate system events and to access all of the APIs from your app. In most cases, you'll receive hard-coded data responses to your commands, but the behavior will be the same as the in-car experience.