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:

  1. Select the smartGWT layout containers needed to divide the browser window into regions
  2. Implement the smartGWT layout containers
  3. 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.

Build the User Interface