IBM i > DEVELOPER > GENERAL

Two Peas in a Pod: Android and EGL


You can achieve seamless interactivity between a native Android application and an EGL Rich UI application. This lets you take full advantage of the underlying capabilities of the Android platform (GPS location services, camera, audio recording, voice-to-text, barcode scanning, etc.) while developing the bulk of your application in the business-friendly EGL programming language.

This example application was developed using:

  • Android Development Tools (ADT) targeting Android version 4.0.3 (but the techniques should work with later versions of Android)
  • Rational Business Developer (RBD) version: 9.0.1 targeting EGL Rich UI and using DojoMobile widgets (but the techniques definitely work with other RBD versions and with EGL Rich UI apps that don’t employ DojoMobile widgets)

The basic technique for getting Android and EGL to play nicely together involves using a WebView component in a native Android application and launching an EGL Rich UI application into the WebView. In this way, the Android app is a wrapper around the EGL app and the two can talk.

I’ll demonstrate four forms of interactivity:

  1. Using settings established in an Android application when an EGL app is launched
  2. EGL directly calling an Android method
  3. Android directly calling an EGL function
  4. EGL sending browser console messages that are picked up by Android

Android apps typically have an entry point – a Java class of the Activity type. ADT by default names this class “MainActivity.” All Android code shown comes from this one Java class. There’s more Java code in the app than what you’ll see here. For example, I won’t detail how to access GPS location services. I will make available a download containing an Eclipse project you can import into ADT; then you’ll have the whole Android app. (It’s not much Java code – maybe 100 lines of executable code in total – but, as in EGL apps, there’s some plumbing in the project in the form of configuration files and such.)

Same goes for the EGL app. I’ll point out the important code snippets but download the EGL app’s Eclipse project and import it into RBD if you want to see everything.

A Simple Wrapper

Let’s start with an example of launching the EGL app inside the Android app. Figure 1 shows what the app looks like when launched.

The top menu bar with the Android robot and the toolbar on the bottom are native Android stuff. Everything in between is an EGL Rich UI app. (By using the DojoMobile widgets in EGL, I get automatic detection of the platform, and the EGL application styles itself to look like Android without having to labor over style sheets.)

I chose to make the EGL app prominently take up everything between the menu bar and toolbar. If you want an EGL app to take a lesser role as just a piece of a mostly native Android app, you can do that too.

The Android app’s MainActivity contains a WebView component, which is a visual element that contains Web content. I can load my EGL app into the WebView with the following:

webView.loadUrl("http://www.xxxxxxxx.com/AndroidExample/MessageUI-en_US.html?userName=");

That's all it takes to marry the native Android wrapper to an EGL application. Of course, we want to do more; we want interactivity.

Launching With Query Parameters

I've found the need more than once to use settings established in my Android app to communicate vital information to my EGL app at launch time. In this simple example, I have a setting in Android for the user name. Figure 2 shows the Android app on the Settings page.

If I want to get this information into my EGL app when it's launched, I can do it with a query parameter on the EGL app's URL:

webView.loadUrl("http://www.xxxxxxxx.com/AndroidExample/MessageUI-en_US.html?userName=" + userName);

The EGL Rich UI entry point is a RUIHandler that I'm calling "MessageUI." In the onConstruction function of this handler, I parse out the query parameter:

urlString string = document.location;
	   	
x int = strlib.indexof(urlString, "userName=");
len int = strlib.characterLen(urlString);

if(x > 1)
userNameField.text = 
serviceLib.convertFromURLEncoded(urlString[x+9:len]);
end

(Obviously, if you're parsing a lot of query parameters, you want to use a more sophisticated technique but this gets the job done and shows you the relevant concepts.)

Now, when the Android app launches, the EGL app knows who I am, as shown in Figure 3.

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