Wednesday, March 31, 2010

GWT GroupBox implementation

I was looking for a group box implementation for GWT recently and the only solution I've found was implemented by Svetlin Nakov. However it didn't work out of the box and I had to modify it, to make it compatible with GWT 2.0 (I guess it worked fine with older versions). I've used the same idea, plus most of his code and extended it to work with GWT 2.0. Here is my implementation:
package com.demosten.client;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.ComplexPanel;
import com.google.gwt.user.client.ui.InsertPanel;
import com.google.gwt.user.client.ui.Widget;

public class GroupBoxPanel extends ComplexPanel implements InsertPanel
{
 private Element legend;

 public GroupBoxPanel()
 {
  Element fieldset = DOM.createFieldSet();
  this.legend = DOM.createLegend();
  DOM.appendChild(fieldset, legend);
  setElement(fieldset);
 }

 @Override
 public void add(Widget w)
 {
  add(w, getElement());
 }

 public void insert(Widget w, int beforeIndex)
 {
  insert(w, getElement(), beforeIndex, true);
 }

 public String getText()
 {
  return DOM.getInnerText(this.legend);
 }

 public void setText(String text)
 {
  DOM.setInnerText(this.legend, text);
 }
}

it can be used in UiBinder Templates:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
 xmlns:g='urn:import:com.google.gwt.user.client.ui'
 xmlns:d='urn:import:com.demosten.client'>
 
 <g:VerticalPanel>
  <d:GroupBoxPanel text="Account data">
   <g:HorizontalPanel>
    <g:Label>e-mail:</g:Label>
    <g:TextBox />
   </g:HorizontalPanel>
   <g:HorizontalPanel>
    <g:Label>password:</g:Label>
    <g:PasswordTextBox />
   </g:HorizontalPanel>
  </d:GroupBoxPanel>
  <g:HorizontalPanel>
   <g:Button text='Sign in' />
   <g:Button text='Register' />
  </g:HorizontalPanel>
 </g:VerticalPanel>
</ui:UiBinder>

Use it as you like :)