Image (<b:image />)since 0.8.0
The <b:image /> component is just that: an image. Plus the unified AJAX engine of BootsFaces, and Bootstrap tooltips.
Basic usage
Live preview
Alternatively, you can use the JSF resource libraries, just the way you're used to from <h:graphicImage />;
Live preview
Progress bar
Sometime your images load slowly. BootsFaces offers a JavaScript API tracking the progress. You can use it to implement a progress bar. If you benefit from a fast internet connection, the example below is to fast to show a progress bar. However, you can track the progress by opening your browser's web developer tools:
- The console window should display at least threee progress messages (and probably more).
- If you're using Chrome, open the network tab, deactivate the cache and activate throttling. Set the speed of the connection to "fast 3G". Now this page loads very slow (more than 10 seconds until the page starts to be rendered), so you can watch the progress bar moving slowly to 100%. (Other browsers probably have similar features).
Live preview
Advanced usage
You can use the standard JavaScript callbacks to call both JavaScript function and Java methods (via AJAX). See BootsFaces chess for a full-blown demo. These following demonstrate how BootsFaces chess uses AJAX to implement drag and drop:
Live preview
Missing live preview
Don't use bothvalue and name/library
Until BootsFaces 0.8.5, there was an error in the documentation which lead some developers to use both
name and value. Both attributes belong to different resource loading mechanisms,
so this caused RES_NOT_FOUND errors. Since BootsFaces 0.8.6, the value attributes is evaluated first.
If both attributes are provided, BootsFaces displays a warning in the logfile (only in the development stage).
Responsive attributessince 0.9.0
The image supports the full range of responsive attributes, such as col-*, visible
and hidden:
Live preview
Reference section
| Attribute | Default value | Description |
|---|---|---|
| ajax | false | Whether the Button submits the form with AJAX. |
| alt | (none) | Alternate textual description of the element rendered by this component. |
| 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. |
| delay | (none) | Delays the AJAX request. |
| disabled | false | Boolean value to specify if the button is disabled. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| height | (none) | Override for the height of this image. |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| 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. |
| 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. |
| library | (none) | The name of the folder in the JSF resource library. Alternatively, you can specify the file name directly using the 'value' attribute. |
| 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. |
| name | (none) | The name of the icon in the JSF resource library. Alternatively, you can specify the file name directly using the 'value' attribute. |
| 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. |
| 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. |
| ondragover | (none) | Client side callback when an element is dragged over another element. Call event.preventDefault() to allow the dragged element to drop. May also call an AJAX function. |
| ondragstart | (none) | Client side callback when a drag-and-drop action starts. May also call an AJAX function. |
| ondrop | (none) | Client side callback when a drag-and-drop action ends. May also call an AJAX function. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onloadend | (none) | JavaScript code executed when the image has successfully been loaded. Note that using this options reduces the speed of loading. |
| onloadstart | (none) | JavaScript code executed when the image starts loading. Note that using this options reduces the speed of loading. |
| 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. |
| onprogress | (none) | JavaScript code executed when the image loading progresses. Note that using this options reduces the speed of loading. |
| 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. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| 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 this element. |
| 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 title information about markup elements generated for this component. |
| 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) | The file name of this image. Alternatively, you can use the attributes 'library' and 'name' to use the JSF resource library. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |
| width | (none) | Override for the width of this image. |
BootsFaces generates pretty simple code for the <b:image>. In particular, there's no extra CSS class. You can modify the appearance of the
image using the standard JSF attributes styleClass and style.