GWT – LAYOUT PANELS

Layout Panels can contain other widgets. These panels controls the way widgets to be shown on User Interface. Every Panel widget inherits properties from Panel class which in turn inherits properties from Widget class and which in turn inherits properties from UIObject class.

S.N.	Widget & Description
1	GWT UIObject Class This widget contains text, not interpreted as HTML using a <div>element, causing it to be displayed with block layout.
2	GWT Widget Class This widget can contain HTML text and displays the html content using a <div> element, causing it to be displayed with block layout.
3	GWT Panel Class This is an is the abstract base class for all panels, which are widgets that can contain other widgets.

GWT - UIObject Class

Introduction

The class UIObject is the superclass for all user-interface objects. It simply wraps a DOM element, and cannot receive events. It provides direct child classes like Widget, MenuItem, MenuItemSeparator, TreeItem.

• All uiobject objects can be styled using css.
• Every uiobject has a primary style name that identifies the key css style rule that should always be applied to it.
• More complex styling behaviour can be achieved by manipulating an object's secondary style name.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.UIObject class:


Field

Following are the fields for com.google.gwt.user.client.ui.UIObject class:

public static final java.lang.String DEBUG_ID_PREFIX -- The element ID that you specify will be prefixed by the static string DEBUG_ID_PREFIX.

Class Constructors

S.N.	Constructor & Description
1	UIObject() This creates a UIObject for the child classes.

Class Methods

S.N.	Method & Description
1	void addStyleDependentName(java.lang.String styleSuffix) Adds a dependent style name by specifying the style name's suffix.
2	void addStyleName(java.lang.String style) Adds a secondary or dependent style name to this object.
3	static void ensureDebugId(Element elem, java.lang.String id) Ensure that elem has an ID property set, which allows it to integrate with third-party libraries and test tools.
4	protected static void ensureDebugId(Element elem, java.lang.String baseID, java.lang.String id) Set the debug id of a specific element.
5	ensureDebugId(java.lang.String id) Ensure that the main Element for this UIObject has an ID property set, which allows it to integrate with third-party libraries and test tools.
6	int getAbsoluteLeft() Gets the object's absolute left position in pixels, as measured from the browser window's client area.
7	int getAbsoluteTop() Gets the object's absolute top position in pixels, as measured from the browser window's client area.
8	Element getElement() Gets a handle to the object's underlying DOM element.
9	int getOffsetHeight() Gets the object's offset height in pixels.
10	int getOffsetWidth() Gets the object's offset width in pixels.
11	protected Element getStyleElement() Template method that returns the element to which style names will be applied.
12	java.lang.String getStyleName() Gets all of the object's style names, as a space-separated list.
13	protected static java.lang.String getStyleName(Element elem) Gets all of the element's style names, as a space-separated list.
14	java.lang.String getStylePrimaryName() Gets the primary style name associated with the object.
15	protected static java.lang.String getStylePrimaryName(Element elem) Gets the element's primary style name.
16	java.lang.String getTitle() Gets the title associated with this object.
17	boolean isVisible() Determines whether or not this object is visible.
18	static boolean isVisible(Element elem) Determines whether element is visible or not.
19	protected void onEnsureDebugId(java.lang.String baseID) Called when the user sets the id using the ensureDebugId(String) method.
20	void removeStyleDependentName(java.lang.String styleSuffix) Removes a dependent style name by specifying the style name's suffix.
21	void removeStyleName(java.lang.String style) Removes a style name.
22	protected void setElement(Element elem) Sets this object's browser element.
23	protected void setElement(Element elem) Sets this object's browser element.
24	void setHeight(java.lang.String height) Sets the object's height.
25	void setPixelSize(int width, int height) Sets the object's size, in pixels, not including decorations such as border, margin, and padding.
26	void setSize(java.lang.String width, java.lang.String height) Sets the object's size.
27	protected static void setStyleName(Element elem, java.lang.String styleName) Clears all of the element's style names and sets it to the given style.
28	protected static void setStyleName(Element elem, java.lang.String style, boolean add) This convenience method adds or removes a style name for a given element.
29	void setStyleName(java.lang.String style) Clears all of the object's style names and sets it to the given style.
30	protected static void setStylePrimaryName(Element elem, java.lang.String style) Sets the element's primary style name and updates all dependent style names.
31	void setStylePrimaryName(java.lang.String style) Sets the object's primary style name and updates all dependent style names.
32	void setTitle(java.lang.String title) Sets the title associated with this object.
33	void setVisible(boolean visible) Sets whether this object is visible.
34	static void setVisible(Element elem, boolean visible) Sets whether this element is visible
35	void setWidth(java.lang.String width) Sets the object's width.
36	java.lang.String toString() This method is overridden so that any object can be viewed in the debugger as an HTML snippet.
37	void unsinkEvents(int eventBitsToRemove) Removes a set of events from this object's event list.

Methods Inherited

This class inherits methods from the following classes:

• java.lang.Object

GWT - Widget Class

Introduction

The class Widget is the base class for the majority of user-interface objects. Widget adds support for receiving events from the browser and being added directly to panels.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Widget class:


Field

Following are the fields for com.google.gwt.user.client.ui.Widget class:

• public static final java.lang.String DEBUG_ID_PREFIX -- The element ID that you specify will be prefixed by the static string DEBUG_ID_PREFIX.

Class Constructors

S.N.	Constructor & Description
1	Widget() This creates a Widget for the child classes.

Class Methods

S.N.	Method & Description
1	protected <H extends EventHandler> HandlerRegistration addDomHandler(H handler, DomEvent.Type<H> type) Adds a native event handler to the widget and sinks the corresponding native event.
2	protected <H extends EventHandler> HandlerRegistration addHandler(H handler, GwtEvent.Type<H> type) Adds this handler to the widget.
3	protected void delegateEvent(Widget target, GwtEvent<?> event) Fires an event on a child widget.
4	protected void doAttachChildren() If a widget implements HasWidgets, it must override this method and call onAttach() for each of its child widgets.
5	protected void doDetachChildren() If a widget implements HasWidgets, it must override this method and call onDetach() for each of its child widgets.
6	void fireEvent(GwtEvent<?> event) Fires the given event to all the appropriate handlers.
7	protected int getHandlerCount(GwtEvent.Type<?> type) Gets the number of handlers listening to the event type.
8	Widget getParent() Gets this widget's parent panel.
9	boolean isAttached() Determines whether this widget is currently attached to the browser's document (i.e., there is an unbroken chain of widgets between this widget and the underlying browser document).
10	protected boolean isOrWasAttached() Has this widget ever been attached?
11	protected void onAttach() This method is called when a widget is attached to the browser's document.
12	void onBrowserEvent(Event event) Fired whenever a browser event is received.
13	protected void onDetach() This method is called when a widget is detached from the browser's document.
14	protected void onLoad() Gets a handle to the object's underlying DOM element.
15	protected void onUnload() This method is called immediately before a widget will be detached from the browser's document.
16	void removeFromParent() Removes this widget from its parent widget.
17	void sinkEvents(int eventBitsToAdd) Overridden to defer the call to super.sinkEvents until the first time this widget is attached to the dom, as a performance enhancement.

Methods inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject

GWT - Panel Class

Introduction

The class Panel is the abstract base class for all panels, which are widgets that can contain other widgets.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Panel class:


Field

Following are the fields for com.google.gwt.user.client.ui.Panel class:

• public static final java.lang.String DEBUG_ID_PREFIX -- The element ID that you specify will be prefixed by the static string DEBUG_ID_PREFIX.
  

Class Construc

S.N	Constructor & Description
1	Panel() This creates a Panel for the child classes.

Class methods

S.N.	Method & Description
1	void add(IsWidget child)
2	void add(Widget child) Adds a child widget.
3	protected void adopt(Widget child) Finalize the attachment of a Widget to this Panel.
4	protected void adopt(Widget w, Element container) Deprecated. Use adopt(Widget).
5	void clear()
6	protected void disown(Widget w) Removes all child widgets.
7	protected void doAttachChildren() Deprecated. Use orphan(Widget).
8	protected void doDetachChildren() If a widget contains one or more child widgets that are not in the logical widget hierarchy (the child is physically connected only on the DOM level), it must override this method and call Widget.onAttach() for each of its child widgets.
9	protected void orphan(Widget child) If a widget contains one or more child widgets that are not in the logical widget hierarchy (the child is physically connected only on the DOM level), it must override this method and call Widget.onDetach() for each of its child widgets.
10	boolean remove(IsWidget child) This method must be called as part of the remove method of any Panel.
11	abstract boolean remove(Widget child) Removes a child widget.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget

