08/31/2012

Creating a cloud based viewer – Part VI

Hi Folks! Today I ‘m presenting you how to create an Android client for our WCF cloud hosted viewer.

Let me be clear about the purpose of this post: I am NOT going to teach you how to create an Android app from scratch, neither show how to get your development environment ready or your SDK installed. If you have never programmed on that platform, I would suggest you take a day or two to go through one of the numerous tutorial you can easily find on the web in order to get you started and comeback once you know how to run a basic “Hello World” application.

The focus of this post is to illustrate how to perform web service calls, parse the retrieved data and exploit them in our client app.

I – Performing REST web request from Android

The nice thing with REST requests is that they don’t require any additional third party API, it’s all part of the native Android SDK. You need to use the HttpClient.execute(HttpGet request) method with correct REST address of your webservice and you should be good to go for retrieving the Json message it returns. The Android platform will however require you to perform the call asynchronously, which is anyway a good thing, so you need to perform this call from an AsyncTask.

In order to make it easy to use, I created the following WebServiceConnector class, that wraps the webservice call in that convenient utility. I added the WebServiceResponseListener interface to encapsulate the asynchronous response, the the clients can just listen to that event and get notified when the service call succeed or fails. Source code is below:

Once we retrieved our Json message from the cloud, we still need to parse it in an usable format. At that point it is very convenient to rely on one of the numerous Json parsing SDK freely available on the web. As I mentioned in the previous post, you will be able to check the existing libs from the www.json.org webpage.

-

I chose the one from Google, mainly because it appeared to be one of the most friendly and was also reported as having good processing delays: it is called Gson.

-

In order to parse a Json message with Gson you need to create a custom class and provide it to the parser in order to get your class instance or array of instances directly extracted for you.

-

Here is the code I placed in my web service success callback, you can see it is very straightforward:

-

publicclass ModelInfo

{

publicintHeight;

publicintWidth;

public String FileExt;

public String ModelId;

}

-

publicvoid OnWebServiceSuccess(String JsonMsg)

{

final Activity activity = this;

try

{

Type collectionType = new TypeToken<ModelInfo[]>(){}.getType();

-

// invokes our Gson parser created in the constructor

final ModelInfo[] models = (ModelInfo[])

_parser.fromJson(JsonMsg , collectionType);

-

this.runOnUiThread(new Runnable()

{

publicvoid run()

{

// exploit results: displays models in ListView UI

}

});

}

catch (Exception e)

{

OnWebServiceFailed(activity);

return;

}

}

-

One thing to pay attention to: when adding .jar from a third party library, take care about checking them in the “Order and Export” tab of the “Java Build Path” as illustrated below. It basically tells the compiler to include them in your package, so they are available when deployed on the device:

-

-

III – Putting it together

-

The last step was mainly to put it all together, so I created a main activity with a very simple UI that contains only an ImageView in order to display our cloud pictures, and a second activity that is responsible for displaying the available cloud models in a custom ListView. Each activity performs its own webservice call, one for retrieving models and one for retrieving data for a specific selected model.

-

The last thing to care about is to specify the INTERNET permission in the manifest and the existence of the second activity:

-

<?xmlversion="1.0"encoding="utf-8"?>

<manifestxmlns:android="http://schemas.android.com/apk/res/android"

package="Autodesk.ADN.ViewerTut"

android:versionCode="1"

android:versionName="1.0">

<uses-sdkandroid:minSdkVersion="10"/>

<uses-permissionandroid:name="android.permission.INTERNET"/>

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name">

<activity

android:name=".AdnViewerTutActivity"

android:label="@string/app_name"

android:configChanges="orientation|keyboardHidden">

<intent-filter>

<actionandroid:name="android.intent.action.MAIN"/>

<categoryandroid:name="android.intent.category.LAUNCHER"/>

</intent-filter>

</activity>

<activity

android:name=".ModelSelectActivity"

android:label="@string/app_name"

android:configChanges="orientation|keyboardHidden"/>

</application>

</manifest>

-

And here is the astonishing result!

-

-

The model selection activity:

-

-

And a selected model displayed:

-

-

You will find the whole project attached. In the next post I will dig a bit deeper this Android app in order to add touch event support, so the user will be able to zoom and pan the picture with his chubby fingers.