Tableaux : Différence entre versions

Aller à : navigation, rechercher
m
m
Ligne 2 : Ligne 2 :
 
=Présentation=
 
=Présentation=
 
L'objet de cette page est de présenter la [[UserDoc4|documentation utilisateur]] concernant les tableaux de la version 4 d'OpenFlyers.
 
L'objet de cette page est de présenter la [[UserDoc4|documentation utilisateur]] concernant les tableaux de la version 4 d'OpenFlyers.
 +
 +
=Cahier des charges=
 +
 +
==Icône accès internet==
 +
 +
TODO: A déplacer dans une page plus générale.
 +
 +
Cette icône est là pour indiquer à l'utilisateur si l'application fonctionne en mode connecté ou en mode déconnecté.
 +
 +
En mode connecté : il y a un accès internet, les informations sont donc en temps réel.
 +
 +
En mode déconnecté : il n'y a pas d'accès internet, les informations ne sont pas en temps réel.
 +
 +
==Icône BDD==
 +
 +
TODO: A déplacer dans une page plus générale.
 +
 +
L'icône BDD est là pour montrer l'état de ses données. A côté de cette icône, il y a également une icône qui indique si l'application est en mode connectée ou déconnectée.
 +
 +
L'icône BDD dispose de plusieurs états. Ces états sont représentés par l'ajout d'une icône sur l'icône BDD :
 +
*icône BDD + '''gif animé''' : Les données sont en cours de synchronisation. Cet état apparait après la connexion de l'utilisateur.
 +
*icône BDD + '''check''' : Les données sont synchronisées (il n'y a pas de différence entre la base de données et les données affichées). A essayer : cet état pourrait appraître dès qu'il y a une sauvegarde.
 +
*icône BDD '''grisée''' : Les données ne sont pas synchronisées avec la base de données.
 +
*icône BDD + '''panneau warning''' : Certaines données n'ont pas pû être sauvegardées.
 +
*icône BDD + '''sens interdit''' : Il y a une erreur dans la page courante qui empêchera la sauvegarder des données. Cet état est '''prioritaire''' sur tous les autres.
 +
**Pour le moment lorsque l'on change de page alors que des données ne peuvent être sauvegardées, alors ces données sont oubliées. Avant il y aura quand même un pop-up pour signaler que des données ne vont pas être sauvegardées. A terme il faut pouvoir changer de page tout en gardant en mémoire les données non sauvegardées (et signaler ces données via l'état '''warning''').
 +
 +
En plus de l'icône BDD il y a une zone d'information qui apparaît lorsque l'on survole - ou que l'on clique, sur tactile - l'icône. Cette zone permet donner plus de détails à l'utilisateur sur l'état de l'icône. Par exemple, il peut y a voir comme informatino :
 +
*la date et l'heure de la dernière synchronisation
 +
*la ou les erreurs détectées
 +
*etc.
 +
 +
==Moteur DDT==
 +
 +
Il doit y avoir le moins possible de fichiers JS dédiés au métier :
 +
*DDT arborescence : à voir si il peut être intégré au moteur.
 +
*DDT relevé de comptes (comptabilité) : contient du métier qui ne peut être intégré au moteur.
 +
 +
==Données==
 +
 +
Le moteur DDT côté JavaSript ne traite qu'avec des données au format JSON. Les structures des tableaux sont stockées au format XML. Il y a donc côté PHP un parsage de ses structures afin de les convertir au format JSON. Lors de ce parsage les structures sont combinées aux donnés sotckées en base de données. L'une des tâches du moteur DDT est de sotcker dans la base de données client les tableaux au format JSON. Cette tâche a pour but de faire fonctionner l'application en mode déconnecté.
 +
 +
Données reçues = contenu + comportement IHM
 +
 +
Comportement IHM :
 +
*Interactions entre cellules : des cellules sont rattachées à d’autres cellules
 +
*Lignes enregistrables –> cellules nécessaires
 +
 +
==Types de cellule==
 +
 +
A noter : les cellules peuvent être en lecture seule.
 +
 +
===Check box===
 +
 +
===Check box multiple===
 +
 +
Affiché dans une pop-up.
 +
 +
Il faudra pouvoir via un lien ou autre '''tout cocher / tout décocher'''.
 +
 +
