Projet Internet 97
Sujet 1
Widget permettant de manipuler (placer, sélectionner, modifier, enlever,...) n'importe quel type d'instance d'une classe derivée de 'Component'.
Etudiants :
Professeurs responsables :
Table des matières :
Explications :
Démonstrations :
1. Remarques sur l'implémentation du Widget Table/Grid :
L'étude de notre Widget Table/Grid peut être décomposée en trois phases, à savoir le contrôle des caractéristiques graphiques propres à la Grid, la gestion des intéractions offertes à l'utilisateur et l'interface publique proposée aux programmeurs.
Nous avons encapsulé 3 classes dans la notion de Grid :
La classe principale 'Grid' qui est l'interface publique pour la création et la manipulation de notre Widget.
La classe 'Cell' qui représente une cellule élémentaire de la Grid. Cette classe est laissée publique afin de permettre à l'utilisateur une manipulation plus pointu des éléments de la Grid.
La classe 'Field', classe privée qui représente un champ de la Grid (case contenant le titre d'une colonne, d'une ligne ou le titre de la Grid)
2. Les différents paramètres de la Grid :
Une Grid est caracterisée par de multiples attributs :
Tout ces paramètres peuvent être modifiés de façon dynamique pendant l'exécution.
3. Deux Types de constructeurs Grid :
Le programmeur peut construire deux types de Grid qui correspondent aux deux constructeurs de la classe principale 'Grid' :
Dans ces deux cas, le programmeur a la possibilité, à tout moment, de modifier ces caractéristiques.
4. Intéractions avec la Grid :
Trois types d'intéractions sont gérées par la Grid :
Lorsque le programmeur positionne le mode 'ScrollBar Horizontale' à vrai et si la taille réelle de la Grid est supérieur à la taille visible de la Grid alors une scrollBar Horizontale apparaît au bas de la Grid.
Idem pour la ScrollBar Verticale qui se positionne automatiquement à droite de la Grid.
Lorsque le programmeur positionne le mode 'Taille Dynamique' à vrai et si un 'Component' place dans une cellule de cette Grid est plus grand que cette dernière alors toutes les cellules sont automatiquement redimensionnées à la taille du 'Component'.
Lorsque le programmeur positionne le mode 'Interactif' à vrai l'utilisateur de la Grid peut alors effectuer des sélections de cellules de cinq façons différentes :
A chaque click sur une cellule, celle ci se trouve sélectionnée et toutes les autres sont désélectionnées.
A chaque click sur la cellule 0,0 (titre de la Grid), toutes les cellules de la Grid sont séléctionnées.
A chaque click sur un champ d'une colonne/ligne toute les cellules de la colonne/ligne correspondante sont sélectionnées.
A chaque click sur une cellule accompagné de la touche 'Control', celle ci se trouve sélectionnée tout en gardant en mémoire les précédentes sélections. Un click sur une cellule sélectionnée a pour effet de désélectionner cette dernière.
A chaque click sur une cellule accompagné de la touche 'Shift', celle ci déterminera un ensemble de cellules sélectionnées avec la précédentes cellule sélectionnée.
Remarque : Si un 'Component' est présent dans une cellule il faut veiller à cliquer en dehors de celui ci pour pouvoir la sélectionner.
L'interface publique de Grid offre un éventail de fonctionnalités permettant à l'utilisateur d'effectuer toutes les manipulations nécessaires pour la configuration des caractéristiques de la Grid (Interrogation sur les valeurs courantes des attributs et modification pendant l'exécution de ces valeurs).
Les opérations liées aux intéractions avec la Grid sont également présentes (sélection unaire ou multiple de cellules, récupération de la liste des indices de cellules sélectionnées, récupération d'une cellule ou d'un contenu d'une cellule en donnant sa position dans la Grid...).
Nous n'avons cependant pas voulu surcharger cette interface avec des opérations plus complexes comme l'inversion de colonnes/lignes, les effets de mirroirs, le drag & drop... car nous pensons que ces méthodes sont à définir au niveau applicatif afin de garder un Widget générique qui ne soit pas fermé à un type d'application. Cependant toutes les opérations nécéssaires à l'implémentation de fonctions complexes dédiées sont offertes dans l'API de la Widget Table/Grid. Nous présentons en démonstration une applet utilisant les propriétés de drag & drop sur une Grid (Cf. Démonstration 6).
Nous avons également laissé déliberement la classe 'Cell' publique représentant une cellule de la Grid afin de permettre au programmeur une utilisation plus souple et plus rapide des caractéristiques d'une cellule (pour effectuer des copies ou déplacement de l'intégralité d'une cellule par exemple...)
Documentation de l'API de la Widget Table/Grid :
Démonstration 1 : Les deux constructeurs
Cette applet présente deux Grid (l'une créée avec le constructeur par défaut, l'autre avec le constructeur paramétré).
|
Constructeur par défaut Grid 5,5 de 300x200 (visible et réelle). Sans titre, bordure visible de 3 pixels, champs colonnes et lignes visibles et initialisés au chiffre de position, bordure et champs de couleur grise, texte des champs et fond des cellules de couleur blanche. Pas redimensionnable en fonction du contenu, pas de sélections souris possibles (Grid en 'lecture seule'), pas de scrollbars horizontale et verticale. |
Constructeur paramétré Grid 8,5 de 500x300 (visible) et 800x400 (réelle). Titre = "Table 2", bordure visible de 5 pixels, champs colonnes et lignes visibles et initialisés au chiffre de position, bordure de couleur orange, champs de couleur bleu, texte des champs de couleur jaune, fond des cellules de couleur cyan. Pas redimensionnable en fonction du contenu, sélections souris possibles (avec ou sans Ctrl/Shift, colonne/ligne...), scrollbars horizontale et verticale positionnées automatiquement. |
Démonstration 2 : Objets hétérogenes dans la Grid
Cette applet présente une Grid contenant différents types de 'Component' afin de montrer la possibilité de placer des élements hétérogenes dans une même Grid.
|
|
Cette applet présente une Grid dont les param&eagrave;tres sont tels que lorsque l'utilisateur ajoute un 'Component' dans une cellule plus petite que celui ci, l'ensemble des cellules de la Grid sont redimensionnées automatiquement (mode taille dynamique activé) pour visualiser le 'Component' dans son intégralité. On peut également remarquer que l'apparition des scrollBar se fait automatiquement (modes ScrollBar Horizontal et Vertical activés) en fonction de la taille visible et de la taille réelle de la Grid.
Remarque : l'ajout ou la suppression peut s'effectuer en sélectionnant une ou plusieurs cellules (avec ou sans combinaisons des touches Ctrl ou Shift), la démonstration 4 est principalement dédiée aux differentes sélections.
|
|
Démonstration 4 : Les differents types de sélections
Cette applet présente une Grid dont le mode interactif a été validé laissant la possibilité à l'utilisateur d'effectuer des sélections unaires (simple click), des sélections 'mémorisées' (touche Ctrl + click), des sélections multiples (touche Shift + click), des sélections d'une colonne entière (click sur le champ de la colonne), des sélections d'une ligne entiere (click sur le champ de la ligne), des sélections de toutes les cellules de la Grid (click sur le champ du titre de la Grid), ainsi que l'utilisation combinée des Ctrl/Shift avec les clicks sur colonne/ligne, ... .
|
|
Démonstration 5 : Les champs et le titre de la Grid
Cette applet présente une Grid et un textField, ce dernier permet de changer le texte du titre de la Grid ou les champs colonnes/lignes. Il suffit de sélectionner le champ titre ou colonne/ligne à changer puis d'entrer le texte souhaite suivi de Return.
|
|
Démonstration 6 : Le Drag & Drop du contenu d'une cellule
Cette applet présente une Grid ou le mode intéractif est validé et ou l'utilisateur peut à sa guise déplacer des Component de sa Grid en effectuant des Drag & Drop.
Remarque : En changeant juste le nom de la méthode employé dans cette applet, l'utilisateur aurait pu déplacer directement la cellule entière (Component + couleur de fond de la cellule).
|
|