Layout Panels

Following are few important Layout Panels:

S.N.	Widget & Description
1	FlowPanel This widget represents a panel that formats its child widgets using the default HTML layout behavior.
2	HorizontalPanel This widget represents a panel that lays all of its widgets out in a single horizontal column.
3	VerticalPanel This widget represents a panel that lays all of its widgets out in a single vertical column.
4	HorizontalSplitPanel This widget represents a panel that arranges two widgets in a single horizontal row and allows the user to interactively change the proportion of the width dedicated to each of the two widgets. Widgets contained within a HorizontalSplitPanel will be automatically decorated with scrollbars when necessary.
5	VerticalSplitPanel This widget represents a A panel that arranges two widgets in a single vertical column and allows the user to interactively change the proportion of the height dedicated to each of the two widgets. Widgets contained within a VertialSplitPanel will be automatically decorated with scrollbars when necessary.
6	FlexTable This widget represents a flexible table that creates cells on demand. It can be jagged (that is, each row can contain a different number of cells) and individual cells can be set to span multiple rows or columns.
7	Grid This widget represents a A rectangular grid that can contain text, html, or a child Widget within its cells. It must be resized explicitly to the desired number of rows and columns.
8	DeckPanel panel that displays all of its child widgets in a 'deck', where only one can be visible at a time. It is used by TabPanel.
9	DockPanel This widget represents a panel that lays its child widgets out "docked" at its outer edges, and allows its last widget to take up the remaining space in its center.
10	HTMLPanel This widget represents a panel that contains HTML, and which can attach child widgets to identified elements within that HTML.
11	TabPanel This widget represents a panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them. The tabs can contain arbitrary HTML.
12	Composite This widget represents a type of widget that can wrap another widget, hiding the wrapped widget's methods. When added to a panel, a composite behaves exactly as if the widget it wraps had been added.
13	SimplePanel This widget represents a Base class for panels that contain only one widget.
14	ScrollPanel This widget represents a simple panel that wraps its contents in a scrollable area
15	FocusPanel This widget represents a simple panel that makes its contents focusable, and adds the ability to catch mouse and keyboard events.
16	FormPanel This widget represents a panel that wraps its contents in an HTML <FORM> element.
17	PopupPanel This widget represents a panel that can pop up over other widgets. It overlays the browser's client area (and any previously-created popups).
18	DialogBox This widget represents a form of popup that has a caption area at the

GWT - Flow Panel Widget

Introduction

The FlowPanel widget represents a panel that formats its child widgets using the default HTML layout behavior.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.FlowPanel class:


Class Constructors

S.N.	Constructor & Description
1	FlowPanel() Constructor for empty Flow Panel.

Class Methods

S.N.	Function name & Description
1	void add(Widget w) Adds a new child widget to the panel.
2	void clear() Removes all child widgets.
3	void insert(IsWidget w, int beforeIndex)
4	void insert(Widget w, int beforeIndex) Inserts a widget before the specified index.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.ComplexPanel
• java.lang.Object

Flow Panel Widget Example

This example will take you through simple steps to show usage of a FlowPanel Widget in GWT. The following steps will help you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of FlowPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this this will produce the following result:

GWT - Horizantal Panel Widget

Introduction

The HorizantalPanel widget represents a panel that lays all of its widgets out in a single horizontal column.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.HorizontalPanel class:


Class Constructors

S.N.	Constructor & Description
1	HorizontalPanel() Constructor for empty horizontal Panel.

Class methods

S.N.	Function name & Description
1	void add(Widget w) Adds a child widget.
2	HasHorizontalAlignment.HorizontalAlignmentConstant getHorizontalAlignment() Gets the horizontal alignment.
3	HasVerticalAlignment.VerticalAlignmentConstant getVerticalAlignment() Gets the vertical alignment.
4	void insert(IsWidget w, int beforeIndex)
5	void insert(Widget w, int beforeIndex) Inserts a child widget before the specified index.
6	protected void onEnsureDebugId(java.lang.String baseID) Affected Elements: -# = the cell at the given index.
7	boolean remove(Widget w) Removes a child widget.
8	void set Horizontal Alignment(Has Horizontal Ali gnment.Horizontal Alignment Constant align) Sets the default horizontal alignment to be used for widgets added to this panel.
9	void setVerticalAlignment(HasVerticalAlignment.VerticalAlignmentConstant align) Sets the default vertical alignment to be used for widgets added to this panel.

Methods inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.ComplexPanel
• com.google.gwt.user.client.ui.CellPanel
• java.lang.Object

Horizontal Panel Widget Example

This example will take you through simple steps to show usage of a HorizontalPanel Widget in GWT. The following steps will help you to update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of HorizontalPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - VerticalPanel Widget

Introduction

The VerticalPanel widget represents a panel that lays all of its widgets out in a single vertical row.

Class Ceclaration

Following is the declaration for com.google.gwt.user.client.ui.VerticalPanel class:


Class Constructors

S.N.	Constructor & Description
1	VerticalPanel() Constructor for empty vertical Panel.

Class Methods

S.N.	Function name & Description
1	void add(Widget w) Adds a child widget.
2	Has Horizontal Alignment. Horizontal Alignment Constant get Horizontal Alignment() Gets the horizontal alignment.
3	HasVerticalAlignment.VerticalAlignmentConstant getVerticalAlignment() Gets the vertical alignment.
4	void insert(IsWidget w, int beforeIndex)
5	void insert(Widget w, int beforeIndex) Inserts a child widget before the specified index.
6	protected void onEnsureDebugId(java.lang.String baseID) Affected Elements: -# = the cell at the given index.
7	boolean remove(Widget w) Removes a child widget.
8	void set Horizontal Alignment (Has Horizontal Alignment.Horizontal Alignment Constant align) Sets the default horizontal alignment to be used for widgets added to this panel.
9	void set Vertical Alignment (Has Vertical Alignment.Vertical Alignment Constant align) Sets the default vertical alignment to be used for widgets added to this panel.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.ComplexPanel
• com.google.gwt.user.client.ui.CellPanel
• java.lang.Object

VerticalPanel Widget Example

This example will take you through simple steps to show usage of a VerticalPanel Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of VerticalPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Horizantal Split Panel Widget

Introduction

The Horizantal Split Panel widget represents a panel that arranges two widgets in a single horizontal row and allows the user to interactively change the proportion of the width dedicated to each of the two widgets. Widgets contained within a HorizontalSplitPanel will be automatically decorated with scrollbars when necessary.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.HorizontalSplitPanel class:


CSS Style Rules

Following default CSS Style rules will be applied to all the HorizontalSpiltPanel widget. You can override it as per your requirements.


Class Constructors

S.N.	Constructor & Description
1	HorizontalSplitPanel() Deprecated.
2	HorizontalSplitPanel(HorizontalSplitPanel.Resources resources) Deprecated. Creates an empty horizontal split panel.
3	HorizontalSplitPanel(HorizontalSplitPanel(HorizontalSplitPanelImages images)) Deprecated. replaced by HorizontalSplitPanel(Resources)

Class Methods

