Widget tableau

Chemin : Galerie des widgets> Basique> Tableau

Utiliser ce widget pour créer un tableau avec des données fournies à partir d'une source de données.

Pour configurer un tableau :

Placer un widget de tableau sur l'écran et configurer le modèle de tableau.
Ajouter des widgets dans les cellules pour configurer une ou plusieurs lignes qui seront utilisées en tant que modèles de ligne lorsque le tableau sera rempli de données fournies par la source de données.
Sélectionner une source de données qui seront utilisées pour remplir les lignes du tableau
Définir les liens de widgets et source de données.

Configurer le widget tableau

Le Widget tableau a deux états :

Mode vue
Mode édition.

Cliquer sur le tableau pour gérer le widget en mode vue, cliquer deux fois pour entrer dans le mode édition. Pour quitter et revenir au mode vue, cliquer en dehors du tableau.

Mode vue

En mode vue, vous pouvez configurer la disposition de tableau. Glisser et déposer le tableau sur la page, redimensionner le tableau, définir le nombre de lignes modèle, nombre de colonnes et les principales propriétés du tableau.

Mode édition

En mode édition, il est possible de configurer le format et le contenu de chaque cellule du tableau. Caque ligne du tableau se comportera comme un modèle de ligne.

Pour configurer l'apparence du tableau, cliquer sur les sélecteurs de tableau pour sélectionner l'élément à configurer.

Ajouter/supprimer des lignes ou des colonnes

Pour ajouter ou supprimer des lignes ou des colonnes, double-cliquez sur la grille pour entrer en mode édition et cliquez avec le bouton droit sur le sélecteur de colonnes ou de lignes pour ouvrir le menu contextuel.

Fusionner/diviser des lignes ou des colonnes

Pour fusionner ou diviser des lignes ou des colonnes, double-cliquez sur la grille pour entrer en mode édition et déplacez le curseur sur les rubans :

Double-cliquer sur le triangle noir pour fusionner les deux lignes ou colonnes adjacentes (1)
Notez que fusionner n'est possible qu'avec une ligne ou une colonne vide.

Double-cliquer sur le ruban pour diviser la ligne ou colonne sélectionnée (2)

Pour configurer le contenu des cellules, faire glisser les widgets à l'intérieur des cellules.

Si vous avez besoin plus de widgets dans une seule cellule, créer un groupe de widgets et copier le groupe depuis la page sur la cellule.

Configuration de la source de données

La source de données, qui fournit les données pour remplir le tableau, pourrait être un Widget source de données de tableau ou un objet JavaScript.

Widget source de données tableau

Chemin : Galerie des widgets> Basique> Tableau

Glisser et déposer un Widget de source de donnée de tableau sur la page
Voir le paramètre Modèle de tableau pour relier à la source de données.

Sélectionner la source de données et à l'intérieur de l'éditeur TableDataSrcWgt ajouter les lignes et les colonnes nécessaires. Dans l'exemple suivant, nous avons défini deux modèles de lignes :

Ligne 0
En-tête du tableau. Contient uniquement du texte statique.
Ligne 1
Modèle de lignes avec données. Sur la première colonne, nous avons ajouté une étiquette qui contiendra la description et sur la seconde colonne, un champ qui contiendra la valeur.

Chaque ligne doit être affectée d'un type de ligne. La ligne prend le format du modèle de ligne correspondant. Les widgets placés dans chaque cellule du modèle de ligne apparaîtront dans les rangées de ce type.

Définir des liens avec la source de données

Double-cliquer sur le widget de tableau pour entrer en mode d'édition et sélectionnez un widget
Sélectionner la propriété qui doit être lu à partir de la source de données
Sélectionner la colonne de la source de données qui fournira les données

L'image ci-dessous montre comment notre exemple sera rendu au runtime.

En-tête fixe

Si vous voulez que la première ligne ne soit pas déroulante, cochez la case « Corriger en-tête » dans la boîte à outils Source de données ou définissez sur vrai le paramètre « Montrer en-tête » dans le panneau des propriétés de la Source de Données (notez que le paramètre n'est disponible qu'en vue avancée).

Remplacer colonne

Vous pouvez utiliser un tableau d'entiers pour définir ou modifier l'ordre des colonnes au runtime. Si vous utilisez cette propriété, assurez-vous de joindre un tableau d'entiers et de définir l'index sur -1 (pour sélectionner le tableau entier).

Mode Récupérer

Une fois activé, le tableau chargera un nombre minimal de lignes pour remplir la vue. Permet un chargement très rapide des pages pour de grands tableaux. Lors du défilement, lorsque le tableau atteint la fin, les nouvelles lignes sont chargées et vous pouvez faire défiler l'ensemble de la base de données.

Le paramètre « Lignes chargées » vous donne la possibilité de choisir le nombre de lignes à charger par cycle. Plus la valeur est élevée, plus le chargement de la page sera long, mais plus le nombre de lignes chargées prêtes à faire défiler sera important (moins de charge pendant le défilement).

