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



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



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

</body>

• Javapublic void onModuleLoad() {

SomeWidget w1 = …;

RootPanel.get("id-1").add(w1);





}9

Java-Based Layout

• HTML<body>

<div id="main-id"></div>

</body>

• Javapublic void onModuleLoad() { public void onModuleLoad() {

SomePanel panel = …;

panel.setVariousProperties();


panel.add(w1);


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



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>





</tr></tbody></table>

</div>18

© 2010 Marty Hall



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)


– 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>





</tbody></table>

</div>

23

© 2010 Marty Hall



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



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)


– 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">


<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



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



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>




</tr>

<tr>…</tr>

<tr>…</tr>

</tbody>

</table>

</div>

46

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

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

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">


<tbody><tbody>

<tr>…Text…</tr>

<tr>…First Button…</tr>

<tr>…Second Button…</tr>

</tbody>

</table>

</div>

</div>

63

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

gwt panels

Documents