App development with GWT, Cordova and Netbeans Part 4

This is the forth part of my blog series on how to develop mobile apps with GWT, Cordova and Netbeans. The initial description can be found here.

In the previous parts we did create a MGWT project and did put a "Hello world" button on the screen and finaly did build the native apps for android and windows phone.

Web apps are all nice, but often you wish to access some features of your mobile device which is not available to web applications. Some common things are the camera, sensors and so on.

With cordova/phonegap we fortunally can use these devices via native plugins.

Just a warning: Any plugin you use must be available on all target platforms, otherwise you will get in troubles. (There are ways to handle such situations, but they are outside the scope of this tutorial)

The first step to allow such access, is to teel the maven pom.xml that we wish to use phonegap "features".

Just add this dependency in your pom.xml file:

<dependency>
    <groupId>com.googlecode.gwtphonegap</groupId>
    <artifactId>gwtphonegap</artifactId>
    <version>2.4.0.0</version>
</dependency>

The second think to change, is you index.html file.

There you have to specify that cordova.js is started, so the html<->native bridge is activated.

Somewhere in your index.html you have the line which starts the gwt java script.

It looks like this:

<script type="text/javascript" language="javascript" src="mgwt1/mgwt1.nocache.js"></script>

Before that line, add the call to the cordova.js file, so the phonegap environment is initialized.

It should then look like this:

<script type="text/javascript" language="javascript" src="cordova.js"></script>
<script type="text/javascript" language="javascript" src="mgwt1/mgwt1.nocache.js"></script>

It is important that the cordova.js in loaded before the GWT script, because the initialisation order is important.

Finally you must tell the phonegap build service to include some native plugins, otherwise the cordova.js will be missing in the package.
For this add these lines to your src/main/phonegap-build/config.xml:

<feature name="http://api.phonegap.com/1.0/notification"/>
<feature name="http://api.phonegap.com/1.0/device"/>
<gap:plugin name="org.apache.cordova.device" version="0.2.8" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.6" />
With these four lines you include the device information features (You can retrieve the platform informations) and show native notifications.

In the start() method of your "java" class, you add the initialisation of the phonegap environment.

PhoneGap phoneGap = GWT.create(PhoneGap.class);
boolean isPhoneGap= phoneGap.isPhoneGapDevice();
           
if (isPhoneGap)
{
    phoneGap.addHandler(new PhoneGapAvailableHandler()
    {
        @Override
        public void onPhoneGapAvailable(PhoneGapAvailableEvent event)
        {

            // Here you have the native "bridge" up and running

        }

    });

   phoneGap.addHandler(new PhoneGapTimeoutHandler()
   {
       @Override
       public void onPhoneGapTimeout(PhoneGapTimeoutEvent event) 

       {
           //can not start phonegap - something is for with your setup
       }
    });

}

The last step required, is tell GWT to use the phonegap API too.

So in your <project.gwt.xml uncomment this line:

<inherits name="com.googlecode.gwtphonegap.PhoneGap"/>

With this you now have access to all the features as described here.

Of course you need to speicfy access rights for you app, otherwise you will not be allowed to interact with the native phone system. (Camera etc.)

You can download the sample project from this place.

I hope you enjoyed this tutorial.

If you struggle somewhere, please drop me a note, so I can enhance the tutorial.