Uw betrouwbare partner voor (mobiele) web applicaties
TwitterEmailRSS

Control soft keyboard on Android 2.2 device in PhoneGap / Cordova application

Currently we are developing an application using the PhoneGap / Apache Cordova framework. During the project it became clear that it is difficult to control the behavior of the soft keyboard on Android devices. On iOS the keyboard works exactly as expected but on an Android 2.2 device (HTC Desire) we face some unexpected behavior.

The problem

We have a screen with a form with several input fields on it. After entering the value in the first input field, we want to step to the next input field using the soft keyboard enter button (Note that the Android 2.2 keyboard does not have a previous and next button) and the keyboard should keep popped up to enter the value in the second input field. This turned out to be difficult to implement. See below our solution.

The first implementation

In PhoneGap / Apache Cordova we can use Javascript to handle the enter event and set the focus on the next input field (see code below).

  x$('#inputfield1').on('keyup', function(e) {
    var theEvent = e || window.event;
    var keyPressed = theEvent.keyCode || theEvent.which;
    if (keyPressed == 13) {
    	// On enter, go to next input field
        document.getElementById('inputfield2').focus();
    }
	return true;
  });

So far, so good. The code seems clean and simple and it works! On our iPhone 4s the focus is set on the next input field and the keyboard is available to enter. On our Samsung Galaxy s3 we cannot use the enter button on the keyboard, but we have a previous and next button to navigate between the input fields, so a workaround is available. On our HTC Desire Android 2.2 device however, we don’t have a previous and next button available on the soft keyboard. The enter button sets the focus on the next input field, but the soft keyboard disappears. Now that is not helping users to enter their input quickly!

Phonegap / Cordova plugin

A quick google search on “android soft keyboard phonegap show hide problem” gave us 111.000 hits. One of the first hits led us to the PhoneGap SoftKeyBoard plugin. This is a Java PhoneGap plugin for Android devices to show and hide the soft keyboard. The implementation of the method showKeyboard looks like this:

public void showKeyBoard() {
  InputMethodManager mgr =
    (InputMethodManager) this.ctx.getSystemService(
    Context.INPUT_METHOD_SERVICE);

  mgr.showSoftInput(webView,
    InputMethodManager.SHOW_IMPLICIT);

  ((InputMethodManager) this.ctx.getSystemService(
    Context.INPUT_METHOD_SERVICE))
    .showSoftInput(webView, 0);
}

Unfortunately, using the plugin did not solve our problem. It lead us to another idea however. We changed the implementation of the method showKeyBoard to:

public void showKeyBoard() {
  InputMethodManager mgr = (InputMethodManager)
    this.ctx.getSystemService(
    Context.INPUT_METHOD_SERVICE);

  if (!isKeyBoardShowing()) {
    mgr.toggleSoftInput(0, 0);
  }
}

Using this implementation we are able to show and hide the soft keyboard using the javascript below.

x$('#inputfield1').on('keyup', function(e) {
  var theEvent = e || window.event;
  var keyPressed = theEvent.keyCode || theEvent.which;
  if (keyPressed == 13) {
    // On enter, go to next input field
    document.getElementById('inputfield2').focus();
    showSoftKeyBoard();
  }
  return true;
});

function showSoftKeyBoard() {
  if (isAndroid()) {
    window.plugins.SoftKeyBoard.show(function () {
      //success
      console.log("Showing keyboard succeeded");
    },function () {
       //fail
       console.log("Showing keyboard failed");
    });
  }
}

So, slightly adjusting the java code of the Android SoftKeyBoard plugin solved the problem for our HTC Desire Android 2.2 device.

Using PhoneGap Build?

Unfortunately, it’s not currently possible to add your custom Java code to apps built with PhoneGap Build. But if you do use that great Adobe cloudservice, check out this nice new app we created: Buildmeister, a mobile app for managing your PhoneGap Build apps.

Download Buildmeister for these platforms:

Android app on Google Play

Buildmeister - X-Services

Prevent your Heroku Play! apps from idling

Disclaimer: we understand that the following may be a teeny weeny bit disrespectful to the free service Heroku provides, but asking $35/month is a bit steep for a website with less than 24 requests per day. If it gets popular some day, we will ofcourse reconsider our strategy.

While looking for a cloudservice to host our libwat.ch Play! (Java) app, we stumbled upon Heroku.com. It’s a really nice service which supports all kinds of (free and paid) configurations.

Cheap Dutch basterds as we are, we wanted the free service -so that means 1 webworker which falls asleep after an hour of inactivity. The app isn’t that popular yet (c’mon, sign up!), so it dozes off very frequently.

This means the request (person) that awakes the app must wait some 20 seconds while the app steps out of bed, brushes its teeth and combs its hair… not good!

Fortunately, only the webworker is put to sleep, so any background jobs are never idled, which leaves us with a nice opportunity to insomnatise the webworker 🙂

Just add this job to your Play app* :

@Every("55min")
public class KeepSiteAwakeJob extends Job {

  @Override
  public void doJob() throws IOException {
    new URL("http://libwat.ch").getContent();
  }

}

*) Note that if you’re not using Play!, you could still use one of the free scheduler plugins Heroku offers and have that invoke the website every sub-60 minutes.

Keeping your libraries up to date with libwat.ch

Every software developer recognizes this: You develop your application using a lot of different frameworks and libraries (JQuery, HibernateRichFaces, etc) and every now and then you have to check the website of all these frameworks and libraries to see if a new version has become available. This takes a lot of valuable time that could also be spent developing that cool new feature your client has asked for.

Here at X-Services we experienced the same issue, which made us decide to implement a new service: libwat.ch.

Libwat.ch

Libwat.ch is a (mobile) web application that offers a simple service, it notifies you of updates of your favorite frameworks and libraries. There are two ways you can be notified:

  1. Follow the @libwat_ch Twitter account. We will send a tweet when a new version of a library is available.
  2. Register at www.libwat.ch and toggle the libraries you want to be notified of when a new version is available. See the screenshot below.

Add your own libraries

Is your favorite coding library not listed on libwat.ch? Don’t worry, you can send your suggestions and we’ll add them to the list. Please give us some time to add them, as we need to implement the parsing algorithm to check if a new version has been released.

Curious? Check www.libwat.ch

Asynchronous jobs with Play Framework

Ever needed to run some standalone asynchronous job from Java and found it to be a bit tedious? Read on..

Declaring a Job in Play that runs every 3 seconds  and increments a property is as simple as this:

@Every("3s")
public class PublishJob extends Job {

  private int i;

  @Override
  public void doJob() throws Exception {
    i++;
  }
}

Q: W00t! It can’t be that simple!
A: Sorry, it really is.