S.N.	Function name & Description
1	void add(Widget w) Deprecated. Adds a widget to a pane in the HorizontalSplitPanel.
2	protected Element getElement(int index) Deprecated. Gets the content element for the given index.
3	Widget getEndOfLineWidget() Deprecated. Gets the widget in the pane that is at the end of the line direction for the layout.
4	Widget getLeftWidget() Deprecated. Gets the widget in the left side of the panel.
5	Widget getRightWidget() Deprecated. Gets the widget in the right side of the panel.
6	protected Element getSplitElement() Deprecated. Gets the element that is acting as the splitter.
7	Widget getStartOfLineWidget() Deprecated. Gets the widget in the pane that is at the start of the line direction for the layout.
8	protected Widget getWidget(int index) Deprecated. Gets one of the contained widgets.
9	boolean isResizing() Deprecated. Indicates whether the split panel is being resized.
10	java.util.Iterator<Widget> iterator() Deprecated. Gets an iterator for the contained widgets.
11	void onBrowserEvent(Event event) Deprecated. Fired whenever a browser event is received.
12	protected void onEnsureDebugId(java.lang.String baseID) Deprecated. Affected Elements: -splitter = the container containing the splitter element. -right = the container on the right side of the splitter. -left = the container on the left side of the splitter.
13	protected void onLoad() Deprecated. This method is called immediately after a widget becomes attached to the browser's document.
14	protected void onUnload() Deprecated. This method is called immediately before a widget will be detached from the browser's document.
15	boolean remove(Widget widget) Deprecated. Removes a child widget.
16	void setEndOfLineWidget(Widget w) Deprecated. Sets the widget in the pane that is at the end of the line direction for the layout.
17	void setLeftWidget(Widget w) Deprecated. Sets the widget in the left side of the panel.
18	void setRightWidget(Widget w) Deprecated. Sets the widget in the right side of the panel.
19	void setSplitPosition(java.lang.String pos) Deprecated. Moves the position of the splitter.
20	void setStartOfLineWidget(Widget w) Deprecated. Sets the widget in the pane that is at the start of the line direction for the layout.
21	protected void setWidget(int index, Widget w) Deprecated. Sets one of the contained widgets.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• java.lang.Object

Horizontal Split Panel Widget Example

This example will take you through simple steps to show usage of a HorizontalSplitPanel Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of HorizontalSplitPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Vertical Split Panel Widget

Introduction

The Vertical Split Panel widget represents a panel that arranges two widgets in a single vertical column and allows the user to interactively change the proportion of the height dedicated to each of the two widgets. Widgets contained within a VerticalSplitterPanel will be automatically decorated with scrollbars when necessary.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.VerticalSplitPanel class:


CSS Style Rules

Following default CSS Style rules will be applied to all the VerticalSpiltPanel widget. You can override it as per your requirements.


Class Constructors

S.N.	Constructor & Description
1	VerticalSplitPanel() Deprecated.
2	VerticalSplitPanel(VerticalSplitPanel.Resources resources) Deprecated. Creates an empty vertical split panel.
3	VerticalSplitPanel(VerticalSplitPanelImages images) Deprecated. replaced by VerticalSplitPanel(Resources)

Class Methods

S.N.	Function name & Description
1	void add(Widget w) Deprecated. Adds a widget to a pane in the HorizontalSplitPanel.
2	protected Element getElement(int index) Deprecated. Gets the content element for the given index.
3	Widget getEndOfLineWidget() Deprecated. Gets the widget in the pane that is at the end of the line direction for the layout.
4	Widget getBottomWidget() Deprecated. Gets the widget in the bottom side of the panel.
5	Widget getTopWidget() Deprecated. Gets the widget in the top side of the panel.
6	protected Element getSplitElement() Deprecated. Gets the element that is acting as the splitter.
7	Widget getStartOfLineWidget() Deprecated. Gets the widget in the pane that is at the start of the line direction for the layout.
8	protected Widget getWidget(int index) Deprecated. Gets one of the contained widgets.
9	boolean isResizing() Deprecated. Indicates whether the split panel is being resized.
10	java.util.Iterator<Widget> iterator() Deprecated. Gets an iterator for the contained widgets.
11	void onBrowserEvent(Event event) Deprecated. Fired whenever a browser event is received.
12	protected void onEnsureDebugId(java.lang.String baseID) Deprecated. Affected Elements: -splitter = the container containing the splitter element. -right = the container on the right side of the splitter. -left = the container on the left side of the splitter.
13	protected void onLoad() Deprecated. This method is called immediately after a widget becomes attached to the browser's document.
14	protected void onUnload() Deprecated. This method is called immediately before a widget will be detached from the browser's document.
15	boolean remove(Widget widget) Deprecated. Removes a child widget.
16	void setEndOfLineWidget(Widget w) Deprecated. Sets the widget in the pane that is at the end of the line direction for the layout.
17	void setBottomWidget(Widget w) Deprecated. Sets the widget in the bottom side of the panel.
18	void setTopWidget(Widget w) Deprecated. Sets the widget in the top side of the panel.
19	void setSplitPosition(java.lang.String pos) Deprecated. Moves the position of the splitter.
20	void setStartOfLineWidget(Widget w) Deprecated. Sets the widget in the pane that is at the start of the line direction for the layout.
21	protected void setWidget(int index, Widget w) Deprecated. Sets one of the contained widgets.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• java.lang.Object

Vertical Split Panel Widget Example

This example will take you through simple steps to show usage of a VerticalSplitPanel Widget in GWT. The following steps will help to you update the GWT application which we created inGWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of VerticalSplitPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this this will produce the following result:

GWT - Flex Table Widget

Introduction

The Flex Table widget represents a flexible table that creates cells on demand. It can be jagged (that is, each row can contain a different number of cells) and individual cells can be set to span multiple rows or columns.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.FlowPanel class:


Class Constructors

S.N.	Constructor & Description
1	FlexTable() Constructor for empty Flex Table.

Class Methods

S.N.	Function name & Description
1	void addCell(int row) Appends a cell to the specified row.
2	int getCellCount(int row) Gets the number of cells on a given row.
3	FlexTable.FlexCellFormatter getFlexCellFormatter() Explicitly gets the FlexTable.FlexCellFormatter.
4	int getRowCount() Gets the number of rows.
5	void insertCell(int beforeRow, int beforeColumn) Inserts a cell into the FlexTable.
6	int insertRow(int beforeRow) Inserts a row into the FlexTable.
7	protected void prepareCell(int row, int column) Ensure that the cell exists.
8	protected void prepareRow(int row) Ensure that the row exists.
9	void removeAllRows() Remove all rows in this table.
10	void removeCell(int row, int col) Removes the specified cell from the table.
11	void removeCells(int row, int column, int num) Removes a number of cells from a row in the table.
12	void removeRow(int row) Removes the specified row from the table.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.HTMLTable
• java.lang.Object

Flextable Widget Example

This example will take you through simple steps to show usage of a FlexTable Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of FlexTable widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Grid Widget

Introduction

The Grid widget represents a rectangular grid that can contain text, html, or a child Widget within its cells. It must be resized explicitly to the desired number of rows and columns.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Grid class:


Class constructors

S.N.	Constructor & Description
1	Grid() Constructor for Grid.
2	Grid(int rows, int columns) Constructor for Grid with requested size.

Class Methods

S.N.	Function name & Description
1	boolean clearCell(int row, int column) Replaces the contents of the specified cell with a single space.
2	protected Element createCell() Creates a new, empty cell.
3	int getCellCount(int row) Return number of columns.
4	int getColumnCount() Gets the number of columns in this grid.
5	int getRowCount() Return number of rows.
6	int insertRow(int beforeRow) Inserts a new row into the table.
7	protected void prepareCell(int row, int column) Checks that a cell is a valid cell in the table.
8	protected void prepareColumn(int column) Checks that the column index is valid.
9	protected void prepareRow(int row) Checks that the row index is valid.
10	void removeRow(int row) Removes the specified row from the table.
11	void resize(int rows, int columns) Resizes the grid.
12	void resizeColumns(int columns) Resizes the grid to the specified number of columns.
13	void resizeRows(int rows) Resizes the grid to the specified number of rows.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.HTMLTable
• java.lang.Object

Grid Widget Example

This example will take you through simple steps to show usage of a Grid Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of Grid widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Deck Panel Widget

Introduction

The DeckPanel widget represents a panel that displays all of its child widgets in a 'deck', where only one can be visible at a time. It is used by TabPanel.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.DeckPanel class:


Class Constructors

S.N.	Constructor & Description
1	DeckPanel() Constructor for DeckPanel.

Class Methods

S.N.	Function name & Description
1	void add(Widget w) Adds a child widget.
2	int getVisibleWidget() Gets the index of the currently-visible widget.
3	void insert(IsWidget w, int beforeIndex)
4	void insert(Widget w, int beforeIndex) Inserts a child widget before the specified index.
5	boolean isAnimationEnabled() Returns true if animations are enabled, false if not.
6	boolean remove(Widget w) Removes a child widget.
7	void setAnimationEnabled(boolean enable) Enable or disable animations.
8	void showWidget(int index) Shows the widget at the specified index.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.ComplexPanel
• java.lang.Object

Deckpanel Widget Example

This example will take you through simple steps to show usage of a DeckPanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css. Body


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of DeckPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Dock Panel Widget

Introduction

