Ring
Ring is a data display component with a circular animation.
Documentation
<style type="text/css">
.image-ring .ui-ring-item {
border:0 none;
}
.image-ring .ui-ring-item img {
width: 100%;
}
.ui-ring button {
font-size: 1em !important;
}
.value {
font-weight: bold;
}
</style>
<h:form id="form">
<h3 style="margin-top: 0">Basic Ring</h3>
<p:ring id="basic" value="#{ringView.cars}" var="car">
<p:outputPanel style="text-align: center;" layout="block">
#{car.brand}
<br />
<p:commandButton update=":form:carDetail" icon="pi pi-search" title="View" oncomplete="PF('carDialog').show();">
<f:setPropertyActionListener value="#{car}" target="#{ringView.selectedCar}" />
</p:commandButton>
</p:outputPanel>
</p:ring>
<h3>Images with Custom Easing</h3>
<p:ring id="custom" value="#{ringView.cars}" var="car" styleClass="image-ring" easing="easeInOutBack">
<p:graphicImage id="img" name="/demo/images/car/#{car.brand}-big.gif" />
</p:ring>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="carDetail" style="text-align:center;" layout="block">
<p:panelGrid columns="2" rendered="#{not empty ringView.selectedCar}" columnClasses="value">
<f:facet name="header">
<p:graphicImage name="demo/images/car/#{ringView.selectedCar.brand}-big.gif" />
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{ringView.selectedCar.id}" />
<h:outputText value="Year" />
<h:outputText value="#{ringView.selectedCar.year}" />
<h:outputText value="Brand: " />
<h:outputText value="#{ringView.selectedCar.brand}" />
<h:outputText value="Color:" />
<h:outputText value="#{ringView.selectedCar.color}" style="color:#{ringView.selectedCar.color}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
@Named
@RequestScoped
public class RingView implements Serializable {
private List<Car> cars;
private Car selectedCar;
@PostConstruct
public void init() {
cars = new ArrayList<Car>();
cars.add(new Car("1", "Ford", 2000, "Black"));
cars.add(new Car("2", "Audi", 2003, "Orange"));
cars.add(new Car("4", "BMW", 2012, "Red"));
cars.add(new Car("5", "Fiat", 2001, "Yellow"));
cars.add(new Car("6", "Mercedes", 2014, "Blue"));
}
public List<Car> getCars() {
return cars;
}
public void setCars(List<Car> cars) {
this.cars = cars;
}
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
}
public class Car implements Serializable {
public String id;
public String brand;
public int year;
public String color;
public int price;
public boolean sold;
public Car() {}
public Car(String id, String brand, int year, String color) {
this.id = id;
this.brand = brand;
this.year = year;
this.color = color;
}
public Car(String id, String brand, int year, String color, int price, boolean sold) {
this.id = id;
this.brand = brand;
this.year = year;
this.color = color;
this.price = price;
this.sold = sold;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getBrand() {
return brand;
}
public void setBrand(String brand) {
this.brand = brand;
}
public int getYear() {
return year;
}
public void setYear(int year) {
this.year = year;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
public boolean isSold() {
return sold;
}
public void setSold(boolean sold) {
this.sold = sold;
}
@Override
public int hashCode() {
int hash = 7;
hash = 59 * hash + (this.id != null ? this.id.hashCode() : 0);
return hash;
}
@Override
public boolean equals(Object obj) {
if (obj == null) {
return false;
}
if (getClass() != obj.getClass()) {
return false;
}
final Car other = (Car) obj;
if ((this.id == null) ? (other.id != null) : !this.id.equals(other.id)) {
return false;
}
return true;
}
}
