Forms — widgets and support classes for capturing user information

Text editors

JWt provides different kinds of text entry widgets: WLineEdit, WTextArea, WTextEdit and WSpinBox.

Line edit

The WLineEdit class is an inline widget that provides a single line edit.

A <WLineEdit> corresponds to an HTML <input type="text"> element.

You can restrict its input using a validator providing immediate client-side feedback. In the example below characters that aren't numbers are not accepted. If you enter a number out of the predefined range (0..130) then the widget colour is changed. See Forms > Validation for more details.

Example
source
void LineEdit() {
    WTemplate result = new WTemplate(WString.tr("lineEdit-template"));
    result.addFunction("id", WTemplate.Functions.id);
    WLineEdit edit = new WLineEdit();
    edit.setValidator(new WIntValidator(0, 130));
    result.bindString("label", "Age:");
    result.bindWidget("edit", edit);
}

Here is the corresponding XML template (with message id="lineEdit-template") using style classes from the Bootstrap theme.

source
<div class="form-inline">
<div class="form-group">
<label for="${id:edit}">${label}</label>
${edit}
</div>
</div>

The line edit below reacts on every 'key pressed' event. It also shows how you can embed the label within the control (when empty).

Example
source
void LineEditEvent() {
    WContainerWidget container = new WContainerWidget();
    WLineEdit edit = new WLineEdit(container);
    edit.setPlaceholderText("Edit me");
    final WText out = new WText("", container);
    out.addStyleClass("help-block");
    edit.keyPressed().addListener(this, new Signal1.Listener<WKeyEvent>() {
        public void trigger(WKeyEvent e) {
            out.setText("You pressed the '" + e.getText() + "' key.");
        }
    });
}

Top

Text area

WTextArea is an inline widget that provides a multi-line edit.

A WTextArea corresponds to an HTML <textarea> element.

Form validators can be used to validate the user's input with immediate client-side feedback.

Example

source
void TextArea() {
    WContainerWidget container = new WContainerWidget();
    WTextArea ta = new WTextArea(container);
    ta.setColumns(80);
    ta.setRows(5);
    ta
            .setText("Change this text... \nand click outside the text area to get a changed event.");
    final WText out = new WText("<p></p>", container);
    out.addStyleClass("help-block");
    ta.changed().addListener(this, new Signal.Listener() {
        public void trigger() {
            out.setText("<p>Text area changed at "
                    + WDate.getCurrentDate().toString() + ".</p>");
        }
    });
}

Top

Text edit

WTextEdit is a full-featured editor for rich text editing. It is based on the TinyMCE editor, which must be downloaded separately from its author's website. The TinyMCE toolbar layout and plugins can be configured through JWt's interface. The default layout - as shown below - covers only a small portion of TinyMCE's capabilities.

Example
source
void TextEdit() {
    WContainerWidget container = new WContainerWidget();
    final WTextEdit edit = new WTextEdit(container);
    edit.setHeight(new WLength(300));
    edit
            .setText("<p><span style=\"font-family: 'courier new', courier; font-size: medium;\"><strong>WTextEdit</strong></span></p><p>Hey, I'm a <strong>WTextEdit</strong> and you can make me <span style=\"text-decoration: underline;\"><em>rich</em></span> by adding your <span style=\"color: #ff0000;\"><em>style</em></span>!</p><p>Other widgets like...</p><ul style=\"padding: 0px; margin: 0px 0px 10px 25px;\"><li>WLineEdit</li><li>WTextArea</li><li>WSpinBox</li></ul><p>don't have style.</p>");
    WPushButton button = new WPushButton("Get text", container);
    button.setMargin(new WLength(10), EnumSet.of(Side.Top, Side.Bottom));
    final WText out = new WText(container);
    out.setStyleClass("xhtml-output");
    button.clicked().addListener(this, new Signal.Listener() {
        public void trigger() {
            out.setText("<pre>" + Utils.htmlEncode(edit.getText())
                    + "</pre>");
        }
    });
}

You could also render the XHTML text to pdf using the WPdfRenderer class. See Media > Pdf output for more details.

Top

Spin box

A spin box is an inline widget to enter a number; WSpinBox is an input control for integer numbers, while WDoubleSpinBox is an input control for fixed point numbers. A spin box consists of a line edit, and buttons which allow to increase or decrease the value.

Example
source
void SpinBox() {
    WContainerWidget container = new WContainerWidget();
    container.addStyleClass("form-group");
    WLabel label = new WLabel("Enter a number (0 - 100):", container);
    final WDoubleSpinBox sb = new WDoubleSpinBox(container);
    sb.setRange(0, 100);
    sb.setValue(50);
    sb.setDecimals(2);
    sb.setSingleStep(0.1);
    label.setBuddy(sb);
    final WText out = new WText("", container);
    out.addStyleClass("help-block");
    sb.changed().addListener(this, new Signal.Listener() {
        public void trigger() {
            if (sb.validate() == WValidator.State.Valid) {
                out.setText(new WString("Spin box value changed to {1}")
                        .arg(sb.getText()));
            } else {
                out.setText(new WString("Invalid spin box value!"));
            }
        }
    });
}

Top

Prepended and appended inputs

Adding on top of the standard input controls, the Bootstrap theme includes other useful form components like prepended/appended inputs. You can add text or buttons before and/or after any text-based input using the .input-prepend and .input-prepend classes respectively. Note that select elements are not supported.

Adding text

Wrap an .add-on and an input control with one of two classes to prepend or append text to an input. You could also use both classes and two instances of .add-on to prepend and append an input at once.

Example
@
.00
$ .00
source
void TextSide() {
    WTemplate result = new WTemplate(WString.tr("editSide-template"));
    WLineEdit edit = new WLineEdit("Username");
    edit.setStyleClass("span2");
    result.bindWidget("name", edit);
    edit = new WLineEdit();
    edit.setStyleClass("span2");
    result.bindWidget("amount1", edit);
    edit = new WLineEdit();
    edit.setStyleClass("span2");
    result.bindWidget("amount2", edit);
}

Here is the corresponding XML template (with message id="editSide-template") using style classes from the Bootstrap theme.

source
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">@</span>
${name}
</div>
</div>
<div class="form-group">
<div class="input-group">
${amount1}
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
${amount2}
<span class="input-group-addon">.00</span>
</div>
</div>

Adding drop down buttons

See Push buttons.

Top