Docstoc

GWT- Panels

Document Sample
GWT- Panels Powered By Docstoc
					© 2008 Marty Hall

The Google Web Toolkit ( g (GWT): ) Laying out Windows with Panels
( (GWT 1.5 Version) ) Originals of Slides and Source Code for Examples: http://courses.coreservlets.com/Course-Materials/ajax.html p j
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

© 2008 Marty Hall

For live Ajax & GWT training, see training courses at http://courses.coreservlets.com/. t htt // l t /
Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial Available at public JSP, tutorial. venues, or customized versions can be held on-site at your organization. y g
• Courses developed and taught by Marty Hall

Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. – Spring, Hibernate, EJB3, Ruby/Rails Developed and taught by well-known author and developer. At public venues or onsite at your location. Contact hall@coreservlets.com for details

Customized Java coreservlets.com experts (edited by Marty) • Courses developed and taught by EE Training: http://courses.coreservlets.com/

– Java 5, Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF, Ajax, GWT, custom mix of topics

Topics in This Section p
• Strategy behind Panel usage
– Similar to use of LayoutManagers in desktop Java

• Most common Panel types
– – – – – – – –
5

HorizontalPanel H i lP l VerticalPanel TabPanel and DecoratedTabPanel DockPanel Grid HorizontalSplitPanel VerticalSplitPanel PopupPanel P P l
Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

Overview O i
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Layout Strategies y g
• HTML-based layout
– W i HTML by hand, designate places for individual Write b h d d i l f i di id l controls – HTML body contains a lot of content – Best when GWT is used for
• A traditional Web application with some pieces of Ajaxenabled content • Complex page where HTML layout does not change

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

• Mimic a desktop application • Create an application where HTML layout changes on fly

Java EE training: http://courses.coreservlets.com

HTML-Based Layout y
• HTML
<body> Regular Regular Regular Regular </body> HTML <div id="id-1"></div> HTML <div id="id-2"></div> HTML <div id= id-3 ></div> id="id-3"></div> HTML

• Java
public void onModuleLoad() { SomeWidget w1 = …; RootPanel.get( id 1 ).add(w1); RootPanel.get("id-1").add(w1); SomeWidget w2 = …; RootPanel.get("id-2").add(w2); SomeWidget w3 = …; RootPanel.get("id-3").add(w3); }
8

Java EE training: http://courses.coreservlets.com

Java-Based Layout y
• HTML
<body> <div id="main-id"></div> </body>

• J Java
public void onModuleLoad() { SomePanel panel = …; panel.setVariousProperties(); l i i () SomeWidget w1 = …; panel.add(w1); SomeWidget w2 = …; panel.add(w2); … SomeWidget wN = …; panel.add(wN); RootPanel.get("main-id").add(panel); }
9

Java EE training: http://courses.coreservlets.com

Methods Supported by Most Panels
• add(Widget w)
– Adds a Widget to the Panel. Where it gets inserted depends on Panel the Panel type. – The Widget that you add can itself be a Panel – Many Panels have specialized versions of add with extra arguments g – These take CSS-style size descriptors – For CSS styling. But most widgets also have a predefined CSS style name (e.g., gwt-Button). – Look up information about widgets already inside the Panel
Java EE training: http://courses.coreservlets.com

• Most Panels support “insert” to put Widget in specific place • All Panels support “remove” (one Widget) and “clear” (all Widgets)

• setSize, setWidth, setHeight • setStyleName

• getChildren, getWidget, getWidgetCount g ,g g ,g g
10

Top-Level Example Code: Java p p
public class GwtPanelsApp implements EntryPoint { public void onModuleLoad() { RootPanel.get().addStyleName("tan"); addHorizontalPanel(); addVerticalPanel(); addTabPanel(); addDockPanel(); addGrid(); ddG id() addHorizontalSplitPanel(); addVerticalSplitPanel(); addButtonForPopup(); dd () } … }
11

Java EE training: http://courses.coreservlets.com

Top-Level Example Code: HTML p p
<body> <p/> <fieldset> <legend>Simple Horizontal Panels</legend> <div id "horizontal panel"></div> id="horizontal-panel"></div> </fieldset> <p/> <fieldset> <fi ld t> <legend>Simple Vertical Panels</legend> <div id="vertical-panel"></div> </fieldset> /fi ld … </body>

