Editer un DataTable

**jibjib38** · 16/04/2010, 14h41

Bonjour,

Voilà je m'adresse à vous car j'ai beau avoir chercher un peu de partout sur le net je ne trouve pas le moyen d'obtenir un exemple de ce qui me conviendrait (soit dit en passant je découvre le framework Wicket).

Pour faire court je ne sais pas comment créer un tableau de données (et non une arborescence) qui puisse être modifiable suite à l'evênement "Selection de la ligne".
J'ai bien trouvé une solution avec un Treetable (cf lien), mais je n'arrive pas à adapter cet exemple avec un DataTable.

Exemple avec un treetable :
http://www.wicket-library.com/wicket...eTreeTablePage

Si toutefois quelqu'un a la solution, je suis preneur, je vous remerci d'avance pour votre aide.

Bonne journée

**joseph_p** · 17/04/2010, 14h23

Bonjour jibjib38

Il y a également le site Wicket Examples, et plus particulièrement la page sur les Repeaters. A priori ce qui correspondrait le mieux me semble etre le datatable, vu ce que je comprends de la demande.

A noter également l'existente de la Reference Library (wiki wicket), qui sans être exhaustive présente déjà bien des choses, notamment la page Tables and Grids, une bonne introduction à la problématique des listes.

Ne pas hésiter non plus à regarder directement le code : la javadoc est bien fournie, souvent avec des exemples (au niveau de la déclaration des classes).

Je suis resté assez général, mais s'il y a besoin de plonger dans les détails, alors ne pas hésiter à demander!

++
joseph

**jibjib38** · 22/04/2010, 13h20

Merci Joseph pour ton aide.

Je me suis finalement inspiré de l'exemple de wicket-library ; l'exemple d'une table editable, et je souhaiterai ajouter une action lock (pour chaque itération de ma table) qui me permetterai de vérouiller les zones modifiables.

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
 
public class FormInput extends WebPage
{
	private class ActionPanel extends Panel
        {
		public ActionPanel(String id, IModel<Contact> model)
                {
                     super(id, model);
                     add(new Link("lock")
                {
                @Override
                public void onClick()
                {
		     //Sur l'evenement "onClick" je souhaiterai verrouiller les
                     //TextField de ma table (setEnable(false))
                     ActionPanel.this.get("lastName").setEnabled(false);
                }
            });
        }
    }
	private class InputForm extends Form<FormInputModel>
        {
		/** Data Table ***********************************/
 
		add(new Label("selectedLabel", new PropertyModel<String>(this,   "selectedContactLabel")));
		SortableContactDataProvider dp = new SortableContactDataProvider();
 
		RefreshingView<Contact> refreshingView = new RefreshingView<Contact>("simple")
		{
			@Override
			protected Iterator<IModel<Contact>> getItemModels()
			{
				// for simplicity we only show the first 10 contacts
				Iterator<Contact> contacts = DatabaseLocator.getDatabase().find(0, 6, "firstName",
					true).iterator();
 
				// the iterator returns contact objects, but we need it to
				// return models, we use this handy adapter class to perform
				// on-the-fly conversion.
				return new ModelIteratorAdapter<Contact>(contacts)
				{
					@Override
					protected IModel<Contact> model(Contact object)
					{
						return new CompoundPropertyModel<Contact>(
							new DetachableContactModel(object));
					}
				};
 
			}
			@Override
			protected void populateItem(final Item<Contact> item)
			{
				// populate the row of the repeater
				IModel<Contact> contact = item.getModel();
				item.add(new ActionPanel("actions", contact));
				item.add(new TextField<Long>("id"));
				item.add(new TextField<String>("firstName"));
				item.add(new TextField<String>("lastName"));
				item.add(new TextField<String>("cellPhone").setEnabled(false));
			}
 
			@Override
			protected Item<Contact> newItem(String id, int index, IModel<Contact> model)
			{
				// this item sets markup class attribute to either 'odd' or
				// 'even' for decoration
				return new OddEvenItem<Contact>(id, index, model);
			}
		};
 
		refreshingView.setItemReuseStrategy(ReuseIfModelsEqualStrategy.getInstance());
 
		add(refreshingView);
	}
}

Mais dans ma classe ActionPanel je n'arrive pas à récupérer les TextField en question, j'ai une erreur NullPointerException.

