Open Source Software Technical Articles

Want the Best of the Wazi Blogs Delivered Directly to your Inbox?

Subscribe to Wazi by Email

Your email:

Connect with Us!

Current Articles | RSS Feed RSS Feed

Using GWT and PhoneGap for complex mobile applications

  
  
  

In the first part of this article, we saw how to use PhoneGap (now Apache Cordova) to turn a Google Web Toolkit (GWT) web page into a smartphone application, but we just focused on getting these tools to play nicely together – we didn't really take full advantage of PhoneGap's features. Let's now fix that omission and see how to write a GWT application that actually interacts with a smartphone to, say, send SMS, use GPS, store data locally, create contacts, and perform any other functions.

We'll continue the development of the application we wrote in the first part. PhoneGap has advanced to version 3.0, but by following the steps in the official documentation, we can update it easily. As earlier, since all setup procedures are well detailed, we won't repeat them here, but you should read them, along with some basics about GWT's JSNI (JavaScript Native Interface), which we need to use to interact with the smartphone APIs.

We can access some basic smartphone functions such as calling someone or sending SMS or email by means of simple HTML coding; we'll try those first. PhoneGap provides 16 plugins (see table below) that let you access other underlying smartphone features. (Fortunately, calling the API routines and getting results from them is pretty much the same no matter what API you work with, so we don't have to go over all of them.) For specific platform-oriented settings (such as the Android splash screen for your app, or how to sign your Apple iPhone app) check the Platform Guides.

PhoneGap available APIs
Accelerometer Camera Capture Compass
Connection Contacts Device Events
File Geolocation Globalization InAppBrowser
Media Notification Splashscreen Storage

Basic phone features

You don't need to do any special coding to access basic phone features; you can make do with certain Uniform Resource Identifiers (URI). If you include some links on your web page, with specific href attributes, then when users click on them, they will be taken to the corresponding features with no extra work for you. See the table below for the available URI schemes.

Access basic functions through special URIs
URI schemeMeaning
href="tel:555-5555" Open the dialer application to call the given phone number.
href="sms:555-5555?body=some.text..." Open the SMS application to send an SMS with the given body text to the provided phone number.
href="mailto:someone@somewhere?subject=something...&body=some.text..." Open the email application to write a message to the provided email account with the given subject and body. There are more options, such as sending cc or bcc copies.

In the sample application, I added a couple of hyperlinks to show how to call someone or how to send an SMS. Of course, by using GWT DOM manipulation methods, you could set up the URIs dynamically, instead of hardcoding them as I did in the sample.

Using the internal smartphone APIs: Where am I?

Getting a fix

If you try using geolocation in the Android emulator, it will fail, because the simulator has no location provider. There's a simple workaround. After starting the simulation run, from the command line enter telnet 127.0.0.1 5554 and then issue a command like geo fix -34.555 -56.777 to set the current latitude and longitude. You'll have to reenter this command several times, because the emulator requires a new fix after satisfying each geolocation request. To exit, just quit.

Methods for calling the different available APIs are pretty similar, so we'll examine two: using GPS to get your geolocation, and using the native notification dialog boxes to interact with the user. We are using the Events API to detect the "device ready" event, but you can detect and process events too, such as pause/resume, online/offline, and diverse buttons. We'll see how to call API routines, how to pass parameters to them, and how to process their results. The APIs are oriented to JavaScript coding, so we must use JSNI.

Getting your current geographic position through a button click requires code as shown below. The first two lines add the button to the screen, and the third (rather long!) one sets up the click event process.

final Button locationButton= new Button("Get Location");
RootPanel.get("locationButtonContainer").add(locationButton);
locationButton.addClickHandler(new ClickHandler() {
  @Override
  public void onClick(final ClickEvent event) {
    JsniGeolocation.getCurrentPosition(new JsniGeolocationCallback() {
      @Override
      public void onSuccess(final JsniPosition result) {
        Window.alert("You are at " + result.getCoords().getLatitude() + ", "
          + result.getCoords().getLongitude() + " +/- "
          + result.getCoords().getAccuracy() + "m. ");
      }

      @Override
      public void onFailure(final String result) {
        Window.alert("Couldn't get position [" + result + "]");
      }
    });
  }
});

