ergonomique/fw_tableau.js
Résumé
Ce fichier Javascript correspond au framework de gestion des tableaux.
Cette description consiste à présenter les prototypes des fonctions, des exemples d'appel et les précisions
techniques nécessaires à la mise en oeuvre de ce framework.
Le framework tableau utilise les classes utilitaires suivantes :
>
ComposantTableau pour gérer le composant de bandeau d'onglets.
>
ObjectColonne pour décrire l'objet associé à une colonne du tableau onglet.

Comme vu ci-dessus, le composant tableau peut être amené à utiliser deux flux XML :
·
Un XMLObject décrivant le contenu informatif du tableau
· Un
XMLObjectSauvegarde déterminant le paramétrage du tableau. Ce paramétrage n'est pas
obligatoirement sous forme de flux XML et peut être aussi décrit sous la forme d'un tableau JavaScript.
L'arborescence XML associée au contenu informatif doit obligatoirement
avoir la forme suivante :
<
LISTE_ELEMENTS>
<ELEMENT>
<INFO_1></INFO_1>
<INFO_2></INFO_2>
...
<INFO_N></INFO_N>
<ELEMENT>
</LISTE_ELEMENTS>
Voir Exemple de fichier XML du contenu informatif de ce composant pour
une liste d'articles :Exemples de structure XML.
- L'élément racine
de nom «LISTE_ELEMENTS» ici peut prendre n'importe quel
nom, il représente le nom que l'on donne à l'ensemble des enregistrements à afficher dans le tableau.
- De même
l'élément «ELEMENT» indique le nom que l'on donne à un enregistrement à afficher dans le tableau.
-
Le sous-élément «INFO_N» représente le nom
de l'élément XML à afficher dans une colonne. Sa valorisation pour chaque élément XML «ELEMENT» permet d'indiquer
la valorisation de chaque cellule présente dans le tableau.
L'arborescence XML associée au
paramétrage du composant doit obligatoirement
avoir la forme suivante :
<COMPOSANT>
<TITRE></TITRE>
<PIED></PIED>
<LARGEUR_TAB></LARGEUR_TAB>
<LARGEUR_ALT><
/LARGEUR_ALT>
<LARGEUR_LST></LARGEUR_LST>
<DATA_LISTE>LISTE_ELEMENTS</DATA_LISTE>
<DATA_LIGNE>ELEMENT</DATA_LIGNE>
<COLONNES></COLONNES>
<ACTIONS></ACTIONS>
<OUTILS></OUTILS>
<PAGER></PAGER>
</COMPOSANT>
Voir Exemple de paramétrage XML
de ce composant pour un tableau : Exemples de structure XML.
- L'élément racine de nom «COMPOSANT» ici peut prendre
n'importe quel nom. Ce nom d'élément est utile que lors de la construction de la page pour passer le
bon paramétrage lors de la construction du composant.La détermination de
ce nom est donné soit par un modèle de page soit par le développeur de la page.
- Les éléments
XML «TITRE» et «PIED» indiquent le titre du composant tableau et
le pied du tableau, et ne sont pas obligatoires. Leur non présence permet de paramétrer un tableau sans titre ni
pied.
- Les éléments XML «LARGEUR_TAB», «LARGEUR_LST» et «LARGEUR_ALT»
permettent de paramétrer les notions de taille en largeur du tableau, de la liste si nécessaire
(le tableau est dans ce cas intégré dans une zone dynamique dont on doit définir la taille ici) et du tableau
lors d'un affichage en version étendue. La valorisation de ces paramètres doit être sous forme d'entier exprimé
par défaut en pixels mais pouvant être exprimé en pourcentage vis à vis de la largeur de la page ou de la liste en ajoutant le symbole
«%» derrière l'entier.
- Les éléments XML «DATA_LISTE» et «DATA_LIGNE» référencent les données du flux XML associé
au contenu informatif du tableau. L'élément XML
«DATA_LISTE» référence le nom XML associé à la liste des enregistrements à afficher et «DATA_LIGNE» référence le
nom XML associé à un enregistrement dans l'autre flux XML du composant tableau.
La liste d'élément
«COLONNES» permet de paramétrer l'ensemble des
colonnes présentes dans le composant tableau.
L'arborescence XML associé au paramétrage des colonnes
du composant est :
<COLONNES>
<COLONNE>
<LIBELLE></LIBELLE>
<TYPE></TYPE>
<DATA>
INFO_1</DATA>
<LARGEUR></LARGEUR>
<LARGEURCOL_ALT></LARGEURCOL_ALT>
<ALIGNEMENT></ALIGNEMENT>
<TRI></TRI>
<CACHE></CACHE>
</COLONNE>
</COLONNES>
- Le
sous-élément XML «LIBELLE» indique le titre d'une colonne affichée
en en-tête du tableau.
- Le sous-élément XML «TYPE» référence
la typologie des données présentes dans la colonne et peut être valorisé par :
· STRING pour une chaîne de caractères.
· DATE pour une date.
· NUMBER pour tout nombre à virgule ou entier.
· REFERENCEpour toute chaîne comprenant au début une suite de nombres, un espace et ensuite des
caractères alpha.
- Le sous-élément XML
«DATA» référence le nom XML de la donnée associée au contenu informatif
du tableau. Il permet d'indiquer le nom XML du composant tableau.
- Les sous-éléments XML
«LARGEUR»
et «LARGEURCOL_ALT» permettent de paramétrer les notions
de taille en largeur d'une colonne dans un tableau ou une liste d'une part et d'une colonne affichée en version étendue
d'autre part. La valorisation de ces paramètres doit être sous forme d'entier exprimé par défaut en pixels mais pouvant être exprimé en pourcentage vis à vis la largeur du
tableau en ajoutant le symbole «%» derrière l'entier.
- Le
sous-élément XML «ALIGNEMENT»
indique le type d'alignement souhaité dans l'affichage des données présentes dans la colonne.
Sa valorisation peut être:
· left
(valeur par défaut si pas renseigné) pour un alignement à gauche généralement appliqué sur des données de type STRING.
· center pour un alignement centré généralement
appliqué sur des données de type DATE.
· right
pour un alignement à droite généralement appliqué sur des données de type NUMBER.
- Le sous-élément XML
«TRI» indique le type de tri désiré ou accessible par l'utilisateur
sur la colonne. Il peut être valorisé de la manière suivante :
· CROISSANT quand la colonne doit être triée par ordre croissant lors de son premier affichage. L'utilisateur peut ainsi trier cette colonne par
ordre décroissant ensuite.
· DECROISSANT quand la colonne doit être triée par ordre
décroissant lors de son premier affichage. L'utilisateur peut ainsi trier cette colonne par ordre croissant ensuite.
· NEANT quand la colonne est non triable par l'utilisateur.
· NON quand la colonne n'est pas
triée lors de son premier affichage mais peut être triée par l'utilisateur par ordre croissant après l'affichage du tableau.
- Le
sous-élément «CACHE» permet de paramétrer le fait que la colonne ne puisse être
affichée que lors d'un affichage du tableau en version étendue, lorsque sa valorisation est indiquée à OUI.
La liste d'élément «ACTIONS» permet de paramétrer
l'ensemble des actions présentes au niveau de chaque ligne du tableau.
L'arborescence XML associé au paramétrage de ces actions est :
<ACTIONS>
<ACTION_EDITION></ACTION_EDITION>
<FONCTION_EDITION_HTML></FONCTION_EDITION_HTML>
<ACTION_SUPPRESSION></ACTION_SUPPRESSION>
<ACTION_DETAIL></ACTION_DETAIL>
<ACTION_DETAILPDF></ACTION_DETAILPDF>
</ACTIONS>
- Le sous-élément «ACTION_EDITION» permet de paramétrer la fonction
JavaScript présente dans le fichier JS spécifique à la page associée à l'action accessible via l'icône
. Sa valorisation ou non déterminent la
présence de cette icône dans chaque ligne affichée dans le tableau.
- Le sous-élément «
FONCTION_EDITION_HTML» permet de paramétrer la fonction JavaScript présente dans le fichier JS spécifique à la page
servant à générer le formulaire de saisie lié à la modification d'un enregistrement du tableau. Sa valorisation détermine
l'événement déclencheur de l'appel de la fonction paramétrée par le sous-élément «ACTION_EDITION» :
· non valorisé l'appel à la fonction «ACTION_EDITION» est déclenchée sur le click de l'icône
.
·
valorisé la fonction «ACTION_EDITION» est déclenchée sur le click de l'icône
lors de la validation du formulaire de saisie
présent dans la ligne en cours de modification du tableau.
Le traitement associé à la fonction paramétrée dans «
FONCTION_EDITION_HTML» est de générer le formulaire de saisie présent derrière les icônes de validation (
) et d'annulation (
) de la ligne en cours de
modification du tableau. Cette fonction doit renvoyer donc une chaîne de caractères contenant le code HTML reflétant ce formulaire.
- Le
sous-élément «ACTION_SUPPRESSION» permet de paramétrer l'appel à une fonction
JavaScript présente dans le fichier JS spécifique à la page associé à l'action accessible via l'icône
. Sa valorisation ou non déterminent la
présence de cette icône dans chaque ligne du tableau. Le déclenchement de l'appel à la fonction paramétrée est effectué sur
un click de l'icône
présent dans la ligne en cours de suppression du tableau.
- Le sous-élément «ACTION_DETAIL
» permet de paramétrer l'appel à une fonction JavaScript présente dans le fichier JS spécifique à la page associé
à l'action accessible via l'icône
. Le déclenchement de cet appel est effectué sur un click de cette icône. Sa valorisation ou non déterminent la
présence de cette icône dans chaque ligne du tableau.
- Le sous-élément «ACTION_DETAILPDF
» permet de paramétrer l'appel à une fonction JavaScript présente dans le fichier JS spécifique à la page associé
à l'action accessible via l'icône
. Le déclenchement de cet appel est effectué sur un click de cette icône. Sa valorisation ou non déterminent la
présence de cette icône dans chaque ligne du tableau.
La liste d'élément «OUTILS
» permet de paramétrer l'ensemble des actions présentes au niveau de la barre d'outils du tableau.
L'arborescence XML associé au
paramétrage des outils est :
<OUTILS>
<ACTION_AJOUT></ACTION_AJOUT>
<FONCTION_AJOUT_HTML></FONCTION_AJOUT_HTML>
<FONCTION_FILTRE_HTML></FONCTION_FILTRE_HTML>
<ACTION_EXPORT_XLS></ACTION_EXPORT_XLS>
<ACTION_ETENDUE_PRESENT></ACTION_ETENDUE_PRESENT>
</
OUTILS
>
- Le
sous-élément «ACTION_AJOUT» permet de paramétrer la fonction JavaScript
présente dans le fichier JS spécifique à la page associée à l'action accessible via l'icône
. Sa valorisation ou non déterminent la
présence de cette icône dans la barre d'outils.
- Le sous-élément «FONCTION_AJOUT_HTML
» permet de paramétrer la fonction JavaScript présente dans le fichier JS spécifique à la page servant à
générer le formulaire de saisie d'un nouvel enregistrement dans le tableau. Sa valorisation détermine l'événement déclencheur de
l'appel de la fonction paramétrée par le sous-élément «ACTION_AJOUT» :
· non valorisé l'appel à
la fonction «ACTION_AJOUT» est déclenchée sur le click de l'icône
.
· valorisé la fonction
«ACTION_AJOUT» est déclenchée sur le click de l'icône
lors de la validation du formulaire de saisie
présent dans la nouvelle ligne ajoutée au tableau.
Le traitement associé à la fonction paramétrée dans «
FONCTION_AJOUT_HTML» est de générer le
formulaire de saisie présent derrière les icônes de validation (
) et d'annulation (
) de la ligne
ajoutée
dans le tableau. Cette fonction doit renvoyer donc une chaîne de caractères contenant le code HTML
reflétant ce formulaire.
- Le sous-élément «FONCTION_FILTRE_HTML» permet de paramétrer l'appel à une
fonction JavaScript présente dans le fichier JS spécifique à la page associé à l'action accessible via l'icône
. Sa valorisation ou non déterminent la
présence de cette icône dans la barre d'outils. Le traitement effectué par cette fonction JavaScript doit permettre de générer le code
HTML du formulaire de saisie des critères du filtre présent derrière les icônes de validation (
), annulation (
) et remise à zéro du filtre
(
) de la barre d'outils lors de la saisie d'un filtrage. Cette fonction renvoie donc une
chaîne de caractères contenant le code HTML reflétant ce formulaire.
- Le sous-élément «
ACTION_EXPORT_XLS» permet de paramétrer l'appel à une fonction JavaScript présente dans le fichier JS spécifique à
la page associé à l'action accessible via l'icône
. Le
déclenchement de cet appel est effectué sur un click de cette icône. Sa valorisation ou non déterminent la présence de cette icône
dans la barre d'outils.
- Le sous-élément «ACTION_ETENDUE_PRESENT» permet de
paramétrer la présence ou non de l'icône
dans la barre d'outils avec
une valorisation ou non à OUI.
La liste d'élément «PAGER» permet de paramétrer la présence ou non d'une navigation par pagination sur le contenu informatif du tableau.
L'arborescence XML associé au paramétrage du pager est :
<PAGER>
<MAX_LIGNES></
MAX_LIGNES
>
</
PAGER
>
- Le sous-élément «MAX_LIGNES» permet de paramétrer
le nombre de lignes maximum affichées dans chaque page du contenu informatif du tableau.
RENDU IHM
Tableau
[Instanciation de la classe ComposantTableau correspondante : voir Exemples]

