Comboboxes give you a list of items to select from. As of Bootsfaces 1.1.0, comboboxes are not editable - they are pure drop-down menus.
<b:selectOneMenu> makes the Bootstrap style of displaying comboboxes available to JSF programmers.
This example shows the two different flavors of the combobox. The second combobox is just plain Bootstrap vanilla standard. The first combobox has the "select2" flavor. It looks a bit different, and more important, it allows you to filter the long list of options.
You can add a filter field by adding the option select2="true":
Items can also be disabled. If so, they are grayed out, and they can't be selected.
Note that since BootsFaces 0.8.0, we favor an
all-new approach to AJAX. The standard JSF approach
to AJAX we used in the example above is supported by us, too, but we recommend to adopt the new
BootsFaces style of AJAX (i.e. onclick="ajax:bean.method()"). Supporting standard
JSF AJAX and the PrimeFaces approach to AJAX raises the complexity of the implementation considerably.
So if you run into bugs with either the standard or the PrimeFaces syntax,
bear with us, and report the bugs
on our bug tracker.
Since BootsFaces 1.1.0, you can use converters as defined by the JavaEE documentation
and described by M. K. Yong.
In rare cases, this may turn out to be a breaking change. Previous versions of BootsFaces simply ignored the
converter. In some case, such as issue 713,
this can be surprising because JavaEE allows you to define converters via annotations. In this case, the converter
isn't mentioned by the <b:selectOneMenu /> declaration directly.
This example has been inspired by https://memorynotfound.com/using-custom-converter-for-hselectonemenu/.
The list of items can be defined as an <f:selectItems /> tag. BootsFaces uses a modified version of the
algorithm PrimeFaces 5.1 uses to implement <f:selectItems />. As a result, you can use <b:selectOneMenu>
almost the same way as <b:selectOneMenu>.
To help you enhance the user experience, BootsFaces comes in with a useful feature:
You can easily prepend or append text to your InputTextareas and what you prepend and append will seem part of the input field.
To do so, you just need to use the facets
prepend
and
append
where you will place the
h:outputText
element (or any other element). Note that there's a minor layout glitch between the facet and the combobox (the rounded corner).
You'll have to fix this with some CSS code.
You can even prepend and append at the same time, as in the following example:
You can add a label by adding the attribute label. The label is also used by the JSF messages. To give you maximum flexibility,
you can suppress automatic rendering of labels by adding renderLabel="false".
Required inputs fields and their labels both bear the CSS class bf-required. By default, this adds an asterisk to the label.
If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning,
bf-error or bf-fatal, depending on which error severity the message has.
The latter two classes color the label red.
If there's no message,
the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.
bf-info, bf-warning,
bf-error or bf-fatal have been dropped in favor of the standard Bootstrap CSS classes has-success,
has-warning and has-error. Plus, they are applied to the form-group instead of the labels and input fields.
If your application depends on the old HTML code, activate the context parameter net.bootsfaces.legacy_error_classes
in the web.xml. The example below shows how to do this.
The <b:selectBooleanCheckbox > 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.
To get familiar with BootsFaces AJAX, try the
BootsFaces AJAX demo project.
You can use all the attributes controlling the responsive behaviour of <b:column />
also with <b:icon />:
You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:
<b:selectOneMenu /> supports tooltips:
| Attribute | Default value | Description |
|---|---|---|
| accesskey | (none) | Access key to transfer focus to the input element. |
| ajax | false | Whether the Button submits the form with AJAX. |
| alt | (none) | Alternate textual description of the input element. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| binding | (none) | An EL expression referring to a server side UIComponent instance in a backing bean. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| converter | (none) | An EL expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id. |
| delay | (none) | Delays the AJAX request. |
| dir | (none) | Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content). |
| disabled | false | Disables the input element, default is false. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| field-size fieldSize (alternative writing) |
(none) | The size of the input. Possible values are xs (extra small), sm (small), md (medium) and lg (large) . |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| hideNoSelectionOption | false | Hide a noSelectionOption, if a value is already set. Requires update after selection. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| immediate | false | Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false. |
| inline | false | Inline forms are more compact and put the label to the left hand side of the input field instead of putting it above the input field. Inline applies only to screens that are at least 768 pixels wide. |
| label | (none) | An optional label of the field. The label is only shown if you also set render-attribute='true'. The label is also used for error messages. |
| label-col-lg labelColLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| label-col-md labelColMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| label-col-sm labelColSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| label-col-xs labelColXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| label-large-screen labelLargeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| label-medium-screen labelMediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| label-small-screen labelSmallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| label-style labelStyle (alternative writing) |
(none) | The CSS inline style of the label. |
| label-style-class labelStyleClass (alternative writing) |
(none) | The CSS class of the label. |
| label-tiny-screen labelTinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| lang | (none) | Code describing the language used in the generated markup for this component. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| onblur | (none) | Client side callback to execute when input element loses focus. |
| onchange | (none) | Client side callback to execute when input element loses focus and its value has been modified since gaining focus. |
| onclick | (none) | The onclick attribute. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| ondblclick | (none) | Client side callback to execute when input element is double clicked. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onfocus | (none) | Client side callback to execute when input element receives focus. |
| onkeydown | (none) | Client side callback to execute when a key is pressed down over input element. |
| onkeypress | (none) | Client side callback to execute when a key is pressed and released over input element. |
| onkeyup | (none) | Client side callback to execute when a key is released over input element. |
| onmousedown | (none) | Client side callback to execute when a pointer input element is pressed down over input element. |
| onmousemove | (none) | Client side callback to execute when a pointer input element is moved within input element. |
| onmouseout | (none) | Client side callback to execute when a pointer input element is moved away from input element. |
| onmouseover | (none) | Client side callback to execute when a pointer input element is moved onto input element. |
| onmouseup | (none) | Client side callback to execute when a pointer input element is released over input element. |
| onselect | (none) | Client side callback to execute when text within input element is selected by user. |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| readonly | false | Flag indicating that this input element will prevent changes by the user. |
| render-label renderLabel (alternative writing) |
net.bootsfaces.component.ComponentUtils.isRenderLabelDefault() | Allows you to suppress automatic rendering of labels. Used internally by AngularFaces, too. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| required | false | Boolean value Require input in the component when the form is submitted. |
| required-message requiredMessage (alternative writing) |
(none) | Message to show if the user did not specify a value and the attribute required is set to true. |
| select2 | false | Enable select2 component to make the dropdown filterable by setting this attribute to true. |
| size | 0 | Number of characters used to determine the width of the input element. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| style | (none) | Inline style of the input element. |
| style-class styleClass (alternative writing) |
(none) | Style class of the input element. |
| tabindex | (none) | Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| title | (none) | Advisory tooltip information. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| update | (none) | Component(s) to be updated with ajax. |
| value | (none) | Value. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
select tag bearing the CSS-class form-control.
required is true, the pseudo CSS class bf-required is added.
Thus you can define your custom style for required fields.
FacesMessage, the input field is bears one of the pseudo CSS classes
bf-info, bf-warning, bf-error or bf-fatal. If there are no messages,
the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.
required, if it's a mandatory field.
This class adds an asterisk to the label text. You can override the CSS class to remove the asterisk
or to replace it by something else.bf-info, bf-warning,
bf-error or bf-fatal, depending on which severity the error message the input field has.
The latter two classes color the label red.bf-no-message and has-success. The latter colors the label green by default.