Sélection multiple dans une listView

Version imprimable

01/06/2010, 15h48
Stefounette

Sélection multiple dans une listView

Est-il possible de faire une sélection multiple d'item dans une listView JavaFX?

J'ai eu l'idée d'insérer des checkbox dans ma listView mais ca ne marche pas.

Pourriez-vous m'aider?

Merci d'avance
01/06/2010, 21h13
PhiLho

Réponse simple : tu ne peux pas. Ce n'est pas encore supporté par la ListView.

Par contre, je ne vois pas ce qui empêche de mettre des checkboxes dans une Cell de ListView.
02/06/2010, 00h08
bouye

En effet tu devrais pouvoir mettre tout et n'importe quoi via la cellFactory
02/06/2010, 10h41
Stefounette

Ok merci de vos réponses.

Je vais aller voir du côtés du cellFactory.

Ok donc j'ai essayé de rajouter une checkbok dans ma listView en utilisant cellFactory.

Le problème c'est que j'ai déjà un Label définit dans mon cellFactory de ma ListView. J'ai essayé de rajouter un checkbox a la suite le problème c'est qu'il écrase mon label.On peut mettre plusieurs chose dans un cellFactory?

Mon code:

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
 
listView = javafx.scene.control.ListView {
            layoutX: 51.0
            layoutY: 85.0
            width: 380.0
            height: 151.0
            vertical:false
            layoutInfo: javafx.scene.layout.LayoutInfo {
                width: bind listView.width
                height: bind listView.height
            }
            items: [Selection()]
            cellFactory: function() {
              def cell2:ListCell = ListCell{
                 node: CheckBox {
                 visible: bind not cell2.empty
                 selected: false
                 textAlignment:TextAlignment.LEFT
                 allowTriState:false
               }
              }
              def cell:ListCell = ListCell {
                 node: Label {
                 text: bind if(cell.empty) then "" else "{cell.item}"
                 textFill: bind if(cell.selected) then Color.WHITE else if (cell.index mod 2 == 0) then Color.RED else Color.DARKBLUE
                 font: bind if (cell.index mod 2 == 0) then Font.font("Verdana",FontWeight.BOLD, 11.0) else Font.font("Verdana", FontWeight.REGULAR, 11.0)
                 textAlignment:TextAlignment.CENTER
                }
              }  
        }
        };

Ah bon j'ai trouvé une manière de faire (finalement j'utilise un "Radio Button" mais c'est pareil)

Code:

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
 
