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…
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
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 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
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: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:
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
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
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
ViewWithUiHandlers and this will give us access to
The Logic: Writing the Presenter
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:
- Implement LauncherUiHandlers for the LauncherPresenter
- Extend MyView interface with
- Set the UiHandler for the View:
Then we’ll need to implement the
Now we’re going to add validation so we’re sure wrong values will not turn our toaster into a flaming pile of dust.
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.