Hello world: thick client (desktop)

This example builds on the first Hello World to demonstrate how to run a Lienzo-based application as a desktop application.

This assumes you have installed:

• Google Plugin for Eclipse
• Lienzo
• Adobe AIR SDK

In Eclipse

1. Create New > Project > Google > Web Application Project

• Name: lienzo-hello-world
• Package: my.lienzo.hello.world
• Generate Sample Code: yes

New GWT Project

2. Add this to Lienzo_hello_world.gwt.xml

<inherits name='com.emitrom.lienzo.Lienzo' />

• Add Lienzo JAR file to the project's classpath

3. Change class /lienzo-hello-world/src/my/lienzo/hello/world/client/Lienzo_hello_world.java

package my.lienzo.hello.world.client;
 
import com.emitrom.lienzo.client.core.event.NodeMouseClickEvent;
import com.emitrom.lienzo.client.core.event.NodeMouseClickHandler;
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 com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
 
public class Lienzo_hello_world implements EntryPoint
{
    public void onModuleLoad()
    {
        Window.setMargin("0px");
        double width = Window.getClientWidth();
        double height = Window.getClientHeight();
        
        LienzoPanel panel = new LienzoPanel((int) width, (int) height);
        RootPanel.get().add(panel);
         
        Text text = new Text("Hello World!", "Verdana, sans-serif", "italic bold", 24);
        text.setX(width / 2);
        text.setY(height / 2);
        text.setTextAlign(TextAlign.CENTER);
        text.setFillColor(ColorName.CORNFLOWERBLUE);
        text.setStrokeColor(ColorName.BLUE);
        text.setShadow(new Shadow(ColorName.DARKMAGENTA, 6, 4, 4));
        
        addHandlers(text);
         
        Layer layer = new Layer();
        panel.add(layer);
 
        layer.add(text);
        layer.draw();
    }
    
    private void addHandlers(Text text) {
        text.addNodeMouseClickHandler(new NodeMouseClickHandler() {
            @Override
            public void onNodeMouseClick(NodeMouseClickEvent event) {
                Window.alert("You clicked on the text!");
            }
        });
    }
}

4. GWT-compile the project to the default location (the war directory in your GWT project).

5. Create application.xml in the war directory. This instructs AIR where to start.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/3.0">
    <id>my.lienzo.hello.world</id>
    <filename>LienzoHelloWorld</filename>
    <name>Hello World</name>
    <versionNumber>1</versionNumber>
    <description />
    <copyright />
    <supportedProfiles>desktop extendedDesktop</supportedProfiles>
    <initialWindow>
        <content>Lienzo_hello_world.html</content>
        <title />
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <minimizable>true</minimizable>
        <maximizable>true</maximizable>
        <resizable>true</resizable>
        <width>512</width>
        <height>384</height>
        <x>100</x>
        <y>10</y>
    </initialWindow>
    <fileTypes>
    </fileTypes>
</application>

6. To run the compiled GWT app inside AIR we need to link it to the AIR SDK. For that we need to set up an External Run Configuration in Eclipse. Specify:

• Location - path to the AIR adl executable
• Working directory - the 'war' directory in the lienzo_hello_world project
• Arguments - application.xml

ADL External Runtime Configuration

7. Once you run the previously created external application, you will see the following, before and after clicking on the text:

Lienzo Running Lienzo Running After Click