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

L'objectif de cet exemple est d'illustrer l'utilisation du composant Tableur .
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_cs.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_format.js" type="text/javascript"></script>
   <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>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_tableur.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_monTableur" style="display:none"></div>
</body>
</html>



maPage.js
// Déclaration d'un objet qui va contenir le flux de paramétrage du tableur.
var XMLParamTableur = null;
var monTableur = 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 tableur.

  // 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.
  XMLParamTableur = new XMLObject(null, null,
                   "construirepage""@URL_XML_XmlMesDonnees@", false);

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

  XMLParamTableur.importXML();
}


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

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

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

     // Création du composant Tableur à partir de l'objet XMLTableur
     // et renseignement des données à partir du flux monContenu.xml
     monTableur = new ComposantTableur("monTableur"XMLTableur,
                                       "@URL_XML_XmlMonContenu@", true, false);
     
     // Ecriture du code HTML du tableur dans le point d'ancrage
     monTableur.importData();
  }
}



mesDonnees.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<page>
  <TABLEUR>
     <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>
     <GROUPE>
         <GROUPE_1>FAMILLE</GROUPE_1>
         <GROUPE_2>TYPE</GROUPE_2> 
         <CALCULS>
             <CALCUL>
                 <DATA>QTE</DATA>
                 <FORMULE>MOYENNE</FORMULE>
             </CALCUL>
         </CALCULS>
     </GROUPE>
     <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>Famille</LIBELLE>
           <TYPE>NUMBER</TYPE>
           <DATA>FAMILLE</DATA>
           <LARGEUR>*</LARGEUR>
           <ALIGNEMENT>left</ALIGNEMENT>
           <TRI>CROISSANT</TRI>
           <CACHE>NON</CACHE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Type</LIBELLE>
           <TYPE>NUMBER</TYPE>
           <DATA>TYPE</DATA>
           <LARGEUR>*</LARGEUR>
           <ALIGNEMENT>left</ALIGNEMENT>
           <TRI>CROISSANT</TRI>
           <CACHE>NON</CACHE>
        </COLONNE>
     </COLONNES>
  </TABLEUR>
</page>


monContenu.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<LISTE_ARTICLE>
    <ARTICLE>
        <DESIGNATION>Chemise bleu</DESIGNATION>
        <QTE>10</QTE>
        <FAMILLE>Chemise</FAMILLE>
        <TYPE>Manche courte</TYPE>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Chemise rouge</DESIGNATION>
        <QTE>20</QTE>
        <FAMILLE>Chemise</FAMILLE>
        <TYPE>Manche courte</TYPE>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Chemise verte</DESIGNATION>
        <QTE>4</QTE>
        <FAMILLE>Chemise</FAMILLE>
        <TYPE>Manche longue</TYPE>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Chemise bleu</DESIGNATION>
        <QTE>23</QTE>
        <FAMILLE>Chemise</FAMILLE>
        <TYPE>Manche longue</TYPE>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Polo vert</DESIGNATION>
        <QTE>50</QTE>
        <FAMILLE>Polo</FAMILLE>
        <TYPE>Manche longue</TYPE>
   </ARTICLE>
</LISTE_ARTICLE>

Rendu graphique

IHM