GWT Tutorial – Shell


December 5, 2013 Maithilish

Chapter 3. Shell

This chapter explains the layout of Fins.

3.1. Design UI

Fins Layout
Figure 3.1. Fins Layout


Layout is divided into 4 parts.
  1. Logo bar at top
  2. Adjustable Menu bar at left
  3. Status bar at bottom
  4. Tabbed content area to display selected menu in tabs
In last chapter, we added a Label to RootPanel in onLoadModule(). Many of the GWT tutorials and also some of the demo applications to adds bunch of widgets directly to RootPanel. As application grows in size this method becomes too cumbersome to manage.
To manage the complexity, it is better to extract the main layout components of our application and compose them into a custom widget. We call this custom widget as FinsShell and attach FinsShell to RootPanel, which holds nothing else except FinsShell.

FinsShell inturn holds four widgets.

  • GWT Label to display the title and another one to display status message.
  • a custom widget to act as Menu
  • a custom widget for ContentPanel which displays the content in a tabs
This UI design follows a simple strategy – for extremely simple components use GWT widgets directly else compose them into custom widgets. We explain how to compose custom widgets from GWT widgets in next section.