" ti l l"> … 12

© 2009 Marty Hall

HorizontalPanel 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 • Purpose – To put widgets side-by-side – Similar to Swing’s 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

14

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

Example Result (Local Web Mode)

16

Underlying HTML 17

© 2009 Marty Hall

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

19

Example Code private void addVerticalPanel() { String text = "This is a simple
VerticalPanel"; 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); } 20

Example Result

21

Underlying HTML 22

© 2009 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 • 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 Swing’s 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 24

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

This is Panel " + i + ". Wow!

"; tPanel.add(new HTML(panelText), "Panel " + i); } tPanel.selectTab(0); tPanel.setAnimationEnabled(true); RootPanel.get("tab-panel").add(tPanel); }

25

Example Result

26

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

27

© 2009 Marty Hall

DockPanel 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 • Purpose – To put widgets (usually Panels) in five possible regions – Similar to AWT’s BorderLayout • However However, unlike BorderLayout, BorderLayout you are allowed to add multiple entries to NORTH, SOUTH (stacked on top of each other) and EAST, WEST (placed side-by-side)

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

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

Example Code private void addDockPanel() { DockPanel dPanel = new DockPanel(); dPanel.setSpacing(5); dPanel.setHorizontalAlignment (HasHorizontalAlignment.ALIGN_CENTER); VerticalPanel westPanel = makeVerticalPanel("This is
WEST", 9); dPanel.add(westPanel, DockPanel.WEST); VerticalPanel eastPanel = ( is
EAST", / / , 9); ); makeVerticalPanel("This dPanel.add(eastPanel, DockPanel.EAST);

30

Example Code (Continued) HorizontalPanel northPanel = makeHorizontalPanel("This is
NORTH", is
NORTH" 3); dPanel.add(northPanel, DockPanel.NORTH); HorizontalPanel southPanel = makeHorizontalPanel("This is
SOUTH", is
SOUTH" 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) }

31

Supporting Code private String getCenterText() { g text = String "

This is CENTER

" + "

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.

/ " + "

Also, in the CENTER, you can add a ScrollPanel and " + "get scrollbars without needing an IFRAME.

" + p a do te text t so t that at sc scrollbars o ba s a are e needed. eeded. " + "

Random getRandomText(); return(text); }

32

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

33

Underlying HTML

34

© 2009 Marty Hall

Grid 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 • Purpose – To T putt widgets id t in i tabular t b l layout l t with ith fixed fi d cell ll sizes 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,, Stringg htmlText)) • Wraps htmlText in HTML widget, then inserts

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

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

Example Code private void addGrid() { // Class is Grid, not GridPanel Grid grid = new Grid(3 Grid(3, 5); for(int i=0; iHTML in col " + i + ""); grid.setWidget(2, i, new Button("Button Button( Button in col " + i)); } RootPanel.get("grid").add(grid); }

37

Example Result

38

Underlying HTML

/ …… y

Text in col 0	Text in col 1	Text in col 2	Text in col 3	Text in col 4

39

© 2009 Marty Hall

HorizontalSplitPanel 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 • Purpose – To put two widgets (usually HTML widgets or Panels) side-by-side and let end user drag divider – Similar to Swing Swing’ss 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) 41

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); }

42

Supporting Code private String getSplitPanelText() { String text = "

Here is some text for " + "each side of the splitter. " + "Drag Drag the splitter and the text " + "will be rearranged.

" + "

" + getRandomText() + "

"; return(text); }

43

Example Results

44

Underlying HTML

…

…

45

© 2009 Marty Hall

VerticalSplitPanel 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 • Purpose – To put two widgets (usually HTML widgets or Panels) on top of each other and let end user drag divider – Similar to Swing Swing’ss 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 47

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); }

48

Example Results

49

Underlying HTML • See example from HorizontalSplitPanel

50

© 2009 Marty Hall

PopupPanel 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 • 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 Swing’s 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 don’t add a popup, you open it (show) and close it (hide) 52

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

53

Example Code (Continued) private class PopupHandler implements ClickHandler { public void onClick(ClickEvent event) { PopupPanel popup = new PopupPanel(true); String text = "Click Click outside popup
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(); } } 54

Example Results

55

Underlying HTML

…Text……First Button……Second Button…

56

© 2009 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 • 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. 58

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 • Like BorderLayout from desktop Java

– Grid • Like GridLayout from desktop Java

– HorizontalSplitPanel, VerticalSplitPanel • Like JSplitPane from desktop Java

– PopupPanel (and DialogBox) 59

• Like JDialog from desktop Java

© 2009 Marty Hall

Questions? 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.