The DockPanel widget represents a panel that lays its child widgets out "docked" at its outer edges, and allows its last widget to take up the remaining space in its center.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.DockPanel class:


Class Constructors

S.N.	Constructor & Description
1	DockPanel() Constructor for DockPanel.

Class Methods

S.N.	Function name & Description
1	void add(Widget widget, DockPanel.DockLayoutConstant direction) Deprecated. Adds a widget to the specified edge of the dock.
2	HasHorizontalAlignment.HorizontalAlignmentConstant getHorizontalAlignment() Deprecated. Gets the horizontal alignment.
3	HasVerticalAlignment.VerticalAlignmentConstant getVerticalAlignment() Deprecated. Gets the vertical alignment.
4	DockPanel.DockLayoutConstant getWidgetDirection(Widget w) Deprecated. Gets the layout direction of the given child widget.
5	protected void onEnsureDebugId(java.lang.String baseID) Deprecated. DockPanel supports adding more than one cell in a direction, so an integer will be appended to the end of the debug id.
6	boolean remove(Widget w) Deprecated. Removes a child widget.
7	void setCellHeight(Widget w, java.lang.String height) Deprecated. Sets the height of the cell associated with the given widget, related to the panel as a whole.
8	void set Cell Horizontal Alignment(Widget w, Has Horizontal Alignment. Horizontal Alignment Constant align) Deprecated. Sets the horizontal alignment of the given widget within its cell.
9	void set Cell Vertical Alignment (Widget w, HasVertical Alignment. Vertical Alignment Constant align) Deprecated. Sets the vertical alignment of the given widget within its cell.
10	void setCellWidth(Widget w, java.lang.String width) Deprecated. Sets the width of the cell associated with the given widget, related to the panel as a whole.
11	void set Horizontal Alignment (Has Horizontal Alignment. Horizontal Alignment Constant align) Deprecated. Sets the default horizontal alignment to be used for widgets added to this panel.
12	void setVerticalAlignment(HasVerticalAlignment.VerticalAlignmentConstant align) Deprecated. Sets the default vertical alignment to be used for widgets added to this panel.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.ComplexPanel
• com.google.gwt.user.client.ui.CellPanel
• java.lang.Object

Dockpanel Widget Example

This example will take you through simple steps to show usage of a DockPanel Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of DockPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce the following result:

GWT - HTML Panel Widget

Introduction

The HTMLPanel widget represents a panel that contains HTML, and which can attach child widgets to identified elements within that HTML.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.HTMLPanel class:


Class Constructors

S.N.	Constructor & Description
1	HTMLPanel(SafeHtml safeHtml) Initializes the panel's HTML from a given SafeHtml object.
2	HTMLPanel(java.lang.String html) Creates an HTML panel with the specified HTML contents inside a DIV element.
3	HTMLPanel(java.lang.String tag, java.lang.String html) Creates an HTML panel whose root element has the given tag, and with the specified HTML contents.

Class Methods

S.N.	Function name & Description
1	void add(Widget widget, Element elem) Adds a child widget to the panel, contained within an HTML element.
2	void add(Widget widget, java.lang.String id) Adds a child widget to the panel, contained within the HTML element specified by a given id.
3	void addAndReplaceElement(Widget widget, Element toReplace) Adds a child widget to the panel, replacing the HTML element.
4	void addAndReplaceElement(Widget widget, java.lang.String id) Adds a child widget to the panel, replacing the HTML element specified by a given id.
5	static java.lang.String createUniqueId() A helper method for creating unique IDs for elements within dynamically- generated HTML.
6	Element getElementById(java.lang.String id) Finds an element within this panel by its id.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.ComplexPanel
• java.lang.Object

Htmlpanel Widget Example

This example will take you through simple steps to show usage of a HTMLPanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.


Following is the content of the modified Style Sheet file war/HelloWorld.css.


Following is the content of the modified HTML host file war/HelloWorld.html.


Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of HTMLPanel widget.


Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, this will produce following result:

GWT - Tab Panel Widget

Introduction

The TabPanel widget represents panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them. The tabs can contain arbitrary HTML.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.TabPanel class:


Class Constructors

S.N.	Constructor & Description
1	TabPanel() Deprecated. Creates an empty tab panel.

Class Methods

