JWt provides different kinds of button widgets. With a
WPushButton a user can execute a command by a click action,
e.g. an OK button is generally used for confirming actions and closing
the window while a Cancel button is used for canceling actions and
closing the window.
A WPushButton
corresponds to an HTML <button>
element.
A push button typically responds to clicked()
events.
You may decorate a push button with a background image to create a
clickable image. As a descendant of class WFormWidget, push
buttons can be disabled or enabled.
Top
One-time hit button
A push button can be designated to be pushed only once and as a result
execute a command only once.
void PushButtonOnce() {
WPushButton okPtr = new WPushButton("Send");
final WPushButton ok = okPtr;
ok.clicked()
.addListener(
ok,
(WMouseEvent e1) -> {
ok.disable();
});
ok.clicked()
.addListener(
this,
() -> {
ok.setText("Thank you");
});
}
Top
Navigation button
You can also associate navigation with a button using
WPushButton.setLink()
. With this method you can change the
internal path of the application. As a result the button behaves as an
anchor. This is similar to how a
WMenuWidget or a WTabWidget works. See the menu
Navigation for more details.
With a push button you can execute an action while navigating to a
hyperlink target at the same time using WPushButton.setLink()
.
This method accepts a WLink as parameter.
In the example below, the internal path is changed from
/forms/button
(the path associated with the current web page) to
/navigation/anchor
.
Navigate
void PushButtonLink() {
WPushButton button = new WPushButton("Navigate");
button.setLink(new WLink(LinkType.InternalPath, "/navigation/anchor"));
}
Top
Drop down button
A drop down button is a button with a drop-down menu. It could be used to
extend a line edit with possible actions on the input. Usually the menu
items are links.
void PushButtonDropdownAppended() {
WTemplate result = new WTemplate(WString.tr("appendedDropdownButton-template"));
WPopupMenu popup = new WPopupMenu();
popup.addItem("Choose a button type");
popup.addSeparator();
popup.addItem("One-time hit button").setLink(new WLink("#one-time"));
popup.addItem("Navigation button").setLink(new WLink("#navigation"));
popup.addItem("Button style").setLink(new WLink("#style"));
WLineEdit input = new WLineEdit();
result.bindWidget("input", input);
WPushButton button = new WPushButton("Action");
result.bindWidget("appendedButton", button);
button.setMenu(popup);
}
Here is the corresponding XML template (with
message id= "appendedDropdownButton-template"
) using style
classes from the
Bootstrap theme.
<div class="input-group">
${input}
<div class="input-group-append">
${appendedButton class="btn-outline-secondary"}
</div>
</div>
Top
Button style
You can add different styles to buttons to change the color, the size,
the positioning, etc. using style classes from the
Bootstrap theme.
Button styles can be applied to anything with the .btn
class
applied. However, for the best rendering, apply these to hyperlinks
(<a>
) and button controls (<button>
) only.
Button color
The following table provides an overview of the standard color classes
and visualizes the effect on a button. The .btn
class is applied
to a button control by default; you only have to set additional classes.
Button |
Class |
Description |
|
btn-primary |
Provides extra visual weight and identifies the primary action
in a set of buttons |
|
btn-secondary |
Default style configured by the library |
|
btn-info |
Used as an alternative to the default styles |
|
btn-success |
Indicates a successful or positive action |
|
btn-warning |
Indicates caution should be taken with this action |
|
btn-danger |
Indicates a dangerous or potentially negative action |
|
btn-close |
Indicates a closing action can be performed |
|
btn-light |
A light button |
|
btn-dark |
A dark button |
|
btn-outline-primary |
A button with an outline. This can be used with every
button type listed before. |
|
btn-link |
De-emphasize a button by making it look like a link while
maintaining button behavior |
Here is the underlying program showing how to assign the appropriate
color style class to a button.
void PushButtonColor() {
WTemplate result = new WTemplate(WString.tr("pushButtonColor-template"));
WPushButton button = new WPushButton("Primary");
button.setStyleClass("btn-primary");
result.bindWidget("button-primary", button);
button = new WPushButton("Secondary");
result.bindWidget("button-secondary", button);
button = new WPushButton("Info");
button.setStyleClass("btn-info");
result.bindWidget("button-info", button);
button = new WPushButton("Success");
button.setStyleClass("btn-success");
result.bindWidget("button-success", button);
button = new WPushButton("Warning");
button.setStyleClass("btn-warning");
result.bindWidget("button-warning", button);
button = new WPushButton("Danger");
button.setStyleClass("btn-danger");
result.bindWidget("button-danger", button);
button = new WPushButton("Light");
button.setStyleClass("btn-light");
result.bindWidget("button-light", button);
button = new WPushButton("Dark");
button.setStyleClass("btn-dark");
result.bindWidget("button-dark", button);
button = new WPushButton("Outline");
button.setStyleClass("btn-outline-primary");
result.bindWidget("button-outline", button);
button = new WPushButton("Link");
button.setStyleClass("btn-link");
result.bindWidget("button-link", button);
button = new WPushButton("");
button.setStyleClass("btn-close");
result.bindWidget("button-close", button);
}
Here is the corresponding XML template
(with message id="pushButtonColor-template"
). Note that there
is no style applied to the buttons here; this is dealt with in the
program. As a result it's easy to change the style on-the-fly.
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Button</th>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>${button-primary}</td>
<td><code>btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action
in a set of buttons</td>
</tr>
<tr>
<td>${button-secondary}</td>
<td><code>btn-secondary</code></td>
<td>Default style configured by the library</td>
</tr>
<tr>
<td>${button-info}</td>
<td><code>btn-info</code></td>
<td>Used as an alternative to the default styles</td>
</tr>
<tr>
<td>${button-success}</td>
<td><code>btn-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>${button-warning}</td>
<td><code>btn-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
<td>${button-danger}</td>
<td><code>btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td>${button-close}</td>
<td><code>btn-close</code></td>
<td>Indicates a closing action can be performed</td>
</tr>
<tr>
<td>${button-light}</td>
<td><code>btn-light</code></td>
<td>A light button</td>
</tr>
<tr>
<td>${button-dark}</td>
<td><code>btn-dark</code></td>
<td>A dark button</td>
</tr>
<tr>
<td>${button-outline}</td>
<td><code>btn-outline-primary</code></td>
<td>A button with an outline. This can be used with every
button type listed before.</td>
</tr>
<tr>
<td>${button-link}</td>
<td><code>btn-link</code></td>
<td>De-emphasize a button by making it look like a link while
maintaining button behavior</td>
</tr>
</tbody>
</table>
Top
Button size
Instead of using the default size, you can apply a larger or smaller size
to a button. Add the style class .btn-lg
or
.btn-sm
to change the size.
Here is the underlying program showing how to assign the appropriate
size style class to a button.
void PushButtonSize() {
WTemplate result = new WTemplate(WString.tr("pushButtonSize-template"));
WPushButton button = new WPushButton("Large");
button.setStyleClass("btn-lg");
result.bindWidget("button-large", button);
button = new WPushButton("Default");
result.bindWidget("button-default", button);
button = new WPushButton("Small");
button.setStyleClass("btn-sm");
result.bindWidget("button-small", button);
}
Here is the corresponding XML template
(with message id="pushButtonSize-template"
). Note that there
is no style applied to the buttons here; this is dealt with in the
program.
<div>
<p>${button-large}</p>
<p>${button-default}</p>
<p>${button-small}</p>
</div>
Top
Primary button
You can create a primary button - one that is more striking - by adding
the .btn-primary
style to it.
void PushButtonPrimary() {
WContainerWidget container = new WContainerWidget();
WPushButton button = new WPushButton("Save", (WContainerWidget) container);
button.setStyleClass("btn-primary");
button = new WPushButton("Cancel", (WContainerWidget) container);
button.setMargin(new WLength(5), EnumSet.of(Side.Left));
}
Top
Buttons in a form
Usually, a form ends with a group of actions (buttons). When placed within a
.row
, the buttons will automatically indent to line
up with the form controls (See the example at
Forms > Form model).
void PushButtonAction() {
WTemplate result = new WTemplate(WString.tr("pushButtonAction-template"));
WPushButton button = new WPushButton("Save");
result.bindWidget("button-save", button);
button.setStyleClass("btn-primary");
result.bindWidget("button-cancel", new WPushButton("Cancel"));
}
Here is the corresponding XML template
(with message id="pushButtonAction-template"
) showing how to
assign the appropriate style class to the action section.
<div class="row">
<div class="col-auto">
${button-save} ${button-cancel}
</div>
</div>
Top