Native messages for Android PhoneGap

28 de mayo de 2010

Recently I needed some modal and waiting messages in a PhoneGap app. My first approach was to use a javascript solution, based in jQuery, but the performance and quality of native modal messages are unquestionable. So I decided to program it, and here you have the result.

First I created a new Java class to handle all the staff. Place it with the rest:


package com.phonegap;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.content.res.Resources;
import android.os.Handler;
import android.os.Message;
import android.view.Window;
import android.webkit.WebView;

public class Notification {
	
	private Context mCtx;
	private WebView mAppView;
	private OnClickListener clickListener;
	
	private final int POSITIVE_BUTTON = -1;
	private final int CANCEL_BUTTON = -2;
	
	private ProgressDialog progressDialog;
	

	public Notification(Context ctx, final WebView appView)
	{
		this.mCtx = ctx;
        this.mAppView = appView;
        clickListener = new OnClickListener() {
			
			@Override
			public void onClick(DialogInterface dialog, int which) {
				switch (which)
        		{
        			case POSITIVE_BUTTON:
        				appView.loadUrl("javascript:navigator.notification.successCallback()");
        				break;
        			case CANCEL_BUTTON:
        				appView.loadUrl("javascript:navigator.notification.failCallback()");
        				break;
        		}
				
			}
		};
	}

	/**
	 * Shows a custom alert window with buttons.
	 * @param message Text to show
	 * @param options Array with strings for title (0), positive button (1) and negative button (2), in this order
	 */
	public void prompt(String message, String[] options)
	{
		 AlertDialog.Builder alertBldr = new AlertDialog.Builder(mCtx);
         String title = (options[0]!=null ? options[0] : "PhoneGap" );
		 alertBldr.setMessage(message);
         alertBldr.setTitle(title);
         if(options.length>1 && options[1]!=null)
         { 
        	 alertBldr.setPositiveButton(options[1], this.clickListener);
         }
         if(options.length>2 && options[2]!=null)
         {
        	 alertBldr.setNegativeButton(options[2], this.clickListener);
         }
         alertBldr.show();
         return;
	}
	/**
	 * Shows an activity modal message, with a spinning wheel
	 * @param message Text to show
	 */
	public void activityStart(String message)
	{
		this.progressDialog = ProgressDialog.show(mCtx,"",message, true);
		
	}
	/**
	 * Closes the activity modal message.
	 */
	public void activityStop()
	{
		this.progressDialog.dismiss();

	}
}

Modify DroidGap.java to add the new Javascript interface.

Add this after private class member declarations of DroidGap.java:

	private Notification mNotif;

Add this at the end of the bindBrowser method of DroidGap.java:

    	mNotif = new Notification(this, appView);
    	appView.addJavascriptInterface(mNotif, "Notificator");

And now, the javascript part.
Warning: this code will not work with the actual iPhone solution for prompt. The Java-Javascript interface does not allow to pass objects as parameters, and I have to use a string array. The best option is to modify the iPhone function to mimic this one, the limiting one.

/**
 * Start showing an activity modal message
 */
Notification.prototype.activityStart = function(message)
{
	Notificator.activityStart(message);
};
/**
 * Stop showing the activity modal message, if it's currently
 * spinning
 */
Notification.prototype.activityStop = function()
{
		Notificator.activityStop();
};
/**
 * Show a prompt modal message.
 */
Notification.prototype.prompt = function(message, title, buttonLabel,
		cancelButtonLabel, successCallback, failCallback)
{
	var options = new Array();
	if (title)
		options[0]= title;
	if (buttonLabel)
		options[1] = buttonLabel;
	if (cancelButtonLabel)
		options[2] = cancelButtonLabel;

	this.successCallback = successCallback;
	this.failCallback = failCallback;
	Notificator.prompt(message, options);

};

That’s all

2 Respuestas to “Native messages for Android PhoneGap”

  1. Cat Dice:

    Thanks for the tutorial. Do you know if you can access form element values in an onclick listener? I would really like to find a way to process form data and switch Activities once an onclick event is fired.

  2. somms Dice:

    In the case you are talking about HTML forms, yes you can. Using javascript is easy to access form fields values (if you use jQuery it is straight forward with .val() function)

  • qrcode link