Alors si je me suis bien fait comprendre (c'est pas sur ^^), et si tu as une idée pour résoudre mon problème je suis preneur.

Je te remerci d'avance pour ta disponibilité.

Jib

**joseph_p** · 23/04/2010, 10h26

bonjour jibjib38

Je ne connaissais pas cette méthode get(String path)

Par contre, as tu bien regardé sa javadoc ?

On y lit en effet :

/**
* Get a child component by looking it up with the given path.
*
* @param path
* Path to component
* @return The component at the path
*/

Il ne me semble pas que le TextField lastName soit enfant d'ActionPanel. De même, le chemin ne me semble pas entièrement déclaré : il y a en effet le RefreshingView au milieu. Cela implique donc une liste, avec différents Item : il faudrait connaitre le chemin d'un item bien particulier...

Perso, pour ce type de problématique, je fais une bête liste contenant les éléments que je veux désactiver (par exemple une List<? extends FormComponent>), puis j'itère dessus.

EDIT : pour conserver l'approche actuelle, il faudrait avoir un nouveau container pour chaque item, container qui contiendrait tous les éléments de cet item. Là le chemin devrait être facile à obtenir et on peut même faire sans la List<? extends FormComponent>. Not too bad, worth a try

**jibjib38** · 23/04/2010, 11h29

Re,

Comme tu dois t'en douter je ne suis pas un expert (loin de là ^^ à ma décharge je débute en Java et plus particulièrement sur le framework Wicket), c'est donc pour ça que je sollicite ton aide de nouveau (désolé).

Sur ce que j'ai compris les textfield que je souhaite modifier (firstName, lastName , id et cellPhone) sont dans ma méthode populateItem de la classe RefreshingView.

Mais je ne vois pas du tout comment accéder à cette méthode pour pouvoir modifier les textfield, et ainsi les rendre non modifiable.

Merci pour ta patience.

Jib

**jibjib38** · 23/04/2010, 11h38

Re bis,

N'y aurait-il pas un moyen d'accéder à mes textfield via PropertyModel ?

Lors de l'ajout :

Code :

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

1
2
 
item.add(new TextField<Long>("id", new PropertyModel<Long>(this, "tfId")));

Mais comment cibler mon objet Textfield afin de le modifier dans ma classe ActionPanel

?

Arrête moi tout de suite si je m'égare

Jib

**joseph_p** · 23/04/2010, 12h24

Attention, les modèles sont pour les données, par pour les composants wicket que l'on désire manipuler.

Autrement dit, il est possible de directement faire une List des différents éléments, puis dans le onClick de parcourir cette liste pour rendre agir sur certains éléments.

En gros, faire cela (attention, pseudo code):

Code :

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

1
2
3
 
// Avant la creation du RefreshingView :
final List<FormComponent<?>> editComponents = new ArrayList<FormComponent<?>>();

=> le mot clé "final" est nécessaire pour accéder à la variable dans les classes internes anonymes, comme c'est le cas pour le RefreshingView. C'est une "contrainte" due au langage Java.

Dans le populateItem(final Item<Contact> item) de la list view :

Code :

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

1
2
3
4
 
TextField<Long> idTextField = new TextField<Long>("id", new PropertyModel<Long>(this, "tfId"))
item.add(idTextField);
list.add(idTextField);

dans le onclick, il ne reste plus qu'à désactiver les éléments voulus => je ne connais pas assez ton choix de workflow pour donner ce bout de code.

Seule précaution à prendre: manipuler ainsi directement des composants ne fonctionne bien que si l'on reste au sein d'une seule et même page.

Autrement dit, ne pas commencer à appeler une autre page en lui passant des composants, car c'est ouvrir la porte à tout un tas de problèmes (tournant autour du fait que les Pages wicket sont sérialisées entre les requêtes).

si tu as besoin d'un bout de code plus concret, je le ferai avec plaisir... ce soir !

++

**jibjib38** · 29/04/2010, 09h52

Bonjour,

J'ai finalement opté pour des AjaxEditableLabel. C'est sympas, tu click sur ton label, tu peux le modifier, tu click en dehors ça le valide.

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
 
RefreshingView<Contact> refreshingView = new RefreshingView<Contact>("simple")
{
@Override
   protected void populateItem(final Item<Contact> item)
   {
      // populate the row of the repeater
      IModel<Contact> contact = item.getModel();
 
      final List<AjaxEditableLabel> list = new ArrayList<AjaxEditableLabel>(); 
 
      setDefaultModel(new CompoundPropertyModel<Formbis>(this));
 
      AjaxEditableLabel<String> ajaxLabelID = new AjaxEditableLabel<String>("id");
      ajaxLabelID.setEnabled(false);
 
      list.add(ajaxLabelID);
 
      item.add(ajaxLabelID);
 
      item.add(new AjaxEditableLabel<String>("firstName"));
      item.add(new AjaxEditableLabel<String>("lastName"));
      item.add(new AjaxEditableLabel<String>("cellPhone"));
      item.add(new Link("lock")
      {
            @Override
            public void onClick()
            {
                list.get(0).setEnabled(true);
             }
       });
    }
}
refreshingView.setItemReuseStrategy(ReuseIfModelsEqualStrategy.getInstance());
form.add(refreshingView);

Ce que je voudrai, c'est que mon lien "lock" rende inutilisable tous les labels de la ligne, j'ai beau avoir créé une liste d'AjaxEditableLabel, et avoir verrouillé un des label (sans parcour de liste), ça le vérouille bien dans la liste "list" mais ne le vérouille pas dans mon formulaire (dans mon code je vérouille le label "id" à sa création, et le rend utilisable lors du click sur lien "lock").

Si quelqu'un à une idée

Merci d'avance.

**joseph_p** · 29/04/2010, 10h39

à mon sens les explications fournies plus haut devraient fournir les éléments nécessaires

ceci dit, histoire de simplifier le tout, je tenterai de faire une démo tournante ce soir

++

**jibjib38** · 29/04/2010, 16h08

re

Bon finalement mon boss a changer d'avis

du coup merci pour ton aide, mais je vais arrêter de chercher à ce niveau là.

**joseph_p** · 29/04/2010, 23h25

voici un exemple tournant de ce que j'avais en tête. En chemin, je me suis rendu compte que je n'avais pas besoin de la liste des éléments à activer ou non, j'ai donc simplifié le code pour le réduire à l'essentiel.

Voici la bête :
EditPersonsForm.java

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
 
package org.demo.actionpanel;
 
import java.util.List;
 
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.RequiredTextField;
import org.apache.wicket.markup.html.form.SubmitLink;
import org.apache.wicket.markup.html.link.Link;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.PropertyModel;
import org.demo.dataview.Person;
 
public class EditPersonsForm extends Form<List<Person>> {
 
	private ListItem<?> currentEdit = null;
 
	public EditPersonsForm(String id, IModel<List<Person>> model) {
		super(id, model);
		add(new FeedbackPanel("feedback"));
		ListView<Person> list = new ListView<Person>("list", model) {
 
			@Override
			protected void populateItem(final ListItem<Person> item) {
				final RequiredTextField<String> name = new RequiredTextField<String>(
						"name", new PropertyModel<String>(item.getModel(),
								"name")) {
					@Override
					public boolean isEnabled() {
						return currentEdit == item;
					}
				};
				final RequiredTextField<String> surname = new RequiredTextField<String>(
						"surname", new PropertyModel<String>(item.getModel(),
								"surname")) {
					@Override
					public boolean isEnabled() {
						return currentEdit == item;
					}
				};
				item.add(name);
				item.add(surname);
				item.add(new SubmitLink("edit") {
 
					@Override
					public void onSubmit() {
						currentEdit = item;
					}
 
					@Override
					public boolean isVisible() {
						return currentEdit != item;
					}
				});
				item.add(new SubmitLink("unedit") {
 
					@Override
					public void onSubmit() {
						currentEdit = null;
					}
 
					@Override
					public boolean isVisible() {
						return currentEdit == item;
					}
				});
			}
		};
		list.setReuseItems(true);
		add(list);
	}
 
}

EditPersonsPage.java

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
 
package org.demo.actionpanel;
 
import java.util.ArrayList;
import java.util.List;
 
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.model.util.ListModel;
import org.demo.dataview.Person;
 
public class EditPersonsPage extends WebPage {
	public EditPersonsPage() {
		List<Person> list = new ArrayList<Person>();
		Person person = new Person();
		person.setName("name1");
		person.setSurname("surname1");
		list.add(person);
		person = new Person();
		person.setName("name2");
		person.setSurname("surnameé");
		list.add(person);
 
		IModel<List<Person>> model = new ListModel<Person>(list);
		add(new EditPersonsForm("form", model));
	}
}

EditPersonsPage.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
    <body>
       <form wicket:id="form">
       		<div wicket:id="feedback"></div>
			<table>
				<tr><th>Content</th><th>Action(s)</th></tr>
				<tr wicket:id="list"><td>Name:<input type="text" wicket:id="name"/> Surname:<input type="text" wicket:id="surname"/></td><td><a wicket:id="edit">edit</a><a wicket:id="unedit">done</a></td></tr>
			</table>
       </form>
    </body>
</html>