Inspired by PrimeFaces, BootsFaces implements a couple of powerful search expressions to make your life easier.
In almost every case, you can get rid of ids. Use @form
,
@next
,@previous
,@parent
and even jQuery-Expressions like @(.css-class)
instead.
The search expressions can be used with the update
and process
attributes of the AJAX-enabled BootsFaces components.
For these components, the search expressions should also work with traditional <f:ajax />
facets (although we discourage
the use of these AJAX facets - in most cases you don't need them).
Like in standard JSF, you can use ids to determine which region of the DOM to update:
The preceding colon indicates that :tabViewId
isn't inside the "naming container" - usually a form or a custom composite component -
but in the root of the JSF component tree. The panelId
is direct descendant of the form, so it doesn't need a colon.
Standard JSF introduces several search expressions, basically shortcut allowing you to get rid of the ids in many cases:
PrimeFaces adds a couple of very useful search expressions, which are supported by BootsFaces, too. (Actually, @next and @previous originally were contributed to PrimeFaces by one of the BootsFaces team members):
@(.css-class)
to find
one or more elements with a given CSS class. The advantage of the jQuery expressions is that you aren't restricted to by the
JSF tree. Instead, the jQuery expressions always searches the entires DOM tree. Be careful: sometimes this can result in
unexpected results, such as sending multiple forms simultaneously to the server, which is forbidden by HTML. Note that the
algorithm parsing the jQuery expression is very primitive. Don't add spaces to the jQuery expression. Otherwise, it is treated
as two distinct jQuery expressions. Note that this search expression can only be used for the
update
and process
. Every other attribute requires a search expression evaluated
on the server-side, such as @styleClass.BootsFaces introduces several search expressions, basically shortcuts allowing you to get rid of the ids in many cases.
Note that most BootsFaces search expression scan the entire JSF tree recursively, which may result in a
performance penalty. If that's an issue, you can optimize the performance by limiting the
search to a subtree. For instance, @property("myBean.myProperty")
scans the entire JSF
tree, while @form:@property("myBean.myProperty")
limits the search to the current form.
@form:**:someId
looks for someId
,
considering the entire form. breaking change in 1.0.2 Since 1.0.2, this may result multiple ids.
Until 1.0.1, this search expression only returned the first id in the JSF tree (if any).*suffix
, prefix*
or prefix*suffix
.
Only the topmost level is considered.*suffix
, prefix*
or prefix*suffix
.
Searches the entire tree.There are a few PrimeFaces search expressions BootsFaces does not support:
The reason why one of us (Stephan) originally invented @next
and @previous
was that he'd
observed that input fields typically occur as a triplet: a label, the input field itself and an error message.
It's rather cumbersome and error-prone to implement this using ids, but it's pretty straightforward with
@next
and @previous
. As a bonus, you can copy and paste input field much more
easily, and you can even move them from one form to another without updating the id. In fact, the only reason
why the example below uses ids is because you need to knwo the id in order to create messages on the
server side.
@after
comes in handy if you've got a complex form. Let's add a switch to the previous example.
The input field is hidden until the switch is activated. Of course, both the label and the error message
have to be hidden, too. You can achieve this with update="@after"
:
However, this example also shows that the validation logic of JSF usually gets in your way when you try to hide or show fields depending on other fields. Better use JavaScript instead.
This demo shows some of the options at a glance.
This demo shows most options on a single screen. Most buttons modify the images. The buttons in the image row modify the image in the same row. The buttons below modify the entire page. Some buttons also show the appearance of the button itself (by counting up the numbers). As you can see, you can freely combine every option the search expression framework gives you.