problème d'affichage un slot

salut j'ai suivi le tutoriel de primeface http://www.primefaces.org/showcase/u...pableBarca.jsf mais le porblème qu'il m'affiche pas le panal slot
voila mon code
dans le mangementBean j'ai déclarer 2 classes une class pour bean et une classe pour l'objet player

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
 
public class Player {
	private String name;
	private int number;
	private String photo;
	private String position;
 
	public String getName() {
		return name;
	}
 
	public void setName(String name) {
		this.name = name;
	}
 
	public int getNumber() {
		return number;
	}
 
	public void setNumber(int number) {
		this.number = number;
	}
 
	public String getPosition() {
		return position;
	}
 
	public void setPosition(String position) {
		this.position = position;
	}
 
	public Player() {
 
		// TODO Auto-generated constructor stub
	}
 
	public Player(String name, int number, String img, String position) {
		super();
		this.name = name;
		this.number = number;
		this.photo = img;
		this.position = position;
	}
 
	public String getPhoto() {
		return photo;
	}
 
	public void setPhoto(String photo) {
		this.photo = photo;
	}
 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
package tn.esprit.GamesParckWeb.MangementBeanUser;
 
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
 
import org.primefaces.event.DragDropEvent;
 
 
import tn.esprit.GamesParckWeb.player.Player;
 
@ManagedBean
@SessionScoped
public class Barcelona implements Serializable {
 
    private List<Player> players;
 
    private List<Player> selectedPlayers;
    private Player player= new Player();
 
    public Barcelona() {
        players = new ArrayList<Player>();
        selectedPlayers = new ArrayList<Player>();
 
        players.add(new Player("Messi", 10, "messi.jpg", "forward"));
        players.add(new Player("Villa", 7, "villa.jpg", "forward"));
        players.add(new Player("Pedro", 17, "pedro.jpg", "forward"));
        players.add(new Player("Bojan", 9, "bojan.jpg", "forward"));
        players.add(new Player("Xavi", 6, "xavi.jpg", "midfield"));
        players.add(new Player("Iniesta", 8, "iniesta.jpg", "midfield"));
        players.add(new Player("Mascherano", 16, "mascherano.jpg", "defence"));
        players.add(new Player("Puyol", 5, "puyol.jpg", "defence"));
        players.add(new Player("Alves", 2, "alves.jpg", "defence"));
        players.add(new Player("Valdes", 1, "valdes.jpg", "goalkeeper"));
        players.add(new Player("Abidal", 22, "abidal.jpg", "defence"));
        players.add(new Player("Adriano", 16, "adriano.jpg", "defence"));
        players.add(new Player("Pinto", 13, "pinto.jpg", "goalkeeper"));
        players.add(new Player("Pique", 3, "pique.jpg", "defence"));
        players.add(new Player("Keita", 7, "keita.jpg", "midfield"));
        players.add(new Player("Maxwell", 5, "maxwell.jpg", "defence"));
    }
 
    public List<Player> getPlayers() {
        return players;
    }
 
    public List<Player> getSelectedPlayers() {
        return selectedPlayers;
    }
 
    public void onDrop(DragDropEvent event) {
    	System.out.println("ok");
        Player player = (Player) event.getData();
 
        selectedPlayers.add(player);
 
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(player.getName() + " added", "Position:" + event.getDropId()));
    }
}

et dont le page jsf

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 
      xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<f:view>
<h:form prependId="false">  
 
    <p:growl id="growl" showDetail="true"/>  
 
    <h:panelGrid columns="2" columnClasses="lineup,squad">  
 
        <p:panel header="Squad">  
            <p:dataGrid id="availablePlayers" value="#{barcelona.players}" var="player" columns="4">  
                <p:column>  
                    <p:graphicImage id="player" value="/pages/images/barca/#{player.photo}" styleClass="playerImage"/>  
 
                    <p:draggable for="player" revert="true" scope="#{player.position}" stack=".playerImage"/>  
                </p:column>  
            </p:dataGrid>  
        </p:panel>  
 
        <h:panelGroup>  
            <h:panelGrid columns="3" style="margin-left:40px;">  
                <p:outputPanel id="LF" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="forward" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
 
                <p:outputPanel id="CF" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="forward" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
 
                <p:outputPanel id="RF" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="forward" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
            </h:panelGrid>  
 
            <h:panelGrid columns="3" style="margin-left:40px;">  
                <p:outputPanel id="LCM" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="midfield" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
 
                <p:outputPanel id="DM" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="midfield" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
 
                <p:outputPanel id="RCM" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="midfield" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
            </h:panelGrid>  
 
            <h:panelGrid columns="4">  
                <p:outputPanel id="LB" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
 
                <p:outputPanel id="CB1" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
 
                <p:outputPanel id="CB2" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
 
                <p:outputPanel id="RB" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="defence" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
            </h:panelGrid>  
 
            <h:panelGrid columns="1" style="margin-left:120px;">  
                <p:outputPanel id="GK" styleClass="slot">  
                    <p:droppable  tolerance="fit" activeStyleClass="slotActive" scope="goalkeeper" onDrop="handleDrop" datasource="availablePlayers">  
                        <p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />  
                    </p:droppable>  
                </p:outputPanel>  
            </h:panelGrid>  
        </h:panelGroup>  
 
 
    </h:panelGrid>  
 
    <p:panel header="Squad">  
        <p:dataList value="#{barcelona.selectedPlayers}" var="player" id="selectedPlayers">  
            #{player.number} - #{player.name}  
        </p:dataList>  
    </p:panel>  
 
</h:form>  
 
</f:view></h:body>
</html>