Running Lienzo natively with Titanium4j

In a previous blog post, we showed you how you would run a Touch4j-based application natively with Titanium4j. In this article we want to provide a slightly different example, where we use a basic Lienzo-based app and deploy it to the iOS simulator using Titanium4j. As usual, all this will be done in Java, so buckle up and get ready.

The Lienzo App

The Lienzo-based app we are showing is extremely simple, but it drives the point that _any_ HTML5 can be run natively on the device using Titanium4j. In this example, we have a Lienzo Text object that is listening for touch events; once touched, an event is fired off and a native alert is displayed. The native aspect of things is handled by Titanium4j. The beauty of these examples is that all development is done in Java, using your IDE of choice (we use IntelliJIDEA for our open source projects, because it rocks), and relying on the GWT compiler to translate Java to Javascript.

package com.emitrom.liti.client; import com.emitrom.lienzo.client.core.Context2D; import com.emitrom.lienzo.client.core.event.NodeTouchStartEvent; import com.emitrom.lienzo.client.core.event.NodeTouchStartHandler; import com.emitrom.lienzo.client.core.shape.Layer; import com.emitrom.lienzo.client.core.shape.Text; import com.emitrom.lienzo.client.core.types.Shadow; import com.emitrom.lienzo.client.widget.LienzoPanel; import com.emitrom.lienzo.shared.core.types.ColorName; import com.emitrom.lienzo.shared.core.types.TextAlign; import; import; import; import; import; import; import; import; public class LiTi extends TiHybridEntryPoint { public void onNativeLoad() { final Window window = new Window(); window.setTitle("Going native with Titanium4j"); window.setModal(true); HybridView.get("gwt/liti/LiTi.html").setContainer(window);; //handles the event fired from the webview App.get().addEventHandler("LienzoEvent", new EventHandler() { @Override public void onEvent(TiEvent event) { Titanium.alert("You clicked on the text!"); } }); } public void onWebLoad() {"0px"); int wide =; int high =; LienzoPanel panel = new LienzoPanel(wide, high); Text text = new Text("Lienzo + Titanium4j", "Verdana, sans-serif", "bold", 20); text.setX(wide / 2).setY(high / 2); text.setTextAlign(TextAlign.CENTER); text.setFillColor(ColorName.CORNFLOWERBLUE); text.setStrokeColor(ColorName.BLUE); text.setShadow(new Shadow(ColorName.DARKMAGENTA, 6, 4, 4)); text.setAlpha(1.0); text.setDraggable(true); text.addNodeTouchStartHandler(new NodeTouchStartHandler() { @Override public void onNodeTouchStart(NodeTouchStartEvent nodeTouchStartEvent) { App.get().fireEvent("LienzoEvent"); } }); Layer layer = new Layer(); layer.add(text); panel.setBackgroundLayer(getGrid()); panel.add(layer); RootPanel.get().add(panel); } public Layer getGrid() { final int stepx = 10; final int stepy = 10; final double lineWidth = 0.8; Layer grid = new Layer() { @Override public void draw() { int wide = getWidth(); int high = getHeight(); Context2D context = getContext(); context.setStrokeColor("LightSteelBlue"); context.setStrokeWidth(lineWidth); for (double i = stepx + lineWidth; i < wide; i += stepx) { context.beginPath(); context.moveTo(i, 0); context.lineTo(i, high); context.stroke(); } for (double i = stepy + lineWidth; i < high; i += stepy) { context.beginPath(); context.moveTo(0, i); context.lineTo(wide, i); context.stroke(); } } }; grid.setListening(false); return grid; } }

As Native As Native Gets

Since the intention of this short post is not being a full-blown How-To tutorial, I am going to summarize the steps needed to get from the Java code above, to the picture below. Don't blink too fast, or you might miss it.

A Titanium project was setup using the Titanium CLI tools exclusively. This project is our GWT target, where all the GWT-compiled files end up, and the only Titanium-proper directive is to import (or include in Javascript parlance) our generated Javascript. Using the IDE, we use the GWT compiler to bring the Java code above to Javascript, and then run the Titanium 'build' command to finally bring everything down to the device. The result is what you see below.

Going To Places

We are not here to tell you that you should use Pilot or Titanium4j to bring your Java-based application to the device . We are here to show you the amazing things that can be done with our tools and the GWT framework!

For more news and announcements, hop on to our Google+ community, where you can reach out directly to the developers and exchange questions and answers with other members of the community.

Happy coding!

The Emitrom Team



I am not familiar with Titanium but I will try to read about it.


This codes are pretty sick! Though some of the codes are very new to me. Will this work on phonegap?


Titanium and Phonegap are different framworks so titaniumj4 is designed only to use gwt on Titanium framework. If you want to use phoenegap via gwt you have to use gwtphonegap look at the below link: