GWT Panels

2010 Marty Hall
The Google
g Web Toolkit ((GWT):
)
Laying out Windows with Panels
((GWT 2.0 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 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.
2010 Marty Hall
For live Ajax & GWT training, see training

courses att http://courses.coreservlets.com/.
htt //
l t
/
Taught by the author of Core Servlets and JSP,
More Servlets and JSP,
JSP and this tutorial.
tutorial Available at
public venues, or customized versions can be held
on-site at your organization.
Courses
C
d
developed
l
d and
d ttaught
ht b
by M
Marty
t H
Hallll
Java 6, servlets/JSP (intermediate and advanced), Struts, JSF 1.x, JSF 2.0, Ajax, GWT 2.0 (with GXT), custom mix of topics
Ajax courses
can concentrate
on 1EE
library
(jQuery, Prototype/Scriptaculous,
Ext-JS, Dojo, Google Closure) or survey several
Customized
Java
Training:
http://courses.coreservlets.com/
Courses developed and taught by coreservlets.com experts (edited by Marty)
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.
Topics in This Section

Strategy behind Panel usage
Similar to use of LayoutManagers in desktop Java
Most common Panel types
HorizontalPanel
H
i
lP l
VerticalPanel
TabPanel and DecoratedTabPanel
DockPanel and DockLayoutPanel
Grid
HorizontalSplitPanel
VerticalSplitPanel
P
PopupPanel
P l
Summary of other Panel types

5
Note re New GWT 2.0 Types

This tutorial
Updated from GWT 1.7 to use GWT 2.0
All examples and test cases use GWT 2.0 approach
Use the standard Panel types from GWT 11.7
7 and earlier
HorizontalPanel, VerticalPanel, TabPanel, DockPanel, etc.
Upcoming
p
g tutorial (late
(
Jan 2010))
Will use the new Panel types from GWT 2.0 and later
LayoutPanel, TabLayoutPanel, DockLayoutPanel, etc.
2010 Marty Hall
Overview
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
Best when GWT is used to

Mimic a desktop application
Create an application where HTML layout changes on fly
8
HTML-Based Layout
HTML
<body>
Regular
Regular
R
Regular
l
Regular
</body>
HTML <div id="id-1"></div>

HTML <div id="id-2"></div>
HTML <div
<di id
id="id-3"></div>
"id 3"></di >
HTML
Java
J
public void onModuleLoad() {
SomeWidget w1 = ;
RootPanel.get("id-1").add(w1);
1
1
SomeWidget w2 = ;
SomeWidget w3 = ;
;
}
9
Java-Based Layout
HTML
<body>
<div id="main-id"></div>
</body>
Java
J
10
public void onModuleLoad() {

SomePanel panel = ;
panel.setVariousProperties();
l
tV i
P
ti ()
SomeWidget w1 = ;
panel.add(w1);
SomeWidget w2 = ;
panel.add(w2);
SomeWidget wN = ;
panel.add(wN);
RootPanel.get("main-id").add(panel);
}
Methods Supported by Most

Panels
add(Widget w)
Add
Adds a Wid
Widget to the
h P
Panel.
l Wh
Where iit gets inserted
i
d depends
d
d on
the Panel type.
Most Panels support insert to put Widget in specific place
All Panels
P
l supportt remove
(one
(
Widget)
Wid t) and
d clear
l ((all)
ll)
The Widget that you add can itself be a Panel

Many Panels have specialized versions of add with extra args
setSize, setWidth, setHeight

These take CSS-style size descriptors
setStyleName
For CSS styling. But most widgets also have a predefined CSS
style name (e.g., gwt-Button).
getChildren, getWidget, getWidgetCount

Look up information about widgets already inside the Panel
11
Top-Level Example Code: Java

public class GwtPanels implements EntryPoint {
public
bli void
id onModuleLoad()
d l
d() {
addHorizontalPanel();
addVerticalPanel();
()
addTabPanel();
addDockPanel();
addGrid();
ddG id()
addHorizontalSplitPanel();
addVerticalSplitPanel();
addButtonForPopup();
}
}
12
Top-Level Example Code: HTML

<body>
< />
<p/>
<fieldset>
<legend>Simple Horizontal Panels</legend>
<div id="horizontal-panel"></div>
</fieldset>
<p/>
<fieldset>
<legend>Simple Vertical Panels</legend>
<di id
<div
id="vertical-panel"></div>
"
ti l
l"></di >
</fieldset>
</body>
13
2010 Marty Hall
HorizontalPanel
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=
align="left"
left style=
style="vertical-align:
vertical align: top;">
top; ></td>
</td>
</tr></tbody></table>
</div>
2010 Marty Hall
VerticalPanel
Summary
Purpose
To put widgets on top of each other.
Similar to Swings BoxLayout (with a vertical layout)
Main methods
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>
<t ><td align="left"
<tr><td
li
"l ft" style="vertical-align:
t l "
ti l li
top;"></td></tr>
t
"> </td></t >
</tbody></table>
</div>
23
2010 Marty Hall
TabPanel and
DecoratedTabPanel
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
Similar to Swings JTabbedPane
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
Second row: single cell (td) for contents

Contains a bunch of divs
All except selected one have display:none
Details
Download and run this example, then view in Firebug
28
2010 Marty Hall
DockPanel
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
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
Example Code (Continued)

HorizontalPanel northPanel =
makeHorizontalPanel("<b>This is<br/>NORTH</b>"
is<br/>NORTH</b>", 3);
dPanel.add(northPanel, DockPanel.NORTH);
HorizontalPanel southPanel =
makeHorizontalPanel("<b>This is<br/>SOUTH</b>"
is<br/>SOUTH</b>", 3);
dPanel.add(southPanel, DockPanel.SOUTH);
ScrollPanel sPanel =
new ScrollPanel(new
S
llP
l(
HTML(
HTML(getCenterText()));
tC t T t()))
sPanel.setSize("475px", "300px");
dPanel.add(sPanel, DockPanel.CENTER);
R tP
RootPanel.get("dock-panel").add(dPanel);
l
t("d k
l") dd(dP
l)
}
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
private String getRandomText() {

String text =
Blah, blah, blah, blah, blah, blah, blah. " +
"Blah,
"Yadda, yadda, yadda, yadda, yadda, yadda. ";
return(text + text + text + text + text + text + text);
}
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>
2010 Marty Hall
DockLayoutPanel
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)
addNorth, addSouth, addWest, addEast

These all take two arguments: the widget and the size
(interpreted in whatever units were supplied to constructor)
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)
If you add it to a specific region,

region then you must give it an
explicit size
myDockLayoutPanel.setSize("50em", "20em");
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
dLayoutPanel.addSouth(new HTML("<h1>Footer</h1>"), 4);

dLayoutPanel addWest(new HTML(
dLayoutPanel.addWest(new
HTML("<h2>Navigation</h2>")
<h2>Navigation</h2> ), 10);
dLayoutPanel.add(new ScrollPanel(new HTML(getRandomText())));
dLayoutPanel.setSize("50em", "12em");
RootPanel get("dock-layout-panel")
RootPanel.get(
dock-layout-panel ).add(dLayoutPanel);
add(dLayoutPanel);
}
setSize needed because we are putting a DockLayoutPanel into a

RootPanel. But, you commonly start with RootLayoutPanel, add a top-level
DockLayoutPanel, and build the window up from there. In such a case, the
top-level DockLayoutPanel takes up the whole browser window, and any
sub-panels that are DockLayoutPanels have size reserved for them. In
those cases, no setSize is needed.
39
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
2010 Marty Hall
Grid
Summary
Purpose
To put widgets in tabular layout with fixed cell sizes

Similar to AWTs GridLayout. Also see FlexTable.
Constructor
new Grid(int rows,

rows int columns)
Note that class is called Grid, not GridPanel
Main methods
setWidget(int row,
row int col,
col Widget w)
Inserts widget into cell. Note that you do not use add
setHTML(int row, int col, String htmlText)
Wraps htmlText in HTML widget, then inserts
setText(int row, int col, String text)

Inserts plain text into cell
setCellPadding(int pixels), setCellSpacing(int pixels)
If there are no cell borders

borders, these two amount to same thing
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>
</tr>
/
<tr></tr>
<tr></tr>
</tbody>
y
</table>
</div>
46
2010 Marty Hall
HorizontalSplitPanel
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
2010 Marty Hall
VerticalSplitPanel
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
2010 Marty Hall
PopupPanel
Summary
Purpose
To make temporary popup window.

window Also see DialogBox class.
class
Usually contains warning, info, or asks for input: something that
user should take action on immediately
Similar to Swings JDialog
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
New PopupPanel(boolean autoClose)
true means close when user clicks outside popup
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 Code (Continued)

private class PopupHandler implements ClickHandler {
public void onClick(ClickEvent event) {
PopupPanel popup = new PopupPanel(true);
String text =
"Click
Click <i>outside</i> popup<br/>to close it";
it ;
VerticalPanel vPanel = makeVerticalPanel(text, 2);
popup.setWidget(vPanel);
UIObject button = (UIObject)event.getSource();
int x = button.getAbsoluteLeft() + 100;
int y = button.getAbsoluteTop() - 100;
popup.setPopupPosition(x,
p
p p
p p
( , y);
popup.setAnimationEnabled(true);
popup.show();
}
}
61
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
2010 Marty Hall
Wrap-up
Other Panel Types

FlowPanel
Wid
Widgets
t th
thatt you add
dd have
h
the
th normall flow
fl off whatever
h t
HTML element you use for the panel placeholder.
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
StackPanel and DecoratedStackPanel

Like TabPanel, but arranged vertically instead of horizontally.
65
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
Most common Panel types

HorizontalPanel, VerticalPanel
Like BoxLayout from desktop Java
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
PopupPanel (and DialogBox)

66
Like JDialog from desktop Java
2010 Marty Hall
Questions?

GWT Panels

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

GWT Panels

Uploaded by

Copyright:

Available Formats

2010 Marty Hall

Originals of Slides and Source Code for Examples:

2010 Marty Hall

For live Ajax & GWT training, see training

Courses developed and taught by coreservlets.com experts (edited by Marty)

Topics in This Section

Most common Panel types

Summary of other Panel types

Note re New GWT 2.0 Types

2010 Marty Hall

Best when GWT is used to

HTML <div id="id-1"></div>

public void onModuleLoad() {

Methods Supported by Most

The Widget that you add can itself be a Panel

setSize, setWidth, setHeight

getChildren, getWidget, getWidgetCount

Top-Level Example Code: Java

Top-Level Example Code: HTML

2010 Marty Hall

2010 Marty Hall

2010 Marty Hall

Similar to Swings JTabbedPane

Second row: single cell (td) for contents

2010 Marty Hall

Example Code (Continued)

private String getRandomText() {

2010 Marty Hall

addNorth, addSouth, addWest, addEast

If you add it to a specific region,

dLayoutPanel.addSouth(new HTML("<h1>Footer</h1>"), 4);

setSize needed because we are putting a DockLayoutPanel into a

2010 Marty Hall

To put widgets in tabular layout with fixed cell sizes

new Grid(int rows,

Note that class is called Grid, not GridPanel

setHTML(int row, int col, String htmlText)

Wraps htmlText in HTML widget, then inserts

setText(int row, int col, String text)

setCellPadding(int pixels), setCellSpacing(int pixels)

If there are no cell borders

2010 Marty Hall

2010 Marty Hall

2010 Marty Hall

To make temporary popup window.

Similar to Swings JDialog

New PopupPanel(boolean autoClose)

true means close when user clicks outside popup

Example Code (Continued)

2010 Marty Hall

Other Panel Types

StackPanel and DecoratedStackPanel

Most common Panel types

PopupPanel (and DialogBox)

Like JDialog from desktop Java

2010 Marty Hall

You might also like