Framework JavaScript ACube V2.10.0
 

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.

classesFwTableau

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 iconeEditer. 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 iconeEditer.
·  valorisé la fonction «ACTION_EDITION» est déclenchée sur le click de l'icône iconeValider 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 ( iconeValider) et d'annulation (iconeAnnuler) 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 iconeSupprimer. 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 iconeValider 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 iconeExportExcel. 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 iconeExportPdf. 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 iconeAjout. 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 iconeAjout.
·  valorisé la fonction «ACTION_AJOUT» est déclenchée sur le click de l'icôneiconeValider 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 ( iconeValider) et d'annulation ( iconeAnnuler) 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 iconeFiltrer. 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 (iconeValider ), annulation (iconeAnnuler) et remise à zéro du filtre (iconeAnnulerFiltre ) 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 iconeExportExcel. 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 iconePleinePagedans 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]
exTableau
Liste
[Instanciation de la classe ComposantTableau correspondante : voir Exemples]
exTableauListe
Tableau Maître
[Instanciation de la classe ComposantTableau correspondante : voir Exemples]
exTableauMaitre
Tableau affiché en version étendue
[Instanciation de la classe XMLObject sur le paramétrage XML de ce composant affichable en version étendue : voir Exemples]
exTableauEtendu


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

Framework JavaScript ACube V2.10.0
 


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