Visualizing data with ring

The ring component displays a list of data with a circular animation.

How to do it...

A basic definition for displaying a list of car models is as follows:

<p:ring id="simple" value="#{ringController.cars}" var="car" style="width:100%">
<p:column>
<p:outputPanel style="text-align:center;" layout="block">
#{car.name}
</p:outputPanel>
</p:column>
</p:ring>

A collection of elements should be provided to the component as a data model. The visual output of the component will be as follows:

There's more...

The rows attribute defines the number of rows to display per page. The default value is 0, meaning to display all data available. The first attribute specifies the index of the first data to display.

Effects with easing

With the easing attribute, it is possible to define the easing effect while transiting between the elements of ring. All the possible values for the easing effect are stated in the following list:

• easeInBack

• easeInBounce...