S.N.	Function name & Description
1	void add(IsWidget w, IsWidget tabWidget) Deprecated. Convenience overload to allow IsWidget to be used directly.
2	void add(IsWidget w, java.lang.String tabText) Deprecated. Convenience overload to allow IsWidget to be used directly.
3	void add(IsWidget w, java.lang.String tabText, boolean asHTML) Deprecated. Convenience overload to allow IsWidget to be used directly.
4	void add(Widget w) Deprecated. Adds a child widget.
5	void add(Widget w, java.lang.String tabText) Deprecated. Adds a widget to the tab panel.
6	void add(Widget w, java.lang.String tabText, boolean asHTML) Deprecated. Adds a widget to the tab panel.
7	void add(Widget w, Widget tabWidget) Deprecated. Adds a widget to the tab panel.
8	Handler Registration add Before Selection Handler (Before Selection Handler<java.lang.Integer> handler) Deprecated. Adds a BeforeSelectionEvent handler.
9	Handler Registration add Selection Handler (Selection Handler <java.lang.Integer> handler) Deprecated. Adds a SelectionEvent handler.
10	void add Tab Listener(TabListener listener) Deprecated. Use add Before Selection Handler (com.google.gwt.event.logical.shared.Before Selection Handler) and add Selection Handler (com.google.gwt.event.logical.shared.Selection Handler) instead
11	void clear() Deprecated. Removes all child widgets.
12	protected SimplePanel createTabTextWrapper() Deprecated. Create a SimplePanel that will wrap the contents in a tab.
13	DeckPanel getDeckPanel() Deprecated. Gets the deck panel within this tab panel.
14	TabBar getTabBar() Deprecated. Gets the tab bar within this tab panel.
15	Widget getWidget(int index) Deprecated. Gets the child widget at the specified index.
16	int getWidgetCount() Deprecated. Gets the number of child widgets in this panel.
17	int getWidgetIndex(IsWidget child) Deprecated. Convenience overload to allow IsWidget to be used directly.
18	int getWidgetIndex(Widget widget) Deprecated. Gets the index of the specified child widget.
19	void insert(IsWidget widget, IsWidget tabWidget, int beforeIndex) Deprecated. Convenience overload to allow IsWidget to be used directly.
20	void insert(IsWidget widget, java.lang.String tab Text, boolean asHTML, int before Index) Deprecated. Convenience overload to allow IsWidget to be used directly.
21	void insert(IsWidget widget, java.lang.String tabText, int beforeIndex) Deprecated. Convenience overload to allow IsWidget to be used directly.
22	void insert(Widget widget, java.lang.String tabText, boolean asHTML, int beforeIndex) Deprecated. Inserts a widget into the tab panel.
23	void insert(Widget widget, java.lang.String tabText, int beforeIndex) Deprecated. Inserts a widget into the tab panel.
24	void insert(Widget widget, Widget tabWidget, int beforeIndex) Deprecated. Inserts a widget into the tab panel.
25	boolean isAnimationEnabled() Deprecated. Returns true if animations are enabled, false if not.
26	java.util.Iterator<Widget> iterator() Deprecated. Gets an iterator for the contained widgets.
27	boolean on Before Tab Selected(Sources Tab Events sender, int tab Index) Deprecated. Use Before Selection Handler.on Before Selection(com.google.gwt.event.logical.shared.Before Selection Event) instead
28	protected void onEnsureDebugId(java.lang.String baseID) Deprecated. Affected Elements: -bar = The tab bar. -bar-tab# = The element containing the content of the tab itself. -bar-tab-wrapper# = The cell containing the tab at the index. -bottom = The panel beneath the tab bar.
29	void onTabSelected(SourcesTabEvents sender, int tabIndex) Deprecated. Use SelectionHandler.onSelection(com.google.gwt.event.logical.shared.SelectionEvent) instead
30	boolean remove(int index) Deprecated. Removes the widget at the specified index.
31	boolean remove(Widget widget) Deprecated. Removes the given widget, and its associated tab.
32	void removeTabListener(TabListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by and add*Handler method instead
33	void selectTab(int index) Deprecated. Programmatically selects the specified tab and fires events.
34	void selectTab(int index, boolean fireEvents) Deprecated. Programmatically selects the specified tab.
35	void setAnimationEnabled(boolean enable) Deprecated. Enable or disable animations.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Composite
• java.lang.Object

Tab Panel Widget Example

This example will take you through simple steps to show usage of a TabPanel Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>TabPanel Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of TabPanel widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
//Create an empty tab panel
TabPanel tabPanel = new TabPanel();
//create contents for tabs of tabpanel
Label label1 = new Label("This is contents of TAB 1");
label1.setHeight("200");
Label label2 = new Label("This is contents of TAB 2");
label2.setHeight("200");
Label label3 = new Label("This is contents of TAB 3");
label3.setHeight("200");
//create titles for tabs
String tab1Title = "TAB 1";
String tab2Title = "TAB 2";
String tab3Title = "TAB 3";
//create tabs
tabPanel.add(label1, tab1Title);
tabPanel.add(label2, tab2Title);
tabPanel.add(label3, tab3Title);
//select first tab
tabPanel.selectTab(0);
//set width if tabpanel
tabPanel.setWidth("400");
// Add the widgets to the root panel.
RootPanel.get().add(tabPanel);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Composite Widget

Introduction

The Composite widget is a type of widget that can wrap another widget, hiding the wrapped widget's methods. When added to a panel, a composite behaves exactly as if the widget it wraps had been added. The composite is useful for creating a single widget out of an aggregate of multiple other widgets contained in a single panel.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.Composite class:

public abstract class Composite
extends Widget

Class Constructors

S.N.	Constructor & Description
1	Composite()

Class Methods

S.N.	Function name & Description
1	protected Widget getWidget() Provides subclasses access to the topmost widget that defines this composite.
2	protected void initWidget(Widget widget) Sets the widget to be wrapped by the composite.
3	boolean isAttached() Determines whether this widget is currently attached to the browser's document (i.e., there is an unbroken chain of widgets between this widget and the underlying browser document).
4	protected void onAttach() This method is called when a widget is attached to the browser's document.
5	void onBrowserEvent(Event event) Fired whenever a browser event is received.
6	protected void onDetach() This method is called when a widget is detached from the browser's document.
7	protected void setWidget(Widget widget) Deprecated. Use initWidget(Widget) instead

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• java.lang.Object

Composite Widget Example

This example will take you through simple steps to show usage of a Composite Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>Composite Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of Composite widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
/**
* A composite of a TextBox and a CheckBox that optionally enables it.
*/
private static class OptionalTextBox extends Composite implements
ClickHandler {
private TextBox textBox = new TextBox();
private CheckBox checkBox = new CheckBox();
/**
* Constructs an OptionalTextBox with the given caption
* on the check.
* @param caption the caption to be displayed with the check box
*/
public OptionalTextBox(String caption) {
// Place the check above the text box using a vertical panel.
VerticalPanel panel = new VerticalPanel();
// panel.setBorderWidth(1);
panel.setSpacing(10);
panel.add(checkBox);
panel.add(textBox);
textBox.setWidth("200");
// Set the check box's caption, and check it by default.
checkBox.setText(caption);
checkBox.setValue(true);
checkBox.addClickHandler(this);
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.add(panel);
// All composites must call initWidget() in their constructors.
initWidget(decoratorPanel);
}
public void onClick(ClickEvent event) {
if (event.getSource() == checkBox) {
// When the check box is clicked,
//update the text box's enabled state.
textBox.setEnabled(checkBox.getValue());
}
}
}
public void onModuleLoad() {
// Create an optional text box and add it to the root panel.
OptionalTextBox otb = new OptionalTextBox("Check this to enable me");
RootPanel.get().add(otb);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Simple Panel Widget

Introduction

The SimplePanel widget represents a base class for panels that contain only one widget.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.SimplePanel class:

public class SimplePanel
extends Panel
implements HasOneWidget

Class Constructors

S.N.	Constructor & Description
1	SimplePanel() Creates an empty panel that uses a DIV for its contents.
2	protected SimplePanel(Element elem) Creates an empty panel that uses the specified browser element for its contents.

Class Methods

S.N.	Function name & Description
1	void add(Widget w) Adds a widget to this panel.
2	protected Element getContainerElement() Override this method to specify that an element other than the root element be the container for the panel's child widget.
3	Widget getWidget() Gets the panel's child widget.
4	java.util.Iterator<Widget> iterator() Gets an iterator for the contained widgets.
5	boolean remove(Widget w) Removes a child widget.
6	void setWidget(IsWidget w) Set the only widget of the receiver, replacing the previous widget if there was one.
7	void setWidget(Widget w) Sets this panel's widget.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• java.lang.Object

Simple Panel Widget Example

This example will take you through simple steps to show usage of a SimplePanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>SimplePanel Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of SimplePanel widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Create a Simple Panel
SimplePanel simplePanel = new SimplePanel();
Label label = new Label("A Simple Label.");
//add label to simple panel
simplePanel.add(label);
//set height and width of simple panel
simplePanel.setHeight("200");
simplePanel.setWidth("200");
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.add(simplePanel);
// Add the widgets to the root panel.
RootPanel.get().add(decoratorPanel);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Scroll Panel Widget

Introduction

The Scroll Panel widget represents a simple panel that wraps its contents in a scrollable area.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.ScrollPanel class:

public class ScrollPanel
extends SimplePanel
implements SourcesScrollEvents, HasScrollHandlers,
RequiresResize, ProvidesResize

Class Constructors

S.N.	Constructor & Description
1	ScrollPanel() Creates an empty scroll panel.
2	ScrollPanel(Widget child) Creates a new scroll panel with the given child widget.

Class methods

S.N.	Function name & Description
1	HandlerRegistration addScrollHandler(ScrollHandler handler) Adds a ScrollEvent handler.
2	void addScrollListener(ScrollListener listener) Deprecated. Use addScrollHandler(com.google.gwt.event.dom.client.ScrollHandler) instead
3	void ensureVisible(UIObject item) Ensures that the specified item is visible, by adjusting the panel's scroll position.
4	protected Element getContainerElement() Override this method to specify that an element other than the root element be the container for the panel's child widget.
5	int getHorizontalScrollPosition() Gets the horizontal scroll position.
6	int getScrollPosition() Gets the vertical scroll position.
7	void onResize() This method must be called whenever the implementor's size has been modified.
8	void removeScrollListener(ScrollListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by addScrollHandler(com.google.gwt.event.dom.client.ScrollHandler) instead
9	void scrollToBottom() Scroll to the bottom of this panel.
10	void scrollToLeft() Scroll to the far left of this panel.
11	void scrollToRight() Scroll to the far right of this panel.
12	void scrollToTop() Scroll to the top of this panel.
13	void setAlwaysShowScrollBars(boolean alwaysShow) Sets whether this panel always shows its scroll bars, or only when necessary.
14	void setHeight(java.lang.String height) Sets the object's height.
15	void setHorizontalScrollPosition(int position) Sets the horizontal scroll position.
16	void setScrollPosition(int position) Sets the vertical scroll position.
17	void setSize(java.lang.String width, java.lang.String height) Sets the object's size.
18	void setWidth(java.lang.String width) Sets the object's width.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.SimplePanel
• java.lang.Object

Scroll Panel Widget Example

This example will take you through simple steps to show usage of a ScrollPanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>ScrollPanel Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of ScrollPanel widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Create scrollable text
HTML contents = new HTML("This is a ScrollPanel."
+" By putting some fairly large contents in the middle"
+" and setting its size explicitly, it becomes a scrollable area"
+" within the page, but without requiring the use of an IFRAME."
+" Here's quite a bit more meaningless text that will serve primarily"
+" to make this thing scroll off the bottom of its visible area."
+" Otherwise, you might have to make it really, really"
+" small in order to see the nifty scroll bars!");
//create scrollpanel with content
ScrollPanel scrollPanel = new ScrollPanel(contents);
scrollPanel.setSize("400px", "100px");
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.add(scrollPanel);
// Add the widgets to the root panel.
RootPanel.get().add(decoratorPanel);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Focus Panel Widget

Introduction

The Focus Panel widget represents a simple panel that makes its contents focusable, and adds the ability to catch mouse and keyboard events.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.FocusPanel class:

public class FocusPanel
extends SimplePanel
implements HasFocus, SourcesClickEvents,
SourcesMouseEvents, SourcesMouseWheelEvents,
HasAllMouseHandlers, HasClickHandlers,
HasDoubleClickHandlers, HasAllKeyHandlers,
HasAllFocusHandlers

Class Constructors

S.N.	Constructor & Description
1	FocusPanel() Creates an empty focus panel.
2	FocusPanel(Widget child) Creates a new focus panel with the given child widget.

Class Methods

S.N.	Function name & Description
1	HandlerRegistration addBlurHandler(BlurHandler handler) Adds a BlurEvent handler.
2	HandlerRegistration addClickHandler(ClickHandler handler) Adds a ClickEvent handler.
3	void addClickListener(ClickListener listener) Deprecated. Use addClickHandler(com.google.gwt.event.dom.client.ClickHandler) instead
4	HandlerRegistration addDoubleClickHandler(DoubleClickHandler handler) Adds a DoubleClickEvent handler.
5	HandlerRegistration addFocusHandler(FocusHandler handler) Adds a FocusEvent handler.
6	void addFocusListener(FocusListener listener) Deprecated. Use addFocusHandler(com.google.gwt.event.dom.client.FocusHandler) instead
7	void addKeyboardListener(KeyboardListener listener) Deprecated. Use addKeyDownHandler(com.google.gwt.event.dom.client.KeyDownHandler), addKeyUpHandler(com.google.gwt.event.dom.client.KeyUpHandler) and addKeyPressHandler(com.google.gwt.event.dom.client.KeyPressHandler) instead
8	HandlerRegistration addKeyDownHandler(KeyDownHandler handler) Adds a KeyDownEvent handler.
9	HandlerRegistration addKeyPressHandler(KeyPressHandler handler) Adds a KeyPressEvent handler.
10	HandlerRegistration addKeyUpHandler(KeyUpHandler handler) Adds a KeyUpEvent handler.
11	HandlerRegistration addMouseDownHandler(MouseDownHandler handler) Adds a MouseDownEvent handler.
12	void addMouseListener(MouseListener listener) Deprecated. Use addMouseOverHandler(com.google.gwt.event.dom.client.MouseOverHandler), addMouseMoveHandler(com.google.gwt.event.dom.client.MouseMoveHandler), addMouseDownHandler(com.google.gwt.event.dom.client.MouseDownHandler), addMouseUpHandler(com.google.gwt.event.dom.client.MouseUpHandler) and addMouseOutHandler(com.google.gwt.event.dom.client.MouseOutHandler) instead
13	HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) Adds a MouseMoveEvent handler.
14	HandlerRegistration addMouseOutHandler(MouseOutHandler handler) Adds a MouseOutEvent handler.
15	HandlerRegistration addMouseOverHandler(MouseOverHandler handler) Adds a MouseOverEvent handler.
16	HandlerRegistration addMouseUpHandler(MouseUpHandler handler) Adds a MouseUpEvent handler.
17	HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler) Adds a MouseWheelEvent handler.
18	void addMouseWheelListener(MouseWheelListener listener) Deprecated. Use addMouseWheelHandler(com.google.gwt.event.dom.client.MouseWheelHandler) instead
19	int getTabIndex() Gets the widget's position in the tab index.
20	void removeClickListener(ClickListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by addClickHandler(com.google.gwt.event.dom.client.ClickHandler) instead
21	void removeFocusListener(FocusListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by addFocusHandler(com.google.gwt.event.dom.client.FocusHandler) instead
22	void removeKeyboardListener(KeyboardListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by an add*Handler method instead
23	void removeMouseListener(MouseListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by an add*Handler method instead
24	void removeMouseWheelListener(MouseWheelListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by addMouseWheelHandler(com.google.gwt.event.dom.client.MouseWheelHandler) instead
25	void setAccessKey(char key) Sets the widget's 'access key'.
26	void setFocus(boolean focused) Explicitly focus/unfocus this widget.
27	void setTabIndex(int index) Sets the widget's position in the tab index.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.SimplePanel
• java.lang.Object

Focus Panel Widget Example

This example will take you through simple steps to show usage of a FocusPanel Widget in GWT. Follow the following steps to update the GWT application we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>FocusPanel Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of FocusPanel widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Create text
HTML contents = new HTML("This is a FocusPanel."
+" Click on the panel and it will attain focus.");
//create focus panel with content
FocusPanel focusPanel = new FocusPanel(contents);
focusPanel.setSize("400px", "100px");
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.add(focusPanel);
// Add the widgets to the root panel.
RootPanel.get().add(decoratorPanel);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Form Panel Widget

Introduction

The Form Panel widget represents a panel that wraps its contents in an HTML <FORM> element.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.FormPanel class:

public class FormPanel
extends SimplePanel
implements FiresFormEvents,
com.google.gwt.user.client.ui.impl.FormPanelImplHost

Class Constructors

S.N.	Constructor & Description
1	FormPanel() Creates a new FormPanel.
2	protected FormPanel(Element element) This constructor may be used by subclasses to explicitly use an existing element.
3	protected FormPanel(Element element, boolean createIFrame) This constructor may be used by subclasses to explicitly use an existing element.
4	FormPanel(NamedFrame frameTarget) Creates a FormPanel that targets a NamedFrame.
5	FormPanel(java.lang.String target) Creates a new FormPanel.

Class Methods

S.N.	Function name & Description
1	void add Form Handler (FormHandler handler) Deprecated. Use add Submit Complete Handler (com.google.gwt.user.client.ui.Form Panel.Submit Complete Handler) and add Submit Handler (com.google.gwt.user.client.ui.Form Panel.Submit Handler) instead
2	Handler Registration addSubmit Complete Handler (FormPanel.SubmitCompleteHandler handler) Adds a FormPanel.Submit Complete Event handler.
3	HandlerRegistration addSubmitHandler(FormPanel.SubmitHandler handler) Adds a FormPanel.SubmitEvent handler.
4	java.lang.String getAction() Gets the 'action' associated with this form.
5	java.lang.String getEncoding() Gets the encoding used for submitting this form.
6	java.lang.String getMethod() Gets the HTTP method used for submitting this form.
7	java.lang.String getTarget() Gets the form's 'target'.
8	protected void onAttach() This method is called when a widget is attached to the browser's document.
9	protected void onDetach() This method is called when a widget is detached from the browser's document.
10	boolean onFormSubmit() Fired when a form is submitted.
11	void onFrameLoad()
12	void removeFormHandler(FormHandler handler) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by and add*Handler method instead
13	void reset() Resets the form, clearing all fields.
14	void setAction(java.lang.String url) Sets the 'action' associated with this form.
15	void setEncoding(java.lang.String encodingType) Sets the encoding used for submitting this form.
16	void setMethod(java.lang.String method) Sets the HTTP method used for submitting this form.
17	void submit() Submits the form.
18	static FormPanel wrap(Element element) Creates a FormPanel that wraps an existing <form> element.
19	static FormPanel wrap(Element element, boolean createIFrame) Creates a FormPanel that wraps an existing <form> element.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.SimplePanel
• java.lang.Object

Formpanel Widget Example

This example will take you through simple steps to show usage of a FormPanel Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>FormPanel Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of FormPanel widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.FileUpload;
import com.google.gwt.user.client.ui.FormPanel;
import com.google.gwt.user.client.ui.FormPanel.SubmitCompleteEvent;
import com.google.gwt.user.client.ui.FormPanel.SubmitEvent;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// Create a FormPanel and point it at a service.
final FormPanel form = new FormPanel();
form.setAction("/myFormHandler");
// Because we're going to add a FileUpload widget,
// we'll need to set the form to use the POST method,
// and multipart MIME encoding.
form.setEncoding(FormPanel.ENCODING_MULTIPART);
form.setMethod(FormPanel.METHOD_POST);
// Create a panel to hold all of the form widgets.
VerticalPanel panel = new VerticalPanel();
panel.setSpacing(10);
form.setWidget(panel);
// Create a TextBox, giving it a name so that it will be submitted.
final TextBox tb = new TextBox();
tb.setWidth("220");
tb.setName("textBoxFormElement");
panel.add(tb);
// Create a ListBox, giving it a name and
// some values to be associated with its options.
ListBox lb = new ListBox();
lb.setName("listBoxFormElement");
lb.addItem("item1", "item1");
lb.addItem("item2", "item2");
lb.addItem("item3", "item3");
lb.setWidth("220");
panel.add(lb);
// Create a FileUpload widget.
FileUpload upload = new FileUpload();
upload.setName("uploadFormElement");
panel.add(upload);
// Add a 'submit' button.
panel.add(new Button("Submit", new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
form.submit();
}
}));
// Add an event handler to the form.
form.addSubmitHandler(new FormPanel.SubmitHandler() {
@Override
public void onSubmit(SubmitEvent event) {
// This event is fired just before the form is submitted.
// We can take this opportunity to perform validation.
if (tb.getText().length() == 0) {
Window.alert("The text box must not be empty");
event.cancel();
}
}
});
form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
@Override
public void onSubmitComplete(SubmitCompleteEvent event) {
// When the form submission is successfully completed,
// this event is fired. Assuming the service returned
// a response of type text/html, we can get the result
// here.
Window.alert(event.getResults());
}
});
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.add(form);
// Add the widgets to the root panel.
RootPanel.get().add(decoratorPanel);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Popup Panel Widget

Introduction

The PopupPanel widget represents a panel that can pop up over other widgets. It overlays the browser's client area (and any previously-created popups).

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.PopupPanel class:

public class PopupPanel
extends SimplePanel
implements SourcesPopupEvents, EventPreview,
HasAnimation, HasCloseHandlers<PopupPanel>

Class Constructors

S.N.	Constructor & Description
1	PopupPanel() Creates an empty popup panel.
2	PopupPanel(boolean autoHide) Creates an empty popup panel, specifying its auto-hide property.
3	PopupPanel(boolean autoHide, boolean modal) Creates an empty popup panel, specifying its auto-hide and modal properties.

Class Methods

S.N.	Function name & Description
1	void addAutoHidePartner(Element partner) Mouse events that occur within an autoHide partner will not hide a panel set to autoHide.
2	HandlerRegistration addCloseHandler(CloseHandler handler) Adds a CloseEvent handler.
3	void addPopupListener(PopupListener listener) Deprecated. Use addCloseHandler(com.google.gwt.event.logical.shared.CloseHandler) instead
4	void center() Centers the popup in the browser window and shows it.
5	protected Element getContainerElement() Override this method to specify that an element other than the root element be the container for the panel's child widget.
6	protected Element getGlassElement() Get the glass element used by this PopupPanel.
7	java.lang.String getGlassStyleName() Gets the style name to be used on the glass element.
8	int getOffsetHeight() Gets the panel's offset height in pixels.
9	int getOffsetWidth() Gets the panel's offset width in pixels.
10	int getPopupLeft() Gets the popup's left position relative to the browser's client area.
11	int getPopupTop() Gets the popup's top position relative to the browser's client area.
12	protected Element getStyleElement() Template method that returns the element to which style names will be applied.
13	java.lang.String getTitle() Gets the title associated with this object.
14	void hide() Hides the popup and detaches it from the page.
15	void hide(boolean autoClosed) Hides the popup and detaches it from the page.
16	boolean isAnimationEnabled() Returns true if animations are enabled, false if not.
17	boolean isAutoHideEnabled() Returns true if the popup should be automatically hidden when the user clicks outside of it.
18	boolean isAutoHideOnHistoryEventsEnabled() Returns true if the popup should be automatically hidden when the history token changes, such as when the user presses the browser's back button.
19	boolean isGlassEnabled() Returns true if a glass element will be displayed under the PopupPanel.
20	boolean isModal() Returns true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored.
21	boolean isPreviewingAllNativeEvents() Returns true if the popup should preview all native events, even if the event has already been consumed by another popup.
22	boolean isShowing() Determines whether or not this popup is showing.
23	boolean isVisible() Determines whether or not this popup is visible.
24	boolean onEventPreview(Event event) Deprecated. Use onPreviewNativeEvent(com.google.gwt.user.client.Event.NativePreviewEvent) instead
25	boolean onKeyDownPreview(char key, int modifiers) Deprecated. Use onPreviewNativeEvent(com.google.gwt.user.client.Event.NativePreviewEvent) instead
26	boolean onKeyPressPreview(char key, int modifiers) Deprecated. Use onPreviewNativeEvent(com.google.gwt.user.client.Event.NativePreview
27	boolean onKeyUpPreview(char key, int modifiers) Deprecated. Use onPreviewNativeEvent(com.google.gwt.user.client.Event.NativePreviewEvent) instead
28	protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
29	protected void onUnload() This method is called immediately before a widget will be detached from the browser's document.
30	void removeAutoHidePartner(Element partner) Remove an autoHide partner.
31	void removePopupListener(PopupListener listener) Deprecated. Use the HandlerRegistration.removeHandler() method on the object returned by addCloseHandler(com.google.gwt.event.logical.shared.CloseHandler) instead
32	void setAnimationEnabled(boolean enable) Enable or disable animations.
33	void setAutoHideEnabled(boolean autoHide) Enable or disable the autoHide feature.
34	void setAutoHideOnHistoryEventsEnabled(boolean enabled) Enable or disable autoHide on history change events.
35	void setGlassEnabled(boolean enabled) When enabled, the background will be blocked with a semi-transparent pane the next time it is shown.
36	void setGlassStyleName(java.lang.String glassStyleName) Sets the style name to be used on the glass element.
37	void setHeight(java.lang.String height) Sets the height of the panel's child widget.
38	void setModal(boolean modal) When the popup is modal, keyboard or mouse events that do not target the PopupPanel or its children will be ignored.
39	void setPopupPosition(int left, int top) Sets the popup's position relative to the browser's client area.
40	void setPopupPositionAndShow(PopupPanel.PositionCallback callback) Sets the popup's position using a PopupPanel.PositionCallback, and shows the popup.
41	void setPreviewingAllNativeEvents(boolean previewAllNativeEvents) When enabled, the popup will preview all native events, even if another popup was opened after this one.
42	void setTitle(java.lang.String title) Sets the title associated with this object.
43	void setVisible(boolean visible) Sets whether this object is visible.
44	void setWidget(Widget w) Sets this panel's widget.
45	void setWidth(java.lang.String width) Sets the width of the panel's child widget.
46	void show() Shows the popup and attach it to the page.
47	void showRelativeTo(UIObject target) Normally, the popup is positioned directly below the relative target, with its left edge aligned with the left edge of the target.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.SimplePanel
• java.lang.Object

Popuppanel Widget Example

This example will take you through simple steps to show usage of a PopupPanel Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptorsrc/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-PopupPanel {
border: 3px solid #000000;
padding: 3px;
background: white;
}
.gwt-PopupPanelGlass {
background-color: #000;
opacity: 0.3;
filter: alpha(opacity=30);
}
.gwt-PopupPanel .popupContent {
border: none;
padding: 3px;
background: gray;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>PopupPanel Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of PopupPanel widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
private static class MyPopup extends PopupPanel {
public MyPopup() {
// PopupPanel's constructor takes 'auto-hide' as its boolean
// parameter. If this is set, the panel closes itself
// automatically when the user clicks outside of it.
super(true);
// PopupPanel is a SimplePanel, so you have to set it's widget
// property to whatever you want its contents to be.
setWidget(new Label("Click outside of this popup to close it"));
}
}
public void onModuleLoad() {
Button b1 = new Button("Click me to show popup");
b1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// Instantiate the popup and show it.
new MyPopup().show();
}
});
Button b2 = new Button("Click me to show popup partway"
+" across the screen");
b2.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// Create the new popup.
final MyPopup popup = new MyPopup();
// Position the popup 1/3rd of the way down and across
// the screen, and show the popup. Since the position
// calculation is based on the offsetWidth and offsetHeight
// of the popup, you have to use the
// setPopupPositionAndShow(callback) method. The alternative
// would be to call show(), calculate the left and
// top positions, and call setPopupPosition(left, top).
// This would have the ugly side effect of the popup jumping
// from its original position to its new position.
popup.setPopupPositionAndShow(new PopupPanel.PositionCallback(){
public void setPosition(int offsetWidth, int offsetHeight) {
int left = (Window.getClientWidth() - offsetWidth) / 3;
int top = (Window.getClientHeight() - offsetHeight) / 3;
popup.setPopupPosition(left, top);
}
});
}
});
VerticalPanel panel = new VerticalPanel();
panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panel.setSpacing(10);
panel.add(b1);
panel.add(b2);
DecoratorPanel decoratorPanel = new DecoratorPanel();
decoratorPanel.add(panel);
// Add the widgets to the root panel.
RootPanel.get().add(decoratorPanel);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

