|
|
| (142 révisions intermédiaires par 2 utilisateurs non affichées) |
| Ligne 1 : |
Ligne 1 : |
| | __TOC__ | | __TOC__ |
| | =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 les tableaux de la [[Accueil|version 4 d'OpenFlyers]]. |
| | | | |
| − | =Cahier des charges= | + | =Affichage sur smartphone= |
| | + | Sur smartphone, et plus généralement sur les écrans de largeur inférieure à 768px, l'affichage des tableaux est optimisé afin de tenir compte de la surface d'écran visible. Ainsi, chaque ligne de tableau se présente sous forme d'un bloc distinct. D'autre part, les cellules vides n'apparaissent pas. |
| | | | |
| − | ==Icône accès internet== | + | =Entrée désactivée= |
| | + | Lorsque qu'une entrée du tableau est '''désactivée''', le texte de la ligne correspondante, ainsi que sa couleur de fond prennent la couleur grise. |
| | | | |
| − | TODO: A déplacer dans une page plus générale.
| + | Pour '''réactiver''' l'entrée, il faut cliquer sur le [[#Pictogramme de réactivation d'une entrée|pictogramme de réactivation d'une entrée]]. |
| | | | |
| − | Cette icône est là pour indiquer à l'utilisateur si l'application fonctionne en mode connecté ou en mode déconnecté.
| + | Exemple : [[Paramétrage-des-validités#Supprimer-ou-désactiver-un-type-de-validité|type de validité désactivé]]. |
| | | | |
| − | En mode connecté : il y a un accès internet, les informations sont donc en temps réel.
| + | =Pictogrammes= |
| | + | ==Pictogrammes d'alertes== |
| | + | Les pictogrammes d'alertes se présentent sous la forme d'un panneau warning, représentant un point d'exclamation dans un triangle. Associés à une couleur, ils prennent les significations suivantes : |
| | + | *Alerte rouge : cellule vide qui devrait être remplie, date limite dépassées |
| | + | *Alerte orange : date limite proche du dépassement |
| | | | |
| − | En mode déconnecté : il n'y a pas d'accès internet, les informations ne sont pas en temps réel.
| + | Ces alertes concernent notamment les [[Validités#Alertes-sur-la-page-listant-les-validités-d'un-utilisateur|validités]]. |
| | | | |
| − | ==Icône BDD== | + | ==Pictogramme de réactivation d'une entrée== |
| − | | + | Le pictogramme de réactivation d'une entrée se compose d'une flèche vers la droite entourée d'un cercle fléché. Il se situe dans la colonne '''Actions''' |
| − | 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]]
| + | |
| − | | + | |
| − | *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]]
| + | |
| − | | + | |
| − | *Dans le tableau, les lignes sélectionnées deviennent légèrement plus foncées grâce à l'application de la classe '''.modify'''.
| + | |
Sur smartphone, et plus généralement sur les écrans de largeur inférieure à 768px, l'affichage des tableaux est optimisé afin de tenir compte de la surface d'écran visible. Ainsi, chaque ligne de tableau se présente sous forme d'un bloc distinct. D'autre part, les cellules vides n'apparaissent pas.
Les pictogrammes d'alertes se présentent sous la forme d'un panneau warning, représentant un point d'exclamation dans un triangle. Associés à une couleur, ils prennent les significations suivantes :
Le pictogramme de réactivation d'une entrée se compose d'une flèche vers la droite entourée d'un cercle fléché. Il se situe dans la colonne Actions
