Ring
Ring is a data display component with a circular animation.
Source
<h:form id="form">
<h3>Basic Ring</h3>
<p:ring id="basic" value="#{ringBean.players}" var="player">
<p:column>
<p:outputPanel style="text-align:center;" layout="block">
#{player.name}
<p:commandButton update=":form:detail"
icon="ui-icon-search"
title="View" oncomplete="dlg.show()">
<f:setPropertyActionListener value="#{player}"
target="#{ringBean.selectedPlayer}" />
</p:commandButton>
</p:outputPanel>
</p:column>
</p:ring>
<h3>Images with Custom Easing</h3>
<p:ring id="custom" value="#{ringBean.players}" var="player"
styleClass="image-ring" easing="easeInOutBack">
<p:graphicImage value="/images/barca/#{player.photo}"/>
</p:ring>
<p:dialog id="dialog" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true" width="125">
<p:outputPanel id="detail" style="text-align:center;" layout="block">
<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty ringBean.selectedPlayer}">
<f:facet name="header">
<p:graphicImage
value="/images/barca/#{ringBean.selectedPlayer.photo}"
width="40" height="50"/>
</f:facet>
<h:outputText value="Name: " />
<h:outputText id="modelNo"
value="#{ringBean.selectedPlayer.name}" />
<h:outputText value="Number " />
<h:outputText id="year"
value="#{ringBean.selectedPlayer.number}" />
<h:outputText value="Position " />
<h:outputText value="#{ringBean.selectedPlayer.position}"/>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
package org.primefaces.examples.view;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import org.primefaces.examples.domain.Player;
public class RingBean implements Serializable {
private List<Player> players;
private Player selectedPlayer;
public RingBean() {
players = new ArrayList<Player>();
players.add(new Player("Messi", 10, "messi.jpg", "CF"));
players.add(new Player("Bojan", 9, "bojan.jpg", "CF"));
players.add(new Player("Iniesta", 8, "iniesta.jpg", "CM"));
players.add(new Player("Villa", 7, "villa.jpg", "CF"));
players.add(new Player("Xavi", 6, "xavi.jpg", "CM"));
players.add(new Player("Puyol", 5, "puyol.jpg", "CB"));
}
public List<Player> getPlayers() {
return players;
}
public Player getSelectedPlayer() {
return selectedPlayer;
}
public void setSelectedPlayer(Player selectedPlayer) {
this.selectedPlayer = selectedPlayer;
}
}