Liste
[Instanciation de la classe ComposantTableau correspondante : voir Exemples]

Tableau Maître
[Instanciation de la classe ComposantTableau correspondante : voir Exemples]
Tableau affiché en version étendue
[Instanciation de la classe XMLObject sur le paramétrage XML de ce composant affichable en version étendue : voir Exemples]

Version: 1.1
Date : 25/10/2005
Auteur: Ministère des Affaires Etrangères, Aubay SA, Steve Péguet
Sommaire des Classes
|
ObjectPresentation |
La classe «ObjectPresentation» est la classe permettant de gérer la présentation du
composant Tableau. Ses propriétés publiques décrivent les attributs permettant de gérer la présentation
du composant tableau et peuvent être manipulées ou interrogées en dehors de la bibliothèque du framework
ergonomique. |
ObjectColonne |
La classe «ObjectColonne» est la classe permettant de gérer les colonnes du composant tableau. |
ComposantTableau |
La classe «ComposantTableau» est la classe permettant de décrire l'objet associé à un tableau. |
ObjectOutilTab |
La classe «ObjectOutilTab» est la classe permettant de gérer les outils du composant Tableau. |
ObjectActionTab |
La classe «ObjectActionTab» est la classe permettant de gérer les actions du composant Tableau. |
Sommaire des Fonctions Globales
|
static void
|
ComposantTableau_constructor()
La fonction «ComposantTableau_constructor()» permet l'instanciation d'un l'objet
ComposantTableau.
|
static Array
|
executerActionMajTableau(<String_Obligatoire> urlAction, <Array_Facultatif> parametres, tableau)
Cette fonction permet d'appeler l'action serveur qui met à jour le tableau spécifié en paramètre sans recharger la page courante.
|
static Object
|
generate_Checkbox(<String_Obligatoire> cellId, <String_Obligatoire> valeur, tableau, colonne, <String_Obligatoire> ligne, <String_Obligatoire> idTab)
This global method «generate_Checkbox()» generate the html
code for reference column cells type.
|
static Object
|
generate_dateElement(<String_Obligatoire> cellId, <String_Obligatoire> value, <ObjectColonne_Obligatoire> column)
This global method «generate_dateElement()» generate the html
code for date column cells type.
|
static Object
|
generate_ElementFormSelect(<String_Obligatoire> cellId, valeur, colonne)
This global method «generate_ElementFormSelect()» generate the html
code for ElementFormSelect column cells type.
|
static Object
|
generate_ElementFormText(<String_Obligatoire> cellId, <String_Obligatoire> value, <ObjectColonne_Obligatoire> column, <String_Obligatoire> group)
This global method «generate_ElementFormText()» generate the html
code for ElementFormText column cells type.
|
static Object
|
generate_ElementReference(<String_Obligatoire> cellId, <String_Obligatoire> value, <ObjectColonne_Obligatoire> column)
This global method «generate_ElementReference()» generate the html
code for reference column cells type.
|
static Object
|
generate_ElementString(<String_Obligatoire> cellId, <String_Obligatoire> value, <ObjectColonne_Obligatoire> column)
This global method «generate_ElementString()» generate the html code for an input text.
|
static Object
|
generate_numberElement(<String_Obligatoire> cellId, <String_Obligatoire> value, <ObjectColonne_Obligatoire> column)
This global method «generate_numberElement()» generate the html
code for number column cells type.
|
static private Object
|
generateElementID(<String_Obligatoire> cellid, <String_Obligatoire> type)
This method generate the Element id, the element inside the cell.
|
static private void
|
Generique_ecrireBindDelay(<int_Obligatoire> id,positionScroll )
La fonction privée «Generique_ecrireBindDelay()» permet gérer le refraichissement des zonez relative pour les scrollbers sous IE
|
static private FLAG_STYLELIGNE_ALTERNE
|
ObjectPresentation_calculStyleLigne(ptTableau,<boolean_Obligatoire> ligne)
La méthode privée «calculStyleLigne()» implémente le mode par défaut de calcul de style de ligne
|
Version 2.10.0, / Etat : Validé
Cette création est mise à disposition selon le Contrat Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford,California 94305, USA.
Documentation generated by
JSDoc on Wed Jan 6 17:05:02 2010