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 :)

4 comments:

Thomas Broyer said...

What was the problem with CaptionPanel?

Miroslav Genov said...

Since GWT 1.5 there is a standard widget named CaptionPanel that is rendering fieldset elements.

demosten said...

The main problem with CaptionPanel is the name. I didn't found it with my searches. In all UI frameworks I'm using the name includes Groupsomething. My bad! Anyway it's good to know it's there :)

Google android apps development said...

Thanks for the experiment for caption panel its really useful.