Prerequisites

Development with Titanium4j requires the following software components.

Titanium SDK

The Titanium mobile SDK is responsible to turning the genereated JavaScript code into native mobile applications.

Download Titanium

GWT SDK

GWT is a development toolkit for building and optimizing complex browser-based applications.Titanium4j uses GWT's Java to JavaScript Compiler to generate high optimized JavaScript out of Java code.Titanium4j requires GWT 2.7 upwards.

Download GWT

Titanium4j toolkit

Titanium4j(ti4j) exposes the Titanium API to the Java language. Giving developers a better, maintainable way to build native mobile applications for different platforms.

Download Titanium4j



Creating a simple 'Hello World' application

In this walkthrough we’ll create an application that show a sky blue window with a green button. Clicking on the button will display a native alert dialog with the text : 'Hello world from Titanium4j'.

Please note that all components must be installed in order to effectively use Titanium4j. So make sure that all required parts are installed and working before reading further.

1) Create a Titanium Mobile project

1. First we need to create a titanium mobile application. We will use this project to create the native mobile app from our Java code. To create the titanium project we will the Titanium CLI. Note that it's also possible to use Titanium Studio but we find the CLI easier to use and more flexible.

Creating an application with the titanium CLI is pretty straighforwad.

 
        $ titanium create --name=helloti --id=com.ait.ti4j.demo --platforms=all
      

For more information about the Titanium CLI please refer to the CLI Reference

The above command will create the following folder structure in the current directory

helloti/
├── build/
├── LICENSE
├── README
├── Resources/
│   ├── android/
│   │── app.js
│   ├── blackberry/
│   │── iphone/  
│   │-- KS_nav_ui.png
│   └── KS_nav_views.png
│
└── tiapp.xml

The most important file here is app.js file. This file is used by the titanium SDK as the entrypoint of the application.

2. Next we need to edit the app.js to use our Java code. For that we need to delete the content of app.js and add the following line

 
        require('name_of_your_ti4j_module/ti4j').start();
      
where name_of_your_ti4j_module is the name of titanium4j's application module that we will create in the next section.

Note that the above steps only need to be done once per project !

2) Create the Titanium4j project

Next step will be to create the actual Titanium4j project where we will be coding our mobile apps in Java.

While it's possible to use the command line to create Titanium4j apps, working with an IDE in this case makes things easier. In this tutorial we will be using the Google Plugin for Eclipse with the GWT plugin. Nothe that any other Java IDE (NetBeans, IntelliJ) should work too.

1. Let's get started by first creating the Titanium4j project:

The important part here is the name of our project: helloti4j. Per default this will also be the name of our main module. So we can go back the the app.js file created in the previous section and modify it accordingly

 
        require('helloti4j/ti4j').start();
      

2. Next we need to add the titanium4j jar file to the classpath of the project. Your classpath should like in the following picture



Please note that it s important to give the titanium4j jar file a higher priority than the GWT SDK in your classpath. See the order in the picture above.

3. Next we need to inherit the titanium4j module into our application. Thi is done by adding the following line into the .gwt.xml file of the project

 
        <inherits name='com.ait.toolkit.titanium.mobile.Mobile'/>
      

The .gwt.xml file should look like below:

 
        <?xml version="1.0" encoding="UTF-8"?>
        <module rename-to='helloti4j'>
          <inherits name='com.ait.toolkit.titanium.mobile.Mobile'/>
            <entry-point class='com.ait.ti4j.demo.client.Helloti4j'/>
            <source path='client'/>
            <source path='shared'/>
        </module>
      

4. Now that everything is set let's write the code for our application by editing the entry point class. Remove all the template code and replace it with the following code:

 
package com.ait.ti4j.playground.client;

import com.ait.toolkit.core.client.Color;
import com.ait.toolkit.titanium.mobile.client.Titanium;
import com.ait.toolkit.titanium.mobile.client.core.TiEntryPoint;
import com.ait.toolkit.titanium.mobile.client.core.events.ui.ClickEvent;
import com.ait.toolkit.titanium.mobile.client.core.handlers.ui.ClickHandler;
import com.ait.toolkit.titanium.mobile.client.ui.Button;
import com.ait.toolkit.titanium.mobile.client.ui.Window;

/**
 * Entry point class.
 */
public class Helloti4j extends TiEntryPoint {

  @Override
  public void onStart() {

    Window window = new Window();
    window.setBackgroundColor(Color.BLUE);
    window.setFullscreen(true);

    Button button = new Button("Tap Me");
    button.setWidth(100);
    button.setHeight(30);
    button.setBackgroundColor(Color.GREEN);
    button.addClickHandler(new ClickHandler() {
      @Override
      public void onClick(ClickEvent event) {
        Titanium.alert("Hello world from Titanium4j !");
      }
    });

    window.add(button);
    window.open();
  }

}
        
      

5. Next we are going to compile the Java code into JavaScript. The compilatation process is necessary since the Titanium SDK can only work with JS code

Note that it s important that the -war arguments points to the Resources folder of the titanium mobile project.

After the compilation the titanium mobile project should have the following structure:

helloti/
├── build/
├── LICENSE
├── README
├── Resources/
│   ├── android/
│   │── app.js
│   ├── blackberry/
│   ├── helloti4j/
│   │── iphone/  
│   │-- KS_nav_ui.png
│   └── KS_nav_views.png
│
└── tiapp.xml

6. Finally, let's build the titanuim mobile application. Change in the application folder and run the following command.

 
        $ titanium build -p ios 
      

For this demo we build for ios but this can be done for other platforms too.

Below is the result.

Congratulations on completing your first titanium4j application!

Advanced Examples

The Titanium4j SDK ships with lots of usefull advanced examples showcasing the different capabilities of the library. We encourage you to customize and adapt them to suit your individual project's needs.