At this point, we've touched on some of the things we'd like myCRM to do and how we'd like it to look. Now we're ready to start building the user interface using smartGWT's layout containers and widgets. In this post, we'll:

Select the smartGWT layout containers needed to divide the browser window into regions

Implement the smartGWT layout containers

Test the application in development mode

1. Select the smartGWT layout containers

First, take a look at the smartGWT Showcase and the types of widgets that you can use to manage layout. This is analogous to laying out your web page in HTML using nested div elements or tables. For myCRM, we'll use a combination of nested horizontal and vertical layout containers.

smartGWT uses a default theme called "Enterprise Gray", later on we'll look at how to change the default theme and how to modify the appearance of widgets using CSS.

2. Implement the smartGWT layout containers

In the area at the top of the browser window we've decided to place a masthead. A masthead is where you place important information, like the name of the application and a logo. Most of the UI is displayed as soon as myCRM starts up so for now we'll implement our widgets in the onModuleLoad method of the application's entry point class.