IBM i > DEVELOPER > GENERAL

Two Peas in a Pod: Android and EGL


Just Add Steroids!

So big deal, I can launch an EGL app in an Android Web container. I can even pass query parameters. Whoop-de-do. But wait, this is where it gets cool.

Let’s say there’s something I want to do natively in Android and trigger that action from my EGL app. Let’s say I also want to get some information back from Android. How about GPS location data?

Pressing the “Get Position” button in the EGL app directly calls an Android method to get GPS location data. (See Figure 4.)

On the Android side, we tell the WebView component that we intend for it to interface with JavaScript-based code (our EGL app):

webView.addJavascriptInterface(this, "Android");

Then we write a little Java code that returns the latitude and longitude and use an annotation (@JavascriptInterface) to tell the compiler that this Java method can be called from JavaScript:

@JavascriptInterface
public String getLocationDataFromAndroid() {
	return latitude + ", " + longitude;
}

(I’m not going to go into detail here about how Android obtains the latitude and longitude from the underlying GPS receiver hardware. Download the Android project for that.)

On the EGL side, define an external type:

package com.android.example;

externalType BrowserFunctions extends Widget type JavaScriptObject {
	relativePath = "com/android/example",
	javaScriptName = "BrowserFunctions" }
	
	function getLocationDataFromAndroid() returns(string);

end

On the JavaScript side, use: 

egl.defineClass(
	'com.android.example', 'BrowserFunctions',						
{	
"getLocationDataFromAndroid" : function () {
    return Android.getLocationDataFromAndroid();
}
});

Now you can do the following in your handler code.

Get a reference to your external type:

browserFunctions BrowserFunctions {};

Create a button:

getLocationButton DojoMobileButton{
	text = "Get Position"
	onClick ::= onClick_getLocationDataFromAndroid };

And define an onClick event function:

function onClick_getLocationDataFromAndroid( event Event in )
	posField.text = browserFunctions.getLocationDataFromAndroid();
end

The actual interface to Android from your EGL app is the one statement in red. You must admit, it doesn’t get easier than that!

Here’s the complete external type used by this example app.

EGL side:

package com.android.example;

externalType BrowserFunctions extends Widget type JavaScriptObject {
	relativePath = "com/android/example",
javaScriptName = "BrowserFunctions" }
	
	function sendMessageToAndroid(message string in);
	function getLocationDataFromAndroid() returns(string);
	function writeLogEntry(logEntry string in);

end 

JavaScript side:
egl.defineClass('com.android.example', 'BrowserFunctions',
   {	
	"constructor" : function()
	{ },		
	"getLocationDataFromAndroid" : function () {
	    return Android.getLocationDataFromAndroid();
	},
	"writeLogEntry" : function (message) {
	    console.log( message );
	},
	"sendMessageToAndroid" : function (message) {
	    Android.sendMessageToAndroid(message);
	} 
   }
);

Another Example of Direct Interaction

Another example of direct interaction comes with the “Message to Android” in our EGL app. Touch the text input field and the Android keyboard pops up. When you type a message and press the “Send Message” button the EGL app calls an Android method, passing it the text. Android displays the message as a native pop-up message called a “Toast.”

Figure 5 shows the input display and Figure 6 shows what happens when the “Send Message” button is pressed. Using our external type, it’s a one-liner in response to a button press on the EGL side:

function onClick_sendMessageToAndroid( event Event in )
	browserFunctions.sendMessageToAndroid(messageField.text);
end

And a simple Java method on the Android side too:

@JavascriptInterface
public void sendMessageToAndroid(String message) {

	Toast.makeText(getApplicationContext(),
"EGL sent Android this message: " + message,
Toast.LENGTH_LONG).show();

}

I think that’s good extensibility and is a credit to EGL as much as to Android.

Dan Darnell is an IBM consultant and author.



Like what you just read? To receive technical tips and articles directly in your inbox twice per month, sign up for the EXTRA e-newsletter here.


comments powered by Disqus

Advertisement

Advertisement

2017 Solutions Edition

A Comprehensive Online Buyer's Guide to Solutions, Services and Education.

Are You Multilingual?

Rational enables development in multiplatform environments

IBM Systems Magazine Subscribe Box Read Now Link Subscribe Now Link iPad App Google Play Store
IBMi News Sign Up Today! Past News Letters