Tutorial: Creating a Login Manager Application with GWT Designer

This tutorial walks you through the process of creating a simple GWT application and deploying your module using GWT Designer.

Prerequisites: 

Special thanks to Ronny Bubke for creating this tutorial.

Basic steps:
  1. Set the GWT installation directory.
  2. Create a GWT Java Project and the LoginManager module.
  3. Create the Login Composite.
  4. Create and apply CSS styles.
  5. Add the Login composite to the LoginManager module.
  6. Run Application in Hosted Mode.
  7. Build and Deploy.

1. Set the path to the GWT installation directory.

Before anything else, make sure to set the path to the GWT installation directory in the GWT Preferences window. GWT Designer will prompt you if this has not been set.

Assign GWToolkit Preference


2. Create a GWT Java Project and the LoginManager module.

Select File > New > Project from the Eclipse toolbar to open the new project wizard dialog. 
Select Designer > GWT > GWT Java Project from the list of wizards.
Click Next.

Select GWT Java Project

Enter LoginManager as the Project name and click Next.

Enter Project information

Check the option to Create a GWT Module.
Enter LoginManager as the Module name.
Modify the package name to com.mycompany.tutorial.
Keep the Create EntryPoint and public resources option checked
Select the Use new GWT bootstrap option
Click Finish.

Create a Module

GWT Designer generates the project with all of the necessary configuration and resource files.
The module LoginManager.java is opened in source mode by default.
Click the Design tab at the bottom of the source editor.

New Project Created

This is the LoginManager in Design mode. This is the initial module created by GWT Designer.

Default Module


3. Create the Login Composite.

Create a Composite for the Login application.
Select the Designer toolbar button and select GWT > Composite from the pull-down menu.

GWT Menu

Enter Login as the name of the Composite.
Click Finish.
Click the Design tab.

New Composite

You should now see an empty composite.

Empty Login Composite

Add a VerticalPanel to the Composite.
  • To do this, select the VerticalPanel from the Palette and click on the Login Composite. You should now see an Empty VerticalPanel.
Add a label widget to the Composite.
  • Select Label from the Palette and add it to the content area.
On the Properties tab, set the text property to Sign in to your account.


Sign in to your account

To easily structure the widgets, add a FlexTable panel.
  • Select Flextable under Panels within the Palette and add it to the Composite inside the VerticalPanel.

Login with Flextable

Add the following widgets and arrange it as seen on the screen shot: 
  • Add a Label and change the text property to Username:
  • Add a TextBox and change the variable property to textBoxUsername.
  • Add another Label and change the text property to Password:
  • Add another TextBox and change the variable property to textBoxPassword.
  • Add a CheckBox and change the text property to Remember me on this computer.
  • Add a Button below the checkbox and set the text property to Sign In.
Save your work.

Complete Login Composite


4. Create and apply CSS styles.

Select one of the labels and click on the ellipsis on the styleName property.

Stylename property

That brings up the CSS Style Selection dialog.
Click on the Add... button.
On the New rule dialog, click OK.

CSS Main window

A new css class is added called .gwt-Label.
With the .gwt-Label selected, click the Edit... button.

New css added

The CSS graphical editor dialog comes up.
Feel free to set any attribute you want. When you're done, click OK.
Following the same procedure, create a css style for the checkbox.

CSS Editor

Double-click on the LoginManager.css file in your public folder to see the generated css styles.

CSS source

This is how the Login looks like with some css styling.
Make sure to Save your work.

Login with css

Add Event handlers.
  • Right-click the Sign In button.
  • Select Add event handler > click > onClick.
The Designer switched to Source view. As you can see a ClickListener has been added. All you have to do is implement the onClick event.

OnClick source

Implement the onClick event. Type or copy and paste the following code:
You may need to add an import statement:

import com.google.gwt.user.client.Window;

if (textBoxUsername.getText().length() == 0 || textBoxPassword.getText().length() == 0) {
   Window.alert("Username or password is empty.");  

}

Onclick event implemented
   

5. Add the Login Composite to the LoginManager module.

Open the LoginManager class in Design mode and delete the initial Click me! button. You should now see an empty module with the default rootPanel.

Empty LoginManager

Add a HorizontalPanel within the rootPanel. Drag the bottom right corner of the HorizontalPanel to make it bigger.
Add a VerticalPanel to the HorizontalPanel. 
Add a Label to the VerticalPanel. Set the text property to Welcome to my login page.

Welcome to my login page

Select Choose Widget from the Palette. In the Choose Widget dialog, type Login and click OK.

Choose Widget dialog

Place the widget in the LoginManager inside the HorizontalPanel as shown.
Click Save.

LoginManager with Composite

6. Run your Application in Hosted mode.

In the Package explorer, right-click the LoginManager and select Run As > GWT Application.
This will create a launch configuration and run the application locally.
Click on the Sign In button.

Run application


7. Build and Deploy.

Right click on LoginManager and select Google Web Toolkit > Deploy module

Deploy Module

Specify the server deployment options and click OK.
For more information on deployment, see the GWT Module Deployment documentation.
For more information on deploying to your server, see the Google Website and forums.

Deployment configuration

You can download the source code here.