The result of the call is a JsniPosition object (in reality, a wrapper around a JavaScript object), which itself includes a JsniPositionCoords object with the actual coordinates in it. The getCoords() method returns the object with the coordinates; that object includes getters (such as getLatitude()) for the returned values.

The JsniGeolocation class deals with actually calling the PhoneGap API. Note the rather complex-looking JSNI calls; they are needed so JavaScript code can call GWT Java code. The $wnd reference is most important; the GWT compiled code runs in a nested frame, so in order to access the navigator.notification object you must go through the original browser window.

package com.kereki.wazigwt.client;

public class JsniGeolocation {
  static native void getCurrentPosition(JsniGeolocationCallback callback)
  /*-{
    $wnd.navigator.geolocation.getCurrentPosition(
      function(position) {
        $entry(callback.@com.kereki.wazigwt.client.JsniGeolocationCallback::onSuccess(Lcom/kereki/wazigwt/client/JsniPosition;)(position));
      },

      function(error) {
        $entry(callback.@com.kereki.wazigwt.client.JsniGeolocationCallback::onFailure(Ljava/lang/String;)(error.message));
      },

      {
        maximumAge : 30000,
        timeout : 10000,
        enableHighAccuracy : true
      });
  }-*/;
}

For the rest of the GWT code, check the project code.

Now that the app can use the Geolocation API, let's turn to notifications.

More internal APIs: Hey, you!

The Notifications API lets you ask for confirmations, produce alerts and prompts, and also make beeps and vibrations, as any standard native app would. Let's look at the code for asking the user to confirm something.

final Button confirmButton= new Button("Ask for confirmation");
RootPanel.get("confirmButtonContainer").add(confirmButton);
confirmButton.addClickHandler(new ClickHandler() {
  @Override
  public void onClick(final ClickEvent event) {
    JsniNotification.confirm("Do you confirm this?!?!?", new JsniConfirmCallback() {
      @Override
      public void onConfirm(final boolean confirmed) {
        Window.alert(confirmed? "OK, confirmed": "Nope, denied");
      }
    }, "Confirm Window Title", "1:Surely,2:Not a chance");
  }
});

JavaScript programmers will note that instead of synchronous logic, we must work with callbacks here. (We saw plenty of those in our node.js article.) When you call the PhoneGap API you must provide a callback that gets called when the user clicks on one of the dialog buttons – in our example, we just show an appropriate message, and do nothing else.

Depending on the platform, PhoneGap has some quirks you need to be aware of. For example, Android supports a maximum of three buttons (and ignores any more) so you can go beyond yes/no options. Also, on Android 3.0 and later, buttons are displayed in reverse order if you use the Holo theme.

Apple's iOS also has some quirks. For example, if you want the phone to vibrate, PhoneGap will ignore any interval you set and run for a preset amount of time. Be certain to check the API documentation for all these possible gotchas.

In conclusion

As you can see, GWT can work together with PhoneGap to access smartphone internal APIs in order to provide a powerful, fully functional app. Using the methods we saw here, you can produce apps that feel more native, and that can take advantage of all users' smartphones.




This work is licensed under a Creative Commons Attribution 3.0 Unported License
Creative Commons License.

Comments

Even I have written some more codes to develop cross platform applications. Future lies in the hands of cross platform app development. Businesses do not want to spend much on individual applications when they have better options to choose from.
Posted @ Tuesday, October 29, 2013 4:48 AM by PhoneGap App Development
Post Comment
Name
 *
Email
 *
Website (optional)
Comment
 *

Allowed tags: <a> link, <b> bold, <i> italics