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

L'objectif de cet exemple est d'illustrer l'utilisation du composant Formulaire.
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_outils.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_formulaire_default.js"
                                                   type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_formulaire_element.js"
                                                   type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_formulaire_composant.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();">
  <form id="monFormulaire" action="#" >
     <table width="100%" class="CGcodetresclair zonegroupe">
         <tr>
            <td><span class="CGblanc CGtxcodeclair titregroupe">Titre Zone</span></td>
         </tr>
         <tr> 
            <td class="contenugroupe">
               <table width="100%" border="0" cellspacing="2" cellpadding="0">
                 <tr>
                   <td style="width:150px">
                     <div id="Position_libelle_element1"></div></td>
                   <td><div id="Position_element1"></div></td>
                 </tr>
               </table>
             </td>
         </tr>
      </table>
  </form>
</body>
</body>
</html>

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

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

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

  XMLParamFormulaire.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 = XMLParamFormulaire.parseErrorXML();
  if (testErreur == 0)
  {

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

      //Creation du composant formulaire à partir de l'objet XMLFormulaire
      
monFormulaire=creerFormulaire(XMLFormulaire);
      monFormulaire.initXMLData("@URL_XML_XmlMonContenu@");
      //Import et écriture des données
      
monFormulaire.importData();
      monFormulaire.ecrireBind();     
  }
}


mesDonnees.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<page>
  <ELEMENTFORM>
     <ID>monFormulaire</ID>
     <DATA_LISTE>LISTE_ELEMENTS</DATA_LISTE>
     <METHOD>POST</METHOD>
     <ELEMENTFORM_TEXT>
         <ID>element1</ID>
         <VALUE>Valeur par défaut</VALUE>
         <LIBELLE>Element1</LIBELLE>
         <DIVBIND>Position_element1</DIVBIND>
         <DIVLIBBIND>Position_libelle_element1</DIVLIBBIND>
         <SIZE>30</SIZE>
         <MAXLENGTH>30</MAXLENGTH>
         <TABINDEX>1</TABINDEX>
         <OBLIGATOIRE>true</OBLIGATOIRE>
         <ALT>mon element numero 1</ALT>
         <ZONEDATA>ELEMENT1</ZONEDATA>
        </ELEMENTFORM_TEXT>
  </ELEMENTFORM>
</page>

monContenu.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<LISTE_ELEMENTS>
    <ELEMENT1>
        <VALUE>Ma valeur finale</VALUE>
    </ELEMENT1>
</LISTE_ELEMENTS>

Rendu graphique

IHM