Skip to content

Hello world: ios

Jump to bottom Edit New page
deanjones edited this page Jul 20, 2014 · 1 revision

This example builds on the first Hello World to demonstrate how to run a Lienzo-based application natively in iOS.

This assumes you have installed:

In Eclipse

You will need a Mac to complete this tutorial, since we run the app in the iOS simulator.

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' />
<inherits name='com.emitrom.pilot.device.Device' />
  • Add Lienzo JAR file to the project's classpath
  • Add Pilot JAR file to the project's classpath
3. Create a new Cordova project using the CLI tools and make the project directory lay inside your GWT project (this will keep everything in the same place--see step 5). Details on how to do that can be found here, and replace the generated index.html with the following: 
<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="cordova-2.2.0.js"></script>  
        <script type="text/javascript" language="javascript" src="lienzo_hello_world/lienzo_hello_world.nocache.js"></script>
    </head>
    <body>
  <body>
  </body>
</html>
4. 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.emitrom.pilot.device.client.core.Device;
import com.emitrom.pilot.device.client.notification.Notification;
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) {
        if (Device.isReady()) {
            text.addNodeTouchStartHandler(new NodeTouchStartHandler() {
                @Override
                public void onNodeTouchStart(NodeTouchStartEvent event) {
                    Notification.get().alert("Alert", "You clicked on the text!");
                }
            });
        }
         
        text.addNodeMouseClickHandler(new NodeMouseClickHandler() {
            @Override
            public void onNodeMouseClick(NodeMouseClickEvent event) {
                Window.alert("You clicked on the text!");
            }
        });
    }
}

5. GWT-compile the project. You can use the -war flag to send the output to a custom directory. In our case, we use -war cordova/www since the Cordova project structure lays inside the Java project. This is convenient since everything is contained in one place. See below.

Cordova Project Structure

6. Run the iOS simulator using the Cordova-provided 'debug' and 'emulate' commands, and you'll see the following screens, before and after clicking on the text:

Hello World iOS Hello World iOS Native Alert

Add a custom footer
Add a custom sidebar
Clone this wiki locally