12

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

HorizontalPanel H i t lP l
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• Purpose
– To put widgets side-by-side. – Similar to Swing’s BoxLayout (with a horizontal layout)

• Main methods
– setSpacing(int pixels)
• Sets inter widget spacing in pixels inter-widget

– add(Widget w)
• Adds a widget, in left-to-right order. • Use “insert” if you want to put widget at specific inde o ant p t idget index

– setHorizontalAlignment, setVerticalAlignment
• Sets default alignment.

14

Java EE training: http://courses.coreservlets.com

Example Code p
private void addHorizontalPanel() { String text = "<b>This is a simple<br/>HorizontalPanel</b> ; <b>This 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); ( ); }
15

Java EE training: http://courses.coreservlets.com

Example Result p

16

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
<div id="horizontal-panel"> <table cellspacing "5" cellpadding "0"> 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> </div> </td> <td align="left" style="vertical-align: top;">…</td> g y g p; <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> align= left style= vertical align: top;"> </td> </tr></tbody></table> </div>
17

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

VerticalPanel V ti lP l
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• Purpose
– To put widgets on top of each other. – Similar to Swing’s BoxLayout (with a vertical layout)

• Main methods
– setSpacing(int pixels)
• Sets inter widget spacing in pixels inter-widget

– add(Widget w)
• Adds a widget, in top-to-bottom order. • Use “insert” if you want to put widget at specific inde o ant p t idget index

– setHorizontalAlignment, setVerticalAlignment
• Sets default alignment.

19

Java EE training: http://courses.coreservlets.com

Example Code p
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(t t)) P l dd( HTML(text)); for (int i=1; i <= numButtons; i++) { vPanel.add(new Button("Button " + i)); } return(vPanel); }
20

Java EE training: http://courses.coreservlets.com

Example Result p

21

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
<div id="vertical-panel"> <table cellspacing="5" cellpadding="0"><tbody> 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> </td> </tr> <tr><td align="left" style="vertical-align: top;">…</td></tr> <tr><td align="left" style="vertical-align: top;">…</td></tr> <tr><td li <t ><td align="left" style="vertical-align: top;">…</td></tr> "l ft" t l " ti l li 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>
22

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

TabPanel and DecoratedTabPanel
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• Purpose
– T panels or widgets on top of each other, and select them by To l id t t f h th d l t th b clicking on tabs
• TabPanel uses square tabs • DecoratedTabPanel uses rounded tabs

– Similar to Swing’s JTabbedPane

• Main methods
– add(Widget w, St i t bT t) dd(Wid t 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
24

Java EE training: http://courses.coreservlets.com

Example Code p
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>"; tPanel.add(new HTML(panelText), "Panel " + i); } tPanel.selectTab(0); tPanel.setAnimationEnabled(true); RootPanel.get("tab-panel").add(tPanel); g ( p ) ( ); }

25

Java EE training: http://courses.coreservlets.com

Example Result p

26

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
• Enclosing HTML table with fixed width • First row: HTML table for the tabs
– Each cell with CSS class gwt-TabBarItem-wrapper –S l Selected tab also with CSS class d b l ih 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

27

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

DockPanel D kP l
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• Purpose
– To put widgets (usually Panels) in five possible regions – Similar to AWT’s BorderLayout
• However unlike BorderLayout you are allowed to add However, BorderLayout, 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 spacing in p g p g pixels

– add(Widget w, DockPanel.REGION_NAME)
• Adds a widget to specified region (DockPanel.NORTH, ..SOUTH, …EAST, …WEST, …CENTER) SOUTH EAST WEST CENTER) • Can add a fixed-sized ScrollPanel to the CENTER region, and scrollbars will be automatically added if needed
29

Java EE training: http://courses.coreservlets.com

