Clicky

Touch4j and Apache Cordova: Deploying to iOS

In this tutorial we will see how to deploy a Touch4j application to iOS using Touch4j and Apacha Cordova (PhoneGap)

The requirements for this tutorial are:

- A Mac.
- XCode 4. Available at https:://developper.apple.com/xcode .
- Cordova(PhoneGap). Download and install it from http://phonegap.com .
- GWT 2.4 or higher
- The touch4j.jar file

To see how to get started with Touch4j refer to our other tutorial located at: http://emitrom.com/touch4j/install

Lets get started!

1. Create a new Cordova (PhoneGap) project in Xcode (our project will be called Touch4jNative). We will use this project to deploy the Touch4j app to iOS



2. Run the application in the emulator. You will get the infamous:



3. OK, When you run the application, the result was a www directory being created. You can see this if you select your project in xcode and right click show in finder:



4. Here s the project directory.



5. You need to drag the www folder from the finder window onto the project in XCode and select the 'Create references' radio button if not selected (second in the list) while leaving all the others unselected.
Run your app again and you should get:



6. Now that Cordova (PhoneGap) is setup and running let s write our Touch4j application. We will assume that you know how to set up a Touch4j project.
If not refer to our tutorial at: http://emitrom.com/touch4j/install.
Our code will be something like the following



7. Compile the GWT project and point the war folder to the www folder or the XCode project.



8. Modify the content of the index.html file of the XCODE project to something like the folllowing lines

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" /> <link type="text/css" rel="stylesheet" href="Touch4jApp.css"> <link id="0" type="text/css" rel="stylesheet" href="./{yourproject}/resources/css/sencha-touch.css" /> <title>Emitrom - Touch4j 2.1</title> <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> <script type="text/javascript" charset="utf-8" src="./{yourproject/sencha-touch-all-debug.js"></script> <script type="text/javascript" src="{yourproject}/{yourproject}.nocache.js"></script> </head> <body> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> </body> </html>

Note that you will need to replace {yourproject} with the name of your Touch4j GWT project

9. Run the XCode project again and you should get:





10. Now lets see how to acces native code using the Device API in Touch4j. First you need to inherit to Device module

<inherits name="com.emitrom.gwt4.touch.device.Device" />

11. Then use the following code to display a native alert when the app is running in Cordova(PhoneGap)



Note how seamless the access to the native API is.

12. Compile and run in XCode. Below is the result



Go and build amazing stuff :)
Happy coding.