Discussion :

[Jiyuu]

Dans mon projet actuel j'utilise un TableView pour présenter les résultats d'une requête SQL et offrir éventuellement la possibilité à l'usager de faire des changements dans les différentes cases.

Actuellement le seul moyen que j'ai trouvé pour valider le changement est de presser volontairement une touche du clavier, comme la touche entrée par exemple.

Voici mon code actuel :

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
83
84
85
86
87
import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 1.0
import QtQuick.XmlListModel 2.0
import "core"
 
Window {
    property string rowSelect : ""
    property string comSelect : ""
 
    property var mymodel : [{ lib: "Pièce 1", val : 2, author: "Conforme" }, { lib: "Pièce 2" , val : 0, rem: "Non conforme" }]
 
 
    height : 200 ; width : 500
 
    TableView {
        id : table
        width : parent.width
       TableViewColumn{ role: "lib"  ; title: "Lib" ; width: 100; delegate: verticalHeaderDelegate }
       TableViewColumn{ role: "val" ; title: "Val" ; width: 200 ; delegate: checkBoxDelegate }
       TableViewColumn{ role: "rem" ; title: "Remarque" ; width: 200 }
       model: mymodel
       itemDelegate :editableDelegate
       rowDelegate: rowDelegate
    }
 
    Component {
        id: verticalHeaderDelegate
        Item {
            Loader {
                property QtObject styleData: QtObject {
                    property string value: styleData.value
                    property bool pressed
                    property bool containsMouse
                    property int column
                }
                anchors.fill: parent
                sourceComponent: table.headerDelegate
            }
        }
    }
    Component {
        id: rowDelegate
 
        Item {
            Loader {
                anchors.fill: parent
            }
            Component.onCompleted: height = 1.2*height
        }
    }
 
    Component {
        id: checkBoxDelegate
        Item {
            CheckBox {
                anchors.fill: parent
                checked: styleData.value
                onClicked: {
                    console.log(table.model[styleData.row][styleData.role])
                    mymodel[styleData.row][styleData.role] = checkedState
                    console.log(table.model[styleData.row][styleData.role])
                }
            }
        }
    }
    Component {
        id: editableDelegate
        TextInput {
            id : textinput
            text: styleData.value
            onAccepted: {
                console.log(table.model[styleData.row][styleData.role])
                textinput.focus = false
                mymodel[styleData.row][styleData.role] = text
                console.log(table.model[styleData.row][styleData.role])
 
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    textinput.forceActiveFocus()
                }
            }
        }
    }
}

Cependant j'aimerai pouvoir aussi le faire soit lorsque l'utilisateur change de zone avec la souris, soit de manière globale via une touche "Save".
Auriez-vous une idée pour ceci ?

D'avance merci.

++

J

[loupium]

Bonsoir,
"l'utilisateur change de zone avec la souris"

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
Component {
  id: editableDelegate
  TextInput {
    id : textinput
    text: styleData.value
    MouseArea {
      anchors.fill: parent
      hoverEnabled: true
      onClicked: {
        textinput.forceActiveFocus()
      }
      onExited: {
        console.log(table.model[styleData.row][styleData.role])
        textinput.focus = false
        mymodel[styleData.row][styleData.role] = text
        console.log(table.model[styleData.row][styleData.role])
      }
    }
  }
}

ou plutôt de changer de focus ?

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
Component {
  id: editableDelegate
  TextInput {
    id : textinput
    text: styleData.value
    MouseArea {
      anchors.fill: parent
      onClicked: {
        textinput.forceActiveFocus()
      }
      onFocusChanged: {
        if(!focus) {
          console.log(table.model[styleData.row][styleData.role])
          mymodel[styleData.row][styleData.role] = text
          console.log(table.model[styleData.row][styleData.role])
          }
      }
    }
  }
}

[Jiyuu]

Pfffff... complètement zappé de regarder dans les signaux de MouseArea...
En plus c'est pas comme si j'utilisais déjà onExited dans mon programme pour mettre en surbrillance mes boutons au moment de passer dessus....
Ça aurait pu me mettre la puce à l'oreille.
Mais je pense que onFocusChanged sera plus intéressant.

Tu me sauves la vie

