Discussion :

[maelstrom]

Bonjour,

Je rencontre un petit problème en JSF. Voilà j'essaie de créer un tableau Dynamique grâce à l'objet Primefaces DataTable. Par Dynamique j'entends que je peux rajouter et enlever des colonnes à la volée. Pour cela je me suis inspiré des exemples donnés sur le site de primefaces.
Le tableau se compose d'une première colonne représentant l'id de la ligne, puis de une à plusieurs autres colonnes ne contenant qu'un objet selectBooleanCheckbox, de cette manière :


Pour ça j'ai donc un objet Java qui représente les lignes de mon tableau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Le tout accompagner de getter, setter et constructeur
public class FunctionActionData
{
	private Boolean[] isActivated;
	private String id;
}

Le tableau de boolean représente chaque colonne du tableau.
J'ai aussi un objet View (ou MBean) qui va gérer mon app JSF :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
//Le tout accompagner de getter et setter
@ManagedBean(name = "dtColumnsView")
@ApplicationScoped
public class ColumnsView implements Serializable
{
	/**
         * 
         */
    private static final long serialVersionUID = -749089990661485115L;
 
	private final static List<String> VALID_COLUMN_KEYS = new ArrayList<String>();
 
	private List<ColumnModel> columns;
 
	private List<FunctionActionData> functionActionDatas;
 
	@ManagedProperty("#{functionActionServices}")
	private FunctionActionServices service;
 
	@PostConstruct
	public void init()
	{
		functionActionDatas = service.createFunctionActionDatas();
 
		for(FunctionData data : service.getListData())
		{
			VALID_COLUMN_KEYS.add(data.getShortLabel());
		}
 
		createDynamicColumns();
	}
 
	private void createDynamicColumns()
	{
		String[] columnKeys = VALID_COLUMN_KEYS.toArray(new String[VALID_COLUMN_KEYS.size()]);
		columns = new ArrayList<ColumnModel>();
 
		int i = 0;
		for (String columnKey : columnKeys)
		{
			columns.add(new ColumnModel(columnKey.toUpperCase(), i));
			i++;
		}
	}
 
	public void updateColumns()
	{
		// reset table state
		UIComponent table = FacesContext.getCurrentInstance().getViewRoot().findComponent(":form:functionActionDatas");
		table.setValueExpression("sortBy", null);
 
		// update columns
		createDynamicColumns();
	}
 
	static public class ColumnModel implements Serializable
	{
 
		/**
                 * 
                 */
        private static final long serialVersionUID = -3314098148361435201L;
		private String header;
		private int property;
 
		public ColumnModel(String header, int property)
		{
			this.header = header;
			this.property = property;
		}
 
		public String getHeader()
		{
			return header;
		}
 
		public int getProperty()
		{
			return property;
		}
	}
}

Et finalement le fichier xhtml de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<f:view>
	<h:form id="form">
 
		<h:panelGrid columns="3" style="margin:10px 0">
			<p:commandButton value="Add feature"
				oncomplete="PF('addClmn').show()"></p:commandButton>
		</h:panelGrid>
 
		<p:dataTable id="functionActionDatas" var="functionActionData"
			value="#{dtColumnsView.functionActionDatas}" scrollable="true"
			scrollHeight="500" widgetVar="functionActionDatasTable"
			filteredValue="#{dtColumnsView.filteredFunctionActionDatas}"
			resizableColumns="true">
			<p:column headerText="ID" filterBy="#{functionActionData.id}"
				style="width:100px;">
				<h:outputText value="#{functionActionData.id}" />
			</p:column>
			<p:columns value="#{dtColumnsView.columns}" var="column"
				columnIndexVar="colIndex" style="width:100px;">
				<f:facet name="header">
					<h:outputText value="#{column.header}" />
				</f:facet>
				<center>
					<p:selectBooleanCheckbox
						value="#{functionActionData.isActivated[column.property]}"
						onchange="PF('dlg').show()" />
				</center>
			</p:columns>
		</p:dataTable>
 
		<p:dialog id="dialog" header="Values" modal="true" resizable="false"
			showEffect="fade" widgetVar="dlg">
			<h:panelGrid columns="1" id="display">
				<h:outputText value="Value: #{column.property}" />
				<h:outputText value="Value: #{functionActionData.id}" />
				<h:outputText value="Value: #{column.header}" />
			</h:panelGrid>
		</p:dialog>
 
		<p:dialog id="AddColumn" header="Values" modal="true"
			resizable="false" showEffect="fade" widgetVar="addClmn">
			<h:panelGrid columns="2" id="display2">
				<h:outputText value="Short label: " />
				<h:inputText></h:inputText>
				<h:outputText value="Feature label: " />
				<h:inputText></h:inputText>
				<p:commandButton update="functionActionDatas"
					action="#{dtColumnsView.updateColumns}" value="Add"
					process="@parent"
					oncomplete="PF('functionActionDatasTable').clearFilters()" />
			</h:panelGrid>
		</p:dialog>
	</h:form>
