WidgetGap: a Wookie & Cordova (PhoneGap) mashup widget

I knew PhoneGap as a tool to make native mobile apps from HTML, CSS and JavaScript, but had never used it myself. When I had to debug a PhoneGap application I read that the project you’re uploading is basically a W3C widget. I should have known from Scott’s blogpost, but apparently I forgot. I did remember that Apache Wookie is responsible for rendering W3C widgets in Apache Rave.

WidgetGap iconI decided to make my own demo widget called WidgetGap, that can be used for making both a mobile app and a widget in Rave. Then I started a new iOS project for Apache Cordova (the open source project behind PhoneGap). If you don’t develop in OSX, pick a getting started guide that works on your machine.

I copied the result of a JSON call to the REST API of the¬†Hippo Go Green demo in a Javascript variable to process that into the HTML. I chose this local variable because I didn’t want to call the REST interface over and over again just to get my markup right. After modifying the CSS it was time to replace the local resultset with a real AJAX call. The app and Wookie widget refuse to fetch the data because it’s a call to a different domain. Luckily there are solutions for this. For the mobile app you should add the following entry to the config.xml

<access origin="http://www.demo.onehippo.com"/>

For the iPhone simulator you also need to add this domain to the “External Hosts” entry in Resources/Cordova.plist file in the Xcode project.

For the Wookie widget I still didn’t get the data, but a few extra lines of Javascript made it work:

var loc = productLink;
if (window.widget && typeof window.widget.proxify == 'function') {
    loc = widget.proxify(loc);

Apart from issues with DOM manipulations in Javascript (not my expertise), I was able to create the widget that displayed a list of products from the Go Green REST interface with more detailed information when you click on the title.

Try it

The mobile app is available on PhoneGap (except for iOS because of Apple’s licensing policy).

To see the widget in Wookie, download and start the standalone version of Wookie.
In a different shell clone the WidgetGap repository from Github and go to the www folder. Package the contents and move this package to the deployment directory of the running Wookie instance:

git clone git://github.com/jashaj/WidgetGap.git
cd WidgetGap/www
zip -r widgetgap.wgt *
mv widgetgap.wgt ~/apache-wookie-0.11.0-incubating-standalone/build/webapp/wookie/deploy/

In the shell where you started Wookie you see the feedback about the deployment. If you see “‘WidgetGap’ – Widget was successfully imported into the system as WidgetGap” in the shell, you can view the widget it in your browser on http://localhost:8080/wookie/demo/.

The code is not optimised at all and maybe there is a better way to create this widget, but I wanted to show that you can write a single widget for the web and build a mobile app from it.

2 thoughts on “WidgetGap: a Wookie & Cordova (PhoneGap) mashup widget

  1. Ricardo Giacomin says:

    Jasha, thank you for this post. I’ve tried to follow your instructions here but had problems setting the external hosts property. I’ve followed the “build your cordova/ios tutorial” but the resulting project dos not have a Cordova.plist file. I couldn’t figure out how to set this.

    Ay help will be appreciated.

    Ricardo Giacomin

  2. The Cordova.plist seems to be gone in Cordova 2.3.0 and up. According to the release notes you should now use the config.xml. This is good news because you have a single point of configuration for both iOS and other platforms :)

Comments are closed.