8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
1/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Home Products Conferences Showcase Live Groups
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 thanks to Ronny Bubkefor 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 SDKor 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 theGWT 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.
Sign inGoogle Web Toolkit X Search
Google Web Toolkit 15
https://developers.google.com/web-toolkit/https://developers.google.com/https://developers.google.com/https://developers.google.com/products/https://developers.google.com/events/https://developers.google.com/https://developers.google.com/https://developers.google.com/https://developers.google.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttps://developers.google.com/https://developers.google.com/products/https://developers.google.com/events/https://developers.google.com/showcase/https://developers.google.com/live/https://developers.google.com/groups/http://eclipse.org/downloads/https://developers.google.com/web-toolkit/tools/download-gwtdesignerhttps://developers.google.com/web-toolkit/versionshttps://developers.google.com/eclipse/docs/downloadhttps://developers.google.com/setup?state=%2Fweb-toolkit%2Ftools%2Fgwtdesigner%2Ftutorials%2Floginmanagerhttps://developers.google.com/https://developers.google.com/web-toolkit/8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
2/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
3/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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 Nextto continue.
Enter LoginManageras the Project name and click Next.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
4/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
5/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Check the option to Create a GWT Module.
Enter LoginManageras 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 Sourceand Designtabs 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.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
6/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
7/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
To start designing your UI using GWT Designer, click the Designtab. Below is GWT Designer's Design view. Top left corner of the LoginManageris the
Componentsview. Below the Components view is the Propertiesview. In the middle is the Paletteand to the right is your UI.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
8/25
pdfcrowd comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
3. Create the Login Composite.
First, we need to create a Composite for the Login application.
Select the Designer toolbar buttonand select GWT > GWT Java UI > Compositefrom the pull-down menu.
Enter Loginas the name of the Composite and click Finish.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
9/25
df d mi b PRO i Are you a developer? Try out the HTML to PDF API
Composite created and opened in Source mode.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
10/25
df di b PRO i Are you a developer? Try out the HTML to PDF API
Switch to Design mode and Add a VerticalPanelto the Composite.
Click on the VerticalPanelfrom the Palette and drop it onto the Composite (hover the mouse on the Composite and click the left-mouse button to place the
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/VerticalPanel.html8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
11/25
df di b PRO i A d l ? T t th HTML t PDF API
component). You should now see an empty VerticalPanel.
Add a Label widget to the VerticalPanel.
On the Palette, sc roll down to the Widgetscategory and click on the Labelwidget from the Palette and drop it onto the Vertical Panel.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
12/25
8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
13/25df di b PRO i
Are you a developer? Try out the HTML to PDF API
To easily structure the widgets, add a FlexTable panel.
In the Panels section on the Palette, click Flextableand place it into the VerticalPanel.
Add the following widgets to the FlexTable and arrange it as follows:
Add a Labeland change the text property to Username:
Add a TextBoxnext to the Username and change the variable property to textBoxUsername.
Add another Labelbelow the Username and change the text property to Password:
Add another TextBoxnext to the Password and change the Variable property to textBoxPassword.
Add a CheckBoxbelow the Password and change the textproperty to Remember me on this computer.
Add a Button below the checkbox and set the textproperty to Sign In.
S k
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttp://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/FlexTable.html8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
14/25df di b PRO iAre you a developer? Try out the HTML to PDF API
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 CSStoolbar item to open the CSS Sty le Editor.
The CSS Style Editor opens.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
15/25df di b PRO iAre you a developer? Try out the HTML to PDF API
Click the Add...button to open the New rule dialog.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
16/25
Are you a developer? Try out the HTML to PDF API
Change the name to .gwt-Label-Login and click OK.
With the .gwt-Label-Login selected, click the Edit...button.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
17/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Set any attributes you want and click OK.
When you're done, you should have something similar to this:
Click OKto close the CSS editor.
Select each of the Label widgets and set the styleNameproperty to .gwt-Label-Login .
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
18/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Following the same procedure, create a style for the checkbox and set the styleNameproperty.
Open the Loginclass and this is how it looks like with some css styling. Make sure to Saveyour work.
5. Add Event Handlers
First, let's convert the text boxes from local to field variables.
Still on the Login class, switch to Designmode, select the Usernametext box and click the Convert local to fieldbutton from the properties pane. Do
the same with the Passwordtext box.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
19/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Now, let's add an onClickevent for the "Sign In" button.
Right-click the Sign Inbutton and select Add event handler > click > onClick.
As you can see a ClickHandlerhas been added and all you have to do is implement the onClickevent.
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 the LoginManager in Design mode and delete the initial Click me! button You should now see an empty module with the default rootPanel
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
20/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Open the LoginManagerin Design modeand 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 Labelto the VerticalPaneland set the Label's text property to Welcome to my login page and the styleNameproperty to .gwt-Label-Login .
To add the Login composite to the module, select Choose Componentfrom the Palette.
In the Open type search dialog, enter Login and select the Login - com.gwt.tutorial.LoginManager.clientitem and click OK.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
21/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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 LoginManagerand select Run As > GWT Application.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
22/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Click the Launch Default Browserbutton.
Click the Sign In button. A message dialog should come up.
You should now see the LoginManager application similar to the screen below.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
23/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
Close the application.
8. Build and Deploy.
Select the LoginManagerand click click on the Deploy Module button in the main Eclipse toolbar to open the Deployment dialog
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
24/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF APISpecify the server deployment options and click OK.
For more information on deploying to your server, see the Google Website and forums.
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdf8/12/2019 Developers Google Com Web Toolkit Tools Gwtdesigner Tutorial
25/25
pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API
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
theApache 2.0 License. For details, see our Site Policies.
Last updated October 4, 2012.
English
http://pdfcrowd.com/http://pdfcrowd.com/redirect/?url=https%3a%2f%2fdevelopers.google.com%2fweb-toolkit%2ftools%2fgwtdesigner%2ftutorials%2floginmanager&id=ma-131014200525-ddecedc8http://pdfcrowd.com/customize/http://pdfcrowd.com/html-to-pdf-api/?ref=pdfhttps://developers.google.com/web-toolkit/tools/gwtdesigner/tutorials/LoginManager.ziphttps://developers.google.com/web-toolkit/tools/gwtdesigner/preferences/gwt/indexhttps://developers.google.com/web-toolkit/tools/gwtdesigner/wizards/gwt/projecthttps://developers.google.com/web-toolkit/tools/gwtdesigner/wizards/gwt/compositehttps://developers.google.com/web-toolkit/tools/gwtdesigner/features/gwt/css_supporthttps://developers.google.com/web-toolkit/tools/gwtdesigner/features/gwt/application_launchinghttps://developers.google.com/web-toolkit/tools/gwtdesigner/features/gwt/module_deploymenthttp://code.google.com/policies.html#restrictionshttp://creativecommons.org/licenses/by/3.0/http://creativecommons.org/licenses/by/3.0/http://www.apache.org/licenses/LICENSE-2.0https://developers.google.com/site-policieshttp://www.google.com/https://developers.google.com/site-termshttp://www.google.com/intl/en/privacy/https://developers.google.com/jobshttps://developers.google.com/web-toolkit/tools/gwtdesigner/tutorials/loginmanager