What exactly is #{component} in EL?

Question

According to https://code.google.com/p/primefaces/issues/detail?id=4720, The ComponentUtils.resolveWidgetVar(String expression, UIComponent component) function is available in Primefaces since 2013. It can be used in EL by the "#{p:widgetVarFromContext(searchExpression, component)}" function.

This is useful in case of several components have the same id in different NamingContainer, but are still present in the same view. In this case, the #{p:widgetVar(searchExpression)} function only returns the last one found.

I don't understand however how to reference the UIComponent that must be passed as the second argument from EL. The above mentioned bug report suggests we can refer to it using #{component}. Can anyone provide me with an example?

Answer 1

The #{component} is an implicit EL variable referring the current UIComponent in EL scope (see also implicit EL objects). You can usually only refer it in component's HTML attribute or in template text children.

E.g. in case of <h:inputText> it will reference an instance of UIInput class which has among others an isValid() method.

<h:inputText id="foo" required="true"
    style="background: #{component.valid ? '' : 'pink'}"
    onclick="alert('Client ID of this component is #{component.clientId}');" />

You can also use binding attribute to let JSF during view build time put a reference to a component instance in the Facelet scope. This way the component reference will be available anywhere in the Facelet during view render time.

<script>alert('Client ID of foo component is #{foo.clientId}');</script>
<h:inputText binding="#{foo}" />

See also:

• Difference between client id generated by component.clientId and p:component()
• JSF component binding without bean property
• How does the 'binding' attribute work in JSF? When and how should it be used?