Simple Label+TextBox combo

[Open eSignForms]

I'd like to create something like the following layout using a Label
and TextBox for input:

Label
[TextBox______]

Now, this works fine in a VerticalPanel. But that creates a TABLE
with two TRs to wrap these fields.

Yet in HTML, I'd just have:

<label>Label<br/>
<input type="text".../></label>

That is, it would just be the two fields separated by a BR. What
would be the construct to build something like that in GWT 2.0?

Thanks for any tips.

[Yozons Support on Gmail]

I have found that using InnerLabel with InnerHTML and a TextBox, I can come close to making it cleaner HTML than the overhead of a table just to put a label and input field together, with something like:

        FlowPanel nameAndLabel = new FlowPanel();
        InlineLabel label = new InlineLabel("Name");
        TextBox nameField = new TextBox();
        nameField.setValue("Bob");
        nameAndLabel.add(label);
        nameAndLabel.add( new InlineHTML("<br/>") );
        nameAndLabel.add(nameField);

But the Label class doesn't actually generate a <label> tag, so the label is not also associated with the TextBox for accessibility (it's just a span).

The idea of having labeled input fields is so basic, that there must be a nicer solution.  I noted that RadioButton does a good job of associating the label with the radio button itself.

Is there something comparable in GWT 2 to make the label/TextBox (or other input widgets) go together to produce simple HTML like:

<label>Name<br/><input ></label>

Thanks for any tips....

[philippe]

Using br tag isn't a good solution for your problem. It's better using
CSS style to manage the page organization.

For exemple, you can put a nameAndLabel.addStyleClass("xybox"); and
style:
.xybox {
float: left; width: 400px;
}
.xybox label {
float: left; width: 400px; margin: ..
}
.xybox input {
float: left; width: 400px;
}

In this case you should including nameAndLabel panel in float: left
panel or position: relative panel.

It is important to separate the content from container.

[Yozons Support on Gmail]

Let me digest that since I confess I'm more HTML-oriented than CSS for such things.

I'm not sure what it means for the "nameAndLabel panel in float: left panel or position: relative panel" means.  Is this a type of panel that does this (AbsolutePanel?) or just a CSS option to give a HorizontalPanel/VerticalPanel/FlexTable/Grid depending on how I'm laying out the series of input fields with labels.

Also, not sure how this resolves the label-input field since the Label() object does not appear to emit a <label> tag, just a <div> (or <span> if it's InnerLabel), and it's generally hard to assign unique IDs to all my input fields since my popup window that accepts the data is not restricted to just one at a time (our users often bring up two as they compare or the like).  So it's easy to name them, but not id them.  In HTML, I could do this by putting the <input> inside the <label> so they were auto-associated.

I'll give your CSS solution a try and see how that works me as I'm slowly gaining CSS experience, and wanted to avoid having to do too much in CSS because GWT resolves many browser-anomalies, so the CSS needs to be basic enough to work everywhere easily.

Thanks.

[Yozons Support on Gmail]

Okay, the CSS is really nice since I can control the width so easily.  It works creat, so thanks for the tip.

Is there no Label-like widget that emits a <label> tag in GWT?  I see that the RadioButton does it.

It seems very easy for me to make a Composite widget that is composed of these two objects since I use them repeatedly.

Is there a way to override the HTML emitted (or the DOM updates done) for the Label so I could use a <label> tag, and then perhaps use the auto-unique id feature if the TextBox field is not otherwise set with an id so that the label would point to it and the textbox would use it?  How hard is this to do?  Is the process to try to copy a Widget like RadioButton as my new object that emits the label tags for my input field, or is there a more GWT-approved way to create such a widget for my needs?

[Open eSignForms]

I have tried to create my own LabelTextBox by subclassing TextBox, but
I'm not sure how to trick the widget so that when it's added, say to a
VerticalPanel, it actually adds my own span element that contains the
label element and the TextBox.getElement() (an InputElement) so that
they all go together.

I can create the span and put the elements inside, but when I add my
widget, only the TextBox's InputElement is actually in the DOM, so
clearly I'm not doing it right using:

SpanElement spanElem;
LabelElement labelElem;
InputElement inputElem;

public LabelTextBox(String labelText, boolean labelIsHtml, String
className)
{
super(); // creates the TextBox

inputElem = getElement().cast();

spanElem = Document.get().createSpanElement();
spanElem.setClassName(className);

labelElem = Document.get().createLabelElement();
if ( labelIsHtml )
labelElem.setInnerHTML(labelText);
else
labelElem.setInnerText(labelText);

String uid = DOM.createUniqueId();
setId(uid);

spanElem.appendChild(labelElem);
spanElem.appendChild(inputElem);
}

public void setId(String id)
{
labelElem.setHtmlFor(id);
inputElem.setId(id);
}

[philippe]

I advise you subclass a FlowPanel.

Exemple (to head) :
class InputTextBox extends FlowPanel {
public InputTextBox(String labelText) {
super();
Label label = new Label(labelText);
TextBox input = new TextBox();
this.add(label);
this.add(input);
this.addStyleName("myBox");
}
}

It's give that:
<div class="myBox">
<div class="gwt-Label">Nom :</div>
<input type="text" tabindex="1" class="gwt-TextBox"/>
</div>

Exemple of css:
.myBox {
float: left; width: 200px;
}
.myBox .gwt-Label {
float: left;
width: 200px;
}
.myBox .gwt-TextBox {
float: left; width: 200px;
}

Maybe with GWT 2, Label class will generate a label node in the DOM ?