Here are three classes I created in GWT to help me create a toolbar. I wanted the toolbar to look somewhat similar to toolbars you see in desktop applications all the time. Below you will find the ToolBarFactory class, the ToolBarItem class, and the ToolBarSeparator class. I also included the styles I used for mine. Hopefully this helps. Grab the code if you want. I didn’t include all the imports, but if you want just click on the underlined class hit ctrl+1 in eclipse and tell it to import (or you can use ctrl+shift+M to import automatically). I had to type these in by hand because my code is on another network, so hopefully it all compiles, if not, let me know and I can help fix it
I’m sure some of it can be cleaned up, I just haven’t gone back to visit it. Who knows in GWT 1.5 maybe they’ll have one for us to use. There are several 3rd party ones available, but I had created this before I found them, and it works great for my needs.
Anyway, the toolbar takes in an arraylist of the items you want added. Along with the imgHeight and Width of the items you will be adding.
public class ToolBarFactory
{
public static HorizontalPanel createHorizontalToolBar(ArrayList toolbarItems, int imgWidth, int imgHeight)
{
HorizontalPanel hpToolbar = new HorizontalPanel();
hpToolbar.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
hpToolbar.setStyleName("Toolbar");
hpToolbar.setSpacing(0);
Label fillerL=new Label(); //add a filler to off set the start
fillerL.setWidth("2px");
hpToolbar.add(fillerL);
hpToolbar.setCellWidth(fillerL, "2px");
for (int i=0; i< toolbarItems.size(); i++)
{
if (toolbarItems.get(i) instanceof ToolBarItem)
{
ToolBar Item tbi = (ToolBarItem) toolbarItems.get(i);
Button btn = new Button();
btn.setStyleName(ToolBar-button");
if (tbi.getListener() != null)
{
btn.addClickListener(tbi.getListener());
}
if (tbi.getName() != null)
{
btn.setTitle(tbi.getName());
}
if (tbi.getImagePath() != null)
{
btn.setHTML("img style='width:" + imgWidth + ";height:" + imgHeight + "' src='" + tbl.getImagePath() + "'>“);
}
hpToolbar.add(btn);
hpToolbar.setCellWidth(btn, String.valueof(imgWidth));
}
else if (toolbarItems.get(i) instanceof ToolBarSeparator)
{
//add a gap
ToolBarSeparator tbs = (ToolBarSeparator) toolbarItems.get(i);
Label spacer = new Label();
spacer.setStyleName(”Toolbar-separator”);
spacer.setWidth(tbs.getWidth + “px”);
hpToolbar.add(spacer);
hpToolbar.setCellWidth(spacer, String.valueOf(tbs.getWidth()) + “px”);
}
}//end for loop
//gap filler right
Label fillerR=new Label();
hpToolbar.add(fillerR);
hpToolbar.setCellWidth(fillerR,”100%”);
//make it take the whole area
hpToolbar.setSize(”100%”, String.valueOf(imgHeight));
return hpToolbar
}//end public static
} //end class
That was the main class, here is the items that it uses to add (and the arraylist that is sent in is made of these). So next up is the ToolBarItem:
public class ToolBarItem
{
private String m_strName;
private String m_strImagePath;
private String m_cmdToUse;
public ToolBarItem(String name, Stirng imagePath, ClickListener listen)
{
m_strName=name;
m_strImagePath=imagePath;
m_cmdToUse=listen;
}
public ClickListener getListener()
{
return m_cmdToUse;
}
public String getName()
{
return m_strName();
}
public String getImagePath()
{
return m_strImagePath;
}
}
Now the Separator class.
public class ToolBarSeparator(int widthInPX)
{
private int m_WidthPX;
public ToolBarSeparator(int widthInPX)
{
m_WidthPX = widthInPX;
}
public int getWidth()
{
return m_WidthPX;
}
}
Hopefully someone can use this, or can use the sample code with to figure something else out. And I leave you with some css styles:
.Toolbar {
padding: 0px 0px 0px 0px;
background-color: #C8C9CC;
border: 0px solid #87B3FF;
border-top: 1px solid #9D9DA1;
border-right: 1px solid #000000;
border-bottom: 0px solid #000000;
color: #000000;
cursor: default;
}
Toolbar-btn {
padding: 0px 0px 0px 0px;
background-color: #E5E3E3;
color: #000000;
}
Toolbar-separator {
padding 3px 2px 4px 2px;
background-color: #C8C9CC;
color: #000000;