listView = javafx.scene.control.ListView {
            layoutX: 51.0
            layoutY: 85.0
            width: 380.0
            height: 151.0
            vertical:false
            layoutInfo: javafx.scene.layout.LayoutInfo {
                width: bind listView.width
                height: bind listView.height
            }
            items: [Selection()]
            cellFactory: function() {
                def cell:ListCell = ListCell{
                    node:RadioButton {
                        graphicVPos:VPos.CENTER
                        graphic:Label {
                         text: bind if(cell.empty) then "" else "{cell.item}"
                         textFill: bind if(cell.selected) then Color.WHITE else if (cell.index mod 2 == 0) then Color.RED else Color.DARKBLUE
                         font: bind if (cell.index mod 2 == 0) then Font.font("Verdana",FontWeight.BOLD, 11.0) else Font.font("Verdana", FontWeight.REGULAR, 11.0)
                         textAlignment:TextAlignment.CENTER
                        }
                        blocksMouse: false 
 
                    }
                }

Seulement ça bug un peu. Quand je fait défiler ma liste les bouton se coche et se décoche sans que j'ai rien demandé. Y a t-il un moyen d'éviter ca ?

02/06/2010, 16h35
Stefounette

Personne pour m'aider ?
02/06/2010, 17h24
PhiLho

Citation:

Envoyé par Stefounette

(finalement j'utilise un "Radio Button" mais c'est pareil)

Pas vraiment ! Je te déconseille de faire ça, tes utilisateurs t'en seront reconnaissant... :)
La case à cocher et le bouton radio ont des sémantiques bien spécifiques, utiliser l'un pour l'autre ne peut introduire que de la confusion. J'ai trop souvent vu ça dans des GUIs.

Citation:

Seulement ça bug un peu. Quand je fait défiler ma liste les bouton se coche et se décoche sans que j'ai rien demandé. Y a t-il un moyen d'éviter ca ?

Attention, les cellules des list view sont virtuelles ! Ne compte pas sur les composants que tu mets dedans pour avoir un état persistant. Tu dois garder cet état (coché ou pas) dans le modèle de ta liste.

Citation:

J'ai essayé de rajouter un checkbox a la suite le problème c'est qu'il écrase mon label.On peut mettre plusieurs chose dans un cellFactory?

Tu fais deux ListCell, je pense qu'il ne faut en faire qu'une, et utiliser HBox (ou un autre layout) pour les disposer correctement dans la Cell.

Il m'énerve ce forum où il faut se logguer à nouveau après vingt minutes d'absence !

Bref, j'ai amélioré un petit script que j'avais fait pour tester la ListCell et une forme primitive de persistance. Ton idée d'utiliser les check boxes est excellente, Stefounette. Je l'ai donc injectée dans mon code avec les conseils que j'ai donné ci-dessus (c'est bien de donner des conseils, c'est mieux de vérifier qu'ils sont bons !).

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
class ListViewItem
{
    var selected: Boolean = false;
    var value: String;
    override function toString(): String { "{if (selected) "#" else "-"} {value}" }
}
class ListViewCell extends ListCell
{
    // Create the parts of the cell
    def state = CheckBox {};
    def text = Label {};
    // Create the node
    init
    {
        node = HBox
        {
            content: [ state, text ]
        }
    }
    // Init or recycle created nodes: update the state of the controls when item is changed
    var itemWatcher = bind item on replace
    {
        if (item != null) // Often called with null, for some reason, can be worth skipping these
        {
            state.selected = (item as ListViewItem).selected;
            text.text = item.toString();
        }
    }
    // Watch the checkbox state to persist it in the item
    var itemStateWatcher = bind state.selected on replace
    {
        (item as ListViewItem).selected = itemStateWatcher;
        text.text = item.toString();
        onUpdate(); // Update view (text)
    }
}
function GetCell(): ListCell
{
    ListViewCell {}
}
 
var listStuff: ListView = ListView
{
    layoutX: 50, layoutY: 50
    layoutInfo: LayoutInfo { height: 300, width: 200 }
    cellFactory: GetCell
    items: for (i in [ 1 .. 200 ]) ListViewItem { value: "Item {%03d i}" }
}
/*
var selectedItemWatcher: Object = bind listStuff.selectedItem on replace
{
    def siw = selectedItemWatcher as ListViewItem;
    siw.selected = not siw.selected;
}
*/
 
var scene: Scene;
Stage
{
    title: "New ListView Tests"
    scene: scene = Scene
    {
        width: 500
        height: 500
        fill: Color.GOLDENROD
        content:listStuff
    }
}

Les commentaires sont en anglais parce que j'ai quitté la pratique du français dans le code depuis fort longtemps déjà... :) Plus ça aide pour partager du code sur Internet.

J'espère que ça te sera utile.

02/06/2010, 22h17
bouye

Je pense plutot à un problème de navigateur ou de cookie car ce problème ne m'est jamais arrivé. Va également faire un tour dans les options de ton compte pour voir si tu n'as pas une durée de session trop courte indiquée.

C'est le même principe à utiliser pour corriger le code des cellules extensibles dont j'ai posté le lien tantôt dans l'autre topic (http://fxexperience.com/2010/04/dynamic-cell-sizes/). Ce n'est pas au niveau de la Cell qu'il faut garder ce genre d'état mais au niveau de l'item lui-même, ce que fait PhiLho.
03/06/2010, 21h53
galien

Vu que c'est dynamique, en gros que la liste qui affiche est plus petite que la liste sous sous-jacente, il faut faire un bind sur l'item car il n'y a pas de lien immuable entre ce qui est affiché un objet de la liste.
L' API query du composer est très pratique pour cela:ccool: