GWT widgets and their underlying HTML elements

In GWT you often work on the Widget or Panel level when composing your UI’s. As I touched on in a recent post on document flow, each of these underlying widgets are built using a basic html element that affects the way they content is displayed on the screen.

Here’s a quick rundown on GWT widgets and what they map to in the HTML world:

Widget Underlying Element Display Type Notes
Anchor, Hyperlink a inline
Button, PushButton, ToggleButton button inline
FlowPanel div block A general stand-in for a div when it will only ever hold widgets. If you need to hold html too, consider the HTMLPanel.
HorizontalPanel table table Never use this widget.
HTMLPanel div or span (see notes) block or inline The HTMLPanel widget is a special widget that supports arbitrary html and widgets. It is normally used in in tandem with ui.xml templates. Out of the box, it is represented
as a div, but can be be implemented using any html element by using the “tag” attribute.
PopupPanel div absolutly positioned block Overlaid over existing document flow
SimplePanel div block A div with restrictions of only holding a single element.
SuggestBox input inline
TextArea textarea inline
TextBox input inline
VerticalPanel table table Never use this widget.
This entry was posted in Google Web Toolkit and tagged , . Bookmark the permalink.

Comments are closed.