Clicky

Touch4j, meet OpenShift.

Touch4j is the leading Java framework for writing cross-platform, end-to-end, mobile applications. This mouthful of a description describes the framework in a precise manner. Touch4j embraces Java's "Write Once, Run Anywhere" motto, by allowing the developer to target multiple platforms from one code base, including running natively on the device. Java end-to-end means we can write Java for the client, Java for the server, and have seamless communication between both parts by tapping into the power of GWT-RPC. A vital component in any real-world application consists of server-side code. With Touch4j, server code can be written in Java, or existing GWT services can be reused by the application.

Meet OpenShift.

"OpenShift is Red Hat's Cloud Computing Platform as a Service (PaaS) offering. OpenShift is an application platform in the cloud where application developers and teams can build, test, deploy, and run their applications. OpenShift takes care of all the infrastructure, middleware, and management and allows the developer to focus on what they do best: designing and coding applications." What this means for Touch4j applications is that the server-side component can be deployed to OpenShift, and from that point it can interact via GWT-RPC with the client code, whether it is deployed to run natively or it is running as a mobile web application.

This tutorial will take us down the road of deploying the Touch4j Kitchen Sink in RedHat's OpenShift so that we can access it via a browser, and we will also deploy the Kitchen Sink natively and run it in the iPad simulator. The tutorial will demonstrate how from one code base we can target the two platforms--with the only changes being in an HTML file--, and it will also demonstrate how simple it is to communicate with a service running in OpenShift.

Do your feel-good crack-neck maneuver, and lets do this. It should take approximately 30 minutes to get everything going after you have downloaded and installed the required tools.

Requirements:
XCode 4.3.1 with iOS SDK 5.1
Eclipse 3.7 with GWT 2.4
PhoneGap 1.4.1

Step 1.
Lets grab the Touch4j Kitchen Sink from svn and import it into Eclipse.



You will need to add the Touch4j .jar file to the lib directory, and fix any classpath errors.

Step 2.
Setup an OpenShift Express project. Follow the steps at OpenShift's website directly in order to setup a domain. Those instructions are very well written and will get you going in no time. Don't do any of the git add/commit/push sequence just yet.

Step 3.
Lets deploy the Kitchen Sink to OpenShift. For this tutorial, we'll deploy the Kitchen Sink to http://go-emitrom.rhcloud.com/touch4j. This step is made up of a short sequence of other steps, which we'll separate out individually.

Step 3.1
Compile the Kitchen Sink with GWT.



Step 3.2
Create the .war file that we will deploy to OpenShift. Change to the war directory in your project, and use the jar command to create touch4j.war

Step 3.3
Assuming your OpenShift Express domain is set up, and you've created a JBoss Application Server instance successfully, change to the directory for your project (ours is called go, and our domain is emitrom). We will issue the sequence of git add/commit/push commands in order to deploy touch4j.war to OpenShift.

touch touch4j.war.dodeploy
git rm -r src/ pom.xml
git add .
git commit -m "Adding touch4j.war"
git push

Step 4
Lets verify that the Kitchen Sink is deployed.



Looks like it is. Sweet!

Step 5.
Before we deploy the Kitchen Sink natively and run it in the iPad simulator, we need to create a PhoneGap-based iOS application. Remember, Touch4j officially supports PhoneGap 1.4.1. Follow the steps detailed by PhoneGap. The name of our iOS project is Macanudo.

Step 6.
We'll modify the remote service reference in the Kitchen Sink so that it points to our newly created touch4j application. Open up Util.java, and change the value to the URL of your application. Ours looks like the following:

public static KitchenSinkServiceAsync getService() { KitchenSinkServiceAsync service = GWT.create(KitchenSinkService.class); // We must add this check so that the source is viewable from the device if (Device.isAvailable()) { ServiceDefTarget rpcTarget = (ServiceDefTarget) service; rpcTarget.setServiceEntryPoint("http://go-emitrom.rhcloud.com/touch4j/gwt4touch2_kitchensink/rpc"); } return service; } Step 7.
In XCode, we need to replace the contents of the index.html file auto-generated by PhoneGap with ours. We will tweak the paths of the Javascript and CSS files, uncomment the reference to the PhoneGap Javascript file, and add a special variable that allows us to wait until PhoneGap is fully loaded.



Step 8
Lets use the GWT compiler yet again, but this time we will redirect the output to an arbitrary directory. Note how this time around we use the -war flag, and give it the name where we want GWT to put the output.



Step 9
Copy the contents of the directory gwt4touch2_kitchensink to the www directory that was created by PhoneGap. The layout in our system looks like:



Step 10
In XCode, you should see all the files you just added to the www directory. Since this is the first time that we are doing this, there is no need to clean before running the project. It is not a bad habit, though, to clean it after you have re-generated files using the GWT compiler. Run the project in the iPad simulator, and you will see a similar screen to that when you accessed the site in step 4, except this time we have a new entry, called Device. This item has device-specific functionality that you don't get in a normal web application.



Step 11
Last but not least, lets see what the geolocation screen is telling us. Accessing the Kitchen Skink service running in OpenShift will take place when we click the Info button in the top right-hand corner of the app.



In addition, every time you click the Source button, the service is being invoked: source code is retrieved by the server from svn, and it is then passed back to the client. For other examples of GWT-RPC and JSONP, click on Data from the Home screen in the Kitchen Sink app.



Conclusion
We have shown how you can get the exact same code-base running in the iPad simulator and also on the web, by tapping into the power of Touch4j and OpenShift, all from the comforts of Java and the tooling that surrounds the language. The possibilities going from this point forward are only limited by your creativity.

Happy coding!

The Emitrom Team