Académique Documents
Professionnel Documents
Culture Documents
The Google
g Web Toolkit ((GWT):
)
Laying out Windows with Panels
((GWT 2.0 Version))
Servlets, Spring,
JSP, JSF
2.0, Struts,
Ajax,
GWT
2.0,Ruby/Rails
Spring, Hibernate, SOAP & RESTful Web Services, Java 6.
Hibernate/JPA,
EJB3,
Web
Services,
Contact
hall@coreservlets.com
for details
Developed and taught by well-known
author
and developer. At public
venues or onsite at your location.
HorizontalPanel
H
i
lP l
VerticalPanel
TabPanel and DecoratedTabPanel
DockPanel and DockLayoutPanel
Grid
HorizontalSplitPanel
VerticalSplitPanel
P
PopupPanel
P l
Upcoming
p
g tutorial (late
(
Jan 2010))
Will use the new Panel types from GWT 2.0 and later
LayoutPanel, TabLayoutPanel, DockLayoutPanel, etc.
Overview
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.
Layout Strategies
HTML-based layout
Write HTML by hand, designate places for individual controls
HTML body contains a lot of content
Best when GWT is used for
A traditional Web app with some pieces of Ajax-enabled content
Complex page where HTML layout does not change
You need the HTML content indexed by a search engine
Java-based layout
HTML body gives place for main div only
Java uses Panels to build up overall layout
Similar to way LayoutManagers are used in desktop Java
HTML-Based Layout
HTML
<body>
Regular
Regular
R
Regular
l
Regular
</body>
Java
J
public void onModuleLoad() {
SomeWidget w1 = ;
RootPanel.get("id-1").add(w1);
1
1
SomeWidget w2 = ;
RootPanel.get("id-2").add(w2);
SomeWidget w3 = ;
;
RootPanel.get("id-3").add(w3);
}
9
Java-Based Layout
HTML
<body>
<div id="main-id"></div>
</body>
Java
J
10
SomeWidget wN = ;
panel.add(wN);
RootPanel.get("main-id").add(panel);
}
(one
(
Widget)
Wid t) and
d clear
l ((all)
ll)
setStyleName
For CSS styling. But most widgets also have a predefined CSS
style name (e.g., gwt-Button).
}
12
</body>
13
HorizontalPanel
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
Purpose
To put widgets side-by-side
Similar to Swings BoxLayout (with a horizontal layout)
Main methods
setSpacing(int pixels)
Sets inter
inter-widget
widget spacing in pixels
add(Widget w)
Adds a widget, in left-to-right order.
Use insert if you
o want
ant to put
p t widget
idget at specific inde
index
setHorizontalAlignment, setVerticalAlignment
Sets default alignment
15
Example Code
private void addHorizontalPanel() {
String text = "<b>This
<b>This is a simple<br/>HorizontalPanel</b>
simple<br/>HorizontalPanel</b>";
;
HorizontalPanel hPanel = makeHorizontalPanel(text, 5);
RootPanel.get("horizontal-panel").add(hPanel);
}
private HorizontalPanel makeHorizontalPanel(String text,
int numButtons) {
HorizontalPanel hPanel = new HorizontalPanel();
hPanel.setSpacing(5);
hPanel.add(new HTML(text));
for (int i=1; i <= numButtons; i++) {
hPanel.add(new Button("Button " + i));
}
return(hPanel);
(
);
}
16
Example Result
(Production Mode)
17
Underlying HTML
18
<div id="horizontal-panel">
<table cellspacing="5"
cellspacing "5" cellpadding="0">
cellpadding "0">
<tbody><tr>
<td align="left" style="vertical-align: top;">
<div class="gwt-HTML">
<b>This is a simple<br/>HorizontalPanel</b>
</div>
</td>
<td align="left" style="vertical-align: top;"></td>
<td align="left"
g
style="vertical-align:
y
g
top;"></td>
p;
/
<td align="left" style="vertical-align: top;"></td>
<td align="left" style="vertical-align: top;"></td>
<td align=
align="left"
left style=
style="vertical-align:
vertical align: top;">
top; ></td>
</td>
</tr></tbody></table>
</div>
VerticalPanel
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
Purpose
To put widgets on top of each other.
Similar to Swings BoxLayout (with a vertical layout)
Main methods
setSpacing(int pixels)
Sets inter
inter-widget
widget spacing in pixels
add(Widget w)
Adds a widget, in top-to-bottom order.
Use insert if you
o want
ant to put
p t widget
idget at specific inde
index
setHorizontalAlignment, setVerticalAlignment
Sets default alignment
20
Example Code
private void addVerticalPanel() {
String text =
"<b>This is a simple<br/>VerticalPanel</b>";
VerticalPanel vPanel = makeVerticalPanel(text, 5);
RootPanel.get("vertical-panel").add(vPanel);
g (
p
)
(
);
}
private VerticalPanel makeVerticalPanel(String text,
int numButtons) {
VerticalPanel vPanel = new VerticalPanel();
vPanel.setSpacing(5);
vPanel.add(new HTML(text));
for (int i=1; i <= numButtons; i++) {
vPanel.add(new Button("Button " + i));
}
return(vPanel);
}
21
Example Result
22
Underlying HTML
<div id="vertical-panel">
<table cellspacing
cellspacing="5"
5 cellpadding
cellpadding="0"><tbody>
0 ><tbody>
<tr>
<td align="left" style="vertical-align: top;">
<div class="gwt-HTML">
g
<b>This is a simple<br/>VerticalPanel</b>
</div>
</td>
</tr>
<tr><td align="left" style="vertical-align: top;"></td></tr>
<tr><td align="left" style="vertical-align: top;"></td></tr>
<t ><td align="left"
<tr><td
li
"l ft" style="vertical-align:
t l "
ti l li
top;"></td></tr>
t
"> </td></t >
<tr><td align="left" style="vertical-align: top;"></td></tr>
<tr><td align="left" style="vertical-align: top;"></td></tr>
</tbody></table>
</div>
23
TabPanel and
DecoratedTabPanel
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
Purpose
T
To panels
l or widgets
id t on top
t off eachh other,
th andd select
l t them
th by
b
clicking on tabs
TabPanel uses square tabs
DecoratedTabPanel uses rounded tabs
Main methods
add(Widget
dd(Wid t w, St
String
i tabText)
t bT t)
Adds a widget, in left-to-right order. Note two args for add.
selectTab(int tabNumber)
Programmatically selects a panel
setWidth(String widthDescriptor)
Sets the width. E.g., setWidth("300px").
The height is usually determined by the contents
setAnimationEnabled(true)
Makes it so that panels slide into view when tabs selected
25
Example Code
private void addTabPanel() {
DecoratedTabPanel tPanel = new DecoratedTabPanel();
tPanel.setWidth("400px");
for(int i=1; i <= 5; i++) {
St i
String
panelText
lT t =
"<h1>This is Panel " + i + ". <i>Wow!</i></h1>";
tPanel.add(new HTML(panelText), "Panel " + i);
}
tPanel.selectTab(0);
tPanel.setAnimationEnabled(true);
RootPanel.get("tab-panel").add(tPanel);
}
26
Example Result
27
Underlying HTML
Enclosing HTML table with fixed width
First row: HTML table for the tabs
Each cell with CSS class gwt-TabBarItem-wrapper
Selected
S l
d tab
b also
l with
i h CSS class
l
gwt-TabBarItem-wrapper-selected
Details
Download and run this example, then view in Firebug
28
DockPanel
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
Purpose
To put widgets (usually Panels) in five possible regions
Similar to AWTs BorderLayout
However
However, unlike BorderLayout,
BorderLayout you are allowed to add
multiple entries to NORTH, SOUTH (stacked on top of
each other) and EAST, WEST (placed side-by-side)
Main methods
setSpacing(int pixels)
Sets inter-widget
g spacing
p
g in p
pixels
add(Widget w, DockPanel.REGION_NAME)
Adds a widget to specified region (DockPanel.NORTH,
..SOUTH,
SOUTH EAST,
EAST WEST,
WEST CENTER)
CENTER)
Can add a fixed-sized ScrollPanel to the CENTER region,
and scrollbars will be automatically added if needed
30
Example Code
private void addDockPanel() {
DockPanel dPanel = new DockPanel();
dPanel.setSpacing(5);
dPanel.setHorizontalAlignment
(HasHorizontalAlignment.ALIGN_CENTER);
VerticalPanel westPanel =
makeVerticalPanel("<b>This is<br/>WEST</b>", 9);
dPanel.add(westPanel, DockPanel.WEST);
VerticalPanel eastPanel =
(
is<br/>EAST</b>",
/
/
, 9);
);
makeVerticalPanel("<b>This
dPanel.add(eastPanel, DockPanel.EAST);
31
32
Supporting Code
private String getCenterText() {
g text =
String
"<h2>This is CENTER</h2> " +
"<p>Note that in GWT, unlike in Swing or AWT, you can " +
"add more than one entry to NORTH, SOUTH, EAST, or WEST, " +
"and the entries come out next to each other.</p>
/
" +
"<p>Also, in the CENTER, you can add a ScrollPanel and " +
"get scrollbars without needing an IFRAME.</p>" +
p a do te
text
t so that
t at sc
scrollbars
o ba s a
are
e needed.
eeded. " +
"<p>Random
getRandomText();
return(text);
}
33
Example Result
34
Underlying HTML
35
<div id="dock-panel">
<table cellspacing=
cellspacing="5"
5 cellpadding=
cellpadding="0">
0 >
<tbody>
<tr>
<td rowspan
rowspan="3">West
3 >West stuff here</td>
<td colspan="1">North stuff here</td>
<td rowspan="3">East stuff here</td>
</tr>
/
<tr>
<td >
<div style="overflow:
y
auto;
position: relative;
width: 475px; height: 300px;">
<div class="gwt-HTML"><h2>This is CENTER</h2></div>
</div>
<tr>South stuff here</tr>
</table></div>
DockLayoutPanel
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
Purpose
Similar to DockPanel (and AWTs BorderLayout)
But using CSS layout instead of HTML tables
New in GWT 2.0
Main methods
new DockLayoutPanel(units)
E.g. new DockLayout(Units.EM)
add
T
Takes
k a single
i l widget
id t that
th t takes
t k up remaining
i i space. N
Note
t
that it is called add, not addCenter.
37
Note
RootLayoutPanel or explicit size
Usually added to RootLayoutPanel, not RootPanel.
RootLayoutPanel.get().add(topLevelLayoutPanel)
Standards
S
mode
The BlahLayoutPanel classes require that the HTML
page be in standards mode (not quirks mode).
mode) So,
So you
must start the HTML page with an explicit DOCTYPE.
Other LayoutPanel
y
types
yp
LayoutPanel, StackLayoutPanel, SplitLayoutPanel,
TabLayoutPanel
38
Example Code
private void addDockLayoutPanel() {
DockLayoutPanel dLayoutPanel = new DockLayoutPanel(Unit.EM);
DockLayoutPanel(Unit EM);
dLayoutPanel.addNorth(new HTML("<h1>Header</h1>"), 4);
4 ems
Example Result
40
Underlying HTML
<div id="dock-layout-panel">
<di style="position:
<div
t l "
iti
relative;
l ti
width:
idth 50
50em; h
height:
i ht 12
12em;">
">
Lots more divs with explicit styles.
No HTML tables.
</div>
</div>
41
Grid
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
Purpose
Constructor
Main methods
setWidget(int row,
row int col,
col Widget w)
Inserts widget into cell. Note that you do not use add
getRowCount, getColumnCount
resize(rows, cols), resizeRows(rows), resizeColumns(cols)
43
Example Code
private void addGrid() { // Class is Grid, not GridPanel
Grid grid = new Grid(5, 3);
grid.setCellPadding(10);
for(int i=0; i<grid.getRowCount(); i++) {
grid.setText(i, 0, "Text in row " + i);
g
grid.setHTML(i, 1, "<b>HTML</b> in row <i>" + i + "</i>");
grid.setWidget(i, 2, new Button("Button in row " + i));
}
RootPanel.get("grid").add(grid);
}
44
Example Result
45
Underlying HTML
<div id="grid">
<table>
<colgroup><col/></colgroup>
<tbody>
<tr>
<td>Text in col 0</td>
<td>Text in col 1</td>
<td>Text in col 2</td>
<td>Text in col 3</td>
<td>Text in col 4</td>
</tr>
/
<tr></tr>
<tr></tr>
</tbody>
y
</table>
</div>
46
HorizontalSplitPanel
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
Purpose
To put two widgets (usually HTML widgets or Panels)
side-by-side and let end user drag divider
Similar to Swing
Swingss JSplitPane with
HORIZONTAL_SPLIT
Main methods
setSize(String sizeDescriptor)
You usually give a fixed size
setSplitPosition(String positionDescriptor)
Usually set in percent, e.g., setSplitPosition("30%")
setLeftWidget(Widget
g (
g w))
setRightWidget(Widget w)
48
Example Code
private void addHorizontalSplitPanel() {
HorizontalSplitPanel hsPanel =
new HorizontalSplitPanel();
hsPanel.setSize("475px", "300px");
hsPanel setSplitPosition("30%");
hsPanel.setSplitPosition(
30% );
String text = getSplitPanelText();
hsPanel.setLeftWidget(new HTML(text));
hsPanel.setRightWidget(new HTML(text));
RootPanel.get("horizontal-split-panel").add(hsPanel);
}
49
Supporting Code
private String getSplitPanelText() {
String text =
"<p><b>Here is some text for " +
"each side of the splitter. " +
"Drag
Drag the splitter and the text " +
"will be rearranged.</b></p>" +
"<p>" + getRandomText() + "</p>";
return(text);
}
50
Example Results
51
Underlying HTML
<div id="horizontal-split-panel">
<div class
class="gwt-HorizontalSplitPanel"
gwt HorizontalSplitPanel
style="position: relative; height: 300px; width: 475px;">
<div style=" position: absolute; ">
<div style=" position: absolute; width: 120px;"></div>
<div style="position: absolute; left: 120px;">
<table class="hsplitter" >
<tbody>
<t >
<tr>
<td valign="middle" align="center">
<img (splitter image) />
</td>
</tr></tbody></table>
</div>
<div style=" left: 127px;"></div>
</div></div></div>
52
VerticalSplitPanel
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
Purpose
To put two widgets (usually HTML widgets or Panels)
on top of each other and let end user drag divider
Similar to Swing
Swingss JSplitPane with VERTICAL_SPLIT
VERTICAL SPLIT
Main methods
setSize(String
S (S g sizeDescriptor)
p )
You usually give a fixed size
setSplitPosition(String positionDescriptor)
Usually
U
ll sett iin percent,
t e.g., setSplitPosition("30%")
tS litP iti ("30%")
setTopWidget(Widget w)
g (
g w))
setBottomWidget(Widget
54
Example Code
private void addVerticalSplitPanel() {
VerticalSplitPanel vsPanel =
new VerticalSplitPanel();
vsPanel.setSize("475px", "300px");
vsPanel setSplitPosition("30%");
vsPanel.setSplitPosition(
30% );
String text = getSplitPanelText();
vsPanel.setTopWidget(new HTML(text));
vsPanel.setBottomWidget(new HTML(text));
RootPanel.get("vertical-split-panel").add(vsPanel);
}
55
Example Results
56
Underlying HTML
See example from HorizontalSplitPanel
57
PopupPanel
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
Purpose
B
Butt note
t that
th t this
thi iis an HTML div
di with
ith absolute
b l t positioning,
iti i
nott a
native dialog box. Use Window.alert for native dialog.
Constructor
Main methods
setWidget(Widget popupContents)
setPopupPosition(int x, int y)
In absolute screen coordinates
setAnimationEnabled(true)
So
S popup ffades
d iin/out
/ t
show(), hide()
You dont add a popup, you open it (show) and close it (hide)
59
Example Code
private void addButtonForPopup() {
Button button = new Button("Click to Make Popup");
button.addClickHandler(new PopupHandler());
RootPanel.get("button-for-popup").add(button);
}
60
Example Results
62
Underlying HTML
<div class="gwt-PopupPanel"
style="overflow:
style=
overflow: visible;
left: 112px; top: 1921px; position: absolute;
clip: rect(auto, auto, auto, auto);">
<div class="popupContent">
<table cellspacing="5" cellpadding="0">
<tbody>
<tr>Text</tr>
<tr>First Button</tr>
<tr>Second Button</tr>
</tbody>
</table>
</div>
</div>
63
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.
HTMLPanel
A panel that contains HTML, but where you can add widgets
to any HTML sub-element that has an id. Has helper method
to create unique ids.
FlexTable
Fl T bl
More powerful table creator than Grid. Can add rows and
columns on the fly, and can have rowspan and colspan.
AbsolutePanel
A panel that positions all of its children absolutely, allowing
them to overlap.
p
Summary
Main layout approaches
HTML-based:
HTML b d best
b t for
f simple
i l apps with
ith light
li ht GWT usage
Java-based: best for heavy use of GWT and desktop feel
TabPanel , DecoratedTabPanel
Like JTabbedPane from desktop Java
DockPanel, DockLayoutPanel
Like BorderLayout from desktop Java
Grid
Like GridLayout from desktop Java
HorizontalSplitPanel, VerticalSplitPanel
Like JSplitPane from desktop Java
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.