GWT Tutorial: Example Application (1)

Welcome to the GWT Tutorial series.

In this tutorial, I will first make a very simple ajax application without any communication to server or database, then expand the application with database and RPC. Finally, it will be a fully functional GWT application – Quick Notes. Google App Engine is free, so the app is live for you to take a look. http://udnotes.appspot.com/

The sample application finally looks like this.

1. GWT Example Application (1)
2. GWT Example Application (2)
3. GWT Example Application (3)

To create a GWT application mainly 3 parts would be hard to understand for new users:

Create a client side code. This is all about simple GUI app implementation. Instead of using Swing Component, you use Component from GWT.
Communicate to Server with RPC. Here is the part required more attention.
User Google DataStore data. The cool part is here.

1. Overview.

The Google Web Toolkit (GWT) is a toolkit to develop Ajax web application by using Java. Once the Java code is finished, the GWT compiler translates the Java code into HTML and Javascript. It is actually really a Java source to Javascript source translator. The compiler creates browser specific HTML and JavaScript to support all the major browsers correctly. GWT supports a standard set of UI widgets, has build in support for the browser back button and a JUnit based test framework.

2. Install Eclipse plugin for GWT.

Install the plugins from http://dl.google.com/eclipse/plugin/3.6 via the Eclipse update manager. Help->Install New Software->Add this site and then install.

3. Create a Google Web Application project like this:

The initial package generated automatically is like this:

The directory "client" is the place to put code which is compiled for the client (Webbrowser). For the service you would use the package "server". In order for us to start from the beginning, delete all files Under "client" and "server".

4. Client Side Development

4.1. Entry Point.

Create a class for Entry Point "UDNotes".

public class UDNotes implements EntryPoint {
 
	private VerticalPanel mainPanel = new VerticalPanel();
	private FlexTable notesFlexTable = new FlexTable();
	private HorizontalPanel addPanel = new HorizontalPanel();
	private TextArea newSymbolTextBox = new TextArea();
 
 
	private Button addNoteButton = new Button("Add");
	private Label lastUpdatedLabel = new Label();
	private ArrayList<String> NotesNames = new ArrayList<String>();
 
 
	private VerticalPanel loginPanel = new VerticalPanel();
 
	public void onModuleLoad() {
 
		// Create table for Note data.
		notesFlexTable.setText(0, 0, "Note");
 
		// set button's style
		addNoteButton.addStyleName("addButton");
 
		// Assemble Add Note panel.
		addPanel.add(newSymbolTextBox);
		addPanel.add(addNoteButton);
 
		// Assemble Main panel.
		mainPanel.add(notesFlexTable);
		mainPanel.add(addPanel);
		mainPanel.add(lastUpdatedLabel);
 
		// Associate the Main panel with the HTML host page.
		RootPanel.get().add(mainPanel);
 
		// Move cursor focus to the input box.
		newSymbolTextBox.setWidth("300px");
		newSymbolTextBox.setFocus(true);
 
 
		// Listen for mouse events on the Add button.
		addNoteButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				Window.alert("Button Clicked");
			}
		});
 
		// Listen for keyboard events in the input box.
		newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {
			public void onKeyPress(KeyPressEvent event) {
				if (event.getCharCode() == KeyCodes.KEY_ENTER) {
					Window.alert("Key Pressed");
				}
			}
		});
	}
}

Config the file UDNotes.gwt.xml in package com.programcreek.tutorials.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='udnotes'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>
 
  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->
 
  <!-- Other module inherits                                      -->
 
  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.programcreek.tutorials.client.UDNotes'/>
 
  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>
 
</module>

Change UDNotes.html under war directory and make it contains only the following code between body tag.

<body>
 
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
 
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
 
 
  </body>

Deploy the app to Google app engine.

It will run like this:

Before deploying app to app engine, go to app engine to create a project and assign the correct ID to the project.

Category >> Google Web Toolkit

If you want someone to read your code, please put the code inside <pre><code> and </code></pre> tags. For example:

<pre><code> 
String foo = "bar";
</code></pre>

sunnyghost

haha
Neo Smith

I doubt whether GWT can be a good tool to develop web project
939347507

never used it ,may be i will try it as soon as possiable
my english is poor,haha

GWT Tutorial: Example Application (1)

Related posts: