Running "Hello World" in Ripple

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.

To test your HTML5 app in the Ripple emulated environment:
  1. Open the Chromium browser and point to http://localhost/<path>/HelloWorld/index.html, where path is the location where the HelloWorld directory you created earlier exists (the location accessed by your web server).
    Note:

    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:

    1. Create a folder named MyApp in one of the following locations:
      • C:\Users\<Username>\MyApp (Windows 7)
      • C:\Documents and Settings\<Username>\MyApp (Windows XP)
      • /Users/<Username>/MyApp (Linux)
    2. Copy your project folder and all of its contents into the MyApp folder.
    3. In the address bar, type http://localhost/ followed by your project folder and landing page. For example: http://localhost/MyApp/index.html.

    Your app opens in the browser. Here’s what you should see:



    It looks pretty good, but it doesn't do much.

  2. Click the Ripple icon on the right side of the browser toolbar.

  3. Click Enable.

    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.

    Note: By default, your web server might listen on port 80. If you encounter difficulties with permissions or access, verify the permissions for the user. Also, if the server doesn't bind to a specific address, try 127.0.0.1, localhost:9910, or 127.0.0.1:9910.

    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 .



  4. From the Platforms box on the left-hand side,make sure that the Platform setting is set to QNX CAR. If its not currently set, click QNX CAR.
  5. After the emulator starts and the page reloads, you should see the HMI console in the center of the screen with your current "Hello World" app in the center, similar to the following:


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.