Example Code p
private void addDockPanel() { DockPanel dPanel = new DockPanel(); dPanel.setSpacing(5); dPanel.setHorizontalAlignment (HasHorizontalAlignment.ALIGN_CENTER); (HasHorizontalAlignment ALIGN CENTER); VerticalPanel westPanel = makeVerticalPanel("<b>This is<br/>WEST</b>", 9); dPanel.add(westPanel, D kP dP l dd( tP l DockPanel.WEST); l WEST) VerticalPanel eastPanel = makeVerticalPanel("<b>This is<br/>EAST</b>", 9); dPanel.add(eastPanel, DockPanel.EAST); d l dd( l k l S )

30

Java EE training: http://courses.coreservlets.com

Example Code (Continued) p ( )
HorizontalPanel northPanel = makeHorizontalPanel("<b>This is<br/>NORTH</b>", 3); is<br/>NORTH</b>" dPanel.add(northPanel, DockPanel.NORTH); HorizontalPanel southPanel = makeHorizontalPanel("<b>This is<br/>SOUTH</b>", 3); is<br/>SOUTH</b>" dPanel.add(southPanel, DockPanel.SOUTH); ScrollPanel sPanel = new S ScrollPanel(new HTML( tC t T t())) llP l( HTML(getCenterText())); sPanel.setSize("400px", "300px"); dPanel.add(sPanel, DockPanel.CENTER); RootPanel.get("dock-panel").add(dPanel); l ( d k l ) dd(d l) }

31

Java EE training: http://courses.coreservlets.com

Supporting Code pp g
private String getCenterText() { g 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 a do text that scrollbars are eeded. "<p>Random te t so t at sc o ba s a e needed. " + getRandomText(); return(text); } 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); }

32

Java EE training: http://courses.coreservlets.com

Example Result p

33

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
<div id="dock-panel"> <table cellspacing="5" cellpadding="0"> cellspacing= 5 cellpadding= 0 > <tbody> <tr> <td … rowspan="3">West stuff here</td> rowspan 3 >West <td … colspan="1">North stuff here</td> <td … rowspan="3">East stuff here</td> </tr> / <tr> <td … > <div style="overflow: auto; position: relative; width: 400px; height: 300px;"> <div class="gwt-HTML"><h2>This is CENTER</h2>…</div> </div> … <tr>South stuff here</tr> …</table></div> Java EE training: http://courses.coreservlets.com

34

© 2008 Marty Hall

Grid G id
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• Purpose
– T put widgets in tabular layout with fixed cell sizes To t id t i t b l l t ith fi d ll i – Similar to AWT’s GridLayout

• Constructor
– new Grid(int rows, int columns)
• Note that class is called “Grid”, not “GridPanel”

• 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) ( , , g )
• Wraps htmlText in HTML widget, then inserts

– setText(int row, int col, String text)
• Inserts plain text into cell p

– getRowCount, getColumnCount – resize(rows, cols), resizeRows(rows), resizeColumns(cols)
36

Java EE training: http://courses.coreservlets.com

Example Code p
private void addGrid() { // Class is Grid, not GridPanel Grid grid = new Grid(3, 5); Grid(3 for(int i=0; i<grid.getColumnCount(); i++) { grid.setText(0, i, "Text in col " + i); grid.setHTML(1, i, "<b>HTML</b> in col <i>" + i + "</i>"); grid.setWidget(2, i, new Button("Button in col " + i)); Button( Button } RootPanel.get("grid").add(grid); }

37

Java EE training: http://courses.coreservlets.com

Example Result p

38

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
<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> </table> </div>
39

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

HorizontalSplitPanel H i t lS litP l
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• 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 Swing’s 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 w) g ( g ) – setRightWidget(Widget w)
41

Java EE training: http://courses.coreservlets.com