GWT - Dialog Box Widget

Introduction

The DialogBox widget represents a form of popup that has a caption area at the top and can be dragged by the user. Unlike a PopupPanel, calls to PopupPanel.setWidth(String) and PopupPanel.setHeight(String) will set the width and height of the dialog box itself, even if a widget has not been added as yet.

Class Declaration

Following is the declaration for com.google.gwt.user.client.ui.DialogBox class:

public class DialogBox
extends DecoratedPopupPanel
implements HasHTML, HasSafeHtml, MouseListener

Class Constructors

S.N.	Constructor & Description
1	DialogBox() Creates an empty dialog box.
2	DialogBox(boolean autoHide) Creates an empty dialog box, specifying its auto-hide property.
3	DialogBox(boolean autoHide, boolean modal) Creates an empty dialog box, specifying its auto-hide and modal properties.

Class Methods

S.N.	Function name & Description
1	protected void beginDragging(MouseDownEvent event) Called on mouse down in the caption area, begins the dragging loop by turning on event capture.
2	protected void continueDragging(MouseMoveEvent event) Called on mouse move in the caption area, continues dragging if it was started by beginDragging(com.google.gwt.event.dom.client.MouseDownEvent).
3	protected void doAttachChildren() If a widget contains one or more child widgets that are not in the logical widget hierarchy (the child is physically connected only on the DOM level), it must override this method and call Widget.on Attach() for each of its child widgets.
4	protected void doDetachChildren() If a widget contains one or more child widgets that are not in the logical widget hierarchy (the child is physically connected only on the DOM level), it must override this method and call Widget.onDetach() for each of its child widgets.
5	protected void endDragging(MouseUpEvent event) Called on mouse up in the caption area, ends dragging by ending event capture.
6	DialogBox.Caption getCaption() Provides access to the dialog's caption.
7	java.lang.String getHTML() Gets this object's contents as HTML.
8	java.lang.String getText() Gets this object's text.
9	void hide() Hides the popup and detaches it from the page.
10	void onBrowserEvent(Event event) Fired whenever a browser event is received.
11	protected void onEnsureDebugId(java.lang.String baseID) Affected Elements: -caption = text at the top of the DialogBox. -content = the container around the content.
12	void on Mouse Down(Widget sender, int x, int y) Deprecated. Use begin Dragging (com.google.gwt.event.dom.client.Mouse Down Event) and get Caption() instead
13	void on Mouse Enter(Widget sender) Deprecated. Use Has Mouse Over Handlers. add Mouse Over Handler (com.google.gwt.event.dom.client.Mouse Over Handler) instead
14	void onMouseLeave(Widget sender) Deprecated. Use Has Mouse Out Handlers.add Mouse Out Handler (com.google.gwt.event.dom.client.Mouse Out Handler) instead
15	void onMouseMove(Widget sender, int x, int y) Deprecated. Use continueDragging(com.google.gwt.event.dom.client.MouseMoveEvent) and getCaption() instead
16	void onMouseUp(Widget sender, int x, int y) Deprecated. Use endDragging(com.google.gwt.event.dom.client.MouseUpEvent) and getCaption() instead
17	protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
18	void setHTML(SafeHtml html) Sets the html string inside the caption.
19	void setHTML(java.lang.String html) Sets the html string inside the caption.
20	void setText(java.lang.String text) Sets the text inside the caption.
21	void show() Shows the popup and attach it to the page.

