Enyo 1.0

The Enyo application framework was originally used to create applications to run on webOS 3.0, which is the OS on HP TouchPad tablets. The initial release of the framework (version 1.0) enabled applications to run on WebKit-based browsers. Since the browser in BlackBerry PlayBook OS is WebKit-based and since the Enyo framework is now open source, it is possible to easily port your Enyo 1.0 based apps to BlackBerry PlayBook OS using the BlackBerry PlayBook OS SDK.

Porting apps built using the Enyo 1.0 framework to BlackBerry PlayBook OS involves the following activities:
  • Incorporating the Enyo 1.0 core files with your application source files.
  • Building a BlackBerry WebWorks application from your application source files.
  • Loading the BlackBerry WebWorks application on a BlackBerry PlayBook tablet.

Porting process demo using the Style Matters sample application

We are going to demonstrate the porting process using the Style Matters sample application. You can follow the same instructions to port you own application by adapting the instructions as necessary. Alternatively, you can get the Style Matters sample app and use it to follow the instructions.

The instructions demonstrate how to port an app to run on a BlackBerry PlayBook Simulator. To load your app on a BlackBerry PlayBook tablet, you must sign your app or use a debug token. Links to detailed information on how to sign apps or use debug tokens is provided in the relevant section.

Obtain the StyleMatters sample application's source files

The Style Matters sample app is included with Enyo 1.0 core files. If you like to follow the porting process demo using this sample app, you need to obtain the source file of the app and place it at a convenient location.
  1. Download the Enyo 1.0 core files from the following location: https://github.com/enyojs/enyo-1.0/downloads.
  2. Extract the contents of the compressed file at a location of your choice.
  3. From the extracted files, navigate to the following folder:
    enyo-1.0-r1\support\examples
  4. Copy the StyleMatters folder to a convenient location (for example, C:\StyleMatters).

Incorporating the Enyo 1.0 core files

The Enyo 1.0 core files are included with webOS 3.0. The source code of Enyo 1.0 apps built for webOS points to the default location of the framework files inside webOS (src="../../../../1.0/framework/enyo.js" ). To port an app to BlackBerry PlayBook OS, we must include the framework source from the Enyo 1.0 core with the app source files and update all references to the framework files in the source code to point to the included framework files. Here are the steps to accomplish this:

  1. Download the Enyo 1.0 core files from the following location: https://github.com/enyojs/enyo-1.0/downloads.
  2. Extract the contents of the compressed file at a location of your choice.
  3. Copy the framework folder from the extracted content into the StyleMatters folder.
  4. In the StyleMatters folder, do the following:
    1. Locate the index.html file and open it with a text editor of your choice.
    2. Find the <script> element with the attribute/value src="../../../../1.0/framework/enyo.js" and replace it with src="/framework/enyo.js"

      The updated <script> element looks as follows:

      <script src="/framework/enyo.js" launch="debug" type="text/javascript"></script>
    3. Save the file and exit the text editor.
  5. In the StyleMatters folder, in the framework subfolder, delete the webOSconnect_1_3.jar file from the following locations:
    • build\palm\services\bridge (for example, in our case this is at C:\StyleMatters\framework\build\palm\services\bridge)
    • source\palm\services\bridge (for example, in our case this is at C:\StyleMatters\framework\source\palm\services\bridge)

Building a BlackBerry WebWorks application package

A BlackBerry WebWorks application for BlackBerry PlayBook OS is packaged into a file with a .bar extension (BlackBerry Archive file). The BlackBerry WebWorks Packager (bbwp), which is a command line tool included with the BlackBerry PlayBook OS SDK, generates a .bar file from a .zip file. The .zip file is a BlackBerry WebWorks application archive. It contains your application source files and a configuration file named config.xml (BlackBerry WebWorks configuration file).

Building a BlackBerry WebWorks application from your source files involves the following activities:
  1. Creating a BlackBerry WebWorks configuration file (config.xml).
  2. Creating a BlackBerry WebWorks application archive (.zip file).
  3. Generating a BlackBerry Archive (.bar file).

Create a BlackBerry WebWorks configuration file (config.xml)

In a text editor of your choice (for example, Notepad++), do the following:

  1. In a blank file, enter the following XML 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="StyleMatters">
    	<name>Style Matters</name>
    	<author>Enyo 1.0</author>
    	<content src="index.html"/>
    	<icon src="framework/icon.png"/>
    </widget>
  2. Save the file as config.xml in the StyleMatters folder.

Generate a BlackBerry Archive (.bar file)

Before you begin: To complete this task, you must have the BlackBerry PlayBook OS SDK installed on your computer. You can download the SDK from the following location: http://developer.blackberry.com/playbook/html5/download/
  1. At the command prompt, change your directory to the location where you installed the BlackBerry PlayBook OS SDK. For example, in Windows the default location is the following:
    C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS <x.x.x.x>
    Where x.x.x.x denotes the version of the SDK that you installed.
  2. In the SDK directory, at the command prompt, type the following command:
    bbwp C:\StyleMatters\StyleMatters.zip -o C:\StyleMatters
    If the build process is completed successfully, two new folders should appear in the StyleMatters folder: device and simulator, each containing the StyleMatters.bar file.

