Difference between client id generated by component.clientId and p:component()

Question

I am trying to retrieve the client id of a h:panelGroup that is within a p:dataList.

I tried 2 approaches:

1.Using component.clientId e.g:

<h:panelGroup id="listItem">
    <h:outputText value="#{component.clientId}" />
</h:panelGroup>

2.Using p:component() e.g:

<h:panelGroup id="listItem">
    <h:outputText value="#{p:component('listItem')}" />
</h:panelGroup>

Please note that this panel group is within a datalist. Now, the client ids generates in both the cases is different. (1) does not have the value 'listItem' appended to the client id while (2) has the value 'listItem' in the generated clientId.

Also, the client id generated using (1) is different from that on the generated html component.

Could anyone shed some light on this issue as to why is this so ?

Answer 1

The implicit EL object #{component} refers to the current component, which is in the case of

<h:outputText value="#{component.clientId}" />

the <h:outputText> itself!

If you intend to print the client ID of another component, then you need to bind the component instance to an unique variable in the view by binding, so that you can reference it anywhere else in the same view.

<h:panelGroup id="listItem" binding="#{listItem}">
    <h:outputText value="#{listItem.clientId}" />
</h:panelGroup>

See also:

• Implicit EL objects
• How does the 'binding' attribute work in JSF? When and how should it be used?

Answer 2

There are two premises in my answer:

1. UIPanel class doesn't implement NamingContainer interface, thus, id of <h:panelGroup> won't end up in client id of its children;
2. #{component} resolves to the current component in which this variable is used.

In this light in the first snippet you're outputting client id of an <h:outputText>, that is the id of its naming container plus separator plus its autogenerated id (note that you mispaced : that should be . in your #{component:clientId}), and in the second snippet you use EL function p:component of PrimeFaces that searches the whole component tree for the component with id as specified in its parameter and returns client id of the found component.

So, you look for different components: <h:outputText> in the first case and <h:panelGroup> in the second case, and that explains the difference in results.

Under current setup the following expressions will yield identical results:

• #{component.parent.clientId} and
• #{p:component('listItem')}.