Clicky

Hello World

In typical fashion, this is a very simply Hello World tutorial for those that don't want the daunting complexity of the Lienzo Explorer.

Requirements:

* GWT 2.4 or higher
* Lienzo

This very simple tutorial displays "Hello Lienzo!" in the middle of the screen. The tutorial illustrates setting a background layer, and displaying draggable text in the middle of the screen. Complexity: super low.

Steps:

1. Create a new GWT project. I called this one Trifecta.
2. Add lienzo-xxx.jar to your classpath, and inherit the 'com.emitrom.lienzo.Lienzo' module.
3. Implement the onModuleLoad() method, with the following:

import com.emitrom.lienzo.client.core.Context2D; 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.core.types.TextAlign; import com.emitrom.lienzo.client.widget.LienzoPanel; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.RootPanel; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class Trifecta implements EntryPoint { @Override public void onModuleLoad() { Window.setMargin("0px"); int width = Window.getClientWidth(); int height = Window.getClientHeight(); // initialize the panel LienzoPanel lienzoPanel = new LienzoPanel(width, height); // set the background lienzoPanel.setBackgroundLayer(getBackgroundGrid(width, height)); // say hello! Text helloLienzo = new Text("Hello Lienzo!", "Tahoma", "Normal Bold", 24.0) .setDraggable(true) .setFillColor("cornflowerblue") .setStrokeColor("black") .setX(width / 2) .setY(height / 2) .setTextAlign(TextAlign.CENTER) .setShadow(new Shadow("black", 7, 7, 7)); Layer canvas = new Layer(); canvas.add(helloLienzo); lienzoPanel.add(canvas); RootPanel.get().add(lienzoPanel); } private Layer getBackgroundGrid(final int wide, final int high) { final int stepx = 10; final int stepy = 10; final String color = "LightSteelBlue"; final double lineWidth = 0.8; final Layer grid = new Layer() { @Override public void draw() { Context2D context = getContext(); context.setStrokeColor(color); 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(); } } }; // we are not interested in any events on this layer grid.setListening(false); return grid; } }

The result should be the following:



There you have it! Simple and sweet. If you are starting out with canvas in general, a great resource to have is Core HTML5 Canvas, by David Geary. While the concepts in his book are in Javascript, the principles and examples can be easily ported to Lienzo. That is exactly what we did in the Lienzo Explorer.

Please let us know if you have any questions!

The Emitrom Team