</f:view>

Comme vous allez le voir il y a un bouton ouvrant une fenêtre de dialogue qui permettra a posteriori d'ajouter ou de retirer des colonnes, mais ce n'est pas cela qui nous intéresse.

Ce qui nous intéresse c'est la fenêtre ouverte lorsque l'on clique sur une selectBooleanCheckBox. Pour l'instant j'aimerais simplement récupérer les valeurs correspondant à la ligne (via l'id de la ligne) ainsi qu'au header de la colonne dans laquelle se trouve la checkbox sur laquelle on clique (il y a aussi property qui correspond au numéro de la colonne sur laquelle on clique). Le tout sachant qu'à terme j'aimerais remonter ces données dans le Java pour faire des changements en base de données ou autre.
Pour l'instant cela ne fonctionne pas, je récupère toujours les mêmes valeurs quelque soit la checkbox cochée (ou décochée) et celle-ci semble correspondre aux valeurs des dernières colonnes construites lors de la construction de la page (pour l'id de la ligne c'est vide).

Je pense donc me tromper de variable, mais je ne vois pas quel autre variable prendre. Peut-être que la méthode n'est aussi tout simplement pas la bonne, bref j'ai besoin de vos conseils/idées

Si je n'ai pas été clair sur un point n'hésitez pas.

[Cincinnatus]

Bonjour,

Il faut mettre à jour le panel contenu dans le dialog avant de l'afficher :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p:selectBooleanCheckbox
		value="#{functionActionData.isActivated[column.property]}"
                update=":form:display"
		onchange="PF('dlg').show()" />

Sinon, les valeurs affichées resteront celles générées à la création de la page.

[maelstrom]

Bonjour,

Alors effectivement je pense que c'était un premier problème, j'avais oublié de mettre à jour le panel.
Cependant cela ne semble pas suffire. Quelque soit la colonne j'avais toujours les mêmes données affichées dans la pop-up :


On peut voir que je récupère toujours l'id et le header de la dernière colonne. Quant à l'id de la ligne je ne le récupère pas du tout.

J'ai essayé de rajouté de l'ajax afin de reset le contenu de la pop-up de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<p:dialog id="dialog" header="Values" modal="true" resizable="false"
	showEffect="fade" widgetVar="dlg">
	<p:ajax event="close" update="dialog"/>
	<h:panelGrid columns="1" id="display">
		<h:outputText value="Value: #{column.property}" />
		<h:outputText value="Value: #{functionActionData.regionalBankId}" />
		<h:outputText value="Value: #{column.header}" />
	</h:panelGrid>
</p:dialog>

Mais pas beaucoup plus de résultat, la première fois que je clique sur une case j'ai toujours le même résultat que précédemment quelque soit la case coché. Et lorsque je clique une deuxième fois après, là c'est encore pire je n'ai plus que les label qui s'affiche et plus aucun résultat (vide comme pour l'id de la ligne).

Je pense que je ne synchronise pas correctement mes données. Il doit peut-être aussi me manquer un peu d'ajax ?

[maelstrom]

Donc j'ai finalement trouvé une solution via de l'ajax.

J'ai remplacé mes selectBooleanToolbox par des Inputswitch (choix purement cosmétique).

J'ai maintenant ceci dans mon xhtml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p:dataTable id="functionActionDatas" var="functionActionData"
	value="#{dtColumnsView.functionActionDatas}" scrollable="true"
	scrollHeight="500" widgetVar="functionActionDatasTable"
	filteredValue="#{dtColumnsView.filteredFunctionActionDatas}"
	styleClass="myTable">
	<p:column headerText="CODE CR"
		filterBy="#{functionActionData.id}">
		<h:outputText value="#{functionActionData.id}" />
	</p:column>
	<p:columns value="#{dtColumnsView.columns}" var="column"
		columnIndexVar="colIndex">
		<f:facet name="header">
			<h:outputText value="#{column.header}" />
			<br />
			<p:commandButton value="Delete" />
		</f:facet>
		<center>
			<p:inputSwitch value="#{functionActionData.isActivated[column.property]}" >
				<p:ajax listener="#{dtColumnsView.addMessage(functionActionData, column)}" update="form:msg" />
			</p:inputSwitch>
		</center>
	</p:columns>
</p:dataTable>

Donc lorsqu'on va cliquer sur un des switch la méthode addMessage dans mon java va être appelé et je lui passe en paramètre les variables functionActionData et column.
Et donc dans le Java j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
public void addMessage(FunctionActionData functionActionData, ColumnModel column)
{
	FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("CR : "+functionActionData.getId()+" header : "+column.getHeader()));
}

Et j'ai donc dans une popup l'id de la ligne et le header de la colonne de l'InputSwitch sur lequel je clique.