Create a BlackBerry WebWorks application archive (.zip file)

In a file archiver of your choice (for example, 7-Zip), do the following:

  1. Select the contents of the StyleMatters folder.
  2. Create a .zip archive with the name StyleMatters.zip.
  3. Save the StyleMatters.zip file in the StyleMatters folder.

Make sure that you create the .zip file from the contents of the StyleMatters folder and not from the folder itself. The .zip file must have the config.xml file at the root level, not in a subfolder.

Loading a BlackBerry WebWorks application on a BlackBerry PlayBook tablet

The blackberry-deploy tool is a command line tool available with the BlackBerry WebWorks SDK for loading your app on a BlackBerry PlayBook simulator or tablet.

Load your application on a simulator

Before you begin: To complete this task, you must have the BlackBerry PlayBook Simulator installed and running with the development mode enabled. You can download a simulator from the Downloads page.
  1. At the command prompt, navigate to the dependencies\tools\bin folder inside your BlackBerry PlayBook OS SDK installation location.
    For example, if the SDK is installed in the default location in Windows, type the following command:
    cd "C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS <x.x.x.x>\dependencies\tools\bin"
    Replace <x.x.x.x> with the version number of the SDK that you installed.
  2. Run the blackberry-deploy tool with the installApp option. Specify the IP address of your simulator and the location of your .bar file using the appropriate options:
    blackberry-deploy -installApp -device <Simulator IP address> -package <Full path of the .bar file>
    For example, assuming that the IP address of the simulator is 192.0.2.124, we use the following command to load the StyleMatters sample app:
    blackberry-deploy -installApp -device 192.0.2.124 -package C:\StyleMatters\simulator\StyleMatters.bar

    If you set a password on the simulator, you must specify the password using the password option: -password <your password>

Further reading

Some general considerations

UI elements and layout
  • Flex layout: The Enyo framework provides flex layouts to build the structure of your application on webOS. For BlackBerry WebWorks applications you use the HTML div element to build the structure of your application.
  • Native UI elements: The Enyo framework provides native UI elements (for example, the enyo.button element for buttons) for your application on webOS. For BlackBerry WebWorks applications you use HTML to create buttons and other input objects. For examples of how you can create the right look and feel for your screen elements, visit the following resource at the BlackBerry WebWorks repository on GitHub: https://github.com/TheMarco/WebWorksQNXWidgets.
  • Application menu: On webOS you use the menu on the top-left corner of the screen to include standard menu items like About, Settings, and Help in your application. On BlackBerry PlayBook OS you include a swipe down menu for these items. For examples of how you can create and customize the swipe down menu, visit the following resource at the official BlackBerry support forum: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Sample-Code-Swipe-down-menu-for-BlackBerry-WebWorks-SDK-for/ta-p/943521
  • Configuration for dynamic screen resizing: On webOS, to ensure that applications display in full screen mode on devices with larger screens (for example, tablets), the configuration file must contain the "uiRevision":"2" attribute/value pair. BlackBerry WebWorks applications automatically display in full screen mode when a device has a larger screen.
Command line tools

In webOS, you can use the palm-log command to track logs generated by the device and applications. In BlackBerry WebWorks, you can debug your application using Web Inspector. For information on debugging your application, see Debugging using Web Inspector.

The palm-generate command for webOS applications generates the basic application structure for your webOS. BlackBerry WebWorks applications require a relatively simple project structure consisting of standard web application assets (such as HTML pages, style sheets, images and JavaScript) and a configuration file (config.xml), packaged in a standard archive (.zip) file. For more information on packaging a BlackBerry WebWorks application, see Package from the command line.

webOS command

BlackBerry WebWorks command

Reference

palm-generate

Not applicable.

Not applicable

palm-package

bbwp

Preparing to package

palm-install

blackberry-deploy

Deploy to a device

palm-launch

blackberry-deploy

Deploy to a device

palm-log

Use the Web Inspector.

Debugging using Web Inspector

webOS payment API

BlackBerry WebWorks payment API

The getAvailableItems function provides you information on in-app items connected with the application, or items that a user already paid for.

The blackberry.payment.getExistingPurchases provides you information only on items that a user already paid for.

The getItemInfo function provides you information on a specified in-app element.

There are no equivalent function.

The getPendingPurchaseInfo function provides information on in-app payments that take a long time.

This functionality is not necessary.

Payment Service

The Payment Service is similar on both platforms, with a few notable differences.

AJAX requests

In webOS, the WebService component initiates and processes AJAX requests. To initiate requests from a BlackBerry WebWorks application, you use the getJSON function from jQuery.

Last modified: 2013-08-14