GWTP Beginner’s Tutorial: Toaster Launcher Part 1

When I first heard about GWT or “gwit”, I thought it was “yet another JS framework” but when I realized it was a framework compiling Java into JavaScript it really got my attention. Like many people, except JS purists (whom I respect), I’m not a big fan of JavaScript, especially when it comes to writing logic. GWTP does the hard work for you and offers you tools that implement all the best practices on how to build web applications with GWT.

This tutorial is intended for people that are new to GWT/GWTP and wish to get started quickly. It will be heavily inspired on the ArcBees developer’s website tutorial which is much more detailed. This is meant to be a brief overview on how to build a basic application with GWT/GWTP. You won’t be able to send your toaster into space after this tutorial, but it will be close enough…

Getting started

To get started, I strongly suggest watching our how-to video on how to create a basic project. This will create a basic “Hello World!” application for you generated from our Maven Archetypes. You can also use our GWTP plugin for IntelliJ or GWTP plugin for Eclipse if you wish to generate the files yourself.

From the generated application, we’re going to delete the home package because we’re going to replace it with our own, created from scratch. So this is what the application structure will look like:


+- application/
|   \- launcher/
|      +- LauncherModule.java
|      +- LauncherPresenter.java
|      +- LauncherUiHandlers.ui.xml
|      \- LauncherView.java
|   +- ApplicationModule.java
|   +- ApplicationPresenter.java
|   +- ApplicationUiHandlers.java
|   +- ApplicationView.java
|   \- ApplicationView.ui.xml
+- gin/
|   \- ClientModule.java
+- place/
    \- NameTokens.java

 

The Controls: Writing the View

controls

From the basic archetype, we’re going to create what we need in order to send our toaster into space.

In GWTP, there’s this concept of Presenter-View pair. If you’re not familiar with these terms, it refers to the MVP architecture. The Presenter is where all of the client-side logic should be written (i.e. validation, manipulation to the model layer, etc). The View only displays what the Presenter tells it to display, and should not contain any logic. It takes care of browser-specific events and is the only layer aware of DOM elements. To create our form, we won’t need a Presenter just yet, but we do need a View.

First let’s create a new package under client/application/launcher. In this package we’ll create a class named LauncherView. From this View, we will create some fields that will hold the toaster launch parameters.

As you might have guessed, the View implements LauncherPresenter.MyView which does not exist yet. We will get to that shortly. But first, we need to talk about UiBinder.

UiBinder

UiBinder allows you to declare your HTML and GWT Widgets in XML format. So a View that uses a UiBinder will actually be composed of 2 files, a Java file containing your View class and a XML file containing your HTML.

Now all you have to do is to declare an interface extending UiBinder, like we did in the example above, and create a new XML file named after the View. So in this case, we’ll create LauncherView.ui.xml.

This is the basic skeleton of a UiBinder XML file:

From this node, you will declare all of your HTML elements and/or your GWT Widgets.

On the first line, xmlns:ui='urn:ui:com.google.gwt.uibinder' and xmlns:g='urn:import:com.google.gwt.user.client.ui' are library imports. This means that we’ll use the default GWT widgets for this project, but it also means that you can create your own.

Let’s declare some fields to handle the toaster launch parameters:

The ui:field="someName" attribute is how you identify your widgets so you can retrieve them later in your View.

First, we need to declare the variables that will be associated with your widgets.

Now that we have access to the widgets values, we need a way to send them to the LauncherPresenter so that it can process them. However, in order to do that we also need a way to detect click events on the launchButton.

UiHandlers

In GWTP, UiHandlers are great for delegating some View Events to the Presenter, and that’s hoe we’re going to use them here. We need a new interface that will extend UiHandlers.

Now, we’ll be able to bind the onLaunch() method to a ClickEvent using the @UiHandler("someIdentifier") annotation. To specify which type of event to listen to, we simply pass the event type as a method parameter.

To send the data to the Presenter we first need to tell the View to use the LauncherUiHandlers. We do this by extending LauncherView with ViewWithUiHandlers and this will give us access to getUiHandlers.

 

The Logic: Writing the Presenter

Post_GWTP_Tutorial_v1-03

Now that we have a LauncherView with some basic controls and a UiHandler to delegate event handling to the Presenter, we can write the LauncherPresenter to handle logic.

In order for the LauncherPresenter to use LauncherUiHandlers, we need to do the following:

  1. Implement LauncherUiHandlers for the LauncherPresenter
  2. Extend MyView interface with HasUiHandlers
  3. Set the UiHandler for the View: getView().setUiHandlers(this)

Then we’ll need to implement the onLaunch() method:

Now we’re going to add validation so we’re sure wrong values will not turn our toaster into a flaming pile of dust.

Conclusion

In the next post of this tutorial, we’ll learn about how the toaster processes values using RestDispatch. We’ll also protect the LauncherPresenter with a Gatekeeper. The user will need to login before he can access the LauncherPresenter. For this, we’ll create a LoginPresenter using a PresenterWidget.

You can find the second part here.

  • Udips

    Extremely useful, can’t wait for another part!

    • Renaud Lainé

      Thanks for the comment! Your feedback is much appreciated. The second part will probably be posted around the end of October.

    • Renaud Lainé

      Thanks for your feedback! The next part is coming soon!

  • cellepo

    When is part 2 coming? 🙂