What exactly is #{component} in EL?

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?

Leave a Comment