GWT-Basics

© 2009 Marty Hall

The Google Web Toolkit (
g (GWT):
)
Basics
(
(GWT 1.7 Version)
)
Originals of Slides and Source Code for Examples:
http://courses.coreservlets.com/Course-Materials/gwt.html
p g
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.

© 2009 Marty Hall

For live Ajax & GWT training, see training
courses at http://courses.coreservlets.com/.
t htt // l t /
Taught by the author of Core Servlets and JSP, More
Servlets and JSP and this tutorial. Available at public
JSP, tutorial
venues, or customized versions can be held on-site at
your organization.
•C
Courses d
developed and t
l d d taught b M t H ll
ht by Marty Hall
– Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF 1.x & 2.0, Ajax, GWT, custom mix of topics
– Ajax courses can concentrate on EElibrary (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several
Customized Java one Training: http://courses.coreservlets.com/
• Courses developed and taught by coreservlets.com experts (edited by Marty)
Servlets, – Spring, Hibernate/JPA, 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.
JSP, JSF 1.x & JSF EJB3, Ruby/Rails
Contact hall@coreservlets.com for details

Topics in This Section
• Pros and cons of GWT
• Installing GWT
• Development process
– Making a project
– Editing auto-generated HTML file
– Editing auto-generated Java class
auto generated
• Testing process
– Hosted mode
– Local Web mode
– Deployed mode
• Quick preview: client-side event handlers
5
• Quick preview: custom Java classes

© 2009 Marty Hall

Motivation


Why Ajax?
• HTML and HTTP are weak
–N i
Non-interactive
i
– Coarse-grained updates
• Everyone wants to use a browser
– Not an application that requires SW installation
• “Real” browser-based active content
– Failed: Java Applets
• Not universally supported; can’t interact with the HTML
– Serious alternative: Flash (and Flex)
( )
• Not yet universally supported; limited power
– New and unproven
• Microsoft Silverlight
• JavaFX
• Adobe AIR (formerly “Apollo”)
7

Traditional Web Apps vs.
Ajax Apps

Infrequent large updates Frequent small updates

8 Diagrams from Ajax in Action by Dave Crane et al, Manning Press. See recommended books in next lecture.

Google Home Page
(formerly Google Suggest)

9

Ajax Jobs (as of Sept. 2009)
Indeed.com compiles data from many jobs sites

10

Ajax Problems
that GWT Tries to Address
• At least two languages are required
– JavaScript on the client
– Java or another language on the server
• Invoking server is cumbersome
– Even with JSON-RPC or jQuery support
– Want more powerful RPC mechanism
• JavaScript scales poorly to large projects
– No strong typing
g yp g
– Weak object hierarchies
– Many run-time errors instead of compile-time errors
– Incompatibility across platforms
– Can’t use preexisting Java libraries or utilities
11

GWT Jobs
(Absolute and Relative)

12

© 2009 Marty Hall

Overview and
Installation


Overview of the
Google Web Toolkit (GWT)
• Big Idea
– You write both client-side and server-side code in Java
– Client-side code
• Uses an API similar to Swing
• Most basic JDK 1.6 constructs and classes supported
• Gets compiled into JavaScript that runs in your browser
–S
Server-side code
id d
• Client uses a callback API and specifies data source URL
– Once you define callback, you are mostly using regular Java
method calls with complex arguments and return values
• Server extends special class and defines regular methods
– These are not servlet-style doBlah methods linked to HTTP
– Arguments and return values can be
» Primitives, Strings, arrays, a few java.util collections, Serializable custom classes

14

Sites that Use GWT
• Google Sites
– Google Base, Google Wave,
Google Checkout,
Google Web Content
Manager
• kaching.com
• gogrid.com
• contactoffice.com
• riflethru.com
• scenechronize.com
• whirled.com
15

Advantages of GWT
• No JavaScript syntax errors
– Use a reliable, strongly-typed language (Java) for development and
reliable strongly typed
debugging
– No JavaScript programming at all!
• Can use complex Java on the client
– Turned into JavaScript, but you still use String, array, Math class,
ArrayList, HashMap, custom classes, etc.
– Full IDE-based Java support for development and debugging
IDE based
• Can send complex Java types to/from the server
– Data gets serialized across network.
– More powerful and convenient approach than JSON RPC or DWR
JSON-RPC DWR.
• Standalone test environment
– Can test within Eclipse without installing a server
• Support by major company
– Supported by the company that popularized Ajax in the first place
– Support won’t go away like perhaps with AjaxTags
16

Disadvantages of GWT
• Less incremental; big learning curve
– Java developers can deploy with AjaxTags in just a few minutes,
minutes
whereas it takes much longer to get anything running with GWT.
– JavaScript developers can adapt to new library (e.g., move from
jQuery to Dojo) easily, whereas GWT seems foreign to them
• N
Nonstandard approach to HTML and JavaScript
t d d ht dJ S i t
– Programmatic creation of HTML can make use of standard HTML
and CSS tools more difficult.
– You never put direct JavaScript in your HTML
HTML.
• Very powerful in the long run, but hard to get used to at first.
– Not search engine friendly
• Google and others won’t index the dynamic content
g y
• Only for Java developers
– Most Ajax environments do JavaScript on the client and have a
choice for the server. GWT is based entirely around Java.
• Unusual approach
– Fundamentally different strategy than all other Ajax environments
17
makes evaluation and management buyoff harder

Alternatives to GWT
• Client-Side Tools
– jQuery
• http://www.jquery.org/
– Dojo (built on Prototype)
• http://www.dojotoolkit.org/
p j g
– script.aculo.us (built on Prototype)
• http://script.aculo.us/
– ExtJS
• htt // tj
http://extjs.com/ (they also have native library f GWT)
/ (th l h ti lib for
– Yahoo User Interface Library (YUI)
• http://developer.yahoo.com/yui/
– Google Closure Library
• http://code.google.com/closure/library/
• These are not mutually exclusive wrt GWT
– You can wrap them in JSNI in GWT
– But more common approach is to use the JS tools directly, refer to a
URL, and use arbitrary technology on the server
18

Alternatives to GWT (Continued)

• Server-Side Tools
– Direct Web Remoting
• Lets you call Java methods semi-directly from JavaScript
– But not as cleanly or with as powerful return types as with GWT
• http://getahead.ltd.uk/dwr/
– JSON/JSON-RPC
• For sending data to/from JavaScript with less parsing
• http://www.json.org/
• http://json-rpc.org/
– JSP custom tag libraries
• Create tags that generate into HTML and JavaScript
– Use approaches from previous page, but hide details and simplify code
for page developers
• http://courses.coreservlets.com/Course-Materials/msajsp.html

19

Alternatives to GWT (Continued)
• Hybrid Client/Server Tools
– Aj T
AjaxTags (built on top of script.aculo.us)
(b il f i l )
• JSP custom tags that generate Ajax functionality
– Supports many powerful Ajax capabilities with very simple syntax
– htt // j t
http://ajaxtags.sourceforge.net
f t
– JavaServer Faces (JSF) component libraries
• Trinidad (formerly Oracle ADF)
– htt //
http://www.oracle.com/technology/products/jdev/htdocs/
l /t h l / d t /jd /htd /
partners/addins/exchange/jsf/ (also myfaces.apache.org)
• Tomahawk
– http://myfaces.apache.org/tomahawk/
p y p g
• Ajax4JSF
– http://labs.jboss.com/jbossajax4jsf/
• IceFaces
– http://www.icefaces.org/
• Build your own
– http://courses.coreservlets.com/Course-Materials/jsf.html
20

Installation: Overview
• Download and install Google Eclipse Plugin
• http://code.google.com/appengine/docs/java/tools/
eclipse.html
– Includes core GWT libraries
– Includes utilities for building, running, testing, and
benchmarking GWT apps from within Eclipse
– I l d utilities for the Google App Engine
Includes tiliti f th G l A E i
• Won’t be discussed here, but they do not interfere with
using plugin for GWT for deployment on any Java server
• GWT can also be used without Eclipse
• http://code.google.com/webtoolkit/download.html
– Some limited support for other IDEs
– Comes with prebuilt ant scripts
21 – Not discussed in this tutorial

Installation: Details
(Eclipse 3 5 – Galileo)
3.5
• Go to Eclipse “Install New Software” page
– Start Eclipse (3.5)
– Help  Install New Software  Work With
• Load plugin
– Enter
http://dl.google.com/
p g g
eclipse/plugin/3.5
– Press “Add”, then “OK”
(leave name blank)
– Select all Plugin
and SDK options
p
– Press “Next” (and finish)
22
– Restart Eclipse

Installation: Details
(Eclipse 3.4 – Ganymede)
34
• Go to Eclipse “Add Site” page
– Start Eclipse (3.4)
– Help  Software Updates  Available Software
 Add Site
• Load plugin
– Enter
http://dl.google.com/
eclipse/plugin/3.4
– Press “OK”
– Select all Plugin
and SDK options
p
– Press “Install”
23
– Restart Eclipse

Documentation
• GWT overview page
– Good starting point with links to tutorials and docs.
• http://code.google.com/webtoolkit/overview.html
• Developer’s guide
Developer s
– Includes Quick Start guide and general approaches
• http://code.google.com/webtoolkit/doc/1.6/DevGuide.html
g g
• Reference guide Note that they didn’t update URLs when GWT moved from 1.6 to 1.7.

– Includes JavaDoc API, guide to which Java features are
supported on client side, and widget library reference
d li id d id lib f
• http://code.google.com/webtoolkit/doc/1.6/RefGuide.html
• Developer Forum
– Pretty active with experts to answer questions
24
• http://groups.google.com/group/Google-Web-Toolkit

Other GWT Plugins for Eclipse
• Cypal Studio
– Simplifies many of the tedious RPC steps covered later
• Especially keeping normal and Async versions in synch
• But this support expected in official Google Eclipse Plugin
eventually
– Simple to use, free, open source, relatively weak
• http://www cypal in/studio
http://www.cypal.in/studio
• GWT Designer
– Simplifies project and RPC creation
– Drag-and-drop GUI builder
– Powerful, complex, commercial product
• http://www.instantiations.com/gwtdesigner/

25

© 2009 Marty Hall

Creating Eclipse
j
Projects


General Application
Development Approach
• Create a new project
– Cli k “g” (New Web Application Project) button at top
Click “ ” (N W b A li ti P j t) b tt tt
– Enter project name and base package name
– Delete extraneous files
• Edit auto-generated HTML file
– war/MyApp.html
• Edit auto generated Java file
auto-generated
– src/package.client/MyApp.java
• Test in hosted mode
– Cli k Run arrow at top
Click R tt
• Test in local Web mode
– Click “Compile/Browse” from hosted mode browser
p
• Deploy to Web server
– Copy and rename “war” folder, deploy to any Java server
27

Making and Testing Sample
Project
– Click g (New Web Application Project) button at top
– Click Run arrow at top
• “Hosted mode” means that client side code runs in Java,
Hosted mode client-side
so Java debugger can be used, print statements go to
Java console, and changes are deployed automatically
• “Web mode” means that client-side Java code is compiled
to JavaScript and then executed in normal browser
S

28

Creating a New Project
• Click “g” at top
– Or File  New 
Web Application Project
• Enter info
– Choose project name
and base package
p g
name
– Use default SDK
settings
– Press Finish

29

Resulting Eclipse Project
Client-side code must be in “client” package. Server-side code can
also import and use classes in this package (other than main app).
All code in this package will eventually get translated into JavaScript.

Samples. You can use these files as examples upon which to model
your code, but in real projects you will delete them.

Starting point client-side code. You will edit this extensively.

If you have done “Compile/Browse” (see later slides on Web Mode), you
can find this folder on the file system, copy it, rename it to “MyGwtApp”
(or
( any other name), and deploy it to a Java-based server.
th ) dd l t J b d

Created the first time you run the app. When you do
“Compile/Browse” (see later slides on Web Mode), this folder g
p ( ), gets
populated with JavaScript files.

Starting point HTML file. You will edit this extensively.

30

Testing the Project in Hosted Mode

• Idea
– New projects have
sample behavior
built in
• Steps
– Click on app name
pp
in left window
– Press Green Run
arrow at top
– Or, R-click project
and Run As 
Web Application
Note: “hosted mode” means running entirely within IDE in Java. IDE has embedded version of the Jetty server bundled.
• Code almost always runs identically once deployed in a regular browser, but hosted mode lets you use the Java
31 console (System.out.println) and Eclipse debugger (breakpoints, etc.)

Testing the Project in Local Web
Mode
Press this in hosted mode browser.

Page will pop up in normal Web
browser, running with only HTML
and JavaScript.

32

Deploying the Project to Normal
Java App Server
• Idea
– O
Once you hhave ddone C
Compile/Browse, the “war” folder
il /B h “ ” f ld
contains a portable exploded Web app
• Deploying as exploded app (folder)
p y g p pp ( )
– Press Compile/Browse to build JavaScript files
– Copy “war” folder to another location
– Rename “war” folder (e.g., MyDeployedGwtApp)
war (e g
– Copy new folder to server’s deployment directory
• Deploying as zipped app (WAR file)
– Press Compile/Browse to build JavaScript files
– Create empty ZIP file (e.g., MyDeployedGwtApp.zip)
– Copy contents of “war” folder into ZIP file
war
– Change extension to .war (e.g., MyDeployedGwtApp.war)
– Copy WAR file to server’s deployment directory
33

Deploying the Project to Normal
Java App Server: Results

34

© 2009 Marty Hall

Developing GWT
Applications
pp


General Application
Development Approach
– Cli k “g” (New Web Application Project) button at top
Click “ ” (N W b A li ti P j t) b tt tt
– Delete extraneous files
• Edit auto-generated HTML file
– war/MyApp.html
• Edit auto generated Java file
auto-generated
– src/package.client/MyApp.java
– Cli k Run arrow at top
Click R tt
p
• Deploy to Web server
– Copy and rename “war” folder, deploy to any Java server
36

Editing Auto-Generated HTML
File
• File location
– war/AppName.html
• Required script
– GWT b ild <script…> tag in head section. Leave this
builds i i h d i L hi
unchanged.
– Entire rest of sample HTML file can be deleted and
p
replaced with custom content.
• Usual body content
– Give ids to sections where buttons, textfields, and output
will go. Usually div, span, td, or th elements.
• <span id sectionForButton1
span id="sectionForButton1"></span>
/span

37

Editing Auto-Generated Java
Class
• File location
– src/package.client/AppName.java
• Required structure
– Cl must implement E
Class i l EntryPoint and contain
P i d i
onModuleLoad method. Entire rest of sample Java class
can be deleted and replaced with custom content.
p
• Usual code
– Create a control
• Button button1 = new Button("Press Here");
– Give it an event handler
• button1.addClickHandler(new Button1Handler());
– Insert the control into the page
• RootPanel.get("sectionForButton1").add(button1);
38

Auto-Generated Java Class:
Minimal Structure
package packageName.client;

import com.google.gwt.core.client.*;
import com.google.gwt.user.client.ui.*;
import com google gwt event dom client *;;
com.google.gwt.event.dom.client.*;;

public class AppName implements EntryPoint {
public void onModuleLoad() { // M i entry point
bli id M d l L d() Main t i t

}
}

39

Example: Button that Generates
Random Number (On Client)
• Created GwtApp1 project
– Clicked on blue “g” (New Web Application Project)
• Could also do File  New  Web Application Project
– Project Name: GwtApp1, Package: coreservlets
GwtApp1
• HTML
– war/GwtApp1.html
pp
• Need regions whose ids (not names!) are
randomNumberButton and randomNumberResult
• Java
– src/coreservlets.client/GwtApp1.java
• Button named randomNumberButton
• HTML (label) named randomNumberResult
• Button’s event handler should insert value into HTML
40

Deleting Extraneous Files
• Motivation
– N apps contain sample files that are good examples to learn
New i l fil h d l l
from, but that should be deleted from new projects
• Files to delete
– Under src/package.client
• GreetingService.java
• GreetingServiceAsync.java
g y j
– Under src/package.server
• GreetingServiceImpl.java
– Under war
• AppName.css (replace with own style sheet in subfolder)
• Files to edit
– war/WEB INF/web xml
war/WEB-INF/web.xml
• Remove servlet-mapping for GreetingServiceImpl
• Forgetting this step will result in errors at server startup
41

Auto-Generated HTML File

Created and edited by hand. See slides at end of section on overriding standard styles.

Created automatically, but needs extensive editing.
Top shown below.

<!DOCTYPE ...>
!
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>First GWT App</title>
<link rel="stylesheet"
y This code edited by hand
hand.
href="./css/styles.css" Use normal HTML (usually xhtml).
type="text/css"/>
<script type="text/javascript" language="javascript"
src= gwtapp1/gwtapp1.nocache.js ></script>
src="gwtapp1/gwtapp1 nocache js"></script>
</head>
Inserted automatically by GWT. Leave it in unchanged.
<body> Entire rest of file can be modified in any way. There is
42
an iframe in the body that is sometimes useful to have.

Auto-Generated HTML File:
Continued
...
<fieldset>
<legend>Client-Side Data</legend>
<table border="1">
<tr><th>User Control</th>
<th>Result</th></tr>
<tr><td id="randomNumberButton"></td>
<td id="randomNumberResult"></td></tr>
...
</table><br/>
</fieldset> These names will be referred to in Java code.
... In these simple examples we create one HTML
section for each low-level GWT widget. But in
</body> more advanced applications, it is common to
</html> put GWT panels into HTML sections, and then
put multiple GWT widgets in the panels. It is
even possible to build a GUI completely with
GWT, where the HTML just has one blank div
section that will contain the main GWT panel.

43

Auto-Generated Java Class

Created automatically, but need extensive editing. Shown below.
y, g

Created by hand. Will be used later in this tutorial.
hand tutorial

package coreservlets.client;
k l li
import com.google.gwt.user.client.ui.*; Created automatically.
Your code should be
import com.google.gwt.event.dom.client.*;
i t l t t d li t * called by onModuleLoad.
ll d b M d l L d

public class GwtApp1 implements EntryPoint {
public void onModuleLoad() {
…
}
44
}

Continued
public void onModuleLoad() { // Main entry point
buttonSetup();
Button is builtin GWT class. All standard HTML controls have corresponding
listSetup(); GWT Swing-like classes. GWT also defines many extended components that are
combinations of HTML elements.
}

private void buttonSetup() {
Button randomNumberButton = new Button("Show Random Number");
HTML randomNumberResult = new HTML("<i>Num will go here</i>");
randomNumberButton.addClickHandler
(new RanNumHandler(randomNumberResult));
g
RootPanel.get("randomNumberButton").add(randomNumberButton);
RootPanel.get("randomNumberResult").add(randomNumberResult);
}
...
Matches ids in the HTML
}

45

Auto-Generated Java Class :
Continued
Using an inner class for event handling. Alternative
approaches discussed in upcoming section on GWT events.

private class RanNumHandler implements ClickHandler {
private HTML resultRegion;

public RanNumHandler(HTML resultRegion) {
this.resultRegion = resultRegion;
thi ltR i ltR i
}

public void onClick(ClickEvent event) {
bli id Cli k(Cli kE t t)
resultRegion.setText("Number: " + Math.random()*10);
}
}

Whenever user clicks button, insert this string into the GWT HTML object
(which is really a div).
46

Testing in Hosted Mode
– Click project name in Eclipse. Press Run button at top
– Or, R-click project name and Run As  Web Application
When first brought up.

After pressing button.

47

Testing in Local Web Mode
• Idea
–RRunning in Web mode means running in a regular
i i W b d i i l
browser with all client-side Java code converted to
JavaScript
– Uses embedded version of Jetty server on local machine
• Steps
– Run the application in hosted mode
– Click the “Compile/Browse” button at top of hosted-
mode browser.
– Result:
• Creates JavaScript files in war/appname folder
• Loads the main HTML file in your default browser
– You can copy this URL to other browsers to test cross-browser
compatibility
48

Press this in hosted mode
browser.

Page will pop up in default
system browser, running with
only HTML and JavaScript.

49

Testing in Deployed Mode
• Idea
– D l d mode is similar to Local Web mode
Deployed d i i il L lW b d
• Running in a regular browser with all client-side Java code
converted to JavaScript
• However uses normal Web App structure running on a
However,
Java server of your choice on any machine
• Steps
– Run the application in hosted mode
– Click the “Compile/Browse” button
• Do this immediately before deploying so you have
JavaScript files corresponding to most recent Java code
– Find the “war” folder on filesystem
• Copy/rename and deploy as exploded WAR
• Or, copy contents (not “war” folder itself) into file.zip, then
rename file.zip to file.war and deploy as WAR file
50

• Copied workspace/project/war folder
– Renamed to GwtApp1 to keep similar-looking URL
• GwtApp1.html is welcome-file, so name can be omitted
– Deployed to Apache Tomcat on localhost
• Could have used any Java-capable server

51

© 2009 Marty Hall

Using Auxiliary
Java Classes


Big Idea
• Use regular Java for client-side code
– Normal Java 1.6 syntax
• Classes, methods, constructors, loops, control statements, etc.
– Supporting classes
• Static methods in the Math class and many common data structures
– St i
String, array, Li t (A
List (ArrayList, Li k dLi t) M (H hM and others), D t etc.
Li t LinkedList), Map (HashMap d th ) Date, t
– For full list, see http://code.google.com/webtoolkit/doc/1.6/RefJreEmulation.html
– Custom GWT classes
• Class defined for each type of standard HTML control
– Button, Checkbox, Image, Hyperlink, RadioButton, etc.
• GWT also provides classes for groups of HTML controls
– SuggestBox, SimplePanel, TabPanel, ScrollPanel, Tree, FlexTable, PopupPanel, etc.
• Java gets translated into JavaScript
g
– Click Compile/Browser to generate JavaScript
– But you develop and test using Java only
• Restrictions
– N t all collections or classes supported
Not ll ll ti l t d
– Custom classes must be placed in “...client” package.
53

Example: Linked Comboboxes
(Choosing State Results in List of Associated Cities)
• Eclipse Project: GwtApp1
–S
Same project as i previous example
j in i l
• HTML: GwtApp1.html
– Need regions with ids stateList and cityList
• Java:
– GwtApp1.java: main application class
• D fi
Defines two li b
listboxes
• Attaches event handler to listbox that stores state names
– StateInfo.java (must be in ...client package)
• Associates state name with array of cities
• Defines static method with list of common states
• Note
– In AjaxTags section, we matched cities to states using
server-side code. Using custom Java classes greatly
54
simplifies client-side code.

Editing Auto-Generated Files
• Edit AppName.html and give ids to sections
– Gi ids to sections where buttons, textfields, and output will go
Give id i h b fi ld d ill
<tr><td>State: <span id="stateList"></span></td>
<td>City: <span id="cityList"></span></td></tr>
• Edit AppName.java
• Code called by auto-generated onModuleLoad method
1. Create controls
stateList = new ListBox();
cityList = new ListBox();
2. Define event handlers
stateList.addChangeHandler(new StateHandler());
3. Insert in HTML page
RootPanel.get( stateList ).add(stateList);
RootPanel.get("stateList").add(stateList);
RootPanel.get("cityList").add(cityList);

55

• Same file as in earlier example
– war/GwtAppl.html
– Needs auto-generated script tag in the head section
• Body
<fieldset>
<legend>Client-Side Data</legend>
<table b d
t bl border="1">
"1"
<tr><th>User Control</th>
<th>Result</th></tr>
<tr><td id= randomNumberButton ></td>
id="randomNumberButton"></td>
<td id="randomNumberResult"></td></tr>
<tr><td>State: <span id="stateList"></span></td>
<td>City: <span id="cityList"></span></td></tr>
id cityList ></span></td></tr>
</table><br/>
</fieldset>
56

Auto-Generated Java Class
• Same file as in earlier example
– C ll d src/coreservlets.client.GwtApp1.java
Called / l li G A 1 j
– Has three sets of import statements
– Has auto-generated features
g
• implements EntryPoint
• onModuleLoad method


import com.google.gwt.user.client.ui.*;
import com.google.gwt.event.dom.client.*;

public void onModuleLoad() { // Main entry point
57

Continued
p
public void onModuleLoad() { // Main entry p y point
buttonSetup();
listSetup(); ListBox is builtin GWT class. All standard HTML controls have corresponding
} GWT Swing-like classes. GWT also defines many extended components that are
combinations of HTML elements.
// buttonSetup shown earlier

private void listSetup() {
ListBox stateList = new ListBox();
populateStateList(stateList);
stateList.setVisibleItemCount(1); Matches ids in the HTML
ListBox cityList = new ListBox();
cityList.addItem("Select City");
cityList.setVisibleItemCount(1);
it Li t tVi ibl It C t(1)
cityList.setEnabled(false);
stateList.addChangeHandler(new StateHandler(stateList,
cityList));
RootPanel.get("stateList").add(stateList);
RootPanel.get("cityList").add(cityList);
}
58

Continued

p
private void populateStateList(ListBox stateList) {
p p ( )
stateList.addItem("Select State");
StateInfo[] nearbyStates =
StateInfo.getNearbyStates();
for(StateInfo state: nearbyStates) {
stateList.addItem(state.getStateName());
}
}

Unlike l
U lik early GWT versions, you can use J
i Java 5 and 6 f t
d features ((e.g., new-style for/each l
t l f / h loop) f client-side
) for li t id
code. However, you are limited in what classes are supported for client-side code. For a complete list, see
http://code.google.com/webtoolkit/doc/1.6/RefJreEmulation.html. For server-side code (see later tutorial
section), you can use any features of the Java version your server is using.

59

Continued
private class StateHandler implements ChangeHandler {
private ListBox stateList, cityList;

public StateHandler(ListBox stateList, ListBox cityList) {
this.stateList = stateList;
this.cityList = cityList;
}

public void onChange(ChangeEvent event) {
int index = stateList.getSelectedIndex();
String state = stateList.getItemText(index);
i i (i d )
StateInfo[] nearbyStates =
StateInfo.getNearbyStates();
String[] cities =
StateInfo.findCities(nearbyStates, state);
St t I f fi dCiti ( b St t t t )
cityList.clear();
for(String city: cities) {
cityList.addItem(city);
}
cityList.setEnabled(true);
}
60
}

Helper Class (StateInfo)
Must be in same package as AppName.java.
(...client). Only classes in this package
are translated into JavaScript.
public class StateInfo {
private String stateName;
private String[] cities;

public StateInfo(String stateName, String[] cities) {
this.stateName = stateName;
this.cities
this cities = cities;
}

p
public String getStateName() {
g g ()
return(stateName);
}

public String[] getCities() {
bli St i [] tCiti ()
return(cities);
}
61

Helper Class
(StateInfo,
(StateInfo Continued)
private static String[] mdCities =
{ Baltimore , Frederick , Gaithersburg , Rockville };
{"Baltimore", "Frederick","Gaithersburg","Rockville"};
private static String[] vaCities =
{"Virginia Beach","Norfolk","Chesapeake","Arlington"};
private static String[] paCities =
{"Philadelphia","Pittsburgh","Allentown","Erie"};
private static String[] njCities =
{"Newark", "Jersey City","Paterson","Elizabeth"};
private static String[] nyCities =
{"New York", "Buffalo","Rochester","Yonkers"};
private static StateInfo[] nearbyStates =
{ new StateInfo("Maryland", mdCities),
( y , ),
new StateInfo("Virginia", vaCities),
new StateInfo("Pennsylvania", paCities),
new StateInfo("New Jersey", njCities),
new St t I f ("N
StateInfo("New York", nyCities)
Y k" Citi )
};
Can use arrays, ArrayList, HashMap, String, Date, custom classes, etc. GWT does not
support every standard Java class on client, but a large set of them. For full list, see
62 http://code.google.com/webtoolkit/doc/1.6/RefJreEmulation.html

Helper Class
(StateInfo,
(StateInfo Continued)
public static StateInfo[] getNearbyStates() {
return(nearbyStates);
}

public static String[] findCities(StateInfo[] states,
String stateName) {
for(StateInfo state: states) {
if(state.getStateName().equals(stateName)) {
return(state.getCities());
return(state getCities());
}
}
String[] unknown = {
g[] {"Unknown state"};
}
return(unknown);
}
}

63

Testing in Hosted Mode
– Click project name in Eclipse. Press Run button at top
– Or, R-click project name and Run As  Web Application
When first brought up.

After selecting state
state.
(Cities selected to illustrate contents)

64

Press this in hosted mode
browser.

Page will pop up in default
system browser, running with
only HTML and JavaScript on
client side.

65

• workspace/project/war
– Renamed to GwtApp1 to keep similar-looking URL
– Deployed to Apache Tomcat on localhost
• Could have used any Java-capable server
Java capable

66

© 2009 Marty Hall

Overriding Standard
CSS Styles
y


Auto-Loaded Style Sheet in
• Idea
– Th JavaScript file automatically inserts
The J S i fil i ll i
<link rel="stylesheet" href="…/standard.css">
at end of head section.
• Good news
– There are styles such as gwt-Button and gwt-HTML that
let you customize the look of all GWT widgets
– There are three predefined themes (standard, dark,
chrome) that you can switch among
• Bad news
– The automatic stylesheet is loaded after yours. So, it
overrides your entries, not vice versa.
– It gives styles for body, td, select, pre, and a.
– Cannot edit it: gets rebuilt when you do Compile/Browse
68

Simple Usage: Overriding
Standard Styles
• Mark your styles with !important
– End your entries with !important so that they won’t be
overridden by standard.css.
– Only needed for body, td select pre, and a.
body td, select, pre a
• body { background-color: red !important; … }
td { font-size: 103px !important; … }
• O use explict CSS class names
Or, li t l
– Don’t give styles to those five HTML element names, but
instead use CSS class names
• CSS:
.mybodystyle { background-color: red; … }
.bigcell { font size: 103px; …
font-size:
• HTML:
<body class="mybodystyle">
69 <td class="bigcell">

Advanced Usage: Loading
Stylesheets Manually
• Edit src/packageName/AppName.gwt.xml
– Change <inherits name='… .Standard'/> to
<inherits name='… .StandardResources'/>
• This causes stylesheet to be output under war folder but
folder,
not loaded
• Load the GWT stylesheet first
– <link rel="stylesheet"
href="./appname/gwt/standard/standard.css">
• Load your stylesheet second
– <link rel="stylesheet" href="./css/mystyles.css">

70

styles.css from GwtApp1
body { background-color: #fdf5e6 !important }
td { font-size: 18px !important;
font size:
font-family: Arial, Helvetica, sans-serif !important;
} Entries for body and td marked as !important
because body and td defined in standard.css.
… This approach is recommended for GWT
beginners.
th { background-color: #ef8429;
font-size: 18px;
font family:
font-family: Arial, Helvetica, sans serif;
sans-serif;
}
legend {
font-weight: bold;
g ;
Entries for other elements not marked with !important
color: black; because they are not defined in standard.css
background-color: #eeeeee;
border: 1px solid #999999;
p
padding: 3px 2px;
}
71

Advanced Usage: Loading
Stylesheets Manually
• src/packageName/GwtApp1.gwt.xml
– Change
• <inherits
name com.google.gwt.user.theme.standard.Standard /
name='com.google.gwt.user.theme.standard.Standard'/>
– to
• <inherits
name= com.google.gwt.user.theme.standard.StandardResources />
name='com google gwt user theme standard StandardResources'/>
• Auto-generated HTML file
– Load standard.css and custom stylesheet. If you load your
custom stylesheet second, its entries override earlier ones.
• <link rel="stylesheet"
href= /gwtapp1/gwt/standard/standard css">
href="./gwtapp1/gwt/standard/standard.css >
<link rel="stylesheet"
href="./css/mystyles.css">
72

© 2009 Marty Hall

Wrap-Up


Summary
• Create an Eclipse application
– Press “g” button at top, or File  New  Web Application Project
g top
• Edit auto-generated HTML (AppName.html)
– Give ids to regions where controls will be placed
• But see later section on panels You might have few (one?) region
panels. region.
• Edit auto-generated Java (AppName.java)
– Edit onModuleLoad
• Create controls
controls. Button b = new Button( );
Button(...);
• Give them event handlers. b.addClickHandler(…);
• Insert controls into HTML page. RootPanel.get("id").add(b);
• Test in hosted mode (always)
– Click Run button at top or R-click  Run As  Web App
• Test in local Web mode (occasionally)
– Press C
Compile/Browse in hosted mode b
il / i h d d browser
• Deploy to normal Java server (at end)
74 – Copy/rename “war” folder or put contents into .war file

GWT-Basics

Recommended

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to GWT-Basics (20)

More from tutorialsruby (20)

Recently uploaded (20)

GWT-Basics