import com.itmill.toolkit.ui.*;

public class Calc extends com.itmill.toolkit.Application implements
		Button.ClickListener {

	private Label display = null;
	private double stored = 0.0;
	private double current = 0.0;
	private String operation = "C";
	private static String[] captions = // Captions for the buttons
	{ "7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", "=",
			"C", "+" };

	public void init() {

		// Create a new layout for the components used by the calculator
		GridLayout layout = new GridLayout(4, 5);

		// Create a new label component for displaying the result
		display = new Label(Double.toString(current));
		display.setCaption("Result");

		// Place the label to the top of the previously created grid.
		layout.addComponent(display, 0, 0, 3, 0);

		// Create the buttons and place them in the grid
		for (int i = 0; i < captions.length; i++) {
			Button button = new Button(captions[i], this);
			layout.addComponent(button);
		}

		// Create the main window with a caption and add it to the application.
		addWindow(new Window("Calculator", layout));

	}

	public void buttonClick(Button.ClickEvent event) {

		try {
			// Number button pressed
			current = current * 10
					+ Double.parseDouble(event.getButton().getCaption());
			display.setValue(Double.toString(current));
		} catch (java.lang.NumberFormatException e) {

			// Operation button pressed
			if (operation.equals("+"))
				stored += current;
			if (operation.equals("-"))
				stored -= current;
			if (operation.equals("*"))
				stored *= current;
			if (operation.equals("/"))
				stored /= current;
			if (operation.equals("C"))
				stored = current;
			if (event.getButton().getCaption().equals("C"))
				stored = 0.0;
			operation = event.getButton().getCaption();
			current = 0.0;
			display.setValue(Double.toString(stored));
		}
	}
}

The application has an internal state that is simply stored in the member variables of the the Calculator:

When thinking in the terms of the Model-View-Controller paradigm, the above variables form the model part together with the calculation logic. In most applications, the model should be well separated from the view and controller. IT Mill Toolkit provides good support for completely isolating the model from user interface logic. In this example, further separation would only make the application more complex.

As with HelloWorld, the application extends com.itmill.toolkit.Application and initializes itself in the init() method. In this method, you need to initialize the user interface of the application and anything else that needs to be initialized when the application starts.

The user interface is laid out with the GridLayout layout management object. It provides an easy way to position components in a tabular layout; you just specify that the layout has four columns and add the components to the layout. In the Calculator example, we first create and add the display component of the calculator as a Label and then all the Button components in a for loop.

Construction of user interface component trees can be done freely in any order the programmer wants to. In the HelloWorld example, we added the Label component to the Window. To provide an example, we set the layout in the constructor of the Window object. This is in essence almost the same: if the layout is not specified for the Window, it uses OrderedLayout by default and adding components to a Window adds them to its layout. Here we replace the default OrderedLayout and use GridLayout instead. Then we just add the Window to the Application. As this is the first Window in the application, it is automatically recognized as the main window.

Notice that programming the user interface is done on logical level -- nothing is said about colors, fonts, how buttons behave, and such. This is all specified in the theme of the application. This separation of appearance is important as it frees the application programmer from the compexity of details related to look and feel. It also makes it possible to maintain the looks as separate themes -- possibly left for the visual designers.

Programming a "controller" in IT Mill Toolkit is not very different from Swing or any other event-based user interface framework. You just attach event handlers to components and program the application logic in those handlers. The toolkit manages all the complexity of creating event handlers in the browser, their memory management issues, network transport of actions with AJAX, security, etc. Keeping all these "out of the way", the programmer can focus on the application itself.

In the Calculator example, all buttons are assigned to send their events to the application by saying in the Button constructor that the Button should send the event to this and implementing Button.Clicklistener interface. All the events in this example are sent to the same listener method, buttonClick(). To keep the example simple, the listener decides what to do according to the caption of the button from the received event.

The logic in the listener is fairly simple - if the caption is a number, it is added as the next digit to the current variable and the value of current is copied to the display component. Notice that IT Mill Toolkit handles all sending of UI changes to web browser automatically -- it decides what parts of the screen need to be repainted and updates only them. For other buttons, the application state is updated according to the button pressed and the display component is also updated.