Multilangue

Pour activer le support Multilingue, faire un clic droit sur l'icône Multilingue de la colonne. L’icône changera de couleur pour mettre en évidence que le support est activé.

Éviter en permettant le support multilingue lorsqu'ils ne sont pas nécessaires pour de meilleures performances.

Importer/Exporter la source des données

La configuration de la source de données peut être importée/exportée à l'aide de fichiers xml.

Objet JavaScript

Comme alternative au Widget de source de données, les données devant remplir le tableau peuvent être fournies à partir d'un objet JavaScript. Dans ce cas, nous devons remplir un tableau d'éléments avec les données à utiliser et attribuer le tableau au widget tableau.

var myTable = page.getWidget("TableWgt1");
myTable.model = model;

modèle est un tableau d’éléments avec la définition et les données de tableau. Le premier élément du tableau contiendra le modèle des lignes tandis que les autres éléments contiendront les données à remplir dans les lignes du tableau.

model[0] = row_templates;    // row templates   
model[1] = row_data1;        // data of the row1
model[2] = row_data2;        // data of the row2
model[3] = row_data3;        // data of the row3
model[4] = row_data4;        // data of the row4
model[5] = row_data4;        // data of the row5

Le modèle de ligne est un tableau multidimensonnel où chaque tableau définit la liaison de données d'un modèle de ligne.

Sur l'exemple ci-dessous, nous avons un modèle pour deux rangées.

var row_templates = {
    _h : [
            [ []       , []        ],   //rowType = 0
            [ ["text"] , ["value"] ]    //rowType = 1
         ]
}

La première ligne comporte deux colonnes qui ne contiennent pas de liens vers des données. Nous utilisons ce modèle pour l'en-tête sur la première ligne de notre tableau.

La deuxième ligne définit le modèle d'une ligne avec la propriété « texte » du widget dans la première colonne et la propriété « valeur » du widget dans la deuxième colonne. Elles seront remplies dynamiquement à l'aide des données fournies dans la variable de modèle.

Dans l’exemple ci-dessous, nous définissons une ligne de données

var row_data = {
    _t : 1,
    _v : ["Temperature:", { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }]
}

Le premier élément est le modèle de ligne à utiliser tandis que le deuxième élément est le tableau avec les données à utiliser. Dans notre exemple « Température : » est le texte à utiliser à l'intérieur du widget sur la première colonne, tandis que l'autre élément est une liaison de données qui fournira la valeur pour remplir la propriété de valeur du widget dans la deuxième colonne.

L’élément de liaison de données :

Paramètre Description

_c : "dl" Identifier l’élément comme une liaison de données

s : "_TagMgr" Indiquer la source des données est le Gestionnaire de variables

a : "Tag1", i: 0, m:2

Paramètre	Description
_c : "dl"	Identifier l’élément comme une liaison de données
s : "_TagMgr"	Indiquer la source des données est le Gestionnaire de variables
a : "Tag1", i: 0, m:2	Spécifier le nom de la variable, l’indice (nécessaire quand une variable est un tableau) et le mode lire/écrire. m=0 est Read Only m=1 est Write Only m=2 est Read/Write

Spécifier le nom de la variable, l’indice (nécessaire quand une variable est un tableau) et le mode lire/écrire.

m=0 est Read Only
m=1 est Write Only
m=2 est Read/Write

Le code JavaScript ci-dessous générera le même tableau que l'exemple précédent lié avec le widget de source des données de tableau.

var model = [];

var row_templates = {
    _h : [
            [ []       , []        ],   //rowType = 0
            [ ["text"] , ["value"] ]    //rowType = 1
         ]  
}

var row_data1 = {
    _t : 0,
    _v : [],
    _h : true
}

var row_data2 = {
    _t : 1,
    _v : ["Temperature:", { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }]
}

var row_data3 = {
    _t : 1,
    _v : ["Humidity:",    { _c : "dl" , s : "_TagMgr", a : "Tag2", i: 0, m : 2 }]
}

var row_data4 = {
    _t : 1,
    _v : ["Noise:",       { _c : "dl" , s : "_TagMgr", a : "Tag3", i: 0, m : 2 }]
}

var row_data5 = {
    _t : 1,
    _v : ["Brightness:",  { _c : "dl" , s : "_TagMgr", a : "Tag4", i: 0, m : 2 }]
}

model[0] = row_templates;
model[1] = row_data1;
model[2] = row_data2;
model[3] = row_data3;
model[4] = row_data4;
model[5] = row_data5;

var myTable = page.getWidget("TableWgt1");
myTable.model = model;

Notez que la première ligne (row_data1) contient la directive _h: vrai pour éviter que la première ligne soit déroulante.

var row_data1 = {
    _t : 0,
    _v : [],
    _h : true
}

Multilangue