À tout hasard, tu n'as pas sous ton chapeau une boucle pour lire toutes entrées d'un TableView ? (je crois que Qt 5.2 va améliorer des choses de ce coté, mais n'en suis pas sûr à 100%)

[loupium]

"lire toutes entrées d'un TableView ?"
Tu souhaites parcourir le contenu de tous les lignes ou/et colonnes ?

[Jiyuu]

En quelque sorte oui, une fonction qui renverrai le contenu actuel du TableView, pas le model qu'on lui a appliqué.
Je pense à quelques choses du genre

Code :

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

new_model = table.contenuactuel

Le hic c'est que je n'ai pas trouvé comment faire sans passer par une validation comme celle que je fais dans mon code.

[EDIT]
Après quelques essais dans mon cas onFocusChanged & onExited renvoient le texte présent dans la case où le curseur rentre et non celle d'où il était .

[Jiyuu]

Bon c'est loin d'être sûrement ce qui a de plus cool pour les performances mais la solution palliative à ma recherche est d'utiliser onTextChanged dans le TextEdit :

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
Component {
            id: editableDelegate
            TextInput {
                id : textinput
                text: styleData.value
                onTextChanged: {
                    mymodel[styleData.row][styleData.role] = text
                }
                onAccepted: {
                    console.log(table.model[styleData.row][styleData.role])
                    textinput.focus = false
                    mymodel[styleData.row][styleData.role] = text
                    console.log(table.model[styleData.row][styleData.role])
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        textinput.forceActiveFocus()
                    }
            }
        }

Ainsi à chaque changement du texte le model est mis à jour.

Merci de ton aide en tout cas.

[loupium]

J'avoue n'avoir toujours pas compris ce que tu veux réellement.

[Jiyuu]

Ahhh... excuse moi alors. Je tente une autre explication :

Dans mon programme j'ai un TableView dont chaque case est renseignée par des éléments provenant d'une requête SQL. Je me retrouve ainsi avec 3 colonnes :

• un header non éditable;
• une colonne "case à cocher" cliquable ;
• une colonne "remarque" éditable.

Une fois la requête envoyée et le TableView correctement rempli, je souhaite permettre à l'utilisateur de modifier le contenu des colonnes 2 et 3.
Une fois ces modifs faites, il ne lui reste plus qu'à cliquer sur un bouton valider pour apporter les modifications à la base de données.

Là où je coinçais un peu c'est sur la récupération des valeurs du TableView. La méthode que j'utilise permet de le faire mais je pense qu'en termes de performance c'est loin d'être le top.

Qu'en penses-tu ?

[loupium]

Utiliser onTextChanged n'est pas forcement mauvais.
Prend l'exemple "Tableview" dans QtCreator.
Augmente la taille du ListModel en remplacant 500 par 5000000 :

Code :

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

1
2
3
4
5
6
7
  ListModel {
      id: largeModel
      Component.onCompleted: {
    for (var i=0 ; i< 5000000 ; ++i)  // ancienne boucle : for (var i=0 ; i< 500 ; ++i)
              largeModel.append({"name":"Person "+i , "age": Math.round(Math.random()*100), "gender": Math.random()>0.5 ? "Male" : "Female"})
      }
  }

et remplace onAccepted par onTextChanged dans loaderEditor :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Loader { // Initialize text editor lazily to improve performance
  id: loaderEditor
  anchors.fill: parent
  anchors.margins: 4
  Connections {
      target: loaderEditor.item
//      onAccepted: {
      onTextChanged: {
          if (typeof styleData.value === 'number')
              model.setProperty(styleData.row, styleData.role, Number(parseFloat(loaderEditor.item.text).toFixed(0)))
          else
              model.setProperty(styleData.row, styleData.role, loaderEditor.item.text)
      }
  }

Malgres les 750 Mo de Ram, je n'ai pas remarqué de latence lors de la modification d'un texte.
A tester sur un PC moins puissant car je ne peux pas être objectif avec mon PC.

Autre remarque, l'exemple utilise un ListModel qui est probablement plus performant que ton model en javascript. Tu devrais peut être t'en inspirer.

Ensuite, lors du clique sur le bouton valider pour apporter les modifications à la base de données, ListModel t'offre tout le nécessaire pour réaliser une boucle qui extraira les données utiles à tes requettes SQL.

Edit: il y a un petit bug à partir de la ligne 3355446 de la TableView générée.