[Blackberry]基于Ripple emulator的HTML5 Webworks开发

For your first BlackBerry WebWorks app, we'll stick with the classic, Hello World. It doesn't useJavaScript or BlackBerry WebWorks APIs, but you can verify that you successfully installed the tools and configured them correctly.

You will learn to:

Create index.html and config.xml files
View the app in the Ripple emulator
Configure your build settings in the Ripple emulator
Package your application using the Ripple emulator

Before you start, make sure you have the necessary tools installed. Refer to Setting up your tools, if necessary.

=====================================================

Before you begin:

You need a text editor or IDE for creating HTML5, JavaScript, CSS, and config.xml files.
You need to install the Google Chrome browser. (The Ripple emulator runs as a Google Chromeextension.)

Download the tools available on the Downloads page.
1. Download the Ripple emulator.
2. Download the BlackBerry WebWorks SDK for Smartphones of BB OS(not the BB10 OS version).
3. Download a simulator. If you have a BlackBerry device available for testing, downloading a simulator isn't essential, but you will probably find it convenient to have one.
Enable the Ripple emulator.
Create a folder named RippleSites in one of the following locations, so that Ripple can find your app's files.
- Windows XP: C:Documents and SettingsUsernameRippleSites
- Windows 7: C:UsersUsernameRippleSites
- Mac OS: /Users/Username/RippleSites
Set up for signing by requesting code signing keys. Signing keys allow you to test your app on a device and, when you're ready, to distribute it through BlackBerry World. You don't need signing keys to work through the examples in the Getting Started section. If you request them now, you will have them ready when you need them.

========================================================

Create the application files

You need to create your application files where the Ripple emulator can find them.

Navigate to your RippleSites folder. As a reminder, you created it in one of the following locations when you set up your tools:
- Windows XP: C:Documents and Settings<Username>RippleSites
- Windows 7: C:Users<Username>RippleSites
- Mac OS: /Users/<Username>/RippleSites
In your RippleSites folder, create a folder named HelloWorld.

In your HelloWorld folder, create an index.html file. This file is the landing page for your app. Use the following code:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" 
              content="text/html; charset=UTF-8"> 
        <title>Hello World</title> 
    </head> 
    <body> 
        <p>Hello World!</p> 
    </body> 
</html>

When we package your app, we will need an icon.png file to display on the BlackBerry device. In your HelloWorld folder, create a folder named images. Download icon.zip and extract theicon.png file to the images folder.

Create a config.xml file in your HelloWorld folder. Use the following code:

<?xml version="1.0" encoding="UTF-8"?> 
<widget xmlns="http://www.w3.org/ns/widgets" 
    xmlns:rim="http://www.blackberry.com/ns/widgets"
    version="1.0.0.0" id="HelloWorldApp">   
   
    <name>helloWorld</name> 
    <author>My name</author>
    <description>The classic first app</description>
    <icon src="images/icon.png"/>
    <content src="index.html"/> 

</widget>

To learn more about the config.xml file, see Create your config.xml file.

View your app in the Ripple emulator

The Ripple emulator can act as a local web server for your HTML5 app and can simulate what your app will look like on a BlackBerry device.

Open the Google Chrome browser and make sure that Ripple services are running. If they aren't, click the Ripple icon beside the address bar, and then click Start Ripple Services or use command to start ripple-services.bat in "D:UsersLeeAppDataLocalGoogleChromeUser DataDefaultExtensionscnijnnaimeaacneklcndcafbnkeicckh.9.XXservicesin".
Enter the URL for your Hello World landing page. Substitute http://localhost:9910 for the first part of the file path, up to and including /RippleSites (for example,http://localhost:9910/HelloWorld/index.html).
When the page is finished loading, click the Ripple icon beside the address bar.
Click Enable.
When you are asked to select a platform, select WebWorks

You can select a particular device by using the Devices panel. If the Devices panel is not visible, click the tiny arrow in the upper-left corner of the screen.

The Ripple emulator shows your app as it would appear on the platform and device you selected.

This image shows the Hello World app as it appears in the Ripple emulator when the WebWorks platform and BlackBerry Bold 9900 device are selected.

Configure your build settings

In the previous section, you used the Ripple emulator to see what your app will look like on aBlackBerry device. With a little bit of configuration, the Ripple emulator can also package your app. The Ripple emulator makes calls to the BlackBerry WebWorks SDK on your behalf, so you don't need to type commands at a command prompt. You need to provide the Ripple emulator with the location of the SDK and your app's files.

For some versions of Windows, you may need to be logged into an account with administrator privileges to successfully build your BlackBerry WebWorks app.

In the Ripple emulator, select the Build panel.
Click Settings.
In the SDK Path field, type the location where the BlackBerry WebWorks SDK is installed. The default locations are:
- Windows XP: C:Program FilesResearch In MotionBlackBerry WebWorks SDK <version>
- Windows 7: C:Program Files (x86)Research In MotionBlackBerry WebWorks SDK <version>
- Mac OS: /Developer/SDKs/Research In Motion/BlackBerry WebWorks SDK <version>
In the Project Root field, type the location of your HelloWorld folder (for example,C:UsersusernameRippleSitesHelloWorld).
In the Archive Name field, type HelloWorld. The Ripple emulator will use this name when it creates the .zip file that contains your app's files. (Do not type the .zip extension.)
In the Output Folder field, type the location where you want the output files to be created (for example, C:UsersusernameRippleSitesHelloWorldPackaged). Do not use the same folder that you specified in the Project Root field.
In the upper-right corner of the window, click the X icon to close the window and save your settings.

This is what the Build Settings panel looks like.

This image shows the Ripple Build Settings panel.

Package your app

When you build and package your app, you create an executable file that runs on a BlackBerry device.

The Ripple emulator gives you several choices when packaging your app:

Package: This option builds and packages your app, and creates an unsigned executable file that you can install on a BlackBerry device for testing.
Package & Sign: This option builds, packages, and signs your app, and creates an executable file that you can deploy to a BlackBerry device or distribute through BlackBerry World.
Package & Launch: This option builds and packages your app and launches it on a simulator.

The Ripple emulator makes calls to the BlackBerry WebWorks SDK, so be sure you have the appropriate SDK installed for your platform. Refer to Setting up your tools.

Let's start with just packaging the app.

Make sure that Ripple services are running. If they aren't, click the Ripple icon beside the address bar, and then click Start Ripple Services.
Check your build settings.
Click Package.

The Ripple emulator builds and packages your application. When the build and package process is complete, the message Build succeeded! appears. Your output appears in the output folder you specified.

The type of output files that the Ripple emulator builds depends on the choice you made in the Platforms panel. If you selected WebWorks, the Ripple emulator builds a .cod file.

For more information, including how to package your app from the command line instead of using the Ripple emulator, see Preparing to package.