A few days ago ( from the writing of this entry ), I tried to search the web on how to add a box in GWT. You know, that box that nicely envelops your user interface elements. Sadly, the only relevant hit that I got was an entry in the GWT mailing list of a guy asking the same thing, and him being told to “learn CSS”. So, I set off to learn it on my own, and here’s what I found so far:

1. You create a panel (HorizontalPanel or VerticalPanel) to act as the box. We will call this the “box panel”.
2. This panel must only have a single element. So, if you have a form with multiple elements, wrap it first in another panel (HorizontalPanel or VerticalPanel), then add it to your “box panel”.
3. Don’t set any properties for this “box panel”, like border width or spacing.
4. Set the style of this “box panel” to “panelBox” and add this CSS element to your CSS file:


.panelBox {
padding: 3mm 3mm 3mm 3mm;
border: 1px;
border-color: #e0e0e0;
border-style: solid
}

To give you a quick example, say we are writing a data-entry form that contains various informations:


package com.erle.client.components;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RadioButton;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class PersonalInfoComposite extends Composite
{
private TextBox fname;
private TextBox mname;
private TextBox lname;
private RadioButton male;
private RadioButton female;
private TextArea currentAddress;

public PersonalInfoComposite()
{
HorizontalPanel boxPanel = new HorizontalPanel(); // This is the panel that will be the box

VerticalPanel userInterfacePanel = new VerticalPanel(); /* This will be the panel that will hold the user interface elements */
userInterfacePanel.setSpacing( 7 );

userInterfacePanel.add( new HTML("First Name") );

fname = new TextBox();
userInterfacePanel.add( fname );

userInterfacePanel.add( new HTML("Middle Name") );

mname = new TextBox();
userInterfacePanel.add( mname );

userInterfacePanel.add( new HTML("Surname Name") );

lname = new TextBox();
userInterfacePanel.add( lname );

userInterfacePanel.add( new HTML("Gender") );

male = new RadioButton("gender" , "Male");
female = new RadioButton( "gender" , "Female");
userInterfacePanel.add( male );
userInterfacePanel.add( female );

userInterfacePanel.add( new HTML("Current Address") );
currentAddress = new TextArea();
userInterfacePanel.add( currentAddress );

boxPanel.setStyleName( "panelBox" ); // Set the style to panelBox
boxPanel.add( userInterfacePanel ); // Make the box panel as the main widget of this composite.

initWidget( boxPanel );
}
}

Then, in your CSS file, just add the CSS snippet above, then add this composite to your application.

Some screenshot:

Forgive wordpress’s inability to clearly display source code.

Happy GWT hacking.

Posted on 02.05.08 to Uncategorized by erle. Subscribe to follow comments on this post. 4 comments. Add your thoughts or trackback from your own site.

• BROWSE / IN TIMELINE
• « Trying out GWT
• » It’s hard being a geek

• BROWSE / IN Uncategorized
• « Trying out GWT
• » It’s hard being a geek