Building and Deploying WebWorks Samples

We now have 5 samples at WebWorks-Samples (TunnelTilt, is a sixth one but it is at WebGL-Samples):

• Aura – the “weather with physics” demo from MWC 2011 (video)
• KitchenSink – a demo of many WW features (all but “the kitchen sink”)
• SketchPad – the most recent addition, a simple sketching tool
• Payment – shows how to do payment in a WW
• UIExamples – Many UI examples

Aura, Payment and SketchPad were designed specifically for the PlayBook.  I believe KitchenSink and UIExamples started for the smartphones but they work equally well on the PlayBook, although the layout of UIExamples is better in portrait rather than landscape mode.

Setup

The instructions are the same for all the samples.  They are similar to those for TunnelTilt, except that you don’t need to bundle any extra WebWorks extensions.

The usual setup for debug mode – see Install the Developers Beta and Install a Debug Token.  Set your PlayBook in Development Mode, and write down the DEVICEIP and the DEVICEPASS.

Download

Download the samples from GitHub.  Pay some attention to the branch you are using – you want master because gh-pages is missing sketchpad (issue #18).

You can download via a git clone, or just a plain zip download.

If you choose a ZIP, GitHub will create a ZIP file for you that corresponds to the state of the repository right now.  Something like blackberry-WebWorks-Samples-6c853cb.zip.  Unzip it and, if you want, rename the directory to something like blackberry-WebWorks-Samples.

The result will look something like:

bash-3.2$ /bin/ls -1 -p blackberry-WebWorks-Samples/
Aura/
LICENSE
README.md
UIExamples/
kitchenSink/
payment/
sketchPad/

We will now build and deploy each sample.  All samples are built and deployed using the same instructions.

Build and Deploy

Each sample directory has the HTML, CSS, JS and other resource files needed (locally) by the application.  Each sample also has a widget configuration file config.xml that describes what features will be needed by the application, the icon to use on the home screen, the name, the description, and other resources.

You just need 3 commands per sample: zip your WebWorks application, then package that ZIP into a BAR, then deploy. The zip command is most likely bundled in your platform, the packager comes from the WebWorks SDK, the deployer is also included in the WebWorks SDK although that is a copy of that in the NDK.

bash-3.2$ which zip
/usr/bin/zip
bash-3.2$ which bbwp
/Developer/SDKs/wwsdk-2.2.0.5/bbwp/bbwp
bash-3.2$ which blackberry-deploy
/Developer/SDKs/bbndk-2.0.0-beta2/host/macosx/x86/usr/bin/blackberry-deploy

If you wonder about that wwsdk directory, it is really a symlink to the standard installation directory to give it a sensible name:

bash-3.2$ ls -l /Developer/SDKs/wwsdk-2.2.0.5
lrwxr-xr-x  1 root  wheel  64 Dec 28 17:40 /Developer/SDKs/wwsdk-2.2.0.5@ -> Research In Motion/BlackBerry WebWorks SDK for TabletOS 2.2.0.5/

And that’s pretty much all. If we save the ZIPs and BARs in the top directory for simplicity, the commands for each application are of the form:

bash-3.2$ cd Aura
bash-3.2$ zip -r ../Aura.zip *
bash-3.2$ bbwp ../Aura.zip -d -v -o ..
bash-3.2$ blackberry-deploy -installApp \
-password DEVICEPASS -device DEVICEIP \
-package ../Aura.bar
bash-3.2$ cd ..

At the end you will have 5 new applications in your PlayBook: