La classe Ext.fdl.Collection possède la structure de propriétés et de méthodes utilisée par toutes les représentations de collection. La plupart de ces méthodes doivent être surchargées par une implémentation pour produire une représentation utilisable. Ainsi, les classes héritées de Ext.fdl.Collection proposées dans le module freedom-extui sont des solutions prédéfinies et paramétrables pour ces implémentations.
Un objet Fdl.Collection correspondant à la collection Dynacase à représenter doit être fourni. Voir la documentation du module data pour plus d'informations.
Référence Ext.fdl.CollectionContainer
Il peut être nécessaire de manipuler les représentations de collection dans un composant appelé conteneur de collection. Un conteneur de collection supervise une représentation de collection, ce qui permet d'envisager des opérations comme le changement de la représentation (par exemple d'un type grille à un type arbre). Sans l'existence d'un tel conteneur, il serait impossible de remplacer, de supprimer et d'ajouter un panel de collection de façon cohérente puisqu'une fois ce panel supprimé, la référence à la notion de conteneur dans lequel injecter des composants d'interface n'est pas maîtrisée (par exemple, selon si le panel faisait partie d'un layout Ext JS ou pas).
La classe Ext.fdl.CollectionContainer existe dans ce but. Elle contient la barre de menu utilisée pour commander la collection (avec les actions standard permettant de changer l'affichage, d'appeler des méthodes sur des sélections, ou d'exporter tout le contenu). Elle prend en paramètre un objet de classe Ext.fdl.Collection qui va être la représentation de collection initiale utilisée pour ce conteneur. Le conteneur peut charger automatiquement les propriétés qui l'intéresse depuis cet objet (la collection, le contexte).
Le menu du conteneur de collection est construit selon le paramétrage défini par le fichier xml de description du menu. Le fichier xml utilisé peut être passé en paramètre du conteneur de collection, sa valeur par défaut est extui/default-collection-menu.xml.
La description de cette spécification xml pour les menus est fournie à l'adresse suivante :
Chaque interface de collection permet à l'utilisateur d'effectuer une sélection de documents, exprimée sous la forme d'un objet Fdl.DocumentSelection. Cet objet peut être utilisé dans les actions sur le module data.
Chaque interface de collection permet à l'utilisateur d'effectuer des opérations de drag 'n drop de documents. Les données échangées lors d'une opération de drag 'n drop se conforment à une structure qui permet d'effectuer cette manipulation entre les différentes classes. Chacune possède une implémentation par défaut requise des méthodes associées.
Les interfaces de collection peuvent être équipées d'une zone pour contenir le requêteur associé (dans le cas d'une recherche). Cette zone est placée dans l'interface en partageant la dimension soit horizontalement, soit verticalement. Lorsqu'une telle zone est définie, par défaut, les sauvegardes et les visualisations demandées au requêteur sont reportées sur la vue courante de la collection. Une icône permet de déplier/replier cette zone pour éventuellement la réduire sous la forme d'une simple bande.
Certaines collections autorisent la modification de préférences d'affichage par les utilisateurs. Une action 'Modifier les préférences' est disponible dans ce cas dans les menus. La modification de préférence ouvre une interface. Un champ de sélection permet de choisir parmi les différentes présentations de la collection possibles. Lors de la sélection d'une des présentations, l'interface de paramétrage associée à cette collection apparaît dans l'interface. Pour une même collection, plusieurs préférences de représentations être mémorisées.
Attention à la nuance entre préférences et paramétrages. Les deux notions utilisent des interfaces de paramétrage de représentation de document. Le paramétrage modifie les caractéristiques associées à la famille. La préférence indique certaines caractéristiques spécifiques à un utilisateur, pour lui permettre de définir une configuration personnelle de sa représentation.
Une action disponible dans l'interface permet de changer la représentation de collection courante utilisée.
La représentation d'une collection sous forme de grille est implémentée par la classe Ext.fdl.GridCollection.
Chaque rangée correspond à un document de la collection.
Chaque colonne correspond à une propriété ou à un attribut de document. Dans le cas d'un dossier ou d'une recherche multi-famille, les colonnes contiennent les propriétés affichables. Dans le cas d'une recherche mono-famille, les colonnes contiennent également les attributs affichables. Certaines propriétés sont affichées après un traitement spécifique : par exemple, l'icône apparaît sous forme d'image ou l'identifiant du propriétaire du document apparaît sous forme de lien de document. Certains attributs sont également affichés après un traitement spécifique :
Une barre d'outil au bas de la collection permet d'accéder à certaines commandes et informations : parcours de la pagination, rechargement de la collection, opérations de sélection, affichage du nombre de documents contenus et sélectionnés.
Cet exemple montre l'usage basique d'un objet Ext.fdl.Collection.
Ext.onReady(function(){ C = new Fdl.Context({ url: window.location.protocol + '//' + window.location.hostname + '/freedom' }); if (!C.isConnected()) { console.log('Connection Error : ' + C.getLastErrorMessage()); return; } if (!C.isAuthenticated()) { var u = C.setAuthentification({ login: 'admin', password: 'anakeen' }); if (!u) { console.log('Authentification Error : ' + C.getLastErrorMessage()); return; } } onSelect = function(doc, div){ var d = C.getDocument({ id: document.getElementById(doc).value }); var w = new Ext.fdl.GridCollection({ collection: d }); w.render(Ext.get(div)); } });
La sélection de document sur une interface de grille peut être effectuée de plusieurs manières.
Le clic unitaire sur un document permet de le sélectionner, et de dé-sélectionner tout autre document déjà sélectionné. Le clic unitaire sur un document, avec la touche Ctrl enfoncée, permet de l'ajouter ou de le retirer de la sélection, sans affecter le reste de la sélection. Tant que la touche Ctrl est enfoncée au moment du clic, le reste de la sélection n'est pas modifié, y compris concernant les documents précédemment sélectionnés sur les autres pages de l'interface.
Un bouton situé à droite du bouton de rafraichissement, dans l'interface de navigation (note : pas encore présent sur la capture d'écran), donne accès à certaines opérations spéciales de sélection : sélectionner tout, vider, inverser. Une bulle d'information associée au bouton apparaît lors du passage du curseur pour indiquer le nombre de documents actuellement sélectionnés.
La sélection est affectée par le filtrage. Par exemple, si l'utilisateur effectue l'opération 'sélectionner tout', la sélection comprendra tout le contenu de la collection, après filtrage. Voir la documentation sur le filtrage plus bas.
Il est possible de programmer des comportements lorsque l'utilisateur effectue des sélections sur des documents (voir les méthodes onSelectionChange(), onDocumentSelect(), onDocumentDeselect() et les évènements selectionchange, documentselect et documentdeselect dans la documentation).
Le paramétrage checkboxSelection permet d'activer l'utilisation des cases de sélection. C'est un indicateur direct de la possibilité de sélectionner plusieurs documents (l'usage des touches Ctrl et Shift n'étant pas évident pour tout les utilisateurs). La boîte de sélection présentée en haut de la colonne permet de sélectionner ou dé-sélectionner tout les documents actuellement affichés.
Les documents sont draggés depuis une grille sous la forme de sélections de documents. La sélection de documents actuellement en vigueur sur la grille au moment de l'opération définit les documents concernés. Ils peuvent être dropés dans une grille (y compris celle depuis laquelle ils sont draggés) ou dans les autres interfaces de représentation de collection.
Les interfaces de collection ont une logique appropriée implémentée pour indiquer si le drop est possible ou non. Par exemple, il n'est pas possible de droper dans une recherche.
Par défaut, l'apparence du fantôme (élément graphique représentation l'opération de drag 'n drop) indique le document draggé si il est unique, ou le nombre de documents draggés si ils sont multiples, ainsi que l'opération qui serait effectuée sur un drop.
Par défaut, le drop d'un document provoque le déplacement dans le dossier ciblé. Dans le cas d'une collection contenant d'autres sous-dossiers, le déplacement se fera dans l'éventuel sous-dossier ciblé (ou normalement dans la collection contenante, si c'est possible).
Si la touche Ctrl est enfoncée au moment du drop, l'opération est un ajout de références et pas un déplacement.
var d = C.getDocument({ id: document.getElementById(doc).value }); var w = new Ext.fdl.GridCollection({ collection: d }); w.render(Ext.get(div));
Cet exemple montre la mise en œuvre d'une interface de filtrage sur les colonnes.
Le filtrage consiste à poser une condition sur la valeur de la propriété ou de l'attribut afin de définir un sous-ensemble des documents de la collection. Une condition s'exprime sous la forme d'un opérateur et d'opérandes (aucun, un seul, ou plusieurs). Il est possible d'effectuer un filtrage multiple pour combiner plusieurs conditions et obtenir le sous ensemble de documents restreint par toutes.
La sélection de documents prend en compte le filtrage établi sur une collection. Voir le chapitre sur la sélection de documents.
L'interface de filtrage apparaît sous le titre d'une colonne sous la forme d'un bouton de sélection (permettant de choisir l'opérande) et de champs de sélection (aucun, un seul, ou plusieurs) appropriés pour chaque opérande. Ces champs de sélection s'ajustent lorsque l'utilisateur sélectionne un opérande, afin de correspondre à ce nouvel opérande.
Selon la nature des champs de sélection, le filtrage s'active différemment. Sur un champ de sélection de type textuel ou numérique, le filtrage s'active lors de l'appui de la touche entrée ou lors de la perte de focus du champs. Sur un champ de sélection de type afficheur de date ou boite de sélection, le filtrage s'active lors de la sélection effective d'un élément. Dans tous les cas, si plusieurs opérandes sont requis, le filtrage ne s'active que lorsque tous les opérandes sont renseignés. Le filtrage procède ensuite à un appel au serveur pour récupérer l'ensemble des documents après filtrage.
Une bulle d'information affichée au passage du curseur indique en permanence le filtre appliqué sur la colonne.
var d = C.getDocument({ id: document.getElementById(doc).value }); var w = new Ext.fdl.GridCollection({ collection: d, filterColumns: true }); w.render(Ext.get(div));
Cette fonctionnalité n'est pas encore implémentée.
Cet exemple montre la mise en œuvre d'une interface avec blocage de colonnes.
Le blocage de colonnes permet de spécifier certaines colonnes qui vont rester visibles et fixées sur la gauche de l'interface, tandis que le reste des colonnes peut être parcouru séparément avec l'ascenseur horizontal.
Cette fonctionnalité peut s'avérer utile lors de la manipulation de grilles possédant beaucoup de colonnes, afin de toujours garder certaines colonnes permettant d'identifier rapidement le document de la ligne. Le menu contextuel de la grille permet à l'utilisateur de bloquer et de débloquer des colonnes depuis l'interface graphique.
var d = C.getDocument({ id: document.getElementById(doc).value }); var w = new Ext.fdl.GridCollection({ collection: d, lockingColumns: true lockedColumns: ['id','title'] }); w.render(Ext.get(div));
La représentation d'une collection sous forme d'arbre est implémentée par la classe Ext.fdl.TreeCollection.
Chaque noeud de l'arbre correspond à un document. Selon la configuration il est possible de ne représenter que les collections. Les nœuds de type collection peuvent être déroulés au moyen d'un simple clic sur l'icône +/- à leur gauche. Le contenu de la collection est alors affiché sous la forme de nœuds enfants, dont les sous-collections peuvent elles même être déroulées. La configuration permet de spécifier si il faut afficher le nœud racine ou non.
Cet exemple montre la mise en œuvre d'une interface avec blocage de colonnes.
Il est configuré pour afficher tous les documents de la collection. Par défaut, seules les collections sont affichées.
var d = C.getDocument({ id: document.getElementById(doc).value }); var w = new Ext.fdl.TreeCollection({ collection: d, onlyCollection: false }); w.render(Ext.get(div));
La classe Ext.fdl.Requester sert à générer une interface permettant à l'utilisateur de définir et d'éditer des recherches. Elle est composée de plusieurs onglets : le premier onglet contient les informations du document recherche associé en édition, le deuxième onglet définit les critères de la recherche en elle même, le troisième onglet définit les options générales de la recherche, le quatrième onglet définit la présentation du résultat de la recherche.
L'onglet information permet de définir le titre de la recherche.
L'interface de définition des critères comprend un sélecteur de famille (étendu pour donner comme option de sélection 'Toutes les familles'). Ce sélecteur peut comprendre toutes les familles disponibles ou seulement une restriction de celles ci. Lorsqu'une famille (ou l'option 'Toutes les familles') est sélectionnée, elle apparaît dans l'interface sous la forme d'un bloc, qui peut être modifié ou retiré en cliquant sur les icones correspondantes à sa droite (pas encore représenté sur les captures d'écran).
A l'intérieur de ce bloc, un bouton permet de rajouter des conditions sous forme de lignes successives. Chaque condition affiche un bouton qui permet de la retirer. Chaque condition affiche éventuellement des boutons liés au parenthésage (voir chapitre suivant).
Chaque condition affiche également l'interface suivante : un champ sur lequel elle porte ; un opérateur, qui exprime la nature de la condition ; aucun, un ou plusieurs opérandes qui déterminent l'action de l'opérateur. Le champ sur lequel porte la condition est défini parmi les possibilités suivantes : 'tous les champs', la liste des propriétés cherchables, la liste des attributs cherchables.
L'interface de définition des critères permet donc de définir des recherches générales simples (en utilisant la sélection 'Toutes les familles' et le champs 'Tous les champs', on redéfinit la recherche globale), des recherches mono-familles ou des recherches multi-familles.
L'option sous-familles sous la forme d'une case à cocher permet de spécifier si la recherche doit ou non inclure les familles héritées de la famille spécifiée.
Le requêteur propose une interface pour paramétrer un parenthésage graphique des critères. Cette possibilité de parenthésage est optionnelle dans l'utilisation de l'objet. Le parenthésage est limité à un seul niveau de profondeur pour des raisons de lisibilité.
Les boutons de parenthèse apparaissent autour de chaque ligne exprimant une condition (soit un ensemble champs - opérateur - opérandes). Ces boutons sont activés ou désactivés par un clic. Une couleur vive met en évidence les boutons de parenthèse activés. L'utilisateur définit ainsi les parenthèses ouvrantes et fermantes encapsulant les conditions. Une incohérence dans la mise en œuvre des parenthèses détectée par l'interface est indiquée par un message d'avertissement avant tentative de résolution sur le serveur.
Sur la partie gauche de chaque ligne, se trouve un bouton pouvant prendre la valeur ET ou OU. L'utilisateur change la valeur de ce bouton en cliquant dessus. Ce bouton indique l'opérateur qui va porter sur la ligne correspondante ou sur le groupement de parenthèses définis si c'est applicable. Si aucune parenthèse ne donne de priorité à la résolution de la recherche, le principe mathématique employé par défaut fera le ET prioritaire sur le OU.
L'utilisateur peut définir un certain nombre d'options pour configurer la recherche.
L'option Révision lui permet de spécifier une condition sur la révision des documents obtenus :
L'option A partir du dossier permet de spécifier un dossier qui servira de racine pour la recherche. La spécification du sélecteur de dossier reste encore à définir.
L'option Document comprend deux cases à cocher (non représentées encore sur la capture)
L'option Domaine permet d'inclure ou non les documents de la poubelle et/ou du fond documentaire dans les résultats de la recherche. Il faut nécessairement en sélectionner au moins un.
La présentation du résultat d'une recherche s'appuie sur les interfaces de présentation des collections. Une liste de sélection permet de choisir l'interface de collection à utiliser parmi celles disponibles. Une fois cette interface sélectionnée, son paramétrage associé s'affiche et peut être édité.