The Google Web Toolkit (GWT) Programming Basics

AMInternet και Εφαρμογές Web

3 Δεκ 2011 (πριν από 5 χρόνια και 11 μήνες)

899 εμφανίσεις

© 2010 Marty Hall
The Goo
g
le Web Toolkit
(
GWT
)
:
g ( )
Pro
g
rammin
g
Basics
(
GWT 2.1
V
ersion
)
Originals of Slides and Source Code for Examples:
htt
p
://courses.coreservlets.com/Course-Materials/
g
wt.html
(
)
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
p
g
Topics in This Section
• Development process
– Making a
p
roject
• File New Web Application Project

Deleting extraneous files

Deleting

extraneous

files
• Most Java classes other than AppName.java
– Editing auto-generated HTML file
• Preserve link to load JavaScript file
• Create HTML elements with ID’s for GWT to use

Editing auto
-
generated
Java class
Editing

auto
generated

Java

class
• Add client-side event handlers
• Create and call custom Java classes
Testing process

Testing

process
– Development mode, production mode, deployed mode
5
© 2010 Marty Hall
GWT Development
GWT

Development

Process
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Review of Last Section
• Installation and setup

Install GWT Eclipse plugin
• Select option to download GWT at the same time as the plugin

Install GWT browser
p
lu
g
in
p g
• Done first time you run in development mode
– Bookmark GWT docs

Making new project

Making

new