Methods Inherited

This class inherits methods from the following classes:

• com.google.gwt.user.client.ui.UIObject
• com.google.gwt.user.client.ui.Widget
• com.google.gwt.user.client.ui.Panel
• com.google.gwt.user.client.ui.SimplePanel
• com.google.gwt.user.client.ui.PopupPanel
• com.google.gwt.user.client.ui.DecoratedPopupPanel
• java.lang.Object

Dialogbox Widget Example

This example will take you through simple steps to show usage of a DialogBox Widget in GWT. The following steps will help to you update the GWT application which we created in GWT - Create Application chapter:

Step	Description
1	Create a project with a name HelloWorld under a package com.jtc as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.javaas explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

Following is the content of the modified module descriptor src/com.jtc/HelloWorld.gwt.xml.

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.jtc.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
</module>

Following is the content of the modified Style Sheet file war/HelloWorld.css.

body{
text-align: center;
font-family: verdana, sans-serif;
}
h1{
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-DialogBox .Caption {
background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
padding: 4px 4px 4px 8px;
cursor: default;
border-bottom: 1px solid #bbbbbb;
border-top: 5px solid #d0e4f6;
}
.gwt-DialogBox .dialogContent {
}
.gwt-DialogBox .dialogMiddleCenter {
padding: 3px;
background: white;
}
.gwt-DialogBox .dialogBottomCenter {
background: url(images/hborder.png) repeat-x 0px -4px;
-background: url(images/hborder_ie6.png) repeat-x 0px -4px;
}
.gwt-DialogBox .dialogMiddleLeft {
background: url(images/vborder.png) repeat-y;
}
.gwt-DialogBox .dialogMiddleRight {
background: url(images/vborder.png) repeat-y -4px 0px;
-background: url(images/vborder_ie6.png) repeat-y -4px 0px;
}
.gwt-DialogBox .dialogTopLeftInner {
width: 5px;
zoom: 1;
}
.gwt-DialogBox .dialogTopRightInner {
width: 8px;
zoom: 1;
}
.gwt-DialogBox .dialogBottomLeftInner {
width: 5px;
height: 8px;
zoom: 1;
}
.gwt-DialogBox .dialogBottomRightInner {
width: 5px;
height: 8px;
zoom: 1;
}
.gwt-DialogBox .dialogTopLeft {
background: url(images/corner.png) no-repeat -13px 0px;
-background: url(images/corner_ie6.png) no-repeat -13px 0px;
}
.gwt-DialogBox .dialogTopRight {
background: url(images/corner.png) no-repeat -18px 0px;
-background: url(images/corner_ie6.png) no-repeat -18px 0px;
}
.gwt-DialogBox .dialogBottomLeft {
background: url(images/corner.png) no-repeat 0px -15px;
-background: url(images/corner_ie6.png) no-repeat 0px -15px;
}
.gwt-DialogBox .dialogBottomRight {
background: url(images/corner.png) no-repeat -5px -15px;
-background: url(images/corner_ie6.png) no-repeat -5px -15px;
}
html>body .gwt-DialogBox {
}
* html .gwt-DialogBox .dialogTopLeftInner {
width: 5px;
overflow: hidden;
}
* html .gwt-DialogBox .dialogTopRightInner {
width: 8px;
overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomLeftInner {
width: 5px;
height: 8px;
overflow: hidden;
}
* html .gwt-DialogBox .dialogBottomRightInner {
width: 8px;
height: 8px;
overflow: hidden;
}

Following is the content of the modified HTML host file war/HelloWorld.html.

<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>DialogBox Widget Demonstration</h1>
<div id="gwtContainer"></div>
</body>
</html>

Let us have following content of Java file src/com.jtc/HelloWorld.java which will demonstrate use of DialogBox widget.

package com.jtc.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
private static class MyDialog extends DialogBox {
public MyDialog() {
// Set the dialog box's caption.
setText("My First Dialog");
// Enable animation.
setAnimationEnabled(true);
// Enable glass background.
setGlassEnabled(true);
// DialogBox is a SimplePanel, so you have to set its widget
// property to whatever you want its contents to be.
Button ok = new Button("OK");
ok.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
MyDialog.this.hide();
}
});
Label label = new Label("This is a simple dialog box.");
VerticalPanel panel = new VerticalPanel();
panel.setHeight("100");
panel.setWidth("300");
panel.setSpacing(10);
panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panel.add(label);
panel.add(ok);
setWidget(panel);
}
}
public void onModuleLoad() {
Button b = new Button("Click me");
b.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
// Instantiate the dialog box and show it.
MyDialog myDialog = new MyDialog();
int left = Window.getClientWidth()/ 2;
int top = Window.getClientHeight()/ 2;
myDialog.setPopupPosition(left, top);
myDialog.show();
}
});
RootPanel.get().add(b);
}
}

Once you are ready with all the changes done, let us compile and run the application in development mode as we did in GWT - Create Application chapter. If everything is fine with your application, then this will produce the following result:

« Previous | 1 | 2 | 3 | Next »

---

---