Google Web Toolkit X

Search

Sign in

Home

Products

Conferences

Showcase

Live

Groups

Google Web Toolkit

15

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. Special thank s to Ronny Bubke for submitting the original tutorial. Requirements: Before you can start with the tutorial, you must install a supported version of the following: Eclipse, Java 1.5 or higher, GWT Designer (Full stand-alone version), and the GWT SDK or Google Plugin for Eclipse (includes GWT SDK) Note: This tutorial was created in Windows XP using GWT Designer 2.3, GPE 2.3, Eclipse 3.7 & Java 1.6. 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 Event Handlers 6. Add the Login composite to the LoginManager module 7. Run Application in Hosted Mode 8. Build and Deploy

1. Set the path to the GWT SDK installation directory.

open in browser PRO version
Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

If you installed the Google Plugin for Eclipse (GPE), this step is not needed (GWT Designer will just use the SDK included with the GPE). Do this only if you downloaded the stand-alone GWT SDK zip file. The path would be the directory you unzipped the GWT SDK to (the dir just above the /doc subdirectory). Open the GWT Preference page, select Window > Preferences > WindowBuilder > GWT.

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

open in browser PRO version
Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Select File > New > Project from the Eclipse top level menu to open the new project wizard dialog. Expand WindowBuilder > GWT Designer > Model and select GWT Java Project from the list of wizards. Click Next to continue.

Enter LoginManager as the Project name and click Next.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Check the option to Create a GWT Module. Enter LoginManager as the Module name. Modify the package name to com.gwt.tutorial.LoginManager Click Finish.

A LoginManager GWT project is created and configured. The LoginManager file is opened and you should see Source and Design tabs at the bottom of the LoginManager view. If you don't see the tabs, right-click on the Java class and select Open With > WindowBuilder Editor.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

To start designing your UI using GWT Designer, click the Design tab. Below is GWT Designer's Design view. Top left corner of the LoginManager is the Components view. Below the Components view is the Properties view. In the middle is the Palette and to the right is your UI.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

3. Create the Login Composite.

First, we need to create a Composite for the Login application. Select the Designer toolbar button and select GWT > GWT Java UI > Composite from the pull-down menu.

Enter Login as the name of the Composite and click Finish.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Composite created and opened in Source mode.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Switch to Design mode and Add a VerticalPanel to the Composite. Click on the VerticalPanel from the Palette and drop it onto the Composite (hover the mouse on the Composite and click the left-mouse button to place the

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

component). You should now see an empty VerticalPanel.

Add a Label widget to the VerticalPanel. On the Palette , scroll down to the Widgets category and click on the Label widget from the Palette and drop it onto the Vertical Panel.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Replace the default label text to Sign in to your account and press Enter. That sets the text property of the Label widget.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

To easily structure the widgets, add a FlexTable panel. In the Panels section on the Palette, click Flextable and place it into the VerticalPanel. Add the following widgets to the FlexTable and arrange it as follows: Add a Label and change the text property to Username: Add a TextBox next to the Username and change the variable property to textBoxUsername. Add another Label below the Username and change the text property to Password: Add another TextBox next to the Password and change the Variable property to textBoxPassword. Add a CheckBox below the Password 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.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Save your work. You should end up with something like this screen.

4. Create and apply CSS styles

Let's create a CSS style for the Label widgets. Click on the CSS toolbar item to open the CSS Style Editor.

The CSS Style Editor opens.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Click the Add...button to open the New rule dialog.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Change the name to .gwt-Label-Login and click OK. With the .gwt-Label-Login selected, click the Edit... button.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Set any attributes you want and click OK. When you're done, you should have something similar to this:

Click OK to close the CSS editor. Select each of the Label widgets and set the styleName property to .gwt-Label-Login.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Following the same procedure, create a style for the checkbox and set the styleName property. Open the Login class and this is how it looks like with some css styling. Make sure to Save your work.

5. Add Event Handlers

First, let's convert the text boxes from local to field variables. Still on the Login class, switch to Design mode, select the Username text box and click the Convert local to field button from the properties pane. Do the same with the Password text box.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Now, let's add an onClick event for the "Sign In" button. Right-click the Sign In button and select Add event handler > click > onClick. As you can see a ClickHandler has been added and all you have to do is implement the onClick event. Add the following import statement: import com.google.gwt.user.client.Window; then add the following code into the onClick() event:

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

6. Add the Login Composite to the LoginManager module.

open in browser PRO version
Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Open the LoginManager in Design mode and delete the initial Click me! button. You should now see an empty module with the default rootPanel. 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 and set the Label's text property to Welcome to my login page and the styleName property to .gwt-Label-Login. To add the Login composite to the module, select Choose Component from the Palette .

In the Open type search dialog, enter Login and select the Login - com.gwt.tutorial.LoginManager.client item and click OK.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

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

Click Save .

7. Run your Application in Hostedmode.

In the Package explorer, right-click the LoginManager and select Run As > GWT Application.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Click the Launch Default Browser button. Click the Sign In button. A message dialog should come up. You should now see the LoginManager application similar to the screen below.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Close the application.

8. Build and Deploy.

Select the LoginManager and click click on the Deploy Module button in the main Eclipse toolbar to open the Deployment dialog

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Specify the server deployment options and click OK.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

For more information on deploying to your server, see the Google Website and forums. You can download the complete source code here. Related topics: GWT Preferences GWT Java Project Wizard GWT Composite Wizard CSS Support Application Launching Build & Deployment For corrections/bug reports/questions regarding this tutorial, use the GWT Designer forum. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Last updated October 4, 2012.

Google

Terms of Service

Privacy Policy

Jobs

Report a bug

English

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com