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