Hello World: iOS

From Emitrom

Jump to: navigation, search

Back to Index


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

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' />

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
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox