Exemple : Création d'un tableau Fermer la fenêtre
Description

L'objectif de cet exemple est d'illustrer l'utilisation du composant Tableau .
Sources

Les éléments écrits en vert mettent en évidence les liens entre les sources, les éléments en rouge les liens dans les sources.

projet.properties
build.HtmlMaPage=URL_HTML_HtmlMaPage
build.HtmlMaPage_url=/html/test/maPage.html

build.JsMaPage=URL_JS_JsMaPage
build.JsMaPage_url=/html/test/maPage.js

build.XmlMesDonnees=URL_XML_XmlMesDonnees
build.XmlMesDonnees_url=/html/test/mesDonnees.xml

build.XmlMonContenu=URL_XML_XmlMonContenu
build.XmlMonContenu_url=/html/test/monContenu.xml

maPage.html
<html>
<head>
   <title>Page web d'exemple</title>
   <!-- Inclusion des fichiers de style nécessaires à la page -->
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/globale.css" />
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/fiche.css" />
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/cg_commun.css" />
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/couleur/cg_codeCouleur.css" />

   <!-- Inclusion des fichiers du framework nécessaires à la page -->
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_xml.js" type="text/javascript"></script>    
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_cookies.js" type="text/javascript"></script>

   <!-- Inclusion des fichiers de style nécessaires au composant -->
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/tableau.css"></link>

   <!-- Inclusion des fichiers du framework nécessaires au composant -->
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_cookies.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_outils.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_tableau.js"
                                                   type="text/javascript"></script>

   <!-- Inclusion du script javascript propre à la page -->
   <script src="@URL_JS_JsMaPage@" type="text/javascript"></script>
</head>
<body onload="preparepage()">
   <div class="tableau" id="Position_monTableau" style="display:none"></div>
</body>
</html>

maPage.js
// Déclaration d'un objet qui va contenir le flux de paramétrage du tableau.
var XMLParamTableau = null;
var monTableau = null;

// Fonction preparepage (exécutée au chargement de la page)
function preparepage()
{
  // Création de l'objet XMLObject contenant le flux de paramétrage du tableau.

  // Les paramètres seront ici récupérés via l'URL mesDonnes.xml (flux XML).
  // Lorsque le flux sera chargé dans l'objet, la fonction construirepage sera appelée.
  XMLParamTableau= new XMLObject(null, null,
                   "construirepage""@URL_XML_XmlMesDonnees@", false);

  // Chargement du contenu du flux dans l'objet XMLParamTableau

  XMLParamTableau.importXML();
}


// Fonction construirepage (exécutée à la fin du chargement du flux de paramétrage du
// tableau)
function construirepage()
{

  // Vérification de la réussite du chargement du flux
  var testErreur = XMLParamTableau.parseErrorXML();
  if (testErreur == 0)
  {

     // Création d'un object XMLObjectSauvegarde contenant uniquement le noeud
     // TABLEAU du flux de paramétrage de l'arborescence.
     var XMLTableau = new XMLObjectSauvegarde();
     XMLTableau.sauvegardeDOM(getElements(XMLParamTableau.xmlDoc,"TABLEAU")[0]);

     // Création du composant Tableau à partir de l'objet XMLTableau
     // et renseignement des données à partir du flux monContenu.xml
     monTableau = new ComposantTableau("monTableau"XMLTableau,
                                           "@URL_XML_XmlMonContenu@", true, false);
     
     // Ecriture du code HTML du tableau dans le point d'ancrage
     monTableau.ecrireBind();
     monTableau.importData();
  }
}


mesDonnees.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<page>
  <TABLEAU>
     <TITRE>Mon tableau d'articles</TITRE>
     <PIED>Ceci est le pied du tableau</PIED>
     <LARGEUR_TAB>98%</LARGEUR_TAB>
     <HAUTEUR_TAB>250</HAUTEUR_TAB>
     <DATA_LISTE>LISTE_ARTICLE</DATA_LISTE>
     <DATA_LIGNE>ARTICLE</DATA_LIGNE>
     <COLONNES>
        <COLONNE>
           <LIBELLE>Désignation</LIBELLE>
           <TYPE>STRING</TYPE>
           <DATA>DESIGNATION</DATA>
           <LARGEUR>*</LARGEUR>
           <ALIGNEMENT>left</ALIGNEMENT>
           <TRI>CROISSANT</TRI>
           <CACHE>NON</CACHE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Quantité</LIBELLE>
           <TYPE>NUMBER</TYPE>
           <DATA>QTE</DATA>
           <LARGEUR>*</LARGEUR>
           <ALIGNEMENT>left</ALIGNEMENT>
           <TRI>CROISSANT</TRI>
           <CACHE>NON</CACHE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Disponible</LIBELLE>
           <TYPE>CHECKBOX</TYPE>
           <DATA>DISPO</DATA>
           <LARGEUR>*</LARGEUR>
           <ALIGNEMENT>center</ALIGNEMENT>
           <TRI>NON</TRI>
           <CACHE>NON</CACHE>
        </COLONNE>

     </COLONNES>

  </TABLEAU>
</page>

monContenu.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<LISTE_ARTICLE>
    <ARTICLE>
        <DESIGNATION>Chemise bleu</DESIGNATION>
        <QTE>10</QTE>
        <DISPO>TRUE</DISPO>
    </ARTICLE>

    <ARTICLE>
        <DESIGNATION>Polo vert</DESIGNATION>
        <QTE>50</QTE>
        <DISPO>FALSE</DISPO>
    </ARTICLE>

</LISTE_ARTICLE>

Rendu graphique

IHM