JSF2 Primefaces - p:galleria Example

p:galleria è un tag per la visualizzazione delle immagini:

<p:galleria value=”#{galleriaBean.images}” var=”image” >

<p:graphicImage value=”/resources/images/#{image}” />

</p:galleria>

Si hanno a disposizione vari effetti:
http://primefaces-rocks.appspot.com/ui/galleria.jsf

Bean java e pagina xhtml

galleria.xhtml

<!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.org/ui”
xmlns:c=”http://java.sun.com/jsp/jstl/core”>
<h:head/>
<h:body>
<h:form>
<h3>Images1 </h3>
<p:galleria value=”#{galleriaBean.images}” var=”image” panelWidth=”500″ panelHeight=”313″ effectSpeed=”1000″>
<p:graphicImage value=”/resources/images/#{image}” />
</p:galleria>

<h3>Custom Content</h3>
<p:galleria id=”contentGalleria” value=”#{galleriaBean.players}” var=”player” panelWidth=”250″ panelHeight=”300″
frameWidth=”48″ frameHeight=”65″ effect=”clip”>

<p:graphicImage id=”playerImage” value=”/resources/images/#{player.photo}” alt=”#{image}” title=”#{player.name}”/>
<f:facet name=”content”>
<h:panelGrid columns=”2″ cellpadding=”5″>
<f:facet name=”header”>
<p:graphicImage value=”/resources/images/#{player.photo}” />
</f:facet>

<h:outputText value=”Name: ” />
<h:outputText id=”name” value=”#{player.name}”/>

<h:outputText value=”Number ” />
<h:outputText id=”number” value=”#{player.number}”/>

<h:outputText value=”Position ” />
<h:outputText id=”position” value=”#{player.position}”/>
</h:panelGrid>
</f:facet>

</p:galleria>
</h:form>
</h:body>
</html>

GalleriaBean.java

package com;

import java.util.ArrayList;
import java.util.List;
import java.util.ResourceBundle;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;

@ManagedBean
@SessionScoped
public class GalleriaBean {

private List<String> images;

private List<Player> players;

private Player selectedPlayer;

@PostConstruct
public void init() {
images = new ArrayList<String>();

for(int i=1;i<=12;i++) {
images.add(“photoProfile.png”);
}

players = new ArrayList<Player>();

players.add(new Player(“Messi”, 10, “photoProfile.png”, “CF”));
players.add(new Player(“Iniesta”, 8, “photoProfile.png”, “CM”));
players.add(new Player(“Villa”, 7, “photoProfile.png”, “CF”));
players.add(new Player(“Xavi”, 6, “photoProfile.png”, “CM”));
players.add(new Player(“Puyol”, 5, “photoProfile.png”, “CB”));
}

public Player getSelectedPlayer() {
return selectedPlayer;
}

public void setSelectedPlayer(Player selectedPlayer) {
this.selectedPlayer = selectedPlayer;
}


public List<String> getImages() {
return images;
}

public List<Player> getPlayers() {
return players;
}
}

Esecuzione
Deployando e, da browser, chiamando l’url:

http://localhost:8080/JSFProject/faces/galleria.xhtml

si ottiene:

JSF2 Primefaces – p:galleria Example

Lascia un commento Annulla risposta