I have a composite component with a dataScroller inside (tomahawk). In my xhtml I tried to use this component but I receive an error:
java.lang.IllegalArgumentException: could not find UIData referenced by attribute dataScroller#for = 'myTable'
The component:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:t="http://myfaces.apache.org/tomahawk">
<composite:interface>
<composite:attribute name="for" targets="scroll"></composite:attribute>
<composite:attribute name="paginatorMaxPages" />
</composite:interface>
<h:head>
</h:head>
<h:body>
<composite:implementation>
<div class="paginacao">
<t:dataScroller id="scroll" for="#{cc.attrs.for}"
styleClass="paginador" renderFacetsIfSinglePage="false"
pageIndexVar="numeroPagina" pageCountVar="quantidadePaginas"
rowsCountVar="quantidadeRegistros" paginator="true"
paginatorMaxPages="#{cc.attrs.paginatorMaxPages}"
paginatorTableClass="paginasPaginador"
paginatorActiveColumnClass="negrito">
<f:facet name="first">#{labels['paginacao.primeira']}</f:facet>
<f:facet name="previous">#{labels['paginacao.anterior']}</f:facet>
<f:facet name="next">#{labels['paginacao.proxima']}</f:facet>
<f:facet name="last">#{labels['paginacao.ultima']}</f:facet>
</t:dataScroller>
</div>
</composite:implementation>
</h:body>
</html>
My datatable:
<h:form>
...
<t:dataTable id="myTable" var="item" value="#{mBean.lista}">
...
</t:dataTable>
...
</h:form>
<param:parametrosScroll id="dataScroller" for="myTable" paginatorMaxPages="5" />
To ensure reusability of multiple instances in the same view, composite components are inherently naming containers, like <h:form>, <h:dataTable>, etc. In your specific case, the relative client ID in for="myTable" will be searched in the context of <cc:implementation>, but there is no such component. Instead, it's outside the composite, in another naming container represented by <h:form>.
You've 2 options:
Pass an absolute client ID after having given the <h:form> a fixed ID.
for=":myForm:myTable"
Use a tagfile instead of a composite.
Related
In the given case, I want to use a facelet with different ManagedBeans, so the regarding action-bean is given as an parameter:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" >
<h:body>
<ui:include src="ratings.xhtml" >
<ui:param name="createAction" value="#{myOneCreateAction}" />
<ui:param name="ratings" value="#{context.ratings}" />
</ui:include>
</h:body>
</html>
I'm giving the create action as parameter value="#{myOneCreateAction}".
Within that facelet is a component also being used several times on other pages - so I try to refactor it in a composite component.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:io="http://java.sun.com/jsf/composite/inoutComponents">
<ui:composition>
<rich:dataTable id="ratingTblId"
value="#{ratings}"
var="rating">
<rich:column>
<io:removeButton
id="removeButton"
actionMethod="#{createAction.removeRating}"
immediate="true"
render=":#{rich:clientId('ratingTblId')}" />
<h:commandButton
id="removeButton2"
actionListener="#{createAction.removeRating}"
immediate="true" >
<f:ajax render="ratingTblId" />
</h:commandButton>
</rich:column>
</rich:dataTable>
</ui:composition>
</html>
See, how the method is given as actionMethod="#{createAction.removeRating}" to the component. This component itself looks like following:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:cc="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute
name="actionMethod"
targets="remove"
method-signature="void f(javax.faces.event.ActionEvent)"/>
<cc:attribute name="render" required="false" />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:commandButton
id="remove"
actionListener="#{cc.attrs.actionMethod}"
onclick="if (!confirm('Do you really?')) { return false; }">
<f:ajax execute="#this" render="#{cc.attrs.render}" />
</h:commandButton>
</cc:implementation>
</ui:composition>
and last but not least, the managed bean
Name("myOneCreateAction")
#Scope(ScopeType.CONVERSATION)
public class MyOneCreateAction {
...
public void removeRating(ActionEvent ev) {
// do something
}
...
}
Surprisingly, while the removeButton2 correctly jumps into the right function, the composite components version returns a
javax.faces.event.AbortProcessingException: Target Unreachable,
identifier 'createAction' resolved to null
instead. Am using Mojarra JSF 2.1.26 with Seam 2.3.1.CR1. There are no nested composite components. When replacing the composite component parameter to #{myOneCreateAction.removeRating}, it works like expected.
Has anybody seen this before? Am I blind? Any work-arounds known... ? Thanks in advance!
As a work-around I rewrote the component to give action bean and action method as two separate parameters resolving them as following
xhtml:
<io:removeButton
id="removeButton"
actionBean="#{createAction}"
actionMethod="removeRating"
immediate="true"
render=":#{rich:clientId('ratingTblId')}" />
composite component:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:cc="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="actionBean" />
<cc:attribute name="actionMethod" />
<cc:attribute name="render" required="false" />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:commandButton
id="remove"
action="#{cc.attrs.actionBean[cc.attrs.actionMethod]}"
onclick="if (!confirm('Do you really?')) { return false; }">
<f:ajax execute="#this" render="#{cc.attrs.render}" />
</h:commandButton>
</cc:implementation>
</ui:composition>
also changing the action methods signature to return String instead of void. That does not look that super sexy anymore, but works. :-/
I was having the same issue, found out that it has been fixed on version 2.2.15:
https://github.com/javaserverfaces/mojarra/issues/4271
I'm trying to create a paginator composite component. The component should render a commandLink for each available page. It looks something like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:ui="http://java.sun.com/jsf/facelets">
<cc:interface>
<cc:attribute name="action" targets="jumpButton" required="true"/>
<cc:attribute name="bean" type="java.lang.Object" required="true"/>
</cc:interface>
<cc:implementation>
<ui:repeat value="#{cc.attrs.bean.pages}" var="page">
<h:commandLink id="jumpButton"
actionListener="#{cc.attrs.bean.jumpToPage(page)}">
<h:outputText value="#{page}"/>
</h:commandLink>
</ui:repeat>
</cc:implementation>
</html>
The component is used in various pages like this:
<ccc:paginator bean="#{myBean}"
action="/index?faces-redirect=true&includeViewParams=true"/>
Or:
<ccc:paginator bean="#{myOtherBean}"
action="/dir/index?faces-redirect=true&includeViewParams=true"/>
Notice the use of faces-redirect=true and includeViewParams=true, which as far as I know cannot be used directly on the commandLinks in the composite component.
The problem is that jumpButton cannot be target because it is inside an ui:repeat. I get the message:
javax.servlet.ServletException: /index?faces-redirect=true&includeViewParams=true : Unable to re-target MethodExpression as inner component referenced by target id 'jumpButton' cannot be found.
If I create a command link with id="jumpButton" outside the ui:repeat, the composite component and button works fine. How can I make my composite component work with the command link inside the ui:repeat?
Solution
The managed bean's jumpToPage action:
public String jumpToPage(String path, Integer page) {
...
setCurrentPage(page);
return path;
}
The composite component:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:ui="http://java.sun.com/jsf/facelets">
<cc:interface>
<cc:attribute name="bean" type="java.lang.Object" required="true"/>
<cc:attribute name="path" type="java.lang.String" required="true"/>
</cc:interface>
<cc:implementation>
<ui:repeat value="#{cc.attrs.bean.pages}" var="page">
<h:commandLink id="jumpButton"
action="#{cc.attrs.bean.jumpToPage(cc.attrs.path, page)}">
<h:outputText value="#{page}"/>
</h:commandLink>
</ui:repeat>
</cc:implementation>
</html>
Component usage examples:
<ccc:paginator bean="#{myBean}"
path="/index?faces-redirect=true&includeViewParams=true"/>
<ccc:paginator bean="#{myOtherBean}"
path="/dir/index?faces-redirect=true&includeViewParams=true"/>
You should remove the action attribute within <cc:interface>. It is not needed since you invoke the action via the bean attribute.
Update 1
And the outcome of the action you can also define as return value of your bean. Like this:
public class MyBean {
public String jumpToPage(int page){
// ...
return "/index?faces-redirect=true&includeViewParams=true";
}
}
And then use action instead of actionListener:
<h:commandLink id="jumpButton" action="#{cc.attrs.bean.jumpToPage(page)}">
<h:outputText value="#{page}"/>
</h:commandLink>
I am goin to explain a problem that I have when I use one composite component inside a template.
Imagine one view like this, that work with a generic managed bean with view scope. I pass it to the template as a parameter.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:trkal="http://java.sun.com/jsf/composite/trkalcomponents">
<ui:composition template="/template.xhtml">
<ui:param name="maisuBean" value="#{genericBean}" />
</ui:composition>
</html>
The template is like this. Beside other components, it also use one composite component.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:trkal="http://java.sun.com/jsf/composite/trkalcomponents">
<h:head>
<title>Titulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</h:head>
<h:body>
<h:form enctype="multipart/form-data">
...
<trkal:toolbarbuttonwidget id="buttonToolbar" label="Action" iconName="toolbar.png"
buttonAction="#{maisuBean.myActionListener}"
>
</trkal:toolbarbuttonwidget>
...
<h:commandLink id="otherButton" actionListener="#{maisuBean.myActionListener}">
<h:graphicImage library="images" name="toolbar.png" />
<h:outputText value="Other Action" />
</h:commandLink>
...
</h:form>
</h:body>
</html>
As you can see, this template use one composite components that allow specify the action listener that hear this event.
<composite:interface>
<composite:attribute name="id" />
<composite:attribute name="buttonAction" method-signature="void myAction(javax.faces.event.ActionEvent)" targetAttributeName="actionListener"/>
<composite:attribute name="iconName" />
<composite:attribute name="label"/>
<composite:attribute name="title"/>
<composite:attribute name="styleClass"/>
</composite:interface>
<composite:implementation>
<h:outputStylesheet target="head" library="trkalcomponents" name="toolbarbuttonwidget.css" />
<h:commandLink id="buttonAction">
<h:graphicImage library="images" name="#{cc.attrs.iconName}" />
<h:outputText value="#{cc.attrs.label}" />
</h:commandLink>
</composite:implementation>
If I click in otherButton, it work fine, but if I click in buttonToolbar it don't work.
09-nov-2012 19:16:28 javax.faces.event.MethodExpressionActionListener processAction
GRAVE: Se ha recibido 'javax.el.PropertyNotFoundException' al invocar la escucha de acción '#{maisuBean.myActionListener}' para el componente 'buttonAction'
09-nov-2012 19:16:28 javax.faces.event.MethodExpressionActionListener processAction
GRAVE: javax.el.PropertyNotFoundException: /template.xhtml #20,6 buttonAction="#{maisuBean.myActionListener}": Propiedad 'myActionListener' no hallada en el tipo com.joxeja.test.ToolBarBean
at com.sun.faces.facelets.el.TagValueExpression.getValue(TagValueExpression.java:111)
It seem that it can't resolve the EL expression inside the composite component.
What is wrong? How can I use one composite componente inside one template?
I am using Mojarra 2.1.7
Thanks.
Sorry I missed this on the first read:
Your implementation isn't targeting the attributes properly. I made this mistake (as I'm pretty sure all of us do). You need to reference the attributes as -> #{cc.attrs.someAttribute} not by their name. You do this for most of the elements, but not the actionListener. If that is your code it should fix it. Your signatures are correct. You're trying to use the targetAttributeName which I'm not familiar with. My guess is you need to set the id of the component to that name (so your button would be myAction not actionListener (if I'm referencing the same example you are).
That aside, how I would do it is:
<composite:interface>
<composite:attribute name="id" />
<!--
<composite:attribute name="buttonAction" method-signature="void myAction(javax.faces.event.ActionEvent)" targetAttributeName="actionListener"/>
-->
<composite:attribute name="buttonAction" method-signature="void action(javax.faces.event.ActionEvent)"/>
<composite:attribute name="iconName" />
<composite:attribute name="label"/>
<composite:attribute name="title"/>
<composite:attribute name="styleClass"/>
</composite:interface>
<composite:implementation>
<h:outputStylesheet target="head" library="trkalcomponents" name="toolbarbuttonwidget.css" />
<!-- fix below -->
<h:commandLink id="buttonAction" actionListener=#{cc.attrs.buttonAction}>
<h:graphicImage library="images" name="#{cc.attrs.iconName}" />
<h:outputText value="#{cc.attrs.label}" />
</h:commandLink>
</composite:implementation>
I like this method because it is similar to the rest of the way pages are marked up and it seems simple. Give it a shot.
How can I use id of DataTable Component (Primefaces 2.2.1) inside Composite Component in Java Server Faces 2.1 ?
Now, I have a view:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:haiq="http://java.sun.com/jsf/composite/haiqcomponents"
template="/WEB-INF/templates/login/main.xhtml">
<ui:define name="content">
<h:form prependId="false"> <!-- prependId="true" ??? -->
<p:dataTable id="leakTable" var="leak" value="#{dataExplorer.data}">
<p:column filterBy="#{leak.source}" headerText="source" footerText="source" filterMatchMode="contains" >
<f:facet name="header">
<h:outputText value="source" />
</f:facet>
<h:outputText value="#{leak.source}" />
</p:column>
<!-- Few more columns here -->
</p:dataTable>
<!-- Add : prefix before ID? -->
<haiq:exporter target=":leakTable" fileName="#{msgs.fileName}" imageLibrary="images" pageOnly="false" />
</h:form>
</ui:define>
</ui:composition>
My composite component:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="fileName" default="data" />
<cc:attribute name="target" required="true" type="java.lang.String" />
<cc:attribute name="pageOnly" default="true" type="java.lang.Boolean" />
<cc:attribute name="imageLibrary" default="images" />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:commandLink>
<h:graphicImage library="#{cc.attrs.imageLibrary}" name="excel.png" />
<p:dataExporter type="xls"
target="#{cc.attrs.target}"
fileName="#{cc.attrs.filename}"
pageOnly="#{cc.attrs.pageOnly}" />
</h:commandLink>
</cc:implementation>
</html>
After view rendering, following error occurred:
javax.faces.FacesException: Cannot find component ":leakTable" in view.
at org.primefaces.component.export.DataExporter.processAction(DataExporter.java:89)
at javax.faces.event.ActionEvent.processListener(ActionEvent.java:88)
at javax.faces.component.UIComponentBase.broadcast(UIComponentBase.java:769)
at javax.faces.component.UICommand.broadcast(UICommand.java:300)
Removing : before leakTable (in target attribute) or changing preperndId (in form) to true does not solve the problem.
How can I use datatable inside cc?
Similar problem is described here
Apparently you've another NamingContainer parent in the view. To be sure, open page in browser, rightclick and View Source and determine the generated ID of <p:dataTable id="leakTable">. Then, you should grab exactly that ID and prefix with :.
Alternatively, you can also bind the table component to the view and use UIComponent#getClientId() instead to dynamically refer the client ID.
<p:dataTable binding="#{leakTable}" ...>
with
<haiq:exporter target=":#{leakTable.clientId}" ...>
Unrelated to the concrete problem, I suggest to replace <!DOCTYPE><html> of your composite by <ui:component>, which is more natural and it also saves JSF from doing it impliticly everytime.
<ui:component
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.prime.com.tr/ui">
See also https://stackoverflow.com/tags/composite-component/info.
Im currently experimenting with facelets in JSF 2.0.
I currently have a case where a common grid definition is used by 2 facelets,
differs only in some areas like the bean name, the list name, the title, the grid id.
So what i have in mind is :
create template for that grid, making use of <ui:insert> in the areas that can differ between pages that use it
those 2 pages, make use of the template, supplying the parameters for the template with <ui:define>
Here is my gridTemplate.xhtml :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<title>#{msgs.title}</title>
</h:head>
<h:body>
<ui:composition template="/template/masterlayout.xhtml">
<p:dataTable id="<ui:insert name='gridId' />" var="rpb"
value="#{<ui:insert name='bean' />.<ui:insert name='list' />}">
<f:facet name="header">
<h3><ui:insert name='title' /></h3>
</f:facet>
.....
<f:facet name="footer">
#{fn:length(<ui:insert name='bean' />.<ui:insert name='list' />)} records<br />
</f:facet>
</p:dataTable>
</ui:composition>
</h:body>
</html>
And here's one of the facelet that makes use of the grid template :
<ui:composition template="gridTemplate.xhtml">
<ui:define name="gridId">grid</ui:define>
<ui:define name="bean">myBean</ui:define>
<ui:define name="list">myList</ui:define>
<ui:define name="title">my message !</ui:define>
</ui:composition>
And this experiment ends up with :
javax.servlet.ServletException: Error Parsing /gridTemplate.xhtml: Error Traced[line: 17] The value of attribute "id" associated with an element type "null" must not contain the '<' character.
javax.faces.webapp.FacesServlet.service(FacesServlet.java:325)
root cause
javax.faces.view.facelets.FaceletException: Error Parsing /gridTemplate.xhtml: Error Traced[line: 17] The value of attribute "id" associated with an element type "null" must not contain the '<' character.
com.sun.faces.facelets.compiler.SAXCompiler.doCompile(SAXCompiler.java:394)
com.sun.faces.facelets.compiler.SAXCompiler.doCompile(SAXCompiler.java:368)
com.sun.faces.facelets.compiler.Compiler.compile(Compiler.java:124)
com.sun.faces.facelets.impl.DefaultFaceletFactory.createFacelet(DefaultFaceletFactory.java:297)
com.sun.faces.facelets.impl.DefaultFaceletFactory.access$100(DefaultFaceletFactory.java:92)
com.sun.faces.facelets.impl.DefaultFaceletFactory$1.newInstance(DefaultFaceletFactory.java:162)
com.sun.faces.facelets.impl.DefaultFaceletFactory$1.newInstance(DefaultFaceletFactory.java:161)
com.sun.faces.facelets.impl.DefaultFaceletCache$1.newInstance(DefaultFaceletCache.java:83)
com.sun.faces.facelets.impl.DefaultFaceletCache$1.newInstance(DefaultFaceletCache.java:79)
com.sun.faces.util.ExpiringConcurrentCache$1.call(ExpiringConcurrentCache.java:99)
java.util.concurrent.FutureTask$Sync.innerRun(FutureTask.java:303)
java.util.concurrent.FutureTask.run(FutureTask.java:138)
I assume that this approach is not plausible, hence there should be a better solution for this kind of needs.
Should i use JSF Facelet Tag or JSF Composite Tag for this kind of case ?
Please share your opinions .. Thank you !
You have to make a composite component instead of template
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:cc="http://java.sun.com/jsf/composite">
<cc:interface>
<cc:attribute name="list"/>
<cc:attribute name="title"/>
</cc:interface>
<cc:implementation>
<p:dataTable id="#{cc.id}" var="rpb"
value="#{cc.attrs.list}">
<f:facet name="header">
<h3>#{cc.attrs.title}</h3>
</f:facet>
.....
<f:facet name="footer">
#{fn:length(cc.attrs.list)} records<br />
</f:facet>
</p:dataTable>
</cc:implementation>
</html>
This component has to be placed in a folder inside the resources folder, on the root of your webapp. The name of the component will be the same as the filename. So for this example lets call the component myComponent inside the /resources/components folder:
/resources/components/myComponent.xhtml
Then in any page you want to include the component you just have to do include the namespace of your component
xmlns:albert="http://java.sun.com/jsf/composite/components"
and render your component:
<albert:myComponent id="..." title="..." list=#{someBean.someList} />