Layout the User Interface
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.
So let's remove the "Hello, World" code and then add the following:
...
public class myCRM implements EntryPoint {
private VLayout mainLayout;
private HLayout mastheadLayout;
public void onModuleLoad() {
GWT.log("init OnLoadModule()...", null);
// get rid of scroll bars, and clear out the window's built-in margin,
// because we want to take advantage of the entire client area
Window.enableScrolling(false);
Window.setMargin("0px");
// initialise the main layout container
mainLayout = new VLayout();
mainLayout.setWidth100();
mainLayout.setHeight100();
// initialise the masthead layout container
mastheadLayout = new HLayout();
mastheadLayout.setHeight("58px");
mastheadLayout.setBackgroundColor("#C3D9FF");
// initialise the masthead label
Label mastheadLabel = new Label();
mastheadLabel.setContents("Masthead");
mastheadLabel.setAlign(Alignment.CENTER);
mastheadLabel.setOverflow(Overflow.HIDDEN);
// add the masthead label to the masthead layout container
mastheadLayout.addMember(mastheadLabel);
// add the masthead layout container to the main layout container
mainLayout.addMember(mastheadLayout);
// add the main layout container to GWT's root panel
RootLayoutPanel.get().add(mainLayout);
}
}
We now have an area at the top of the browser window where we can place important information, like a logo and the name of the application.
We also want to add layout containers for an Application menu, a Navigation pane and a Context area. But, before we do that lets move the code for the Masthead into a class.
package au.org.myCRM.client.ui.widgets;
import com.google.gwt.core.client.GWT;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;
public class Masthead extends HLayout {
private static final int MASTHEAD_HEIGHT = 58;
Label label;
public Masthead() {
super();
GWT.log("init Masthead()...", null);
// initialise the layout container
this.setHeight(MASTHEAD_HEIGHT);
this.setBackgroundColor("#C3D9FF");
// initialise the masthead label
label = new Label();
label.setContents("Masthead");
label.setAlign(Alignment.CENTER);
label.setOverflow(Overflow.HIDDEN);
// add the label to the layout container
this.addMember(label);
}
}
Now lets create new classes for the Application menu:
...
public class ApplicationMenu extends HLayout {
private static final int APPLICATION_MENU_HEIGHT = 27;
Label label;
public ApplicationMenu() {
super();
GWT.log("init Application Menu()...", null);
// initialise the layout container
this.setHeight(APPLICATION_MENU_HEIGHT);
this.setBackgroundColor("#4096EE");
// initialise the application menu label
label = new Label();
label.setContents("Application Menu");
label.setAlign(Alignment.CENTER);
label.setOverflow(Overflow.HIDDEN);
// add the label to the layout container
this.addMember(label);
}
}
Navigation pane:
package au.org.myCRM.client.ui.widgets;
import com.google.gwt.core.client.GWT;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.VLayout;
public class NavigationPane extends VLayout {
private static final int WEST_WIDTH = 200;
Label label;
public NavigationPane() {
super();
GWT.log("init Navigation Pane()...", null);
// initialise the layout container
this.setWidth(WEST_WIDTH);
this.setBackgroundColor("#3F4C6B");
this.setShowResizeBar(true);
// initialise the navigation pane label
label = new Label();
label.setContents("Navigation Pane");
label.setAlign(Alignment.CENTER);
label.setOverflow(Overflow.HIDDEN);
// add the label to the layout container
this.addMember(label);
}
}
and the Context area:
...
public class ContextArea extends VLayout {
Label label;
public ContextArea() {
super();
GWT.log("init Context Area()...", null);
// initialise the layout container
this.setWidth("*");
this.setBackgroundColor("#EEEEEE");
// initialise the context area label
label = new Label();
label.setContents("Context Area");
label.setAlign(Alignment.CENTER);
label.setOverflow(Overflow.HIDDEN);
// add the label to the layout container
this.addMember(label);
}
}
Then we need to update the onModuleLoad method of the application's entry point class so that it uses the new classes.
package au.org.myCRM.client;
import au.org.myCRM.client.ui.widgets.Masthead;
import au.org.myCRM.client.ui.widgets.ApplicationMenu;
import au.org.myCRM.client.ui.widgets.NavigationPane;
import au.org.myCRM.client.ui.widgets.ContextArea;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.layout.HLayout;
public class myCRM implements EntryPoint {
private static final int NORTH_HEIGHT = 85; // MASTHEAD_HEIGHT + APPLICATION_MENU_HEIGHT
private VLayout mainLayout;
private HLayout northLayout;
private HLayout southLayout;
private VLayout eastLayout;
private VLayout westLayout;
public void onModuleLoad() {
GWT.log("init OnLoadModule()...", null);
// get rid of scroll bars, and clear out the window's built-in margin,
// because we want to take advantage of the entire client area
Window.enableScrolling(false);
Window.setMargin("0px");
// initialise the main layout container
mainLayout = new VLayout();
mainLayout.setWidth100();
mainLayout.setHeight100();
// initialise the North layout container
northLayout = new HLayout();
northLayout.setHeight(NORTH_HEIGHT);
VLayout vLayout = new VLayout();
// add the Masthead to the nested layout container
vLayout.addMember(new Masthead());
// add the Application menu to the nested layout container
vLayout.addMember(new ApplicationMenu());
// add the nested layout container to the North layout container
northLayout.addMember(vLayout);
// initialise the West layout container
westLayout = new NavigationPane();
// initialise the East layout container
eastLayout = new ContextArea();
// initialise the South layout container
southLayout = new HLayout();
// set the Navigation Pane and ContextArea as members of the South
// layout container
southLayout.setMembers(westLayout, eastLayout);
// add the North and South layout containers to the main layout container
mainLayout.addMember(northLayout);
mainLayout.addMember(southLayout);
// add the main layout container to GWT's root panel
RootLayoutPanel.get().add(mainLayout);
}
}
smartGWT currently supports three themes: Enterprise Gray, Enterprise Blue and Graphite. To change the theme to Enterprise Blue add the following to the module definition file.
... <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> --> <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --> <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> --> <!-- Other module inherits --> <!-- <inherits name="com.smartgwt.SmartGwt"/> --> <inherits name="com.smartgwt.SmartGwtNoTheme"/> <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlue"/> <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources"/>
3. Test the application in development mode
Launch myCRM in development mode and it should now look like the following screen shot.
What's Next
At this point, we've built the basic layout for myCRM. Now we're ready to start building the user interface using smartGWT widgets.