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

L'objectif de cet exemple est d'illustrer l'utilisation du composant Rattachement.
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

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 du framework nécessaires au composant -->
   <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()">
   <div id="monRattachement"></div>
</body>
</html>

maPage.js
// Déclaration d'un objet qui va contenir le flux de données du composant.
var XMLDonnees = null;

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

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

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

  XMLDonnees.importXML();
}


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

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

     // Création d'un object XMLObjectSauvegarde contenant uniquement le noeud
     // RATTACHEMENT du flux de données du composant.
     var XMLRattachement = new XMLObjectSauvegarde();
     XMLRattachement.sauvegardeDOM(getElements(XMLDonnees.xmlDoc,"RATTACHEMENT")[0]);

     // Création du composant Rattachement à partir de l'objet XMLRattachement
     var monRattachement = new ComposantRattachement("monRattachement",
                               XMLRattachement, null, null, null, null, null, null,
                               null, null, 1, false);
     
     // Désignation du point d'ancrage (div) dans la page HTML
     
monRattachement.setDivBind("monRattachement");

     // Ecriture du code HTML du tableau dans le point d'ancrage
     monRattachement.ecrireBind();
  }
}


mesDonnees.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<page>
  <RATTACHEMENT>
    <LIBELLE>Liste des clients :</LIBELLE>
    <LIBELLE1>Liste de tous les clients :</LIBELLE1>
    <LIBELLE2>Clients à contacter :</LIBELLE2>
    <OPTIONS>
       <OPTION>
           <LIBELLE>Client 1</LIBELLE>
           <VALUE>1</VALUE>
           <SELECTED>FALSE</SELECTED>
       </OPTION>
       <OPTION>
           <LIBELLE>Client 2</LIBELLE>
           <VALUE>2</VALUE>
           <SELECTED>FALSE</SELECTED>
       </OPTION>
       <OPTION>
           <LIBELLE>Client 3</LIBELLE>
           <VALUE>3</VALUE>
           <SELECTED>FALSE</SELECTED>
       </OPTION>
       <OPTION>
           <LIBELLE>Client 4</LIBELLE>
           <VALUE>4</VALUE>
           <SELECTED>TRUE</SELECTED>
       </OPTION>
    </OPTIONS>                                   
  </RATTACHEMENT>
</page>

Rendu graphique

IHM