Example Code p
private void addHorizontalSplitPanel() { HorizontalSplitPanel hsPanel = new HorizontalSplitPanel(); hsPanel.setSize("400px", "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); }

42

Java EE training: http://courses.coreservlets.com

Supporting Code pp g
private String getSplitPanelText() { String text = "<p><b>Here is some text for " + "each side of the splitter. " + "Drag the splitter and the text " + Drag "will be rearranged.</b></p>" + "<p>" + getRandomText() + "</p>"; return(text); }

43

Java EE training: http://courses.coreservlets.com

Example Result p

44

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
<div id="horizontal-split-panel"> <div class="gwt-HorizontalSplitPanel" class gwt HorizontalSplitPanel style="position: relative; height: 300px; width: 400px;"> <div style="… position: absolute; …"> <div style="… position: absolute; … width: 120px;">…</div> <div style="position: absolute; … left: 120px;"> <table class="hsplitter" … > <tbody> <tr> t <td valign="middle" align="center"> <img (splitter image) …/> </td> </tr></tbody></table> </div> <div style=" … left: 127px;">…</div> </div></div></div>
45

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

VerticalSplitPanel V ti lS litP l
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• 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 Swing’s VERTICAL SPLIT

• Main methods
– setSize(String sizeDescriptor) S (S g p )
• You usually give a fixed size

– setSplitPosition(String positionDescriptor)
• U Usually set i percent, e.g., setSplitPosition("30%") ll t in t tS litP iti ("30%")

– setTopWidget(Widget w) g ( g ) – setBottomWidget(Widget w)
47

Java EE training: http://courses.coreservlets.com

Example Code p
private void addVerticalSplitPanel() { VerticalSplitPanel vsPanel = new VerticalSplitPanel(); vsPanel.setSize("400px", "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); }

48

Java EE training: http://courses.coreservlets.com

Example Result p

49

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
• See example from HorizontalSplitPanel

50

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

PopupPanel P P l
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Summary y
• Purpose
– To make temporary popup window – Similar to Swing’s JDialog
• Usually contains warning, info, or asks for input: something that user should take action on immediately • B t note that this i an HTML div with absolute positioning, not a But t th t thi is di ith b l t iti i t native dialog box. Use Window.alert for native dialog.

• Constructor

– New PopupPanel(boolean autoClose) – setWidget(Widget popupContents) – setPopupPosition(int x, int y) – setAnimationEnabled(true) – show(), hide()
• S popup f d i / t So fades in/out • In absolute screen coordinates

• Main methods

• true means close when user clicks outside popup

• You don’t add a popup, you open it (show) and close it (hide)
Java EE training: http://courses.coreservlets.com

52

Example Code p
private void addButtonForPopup() { Button button = new Button( Click to Make Popup ); Button("Click Popup"); button.addClickListener(new PopupListener()); RootPanel.get("button-for-popup").add(button); }

53

Java EE training: http://courses.coreservlets.com

Example Code (Continued) p ( )
private class PopupListener implements ClickListener { public void onClick(Widget sender) { PopupPanel popup = new PopupPanel(true); String text = "Click <i>outside</i> popup<br/>to close it ; Click it"; VerticalPanel vPanel = makeVerticalPanel(text, 2); popup.setWidget(vPanel); int x = sender.getAbsoluteLeft() + 100; int y = sender.getAbsoluteTop() - 100; popup.setPopupPosition(x, y); p p p popup.setAnimationEnabled(true); ( ); popup.show(); } }

54

Java EE training: http://courses.coreservlets.com

Example Result p

55

Java EE training: http://courses.coreservlets.com

Underlying HTML y g
<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> First Button…</tr> <tr>…Second Button…</tr> </tbody> </table> </div> </div>

56

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

Wrap-up
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.

Other Panel Types yp
• FlowPanel
– Wid t th t you add have the normal flow of whatever Widgets that dd h th l fl f 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.

• Fl T bl 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. p

• StackPanel and DecoratedStackPanel
– Like TabPanel, but arranged vertically instead of horizontally.
58

Java EE training: http://courses.coreservlets.com

Summary y
• Main layout approaches
– HTML b d best for simple apps with light GWT usage HTML-based: b t f i l ith li ht – 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
• Like BorderLayout from desktop Java

– Grid
• Like GridLayout from desktop Java

– HorizontalSplitPanel, VerticalSplitPanel
• Like JSplitPane from desktop Java

– PopupPanel
59

• Like JDialog from desktop Java

Java EE training: http://courses.coreservlets.com

© 2008 Marty Hall

Questions? Q ti ?
Customized Java EE Training: http://courses.coreservlets.com/
Servlets, JSP, Struts, JSF/MyFaces/Facelets, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6. Developed and taught by well-known author and developer. At public venues or onsite at your location.


				
DOCUMENT INFO
Shared By:
Categories:
Tags: panels
Stats:
views:321
posted:10/8/2009
language:English
pages:29
Description: Java,J2EE,Struts,Hibernate,JSF,Goolge web development toolkit(GWT),Spring,Dojo,Html,Xhtml