===Combo box===
 +
 +
===Saisie libre===
 +
 +
====Texte====
 +
 +
====Nombre à virgule====
 +
 +
+ avec intervalle
 +
 +
[http://api.jqueryui.com/spinner/#entry-examples Exemple]
 +
 +
====Nombre entier====
 +
 +
+ avec intervalle
 +
 +
[http://api.jqueryui.com/spinner/#entry-examples Exemple]
 +
 +
===DateTime===
 +
 +
Il faudra peut-être une solution pour le tactile et une pour le clavier.
 +
 +
Sur clavier il est par exemple plus rapide de remplir un input contenant ''' __/__/__ __:__'''. On peut également coupler les deux solutions : en plus de l'input il y a une icône qui permet d'accéder à l'interface graphique.
 +
 +
===Date===
 +
 +
===Time===
 +
 +
===Thumbnail (photo)===
 +
 +
===Textearea===
 +
 +
Affiché dans une pop-up.
 +
 +
A voir si ce type est nécessaire.
 +
 +
==Fonctionnalités==
 +
 +
===Touche TAB===
 +
 +
La [[OF4_HCI_Requirements_specifications#Navigation_.C3.A0_l.27aide_de_la_touche_TAB|touche tabulation]] doit permettre de passer d'une cellule à une autre.
 +
 +
===Touches HAUT/BAS===
 +
 +
Les touches HAUT et BAS doivent permettrent de se déplacer d'une ligne à une autre (tout en restant dans la colonne active).
 +
 +
'''Attention''' : dans une combobox les flèches HAUT/BAS permettent de parcourir la combobox.
 +
 +
Les flèches GAUCHE / DROITE en peuvent être utilisés car elles permettent de naviguer dans une cellule.
 +
 +
===Déplacement===
 +
 +
===Cacher les colonnes===
 +
 +
Pas urgent.
 +
 +
===Système de page===
 +
 +
Le système de pagination permet d'accéder à d'autres DDT depuis un premier DDT.
 +
 +
Exemple d'utilisation :
 +
 +
*sans pagination :
 +
Dans le tableau qui liste les utilisateurs il y a une action qui permet de voir les validités d'un utilisateur. Cette action amène vers une nouvelle page de l'application contenant la liste des validités de l'utilisateur.
 +
*avec pagination :
 +
Un clic sur l'action amène vers ce DDT mais sans changer de page dans l'application. C'est une nouvelle page "dans le DDT" qui est ouverte. Grâce à cela il est possible de revenir sur le DDT des utilisateurs.
 +
 +
Détail de ce qu'il se passe :
 +
 +
*A l'arrivée sur la page, la pagination du DDT 1/1 + deux flèches inactives. (voir la pagination n'est pas affichée).
 +
*Clic sur les validités de '''toto''' : le premier DDT s'efface pour laisser la place au nouveau. La pagination affiche 2/2, la flèche de gauche est active et affiche '''Liste des utilisateurs'''
 +
*Clic sur la flèche de gauche :
 +
**On revient sur le premier DDT
 +
**Pagination : 1/2, la flèche de gauche est inactive, la flèche de droite est active et affiche '''Validités de toto'''.
 +
*Si l'utilisateur clique sur les validités de '''tata''' : changement de DDT, pagination 2/2 (les validités de toto sont oubliés).
 +
*Si on revient sur le premier DDT la flèche de droite affichera '''Validités de tata'''.
 +
 +
 +
[[File:DDT_pagination.jpg]]
 +
 +
===Système d'onglet===
 +
 +
Le système d'onglet permet de séparer une information en plusieurs thèmes. Le but étant de ne pas avoir trop de colonnes dans un DDT.
 +
 +
Exemple pour un utilisateur : il y aura un onglet pour les infos persos, un pour voir son solde, etc.
 +
 +
===Options de ligne===
 +
 +
Chaque ligne à un menu contextuel qui contient différentes actions.
 +
 +
Exemple d'action :
 +
 +
*Annuler les modifications
 +
*Ajout d'une ligne
 +
*Suppression de la ligne
 +
*Accéder aux validités de l'utilisateur
 +
*etc.
 +
 +
[[File:DDT_options_ligne.png]]
 +
 +
===Liens entre cellules===
 +
 +
Sur le même principe que sous Excel des cellules peuvent être reliées entre elles.
 +
 +
Exemple :
 +
 +
Il y a 3 colonnes '''A''', '''B''' et '''C'''.
 +
 +
'''C''' est le réultat de l'addition du contenu de '''A''' et de '''B'''. Par conséquent lorsque '''A''' ou '''B''' sont modifiés alors '''C''' doit être mis à jour.
 +
 +
===Edition d'une cellule===
 +
 +
Lors de l'édition d'une cellule, la ligne qui la contient est plus foncée que les autres.
 +
 +
S'il y a une erreur de saisie alors la cellule devient rouge. En plus de ça, les lignes contenant une erreur sont identifiés par '''à définir : soit par une icône dans la colonne de gauche soit par un changement de la couleur du texte dans la colonne de gauche'''.
 +
 +
===Plaque tectonique===
 +
 +
Dans un tableau certaines données doivent être toujours visibles. Les données concernées sont dans la ou les premiers lignes du tableau (l'en-tête) ainsi que dans la ou les premières colonnes. Par conséquent lorsque l'on se déplace dans le contenu du tableau - via les scrollbars horizontales et verticales - il faut que ces lignes et/ou colonnes restent fixes.
 +
 +
La solution est de considérer le contenu du tableau comme une plaque tectonique. Lorsque l'on va la déplacer celle-ci va passer "sous" les premières lignes/colonnes.
 +
 +
===Mode Pointage===
 +
Les tableaux DDT de comptabilité présentent un mode '''Pointage''', qui permet d'enregistrer définitivement des écritures. Ce mode est inactif par défaut. Des éléments graphiques permettent de passer d'une étape à l'autre.
 +
 +
====Inactif====
 +
En bas de tableau, un bouton bleu '''Pointer''' est présent. On clique dessus pour entrer dans le '''mode Pointage'''.
 +
 +
[[File:Of4-ddt-point-1.png]]
 +
 +
<html4strict>
 +
<div class="button submit standard small">Pointer</div>
 +
</html4strict>
 +
 +
====Actif====
 +
*Le bouton '''Pointer''' est remplacé par un texte simple à côté duquel on trouve une icône permettant de sortir du mode ''Pointer''.
 +
*Un bouton '''Valider''' apparaît. Il est alors dans un état ''inactif'' : bouton plat gris avec texte en gris, peu de contraste.
 +
 +
[[File:Of4-ddt-point-2.png]]
 +
 +
<html4strict>
 +
<div class="button icon flat">
 +
    <div class="close" data-picto="&#xe61a" title="Annuler"></div>
 +
    <div class="txt">Annuler</div>
 +
</div>   
 +
<div class="button submit validation small inactive">Valider (irréversible)</div>
 +
</html4strict>
 +
 +
*La sélection d'une ou plusieurs lignes du DDT rend le bouton '''Valider''' ''actif''. Il devient vert et légèrement bombé, comme les autres [[OF4_HCI_Buttons#.submit|boutons de validation]] de l'application.
 +
 +
[[File:Of4-ddt-point-3.png]]
 +
 +
<html4strict>
 +
<div class="button icon flat">
 +
    <div class="close" data-picto="&#xe61a" title="Annuler"></div>
 +
    <div class="txt">Annuler</div>
 +
</div>   
 +
<div class="button submit validation small">Valider (irréversible)</div>
 +
</html4strict>
 +
 +
*Dans le tableau, les lignes sélectionnées deviennent légèrement plus foncées grâce à l'application de la classe '''.modify'''.

Version du 20 août 2014 à 12:03

Présentation

L'objet de cette page est de présenter la documentation utilisateur concernant les tableaux de la version 4 d'OpenFlyers.

Cahier des charges

Icône accès internet

TODO: A déplacer dans une page plus générale.

Cette icône est là pour indiquer à l'utilisateur si l'application fonctionne en mode connecté ou en mode déconnecté.

En mode connecté : il y a un accès internet, les informations sont donc en temps réel.

En mode déconnecté : il n'y a pas d'accès internet, les informations ne sont pas en temps réel.

Icône BDD

TODO: A déplacer dans une page plus générale.

L'icône BDD est là pour montrer l'état de ses données. A côté de cette icône, il y a également une icône qui indique si l'application est en mode connectée ou déconnectée.

L'icône BDD dispose de plusieurs états. Ces états sont représentés par l'ajout d'une icône sur l'icône BDD :

  • icône BDD + gif animé : Les données sont en cours de synchronisation. Cet état apparait après la connexion de l'utilisateur.
  • icône BDD + check : Les données sont synchronisées (il n'y a pas de différence entre la base de données et les données affichées). A essayer : cet état pourrait appraître dès qu'il y a une sauvegarde.
  • icône BDD grisée : Les données ne sont pas synchronisées avec la base de données.
  • icône BDD + panneau warning : Certaines données n'ont pas pû être sauvegardées.
  • icône BDD + sens interdit : Il y a une erreur dans la page courante qui empêchera la sauvegarder des données. Cet état est prioritaire sur tous les autres.
    • Pour le moment lorsque l'on change de page alors que des données ne peuvent être sauvegardées, alors ces données sont oubliées. Avant il y aura quand même un pop-up pour signaler que des données ne vont pas être sauvegardées. A terme il faut pouvoir changer de page tout en gardant en mémoire les données non sauvegardées (et signaler ces données via l'état warning).

En plus de l'icône BDD il y a une zone d'information qui apparaît lorsque l'on survole - ou que l'on clique, sur tactile - l'icône. Cette zone permet donner plus de détails à l'utilisateur sur l'état de l'icône. Par exemple, il peut y a voir comme informatino :

  • la date et l'heure de la dernière synchronisation
  • la ou les erreurs détectées
  • etc.

Moteur DDT

Il doit y avoir le moins possible de fichiers JS dédiés au métier :

  • DDT arborescence : à voir si il peut être intégré au moteur.
  • DDT relevé de comptes (comptabilité) : contient du métier qui ne peut être intégré au moteur.

Données

Le moteur DDT côté JavaSript ne traite qu'avec des données au format JSON. Les structures des tableaux sont stockées au format XML. Il y a donc côté PHP un parsage de ses structures afin de les convertir au format JSON. Lors de ce parsage les structures sont combinées aux donnés sotckées en base de données. L'une des tâches du moteur DDT est de sotcker dans la base de données client les tableaux au format JSON. Cette tâche a pour but de faire fonctionner l'application en mode déconnecté.

Données reçues = contenu + comportement IHM

Comportement IHM :

  • Interactions entre cellules : des cellules sont rattachées à d’autres cellules
  • Lignes enregistrables –> cellules nécessaires

Types de cellule

A noter : les cellules peuvent être en lecture seule.

Check box

Check box multiple

Affiché dans une pop-up.

Il faudra pouvoir via un lien ou autre tout cocher / tout décocher.

Combo box

Saisie libre

Texte

Nombre à virgule

+ avec intervalle

Exemple

Nombre entier

+ avec intervalle

Exemple

DateTime

Il faudra peut-être une solution pour le tactile et une pour le clavier.

Sur clavier il est par exemple plus rapide de remplir un input contenant __/__/__ __:__. On peut également coupler les deux solutions : en plus de l'input il y a une icône qui permet d'accéder à l'interface graphique.

Date

Time

Thumbnail (photo)

Textearea

Affiché dans une pop-up.

A voir si ce type est nécessaire.

Fonctionnalités

Touche TAB

La touche tabulation doit permettre de passer d'une cellule à une autre.

Touches HAUT/BAS

Les touches HAUT et BAS doivent permettrent de se déplacer d'une ligne à une autre (tout en restant dans la colonne active).

Attention : dans une combobox les flèches HAUT/BAS permettent de parcourir la combobox.

Les flèches GAUCHE / DROITE en peuvent être utilisés car elles permettent de naviguer dans une cellule.

Déplacement

Cacher les colonnes

Pas urgent.

Système de page

Le système de pagination permet d'accéder à d'autres DDT depuis un premier DDT.

Exemple d'utilisation :

  • sans pagination :

Dans le tableau qui liste les utilisateurs il y a une action qui permet de voir les validités d'un utilisateur. Cette action amène vers une nouvelle page de l'application contenant la liste des validités de l'utilisateur.

  • avec pagination :

Un clic sur l'action amène vers ce DDT mais sans changer de page dans l'application. C'est une nouvelle page "dans le DDT" qui est ouverte. Grâce à cela il est possible de revenir sur le DDT des utilisateurs.

Détail de ce qu'il se passe :

  • A l'arrivée sur la page, la pagination du DDT 1/1 + deux flèches inactives. (voir la pagination n'est pas affichée).
  • Clic sur les validités de toto : le premier DDT s'efface pour laisser la place au nouveau. La pagination affiche 2/2, la flèche de gauche est active et affiche Liste des utilisateurs
  • Clic sur la flèche de gauche :
    • On revient sur le premier DDT
    • Pagination : 1/2, la flèche de gauche est inactive, la flèche de droite est active et affiche Validités de toto.
  • Si l'utilisateur clique sur les validités de tata : changement de DDT, pagination 2/2 (les validités de toto sont oubliés).
  • Si on revient sur le premier DDT la flèche de droite affichera Validités de tata.


Fichier:DDT_pagination.jpg

Système d'onglet

Le système d'onglet permet de séparer une information en plusieurs thèmes. Le but étant de ne pas avoir trop de colonnes dans un DDT.

Exemple pour un utilisateur : il y aura un onglet pour les infos persos, un pour voir son solde, etc.

Options de ligne

Chaque ligne à un menu contextuel qui contient différentes actions.

Exemple d'action :

  • Annuler les modifications
  • Ajout d'une ligne
  • Suppression de la ligne
  • Accéder aux validités de l'utilisateur
  • etc.

Fichier:DDT_options_ligne.png

Liens entre cellules

Sur le même principe que sous Excel des cellules peuvent être reliées entre elles.

Exemple :

Il y a 3 colonnes A, B et C.

C est le réultat de l'addition du contenu de A et de B. Par conséquent lorsque A ou B sont modifiés alors C doit être mis à jour.

Edition d'une cellule

Lors de l'édition d'une cellule, la ligne qui la contient est plus foncée que les autres.

S'il y a une erreur de saisie alors la cellule devient rouge. En plus de ça, les lignes contenant une erreur sont identifiés par à définir : soit par une icône dans la colonne de gauche soit par un changement de la couleur du texte dans la colonne de gauche.

Plaque tectonique

Dans un tableau certaines données doivent être toujours visibles. Les données concernées sont dans la ou les premiers lignes du tableau (l'en-tête) ainsi que dans la ou les premières colonnes. Par conséquent lorsque l'on se déplace dans le contenu du tableau - via les scrollbars horizontales et verticales - il faut que ces lignes et/ou colonnes restent fixes.

La solution est de considérer le contenu du tableau comme une plaque tectonique. Lorsque l'on va la déplacer celle-ci va passer "sous" les premières lignes/colonnes.

Mode Pointage

Les tableaux DDT de comptabilité présentent un mode Pointage, qui permet d'enregistrer définitivement des écritures. Ce mode est inactif par défaut. Des éléments graphiques permettent de passer d'une étape à l'autre.

Inactif

En bas de tableau, un bouton bleu Pointer est présent. On clique dessus pour entrer dans le mode Pointage.

Of4 ddt point 1.png 

 
<div class="button submit standard small">Pointer</div>
 

Actif

  • Le bouton Pointer est remplacé par un texte simple à côté duquel on trouve une icône permettant de sortir du mode Pointer.
  • Un bouton Valider apparaît. Il est alors dans un état inactif : bouton plat gris avec texte en gris, peu de contraste.

Of4 ddt point 2.png 

 
<div class="button icon flat">
    <div class="close" data-picto="&#xe61a" title="Annuler"></div>
    <div class="txt">Annuler</div>
</div>    
<div class="button submit validation small inactive">Valider (irréversible)</div>
 
  • La sélection d'une ou plusieurs lignes du DDT rend le bouton Valider actif. Il devient vert et légèrement bombé, comme les autres boutons de validation de l'application.

Of4 ddt point 3.png 

 
<div class="button icon flat">
    <div class="close" data-picto="&#xe61a" title="Annuler"></div>
    <div class="txt">Annuler</div>
</div>    
<div class="button submit validation small">Valider (irréversible)</div>
 
  • Dans le tableau, les lignes sélectionnées deviennent légèrement plus foncées grâce à l'application de la classe .modify.