The contentFlow component can be used to display a collection of images horizontally as a cover flow animation.
A basic definition for contentFlow for viewing a static list of car images would be as follows:
<p:contentFlow id="simple">
<p:graphicImage value="/resources/images/autocomplete/CC.png"
styleClass="content" />
<p:graphicImage value="/resources/images/autocomplete/Golf.png"
styleClass="content" />
<p:graphicImage value="/resources/images/autocomplete/Polo.png"
styleClass="content" />
<p:graphicImage
value="/resources/images/autocomplete/Touareg.png"
styleClass="content" />
</p:contentFlow>The visual of the component will be as follows:
The style class content should be applied to all of the nested images within the component. It's a built-in style implementation shipping with PrimeFaces.
It is also possible to visualize a collection of car images that is bound through the value attribute of the component as a collection. The contentFlow component offers data iteration on the collection with the var attribute.
<p:contentFlow id="withData" value="#{contentFlowBean.cars}"
var="car">
<p:graphicImage
value="/resources/images/autocomplete/#{car.name}.png"
styleClass="content" />
</p:contentFlow>By defining a div as a sibling to the image given, contentFlow offers adding captions as information.
<p:contentFlow id="withCaption" value="#{contentFlowBean.cars}"
var="car">
<p:graphicImage
value="/resources/images/autocomplete/#{car.name}.png"
styleClass="content" />
<div class="caption">#{car.name}</div>
</p:contentFlow>The style class caption should be applied to div. It's a built-in style implementation shipping with PrimeFaces.
It's viable to apply the actions while handling user clicks on the caption. A sample that invokes a server-side method on the caption would be as follows:
<p:contentFlow id="withCaptionLink"
value="#{contentFlowBean.cars}" var="car">
<p:graphicImage
value="/resources/images/autocomplete/#{car.name}.png"
styleClass="content" />
<div class="caption">
<p:commandLink action="#{contentFlowBean.showMessage}"
update="growl">
#{car.name}
</p:commandLink>
</div>
</p:contentFlow>This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter7/contentFlow.jsf.