project
– File New Web Application Project
• Or, click “g” at top
• Testing
– Development mode (R-click, Run As Web Application)
Production mode (R
click Google

䝗G C潭灩汥o
–
偲潤畣瑩潮

浯摥


-
捬楣c

䝯潧汥


䝗G

䍯浰楬攩
– 佮潲浡氠䩡癡⁳敲癥爠⡣潰礯牥 湡浥ₓ睡犔⁦潬摥爠慮搠摥灬潹d
7
General Application
Development Approach
Development

Approach
• Create new project
• Delete extraneous files
– Delete auto-generated classes that you are not using
– If simple app with no server-side code:
• Delete entire “server” package

Edit web xml to remove reference to GWT servlet

Edit

web
.
xml

to

remove

reference

to

GWT

servlet
• Edit auto-generated HTML file

war/MyApp html
war/MyApp
.
html
• Edit auto-generated Java file

src/
package.client
/MyApp.java
src/
package.client
/MyApp.java
• Test
8
Editing Auto-Generated HTML
File
File
• File location
– war/AppName.html
• Required script
GWT b ild i i h d i L hi

GWT

b
u
ild
s <scr
i
pt…> tag
i
n
h
ea
d
sect
i
on.
L
eave t
hi
s
unchanged.
– Entire rest of sam
p
le HTML file can be deleted and
p
replaced with custom content.
• Body content
– Give ids to sections where buttons, textfields, and output
will go. Usually div, span, td, or th elements.
• <
span id
="
sectionForButton1
"><
/span
>
span

id sectionForButton1/span
– We will see in later section that you can reserve just a
single region, then build up panels and widgets from Java
9
Auto-Generated HTML File:
Typical Structure
Typical

Structure
<!DOCTYPE …>
<html xmlns=
"
http://www w3 org/1999/xhtml
"
>
<html

xmlns= http://www
.
w3
.
org/1999/xhtml >
<head><title>…</title>

<script type="text/javascript"language="javascript"
<script

type="text/javascript"

language="javascript"

src="appname/appname.nocache.js"></script>
</head>
<b d >
<b
o
d
y
>

<div id="placeholder-for-Java-to-refer-to"></div>

</body></html>
10
Editing Auto-Generated Java
Class
Class
• File location
– src/
p
ackage.client/AppName.java
• Required structure
Cl i l
E P i
d i

Cl
ass must
i
mp
l
ement
E
ntry
P
o
i
nt an
d
conta
i
n
onModuleLoad method. Entire rest of sample Java class
can be deleted and re
p
laced with custom content.
p
• Usual code
– Create a control
• Button button1 = new Button("Press Here");
– Give it an event handler

button1.addClickHandler(new Button1Handler());
button1.addClickHandler(new

Button1Handler());
– Insert the control into the page
• RootPanel.get("placeholderForButton1").add(button1);
11
Auto-Generated Java Class:
Minimal Structure
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
*;
import

com
.
google
.
gwt
.
event
.
dom
.
client
.
*;
public class AppName implements EntryPoint {
public void onModuleLoad() { // Main entry point
}
}
12
© 2010 Marty Hall
Exam
p
le: Button that
p
Generates Random
Number (on Client)
Number

(on

Client)
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Big Ideas
• Overall development process
– Delete extraneous code
– Edit auto-generated HTML file
Edit auto
generated Java class

Edit

auto
-
generated

Java

class
• HTML

<script> tag
<script>

tag
– Placeholders where Java will insert widgets
• Java
– General class structure
• Extending EntryPoint

Starting point:
onModuleLoad

Starting

point:

onModuleLoad
– Client-side event handlers
14
Overview of Process
• Create GwtApp1 project
P j t G tA 1

P
ro
j
ec
t
name:
G
w
tA
pp
1
– Package: coreservlets
• Delete extraneous files
– RPC code, server-side code, CSS file, web.xml entries
• Client code only; later tutorial section discusses RPC

Edit HTML

Edit

HTML

– war/GwtApp1.html
• Need regions whose ids (not names!) are numberButtonHolder
and
numberResultHolder
and

numberResultHolder
• Edit Java
– src/coreservlets.client/GwtApp1.java
• Button named randomNumberButton
• HTML (label) named randomNumberResult
• Button’s event handler should insert value into HTML
15
Deleting Extraneous Files
• Motivation
N i l fil h d l l

N
ew apps conta
i
n samp
l
e
fil
es t
h
at are goo
d
examp
l
es to
l
earn
from, but that should be deleted from new projects
• Files to delete
– Under src/package.client
• GreetingService.java, GreetingServiceAsync.java

Under src/
p
acka
g
e.server
p g
• GreetingServiceImpl.java
– Under src/package.shared
• FieldVerifier.
j
ava
j
– Under war
• AppName.css (replace with own style sheet in subfolder)

Files to edit
Files

to

edit
– war/WEB-INF/web.xml
• Remove servlet-mapping for GreetingServiceImpl
16
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.
Created first time app is run in production mode. Don’t edit by hand.
<
!
DOCTYPE ...
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>First GWT App</title>
<link rel="st
y
lesheet"
This code edited by hand
y
href="./css/styles.css"
type="text/css"/>
<script type="text/javascri pt" language="javascript"
src=
"
gwtapp1/gwtapp1nocache js
"
></script>
This code edited by hand
.
Use normal HTML (often xhtml).
src= gwtapp1/gwtapp1
.
nocache
.
js ></script>
</head>
<body>
17
Inserted automatically by GWT. Leave it in unchanged. Entire rest of file can
be modified in any way. There is an iframe in the body that is useful if you
track history (see later tutorial section), but you can delete it for now.
Auto-Generated HTML File:
Continued
Continued
...
<fieldset>
<fieldset>
<legend>Client-Side Data</legend>
<table border="1">
<
tr><th>User Control</th>
<th>Result</th></tr>
<tr><td id="numberButtonHolder"></td>
<td id="numberResultHolder"></td></tr>
...
</table><br/>
</fieldset>
These names will be referred to in Java code.
...
</body>
</html>
In these simple examples we create one HTML
section for each low-level GWT widget. But in
more advanced applications, it is common to
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
18
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.
Auto-Generated Java Class
Created automaticall
y,
but need extensive editin
g
. Shown below.
y,g
Created by hand Will be used later in this tutorial
k
l li
Created by hand
.
Will be used later in this tutorial
.
pac
k
age coreserv
l
ets.c
li
ent;
import com.google.gwt.core.client.*;
import com.google.gwt.user.client.ui.*;
i t
l t t d li t
*
Created automatically.
Your code should be
ll d b
M d l L d
i
mpor
t
com.goog
l
e.gw
t
.even
t
.
d
om.c
li
en
t
.
*
;
public class GwtApp1 implements EntryPoint {
public void
onModuleLoad
()
{
ca
ll
e
d by
on
M
o
d
u
l
e
L
oa
d
.
public

void

onModuleLoad
()

{


}
}
19
Auto-Generated Java Class
:
Continued
Continued
public class GwtApp1 implements EntryPoint {
public void
onModuleLoad
() {//Main entry point
public

void

onModuleLoad
()

{

//

Main

entry

point
buttonSetup();
listSetup();
}
Button 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.
private void buttonSetup() {
Button randomNumberButton = new Button("Show Random Number");
HTML randomNumberResult = new HTML("<i>Num will go here</i>");
HTML

randomNumberResult

=

new

HTML("<i>Num

will

go

here</i>");
randomNumberButton.addClickHandler
(new RanNumHandler(randomNumberResult));
RootPanel.
g
et("randomNumberButton").add(randomNumberButton);
g
RootPanel.get("randomNumberResult").add(randomNumberResult);
}
...
Matches ids in the HTML
}
20
Auto-Generated Java Class
:
Continued
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
;
private

HTML

resultRegion
;
public RanNumHandler(HTML resultRegion) {
thi ltR i
ltR i
thi
s.resu
ltR
eg
i
on = resu
ltR
eg
i
on;
}
bli id
Cli k
(
Cli kE t
t) {
pu
bli
c vo
id
on
Cli
c
k
(
Cli
c
kE
ven
t
even
t)

{
resultRegion.setText("Number: " + Math.random()*10);
}
}
21
Whenever user clicks button, insert this string into the GWT HTML object
(which is really a div).
Testing in Development Mode
• Idea
R i i
d l t d
i i
b

R
unn
i
ng
i
n
d
eve
l
opmen
t
mo
d
e means runn
i
ng
i
n a
b
rowser
that uses Google browser plugin to link Java code to Eclipse
– When you change Java or HTML in Eclipse, you do not need
to restart development mode. Just go to browser and hit
Reload.

Steps
Steps
– R-click project name and Run As Web Application
– Result:
Sh URL i “D l t M d ” t b

Sh
ows
URL

i
n
“D
eve
l
opmen
t

M
o
d
e


t
a
b
• You should paste this URL into a browser (R-click it for options)
– This discussion assumes you already installed browser plugin as
described in previous tutorial section
described

in

previous

tutorial

section
– If you ran previous app in development mode, stop Jetty before
running this new app. Go to “Development Mode” tab and click Red
stop button.
22
Testing in Development Mode
When first brought up.
After pressing button.
23
Testing in Production Mode
• Idea
R i i
d i d
i i l

R
unn
i
ng
i
n
p
ro
d
uct
i
on mo
d
e means runn
i
ng
i
n a regu
l
ar
browser with all client-side Java code converted to
JavaScript
O l d thi i ll Ch t d i t

O
n
l
y
d
o
thi
s occas
i
ona
ll
y.
Ch
anges
t
o co
d
e requ
i
res you
t
o
repeat production mode steps.
– Uses embedded version of Jetty server on local machine
St

St
eps
– Run the application in development mode
R
click app Google

䝗G 䍯浰楬C
–
R
-
捬楣c

慰a

䝯潧汥


䝗G

䍯浰楬C
– 䍨慮来C啒䰠瑯⁨瑴瀺⼯汯捡汨潳琺㠸㠸⽁灰乡浥⹨瑭U
• If you have no server-side code, you can also drag
war/AppName html into a browser
war/AppName
.
html

into

a

browser
– Result:
• Creates JavaScript files in war/appname folder
24
Testing in Production Mode
When first brought up.
After pressing button.
25
Testing in Deployed Mode
• Idea
D l d d i i il d i d

D
ep
l
oye
d
mo
d
e
i
s s
i
m
il
ar to pro
d
uct
i
on mo
d
e
• Running in a regular browser with all client-side Java code
converted to JavaScript
However uses normal Web App structure running on a

However
,
uses

normal

Web

App

structure

running

on

a

Java server of your choice on any machine
• Steps
– Run the application in
p
roduction mode
– R-click project, Google GWT Compile

Do this
immediately
before deployingsoyouhave
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
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
26
Testing in Deployed Mode
• Copied workspace/GwtApp1/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 apps coreservlets com

Deployed

to

Apache

Tomcat

on

apps
.
coreservlets
.
com
• Could have used any Java-capable server
27
© 2010 Marty Hall
Example:Linked
Example:

Linked

Comboboxes
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Big Ideas
• Use regular Java for client-side code

Normal Java
1 6
syntax
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
– String, array, List (ArrayList, LinkedList), Map (HashMap and others), Date, etc.
– For full list, see http://code.google.com/webtoolkit/doc/latest/RefJreEmulation.html
– Custom GWT classes

Class defined for each type of standard HTML control
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

Java

gets

translated

into

JavaScript
– Google GWT Compile to generate JavaScript
– But you develop and test using Java only

Restrictions

Restrictions
– Not all collections or classes supported
• But relatively clear warning message when you try to use unsupported feature
– Custom classes used by client code must be placed in “...client” package.
29
Example: Linked Comboboxes
(Choosing State Results in List of Associated Cities)
(Choosing State Results in List of Associated Cities)
• Eclipse Project: GwtApp1
S j i i l

S
ame pro
j
ect as
i
n prev
i
ous examp
l
e
• HTML: GwtApp1.html

Need regions with ids
stateListHolder
and
cityListHolder
Need

regions

with

ids

stateListHolder
and

cityListHolder
• Java:
– GwtApp1.java: main application class
D fi
li b

D
e
fi
nes two
li
st
b
oxes
• 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 tutorial, we matched cities to states using
server-side code. Using custom Java classes greatly
simplifies client
-
side code.
30
Editing Auto-Generated Files
• Edit GwtApp1.html and give ids to sections
Gi id i h b
fi ld
d ill

Gi
ve
id
s to sect
i
ons w
h
ere
b
uttons, text
fi
e
ld
s, an
d
output w
ill

g
o
<tr><td>State: <span id="stateListHolder"></span></td>
<td>City: <span id="cityListHolder"></span></td></tr>
• Edit GwtApp1.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
(
"
stateListHolder
"
).
add(
stateList
);
RootPanel.get
(
stateListHolder
).
add(
stateList
);
RootPanel.get("cityListHolder").add(cityList);
31
Auto-Generated HTML File
• Same file as in earlier example
– war/GwtAppl.html
– Needs auto-generated script tag in the head section
Body

Body
<fieldset>
<legend>Client-Side Data</legend>
<table border="1"
>
<tr><th>User Control</th>
<th>Result</th></tr>
<t ><td id"d N b B tt"></td>
<t
r
><td

id
=
"
ran
d
om
N
um
b
er
B
u
tt
on
"></td>
<td id="randomNumberResult"></td></tr>
<tr><td>State: <span id="stateListHolder"></span></td>
<td>City:
<span id=
"
cityListHolder
"
></
span>
</td></tr>
<td>City:

<span

id=
cityListHolder
></
span>
</td></tr>
</table><br/>
</fieldset>
32
Auto-Generated Java Class
• Same file as in earlier example
C ll d/l li G A 1 j

C
a
ll
e
d
src
/
coreserv
l
ets.c
li
ent.
G
wt
A
pp
1
.
j
ava
– Has three sets of import statements
– Has auto-
g
enerated features
g
• implements EntryPoint
• onModuleLoad method
package coreservlets.client;
import com.google.gwt.core.client.*;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.event.dom.client.*;
33
public class GwtApp1 implements EntryPoint {
public void onModuleLoad() { // Main entry point
Auto-Generated Java Class:
Continued
Continued
public class GwtApp1 implements EntryPoint {
p
ublic void onModuleLoad() { // Main entr
y

p
oint
p
y p
buttonSetup();
listSetup();
}
//
buttonSetup
shown earlier
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
);
populateStateList
(
stateList
);
stateList.setVisibleItemCount(1);
ListBox cityList = new ListBox();
cityList.addItem("Select City");
it Li t tVi ibl It C t
(1)
Matches ids in the HTML
c
it
y
Li
s
t
.se
tVi
s
ibl
e
It
em
C
oun
t
(1)
;
cityList.setEnabled(false);
stateList.addChangeHandler(new StateHandler(stateList,
cityList));
RootPanel.get("stateListHolder").add(stateList);
RootPanel.get("cityListHolder").add(cityList);
}
34
Auto-Generated Java Class:
Continued
Continued
p
rivate void
p
o
p
ulateStateList
(
ListBox stateList
)

{
p
p p
(
) {
stateList.addItem("Select State");
StateInfo[] nearbyStates =
StateInfo.getNearbyStates();
for(StateInfo state: nearbyStates) {
stateList.addItem(state.getStateName());
}
}
}
U lik l GWT i J 5 d 6 f t (
t l f/h l ) f
li t
id
35
U
n
lik
e

ear
ly GWT
vers
i
ons,
y
ou

can

use
J
ava
5
an
d 6 f
ea
t
ures
(
e.
g
.,

new-s
tyl
e
f
or
/
eac
h l
oop
) f
or

c
li
en
t
-s
id
e

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/latest/RefJreEmulation.html. For server-side code (see later tutorial
section), you can use any features of the Java version your server is using.
Auto-Generated Java Class:
Continued
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();
i
i
(i d )
Str
i
ng state = stateL
i
st.getItemText
(i
n
d
ex
)
;
StateInfo[] nearbyStates =
StateInfo.getNearbyStates();
String[] cities =
St t I f fi dCiti
(
b St t
t t )
St
a
t
e
I
n
f
o.
fi
n
dCiti
es
(
near
b
y
St
a
t
es, s
t
a
t
e
)
;
cityList.clear();
for(String city: cities) {
cityList.addItem(city);
}
}
cityList.setEnabled(true);
}
}
36
Helper Class (StateInfo)
package coreservlets.client;
Must be in same package as AppName.java.
(...client). Only classes in this package
public class StateInfo {
private String stateName;
private String[] cities;
(...client). Only classes in this package
are translated into JavaScript.
public StateInfo(String stateName, String[] cities) {
this.stateName = stateName;
this cities
= cities;
this
.
cities
=

cities;
}
p
ublic Strin
g

g
etStateName
()

{
p g
g
() {
return(stateName);
}
bli St i []
tCiti
() {
pu
bli
c
St
r
i
ng
[]
ge
tCiti
es
()

{
return(cities);
}
37
Helper Class
(StateInfo Continued)
(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
=
private

static

String[]

nyCities
=
{"New York", "Buffalo","Rochester","Yonkers"};
private static StateInfo[] nearbyStates =
{
new StateInfo
(
"Mar
y
land"
,
mdCities
),
{
( y,
),
new StateInfo("Virginia", vaCities),
new StateInfo("Pennsylvania", paCities),
new StateInfo("New Jersey", njCities),
St t I f
("N Y k"
Citi
)
new
St
a
t
e
I
n
f
o
("N
ew
Y
or
k"
, ny
Citi
es
)

};
38
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
http://code.google.com/webtoolkit/doc/latest/RefJreEmulation.html
Helper Class
(StateInfo Continued)
(StateInfo
,
Continued)
public static StateInfo[] getNearbyStates() {
return(
nearbyStates
);
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
());
}
}
Strin
g[]
unknown =
{
"Unknown state"
}
;
g[] { }
return(unknown);
}
}
39
Testing in Development Mode
– R-click project name and Run As Web Application
When first brought up.
After selecting state.
(Cities selected to illustrate contents)
40
Testing in Production Mode
– R-click project name and Google GWT Compile
When first brought up.
After selecting state.
(Cities selected to illustrate contents)
41
Testing in Deployed Mode
• workspace/GwtApp1/war
– Renamed to GwtApp1 to keep similar-looking URL
– Deployed to Apache Tomcat on apps.coreservlets.com

Could have used any Java
capable server

Could

have

used

any

Java
-
capable

server
42
© 2010 Marty Hall
Overriding Standard
Overriding

Standard

CSS St
y
les
y
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Auto-Loaded Style Sheet in
Auto
-
Generated HTML File
Auto
-
Generated

HTML

File
• Idea
Th J S i t fil t ti ll i t

Th
e
J
ava
S
cr
i
p
t

fil
e au
t
oma
ti
ca
ll
y
i
nser
t
s
<link rel="stylesheet" href="…/standard.css">
at end of head section.
G d

G
oo
d
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.
• Edit src/mainPackage/AppName.gwt.xml to change
• Bad news
– The automatic stylesheet is loaded after yours. So, it overrides
your entries,not vice versa.
your

entries,

not

vice

versa.
– It gives styles for body, td, select, pre, and a.
– Cannot edit it: gets rebuilt when you do GWT Compile
44
Simple Usage: Overriding
Standard Styles
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

Only

needed

for

body
,
td
,
select
,
pre
,
and

a
.
• body { background-color: red !important; … }
td { font-size: 103px !important; … }
O
li t
CSS l

O
r, use exp
li
c
t
CSS
c
l
ass names
– Don’t give styles to those five HTML element names, but
instead use CSS class names
instead

use

CSS

class

names
• CSS:
.mybodystyle { background-color: red; … }
.
bigcell
{ font
-
size:103px;…
.
bigcell
{

font
size:

103px;


• HTML:
<body class="mybodystyle">
<td class="bi
g
cell">
45
Advanced Usage: Loading
Stylesheets
Manually
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
This

causes

stylesheet

to

be

output

under

war

folder
,
but

not loaded
• Load the GWT stylesheet first
– <link rel="stylesheet"
href="./appname/gwt/standard/standard.css">

Load your stylesheet second
Load

your

stylesheet

second
– <link rel="stylesheet" href="./css/mystyles.css">
46
styles.css from GwtApp1
body { background-color: #fdf5e6 !important }
td { font
-
size:18px
!important
;
td

{

font
size:

18px

!important
;
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

th { background-color: #ef8429;
font-size: 18px;
font
-
family:Arial,Helvetica,sans
-
serif;
This approach is recommended for GWT
beginners.
font
family:

Arial,

Helvetica,

sans
serif;
}
legend {
font-
w
ei
g
ht: bold
;
g;
color: black;
background-color: #eeeeee;
border: 1
p
x solid #999999;
Entries for other elements not marked with !important
because they are not defined in standard.css
p
padding: 3px 2px;
}
47
Advanced Usage: Loading
Stylesheets
Manually
Stylesheets
Manually
• src/packageName/GwtApp1.gwt.xml
– Change
• <inherits name='com.google.gwt.user.theme.standard.Standard'/>

to
to
• <inherits 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
"
link

rel
stylesheet

href="./gwtapp1/gwt/standard/standard.css">
<link rel="stylesheet"
href="./css/m
y
st
y
les.css">
y y
48
© 2010 Marty Hall
Wrap-Up
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Summary
• Make a project
– File 
N
ew Web Application Project
• Delete extraneous files
M J l h h A N j

M
ost
J
ava c
l
asses ot
h
er t
h
an
A
pp
N
ame.
j
ava
– If no server code (e.g., when first practicing), remove
“server”
p
acka
g
e and edit web.xml to remove servlet refs
p g
• Edit auto-generated HTML file
– Preserve link to load JavaScript file
– Create HTML elements with ID’s for GWT to use
• Edit auto-generated Java class
– Add client-side event handlers
– Create and call custom Java classes
50
© 2010 Marty Hall
Questions?
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, JSF 2.0, Struts, Ajax, GWT 2.0, Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Developed and taught by well-known author and developer. At public venues or onsite at your location.