Download - GWT Panels
TODO
• Update to new GWT 2.0+ types– BlahLayout
• See http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Design
– Maybe entirely separate section on LayoutPanel types– Maybe entirely separate section on LayoutPanel types
– Or section that illustrates traditional “single page” GWT approach (with history)
• Need UIBinder section!
1
Course Material Usage Rules
• PowerPoint slides for use only in for-credit courses at degree-granting institutions– Slides not permitted for commercial training courses
except when taught by coreservlets.com (see http://courses.coreservlets.com).
Slides may be modified by instructor• Slides may be modified by instructor– But please retain reference to coreservlets.com
• Instructor may give PDF or hardcopy to students– But should protect the PowerPoint files
This slide is suppressed in Slide Show mode2
© 2010 Marty Hall
The Google Web Toolkit (GWT):
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.
Originals of Slides and Source Code for Examples:
http://courses.coreservlets.com/Course-Materials/gwt.html
The Google Web Toolkit (GWT): Laying out Windows with Panels
(GWT 2.0 Version)
© 2010 Marty Hall
For live Ajax & GWT training, see training
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.
For live Ajax & GWT training, see training courses at http://courses.coreservlets.com/.
Taught by the author of Core Servlets and JSP, More Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held
on-site at your organization.• Courses developed and taught by Marty Hall
– 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 1 library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo, Google Closure) or survey several
• Courses developed and taught by coreservlets.com experts (edited by Marty)– Spring, Hibernate/JPA, EJB3, Web Services, Ruby/Rails
Contact [email protected] for details
Topics in This Section
• Strategy behind Panel usage– Similar to use of LayoutManagers in desktop Java
• Most common Panel types– HorizontalPanel
– VerticalPanel– VerticalPanel
– TabPanel and DecoratedTabPanel
– DockPanel and DockLayoutPanel
– Grid
– HorizontalSplitPanel
– VerticalSplitPanel
– PopupPanel
• Summary of other Panel types5
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 1.7 and earlier• HorizontalPanel, VerticalPanel, TabPanel, DockPanel, etc.• HorizontalPanel, VerticalPanel, TabPanel, DockPanel, etc.
• Upcoming tutorial (late Jan 2010)– Will use the new Panel types from GWT 2.0 and later
• LayoutPanel, TabLayoutPanel, DockLayoutPanel, etc.
6
© 2010 Marty Hall
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.
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• 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 HTML <div id="id-1"></div>
Regular HTML <div id="id-2"></div>
Regular HTML <div id="id-3"></div>
Regular HTML
</body>
• Javapublic void onModuleLoad() {
SomeWidget w1 = …;
RootPanel.get("id-1").add(w1);
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>
• Javapublic void onModuleLoad() { public void onModuleLoad() {
SomePanel panel = …;
panel.setVariousProperties();
SomeWidget w1 = …;
panel.add(w1);
SomeWidget w2 = …;
panel.add(w2);
…
SomeWidget wN = …;
panel.add(wN);
RootPanel.get("main-id").add(panel);
}10
Methods Supported by Most Panels
• add(Widget w)– Adds a Widget to the Panel. Where it gets inserted depends on
the Panel type.• Most Panels support “insert” to put Widget in specific place
• All Panels support “remove” (one Widget) and “clear” (all)
– The Widget that you add can itself be a Panel– 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 void onModuleLoad() {
addHorizontalPanel();
addVerticalPanel();
addTabPanel();
addDockPanel();
addGrid();
addHorizontalSplitPanel();
addVerticalSplitPanel();
addButtonForPopup();
}
…
}
12
Top-Level Example Code: HTML
<body>
<p/>
<fieldset>
<legend>Simple Horizontal Panels</legend>
<div id="horizontal-panel"></div>
</fieldset></fieldset>
<p/>
<fieldset>
<legend>Simple Vertical Panels</legend>
<div id="vertical-panel"></div>
</fieldset>
…
</body>
13
© 2010 Marty Hall
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.
HorizontalPanel
Summary
• Purpose– To put widgets side-by-side
– Similar to Swing’s BoxLayout (with a horizontal layout)
• Main methods– setSpacing(int pixels)– setSpacing(int pixels)
• Sets inter-widget spacing in pixels
– add(Widget w)• Adds a widget, in left-to-right order.
• Use “insert” if you want to put widget at specific index
– setHorizontalAlignment, setVerticalAlignment• Sets default alignment
15
Example Code
private void addHorizontalPanel() {
String text = "<b>This is a simple<br/>HorizontalPanel</b>";
HorizontalPanel hPanel = makeHorizontalPanel(text, 5);
RootPanel.get("horizontal-panel").add(hPanel);
}
private HorizontalPanel makeHorizontalPanel(String text, 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
<div id="horizontal-panel">
<table cellspacing="5" cellpadding="0">
<tbody><tr>
<td align="left" style="vertical-align: top;">
<div class="gwt-HTML">
<b>This is a simple<br/>HorizontalPanel</b><b>This is a simple<br/>HorizontalPanel</b>
</div>
</td>
<td align="left" style="vertical-align: top;">…</td>
<td align="left" style="vertical-align: top;">…</td>
<td align="left" style="vertical-align: top;">…</td>
<td align="left" style="vertical-align: top;">…</td>
<td align="left" style="vertical-align: top;">…</td>
</tr></tbody></table>
</div>18
© 2010 Marty Hall
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.
VerticalPanel
Summary
• Purpose– To put widgets on top of each other.
– Similar to Swing’s BoxLayout (with a vertical layout)
• Main methods– setSpacing(int pixels)– setSpacing(int pixels)
• Sets inter-widget spacing in pixels
– add(Widget w)• Adds a widget, in top-to-bottom order.
• Use “insert” if you want to put widget at specific 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);
}
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="5" cellpadding="0"><tbody>
<tr>
<td align="left" style="vertical-align: top;">
<div class="gwt-HTML">
<b>This is a simple<br/>VerticalPanel</b>
</div></div>
</td>
</tr>
<tr><td align="left" style="vertical-align: top;">…</td></tr>
<tr><td align="left" style="vertical-align: top;">…</td></tr>
<tr><td align="left" style="vertical-align: top;">…</td></tr>
<tr><td align="left" style="vertical-align: top;">…</td></tr>
<tr><td align="left" style="vertical-align: top;">…</td></tr>
</tbody></table>
</div>
23
© 2010 Marty Hall
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.
TabPanel andDecoratedTabPanel
Summary
• Purpose– To panels or widgets on top of each other, and select them by
clicking on tabs• TabPanel uses square tabs• DecoratedTabPanel uses rounded tabs
– Similar to Swing’s JTabbedPane
• Main methods• Main methods– add(Widget w, String tabText)
• 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++) {
String panelText =
"<h1>This is Panel " + i + ". <i>Wow!</i></h1>";"<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 tab also with CSS class gwt-TabBarItem-wrapper-selectedgwt-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
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.
DockPanel
Summary
• Purpose– To put widgets (usually Panels) in five possible regions
– Similar to AWT’s BorderLayout• However, unlike BorderLayout, you are allowed to add
multiple entries to NORTH, SOUTH (stacked on top of each other) and EAST, WEST (placed side-by-side)each other) and EAST, WEST (placed side-by-side)
• Main methods– setSpacing(int pixels)
• Sets inter-widget spacing in pixels
– add(Widget w, DockPanel.REGION_NAME)• Adds a widget to specified region (DockPanel.NORTH,
..SOUTH, IEAST, IWEST, ICENTER)
• 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 = VerticalPanel westPanel =
makeVerticalPanel("<b>This is<br/>WEST</b>", 9);
dPanel.add(westPanel, DockPanel.WEST);
VerticalPanel eastPanel =
makeVerticalPanel("<b>This is<br/>EAST</b>", 9);
dPanel.add(eastPanel, DockPanel.EAST);
31
Example Code (Continued)
HorizontalPanel northPanel =
makeHorizontalPanel("<b>This is<br/>NORTH</b>", 3);
dPanel.add(northPanel, DockPanel.NORTH);
HorizontalPanel southPanel =
makeHorizontalPanel("<b>This is<br/>SOUTH</b>", 3);
dPanel.add(southPanel, DockPanel.SOUTH);dPanel.add(southPanel, DockPanel.SOUTH);
ScrollPanel sPanel =
new ScrollPanel(new HTML(getCenterText()));
sPanel.setSize("475px", "300px");
dPanel.add(sPanel, DockPanel.CENTER);
RootPanel.get("dock-panel").add(dPanel);
}
32
Supporting Code
private String getCenterText() {
String text =
"<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>Random text so that scrollbars are needed. " +
getRandomText();
return(text);
}
private String getRandomText() {
String text =
"Blah, blah, blah, blah, blah, blah, blah. " +
"Yadda, yadda, yadda, yadda, yadda, yadda. ";
return(text + text + text + text + text + text + text);
}33
Example Result
34
Underlying HTML
<div id="dock-panel">
<table cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td … rowspan="3">West stuff here</td>
<td … colspan="1">North stuff here</td>
<td … rowspan="3">East stuff here</td><td … rowspan="3">East stuff here</td>
</tr>
<tr>
<td … >
<div style="overflow: 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>35
© 2010 Marty Hall
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.
DockLayoutPanel
Summary
• Purpose– Similar to DockPanel (and AWT’s BorderLayout)
• But using CSS layout instead of HTML tables
• New in GWT 2.0
• Main methods• 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• Takes a single widget that takes up remaining space. Note
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, then you must give it an explicit sizeexplicit size
• myDockLayoutPanel.setSize("50em", "20em");
• Standards mode– The BlahLayoutPanel classes require that the HTML
page be in standards mode (not quirks mode). So, you must start the HTML page with an explicit DOCTYPE.
• Other LayoutPanel types– LayoutPanel, StackLayoutPanel, SplitLayoutPanel,
TabLayoutPanel38
Example Code
private void addDockLayoutPanel() {
DockLayoutPanel dLayoutPanel = new DockLayoutPanel(Unit.EM);
dLayoutPanel.addNorth(new HTML("<h1>Header</h1>"), 4);
dLayoutPanel.addSouth(new HTML("<h1>Footer</h1>"), 4);
dLayoutPanel.addWest(new HTML("<h2>Navigation</h2>"), 10);
dLayoutPanel.add(new ScrollPanel(new HTML(getRandomText())));
4 ems
dLayoutPanel.setSize("50em", "12em");
RootPanel.get("dock-layout-panel").add(dLayoutPanel);
}
39
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.
Example Result
40
Underlying HTML
<div id="dock-layout-panel">
<div style="position: relative; width: 50em; height: 12em;">
Lots more divs with explicit styles.
No HTML tables.
</div>
</div></div>
41
© 2010 Marty Hall
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.
Grid
Summary
• Purpose– To put widgets in tabular layout with fixed cell sizes– Similar to AWT’s GridLayout. Also see FlexTable.
• Constructor– new Grid(int rows, int columns)
• Note that class is called “Grid”, not “GridPanel”
• Main methods• Main methods– setWidget(int row, int 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, 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);
grid.setHTML(i, 1, "<b>HTML</b> in row <i>" + i + "</i>");
grid.setWidget(i, 2, new Button("Button in row " + 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 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>
</table>
</div>
46
© 2010 Marty Hall
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.
HorizontalSplitPanel
Summary
• Purpose– To put two widgets (usually HTML widgets or Panels)
side-by-side and let end user drag divider
– Similar to Swing’s JSplitPane with HORIZONTAL_SPLITHORIZONTAL_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 w)
– setRightWidget(Widget w)
48
Example Code
private void addHorizontalSplitPanel() {
HorizontalSplitPanel hsPanel =
new HorizontalSplitPanel();
hsPanel.setSize("475px", "300px");
hsPanel.setSplitPosition("30%");
String text = getSplitPanelText();
hsPanel.setLeftWidget(new HTML(text));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 the splitter and the text " +
"will be rearranged.</b></p>" +
"<p>" + getRandomText() + "</p>";"<p>" + getRandomText() + "</p>";
return(text);
}
50
Example Results
51
Underlying HTML
<div id="horizontal-split-panel">
<div class="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" … ><table class="hsplitter" … >
<tbody>
<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
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.
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’s JSplitPane with VERTICAL_SPLIT
• Main methods• Main methods– setSize(String sizeDescriptor)
• You usually give a fixed size
– setSplitPosition(String positionDescriptor)• Usually set in percent, e.g., setSplitPosition("30%")
– setTopWidget(Widget w)
– setBottomWidget(Widget w)
54
Example Code
private void addVerticalSplitPanel() {
VerticalSplitPanel vsPanel =
new VerticalSplitPanel();
vsPanel.setSize("475px", "300px");
vsPanel.setSplitPosition("30%");
String text = getSplitPanelText();
vsPanel.setTopWidget(new HTML(text));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
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.
PopupPanel
Summary
• Purpose– To make temporary popup window. Also see DialogBox class.
• Usually contains warning, info, or asks for input: something that user should take action on immediately
– Similar to Swing’s JDialog• But note that this is an HTML div with absolute positioning, not a
native dialog box. Use Window.alert for native dialog.
• Constructor• 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 popup fades in/out
– show(), hide()• You don’t 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 <i>outside</i> popup<br/>to close it";
VerticalPanel vPanel = makeVerticalPanel(text, 2);
popup.setWidget(vPanel);popup.setWidget(vPanel);
UIObject button = (UIObject)event.getSource();
int x = button.getAbsoluteLeft() + 100;
int y = button.getAbsoluteTop() - 100;
popup.setPopupPosition(x, y);
popup.setAnimationEnabled(true);
popup.show();
}
}
61
Example Results
62
Underlying HTML
<div class="gwt-PopupPanel"
style="overflow: visible; left: 112px; top: 1921px; position: absolute; clip: rect(auto, auto, auto, auto);">
<div class="popupContent">
<table cellspacing="5" cellpadding="0">
<tbody><tbody>
<tr>…Text…</tr>
<tr>…First Button…</tr>
<tr>…Second Button…</tr>
</tbody>
</table>
</div>
</div>
63
© 2010 Marty Hall
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.
Wrap-up
Other Panel Types
• FlowPanel– Widgets that you add have the normal flow of whatever
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 any HTML sub-element that has an id. Has helper method to create unique ids.
• FlexTable– 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.
• StackPanel and DecoratedStackPanel– Like TabPanel, but arranged vertically instead of horizontally.
65
Summary
• Main layout approaches– HTML-based: best for simple apps with light GWT usage
– Java-based: best for heavy use of GWT and desktop feel
• Most common Panel types– HorizontalPanel, VerticalPanel
• Like BoxLayout from desktop Java• 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)• Like JDialog from desktop Java
66
© 2010 Marty Hall
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.
Questions?