CommandButton

The <b:commandButton /> tag extends the standard <h:commandButton /> with AJAX, partial processing features and improved search expressions. Last not least, it adds the Bootstrap style.

Basic usage

The BootsFaces command button is used similarly to the PrimeFaces command button:

• By default, AJAX is deactivated. You can activate it by setting ajax="true".
• Instead of the render attribute of standard JSF, BootsFaces follows the tradition coined by PrimeFaces, using the attribute update to define which region of the HTML page is to be updated.
• The update attributes supports the full range of BootsFaces search expressions, such as @next, @parent and so on. See the page on improved search expressions for more details.
• Similarly, the process attribute allows you to influence partial processing. In the case of the command button, the default value is @form. You can use the process attribute to reduce the number of input fields sent to the server.

The Bootstrap look

By default, command buttons are gray (depending on your theme). You can configure them by using a different look:

AJAX and JavaScriptsince 0.8.0

The <b:commandButton > supports the full suite of JavaScript and AJAX events, as described in the description of AJAX in BootsFaces. Basically, each of the many JavaScript callback handlers (the on[event] attributes) also supports AJAX. At the time of writing (Sept 25, 2015), the list of supported events is blur, change, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup and select.

Be careful with the actionListener and the action callback when using one of the JavaScript event listeners to call AJAX. The actionListener and the action are always called, no matter which event originally triggered the AJAX call. As for the call order:

• The dedicated on[event] is called first.
• The actionListener is called second. It's a Java method that may or may not take the ActionEvent as attribute.
• The action is called last. This is because it's the only Java method that may trigger a navigation to another page. In order to trigger a navigation, this method may return a String, which triggers a navigation to another page (unless it is null). Note that navigations ignore the update attribute, if the command button is declared as an AJAX button. That's because an AJAX navigation usually replaces the entire page. Therefore, AJAX navigations are always performed using update="@all"

The command button allows you to freely mix JavaScript calls and AJAX calls in the JavaScript callback attributes. The demo below uses this feature to suppress AJAX calls on simple click or on double clicks if the corresponding check box is set. It also calls Java method when the mouse point enters the command button (onmouseover), and when it leaves it again (onmouseout):

To get familiar with BootsFaces AJAX, try the BootsFaces AJAX demo project.

AJAX, mouse events and BlockUI

If BlockUI is active, every AJAX request triggers a mouseOutEvent. When the AJAX request has been processed and the BlockUI overlay pane is hidden, a mouseOverEvent is triggered. Keep this in mind if you need to use the mouse events. We had to deactivate the BlockUI in order to make the demo above work.

Icons

Like Buttons, also CommandButtons can can have an icon adding the attribute icon (on the left or right, default is left).

You can control the icon position by specifying it in the attribute iconAlign .

The Icon attribute will add a Glyphicon icon (Bootstrap's default), but now you can also use a Font Awesome icon using the iconAwesome attribute instead of icon .

Both icon and iconAwesome attributes, require the icon name as value the icon name without the trailing glyphicon- prefix and fa- prefix respectively.

In the example below, the rightmost button has the iconAwesome="thumbs-up" attribute.

Icon modifierssince 0.9.0

Both Fontawesome icons and Glyphicons can be decorated with modifiers:

Custom icons and arbitrary content of a command button

You can put arbitrary content in the caption of the command button. You aren't limited to simple icons and text.

Partial processing with AJAXsince 0.8.0

The lower row of the example above shows partial processing. Sometimes you don't want to submit an entire form to the server. In our example you can't send the first name unless you've filled the last name, too, because of the constraint violation which prevents the values from being sent to the server. Partial submit allows you to send parts of the form to the server and to validate and process them independently from the rest of the form. Note that this example "forgets" the changes of the "last name" input field when you submit the first name. Usually, you'll avoid this by using update="@form:firstname" instead of updating the entire form.

immediatesince 0.9.1

<b:commandButton /> supports the immediate attribute, both in AJAX and non-AJAX requests. This allows you to call a backend bean method even if the violation constraints are violated. The example below allows you to start a new game no matter if the input field contains a legal value or not. The BootsFaces ajax methods like onclick execute the validations (but are executed even if there are validation constraints), while the traditional actionListeners bypass validation completely.

The classical usecase of the immediate flag is the "cancel" button. Obviously, you don't want to force the user to input correct data before they can cancel their input.

Parametersimproved since 1.0

You can pass parameters to <b:commandButton /> in three different ways:

• Pass it as an EL expression using the BootsFaces AJAX approach: <b:commandButton onclick="ajax:myBean.myMethod(42);"
• Pass it as an EL expression using the JSF standard approach: <b:commandButton actionListener="ajax:myBean.myMethod(42);"
• Pass it an an JSF standard <f:param />.

Responsive designsince 0.9.0breaking change in 1.1.0

You can use all the attributes controlling the responsive behaviour of <b:column /> also with <b:commandButton />. Note that this is equivalent to putting it into a <b:column />. In particular, the the CSS styles are inside the column div.

Breaking change with version 1.1.0: Until BootsFaces 1.0.2, the generated HTML code didn't comply to the rules of Bootstrap. This approach worked, but the commandButtons bleed into the padding of their container. In other words, the commandButtons were to wide. BootsFaces 1.1.0 fixes this. If your CSS rules use the id of the commandButton, you might have to modify the selector of the rule to #id > commandButton.

Visibility depending on screen sizesince 0.8.6/0.9.0

You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

Reference section