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