Un texte de langues multiples peut être entré en utilisant l'élément ci-dessous :

{ _c : "ml" , mltext : {"en-US" : "Temperature:" , "it-IT" : "Temperatura:"} }

Paramètre Description

_c : "ml" Identifier l’élément comme un texte multilangue

mltext : { ... }

Paramètre	Description
_c : "ml"	Identifier l’élément comme un texte multilangue
mltext : { ... }	Liste des couples : "ID Language":"Text" Exemple : "en-US" : "Temperature:" "it-IT" : "Temperatura:"

Liste des couples : "ID Language":"Text"

Exemple :

"en-US" : "Temperature:"
"it-IT" : "Temperatura:"

Exemple :

var row_data2 = {
    _t : 1,
    _v : [ { _c : "ml" , mltext : { "en-US" : "Temperature:", 
                                    "it-IT" : "Temperatura:"}   }, 
           { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }
         ]
}

Couleur d'arrière-plan de ligne

À l'aide du paramètre Couleur d'arrière-plan de ligne, il est possible de définir la colonne du Widget Source de données qui contiendra la couleur d'arrière-plan de la ligne associée.

Pour configurer la couleur d'arrière-plan des lignes du tableau :

Ajouter une nouvelle colonne à l'intérieur du Widget Source de données devant contenir la couleur d'arrière-plan de chaque ligne
Configurer le paramètre de couleur « d'arrière-plan de ligne » du tableau pour pointer vers la colonne couleur du Widget Source de données

Filtre de tableau

Le contenu visible à l'intérieur du tableau peut être filtré à l'aide de la propriété " Filtre de tableau ". Dans la liaison de données, vous pouvez utiliser une formule (voir "Formule" pour plus de détails) afin de définir les critères à utiliser pour filtrer les données.

Chaque ligne du tableau ne sera visible que lorsque le lien de données du Filtre de tableau renvoie la valeur vraie.

Exemple 1

Si vous voulez choisir de ne voir que les lignes qui contiennent « quelque chose » à l'intérieur de la colonne Description, vous pouvez utiliser la formule ci-dessous :

=$Contains($('Description:TableDataSrcWgt'),$('value:SearchOnTable'))

Où

'Description:TableDataSrcWgt' est un champ dynamique du Widget Source de données utilisé à partir du tableau pour identifier la colonne à vérifier
'value:SearchOnTable' est la valeur d'un champ de texte qui contient la chaîne de caractères à rechercher

Exemple 2

Pour utiliser des drapeaux afin de définir les paramètres à faire figurer à l'intérieur du tableau :

Tout d'abord, ajoutez une nouvelle colonne à l'intérieur de la source de données qui contiendra les drapeaux et activera la ligne associée. Ensuite, associez le lien de données du filtre de tableau à la nouvelle colonne contenant les drapeaux

Trier le tableau

Pour trier les lignes du tableau, sélectionnez la colonne de la source de données que vous voulez utiliser pour trier le tableau

Le mode de tri peut être Ascendant ou Descendant
La règle de tri peut être alphabétique ou numérique

Le tri multiple (tri STABLE) est utile lorsqu'une colonne comporte des répétitions. Vous pouvez utiliser jusqu'à trois colonnes de tri.

Le tableau peut être ordonné même en utilisant la macro SetTableSortingColumn (voir"SetTableSortingColumn" pour les détails).

Position défilement horizontal

La « Position du défilement horizontal » donne la possibilité de synchroniser les mouvements de défilement horizontal de deux tableaux.

Le paramètre de position du défilement horizontal n'est disponible qu'en mode Vue des propriétés avancées

Pages préchargées

Normalement, le JMobile HMI Runtime ne récupère que les données qui seront visibles à l'écran. Pour rendre le défilement des tableaux plus agréable, il peut être utile de précharger les données des lignes suivantes et précédentes des lignes affichées. En utilisant le paramètre Pages préchargées, il est possible de définir combien de pages seront préchargées

0 = aucune page préchargée
N = nombre de pages à précharger

Exemple :

Pour un tableau de 4 lignes et de pages préchargées = 2

Le nombre de lignes à précharger est de 8 (2 pages x 4 lignes).
4 lignes avant (pour être prêt à gérer le défilement du tableau vers le haut)
4 lignes au-dessus (pour être prêt à gérer le défilement du tableau vers le bas)

Le paramètre Pages préchargées n'est disponible qu'en mode Vue des propriétés avancées

Widgets contenant des tableaux

Dans la galerie, il y a des widgets qui contiennent des tableaux, par exemple un tableau de tendances, un tableau d'audit, etc. Pour ouvrir les propriétés du tableau ou les propriétés de la source de données, vous pouvez utiliser l'onglet Vue objet et sélectionner le composant que vous devez configurer.

Impression d’un tableau

Un widget tableau peut être trouvé et utilisé depuis la galerie des rapports d'impression.