JWt Widget Gallery

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

Age:

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="row">
  <label class="col-1 col-form-label">${label}</label>
  <div class="col-2">
    ${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((WContainerWidget) container);
    edit.setPlaceholderText("Edit me");
    final WText out = new WText("", (WContainerWidget) container);
    out.addStyleClass("help-block");
    edit.keyPressed()
        .addListener(
            this,
            (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((WContainerWidget) 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>", (WContainerWidget) container);
    out.addStyleClass("help-block");
    ta.changed()
        .addListener(
            this,
            () -> {
              out.setText(
                  "<p>Text area changed at " + WDate.getCurrentServerDate().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((WContainerWidget) 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", (WContainerWidget) container);
    button.setMargin(new WLength(10), EnumSet.of(Side.Top, Side.Bottom));
    final WText out = new WText((WContainerWidget) container);
    out.setStyleClass("xhtml-output");
    button
        .clicked()
        .addListener(
            this,
            () -> {
              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

Enter a number (0 - 100):

source

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

Top

Input masks

A user may be steered to providing correct input by providing an input mask. The input mask indicates the expected format and constrains the user to provide data only in the expected format.

In the example below we use an input mask to ask the user to enter an IP address.

Example

IP Address:

source

  void InputMask() {
    WTemplate result = new WTemplate(WString.tr("lineEdit-template"));
    result.addFunction("id", WTemplate.Functions.id);
    WLineEdit edit = new WLineEdit();
    edit.setTextSize(15);
    edit.setInputMask("009.009.009.009;_");
    result.bindString("label", "IP Address:");
    result.bindWidget("edit", edit);
  }

Email edits

WEmailEdit can be used if the user needs to enter an email address. A WEmailValidator will automatically be associated, which will validate the email address according to the WHATWG specification for <input type="email">.

In the example below, pressing "Submit" will validate the entered input. You can allow multiple email addresses by checking "Allow multiple" and verify that the email address matches a certain pattern by checking the "Use pattern" checkbox.

Example

Email address:

Allow multiple Use pattern '.*@example[.]com'

source

  void EmailEdit() {
    WTemplate result = new WTemplate(WString.tr("emailEdit-template"));
    final WTemplate tpl = result;
    tpl.addFunction("id", WTemplate.Functions.id);
    tpl.bindString("label", "Email address: ", TextFormat.Plain);
    final WEmailEdit edit = (WEmailEdit) tpl.bindWidget("edit", new WEmailEdit());
    WPushButton submit = (WPushButton) tpl.bindWidget("submit", new WPushButton("Submit"));
    final WCheckBox multiple =
        (WCheckBox) tpl.bindWidget("multiple", new WCheckBox("Allow multiple"));
    multiple
        .changed()
        .addListener(
            this,
            () -> {
              edit.setMultiple(multiple.isChecked());
            });
    final WCheckBox pattern =
        (WCheckBox) tpl.bindWidget("pattern", new WCheckBox("Use pattern '.*@example[.]com'"));
    pattern
        .changed()
        .addListener(
            this,
            () -> {
              edit.setPattern(pattern.isChecked() ? ".*@example[.]com" : "");
            });
    tpl.bindEmpty("edit-info");
    edit.validated()
        .addListener(
            this,
            (WValidator.Result validationResult) -> {
              tpl.bindString("edit-info", validationResult.getMessage());
            });
    submit
        .clicked()
        .addListener(
            this,
            () -> {
              edit.setMultiple(multiple.isChecked());
              edit.setPattern(pattern.isChecked() ? ".*@example[.]com" : "");
              edit.validate();
              tpl.bindString(
                  "output",
                  new WString("Entered email address: {1}").arg(edit.getValueText()),
                  TextFormat.Plain);
            });
    tpl.bindEmpty("output");
  }

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

source

<div class="row">
  <div class="col-xs-12 col-md-6 col-xl-4">
    <label class="form-label" for="${id:edit}">${label}</label>
    <div class="input-group">
      ${edit}
      ${submit class="btn-outline-secondary"}
    </div>
  </div>
</div>
<div class="row">
  <div class="col">
    <div class="form-text">
      ${edit-info}
    </div>
  </div>
</div>
<div class="row">
  <div class="col">
    ${multiple} ${pattern}
  </div>
</div>
<div class="row">
  <div class="col">
    ${output}
  </div>
</div>

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-group-text class. Note that select elements are not supported.

Adding text

Wrap an .input-group-text and an input control with the .input-group class to prepend or append text to an input. To prepend and append an input at once you can also use two instances of the .input-group-text before and after the input control.

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="input-group mb-3">
  <span class="input-group-text">@</span>
  ${name}
</div>
<div class="input-group mb-3">
  ${amount1}
  <span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  ${amount2}
  <span class="input-group-text">.00</span>
</div>

Adding drop down buttons

See Push buttons.

Top