Exemple : ElementFormSelectMaster - Groupement d'options Fermer la fenêtre
Description

L'objectif de cet exemple est d'illustrer l'utilisation des groupements d'options avec le composant ElementFormSelectMaster.
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/ergonomique/fw_formulaire_default.js"
                                                    type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_formulaire_composant.js"
                                                    type="text/javascript"></script>
   <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_element.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="composantFormulaire" action="#" >   
       <div id="Position_libelle_zones"></div><br>
       <div id="Position_zones"></div>
       <div id="Position_libelle_pays"></div><br>
       <div id="Position_pays"></div>
       <div id="Position_libelle_villes"></div><br>
       <div id="Position_villes"></div>
   </form>
</body>
</html>

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


// Fonction preparepage (exécutée au chargement de la page)
function preparePage()
{
  XMLPage = new XMLObject(null, null,
                     "construirePage",
                     "@URL_XML_XmlMesDonnees@", false);
  // Chargement du contenu du flux dans l'objet XMLDonnees
  XMLPage.importXML();
}

// Fonction construirepage
function construirePage()
{
  // Création de l'objet ComposantForm représentant le formulaire à utiliser
  // dans la page.

  composantFormulaire = new ComposantForm("composantFormulaire", "", "POST", 3, false);
  composantFormulaire.controlerSurface = function() { return true; };

  // Récupération de la configuration XML de l'élément ZONES
  var XMLElement01 = new XMLObjectSauvegarde();
  XMLElement01.sauvegardeDOM(getElements(XMLPage.xmlDoc,"ELEMENT")[0]);

  // Récupération des définitions des groupes
  var XMLDataElement01 = new XMLObjectSauvegarde();
  XMLDataElement01.sauvegardeDOM(getElements(XMLPage.xmlDoc,"DATA_PAYS")[0]);

  // Déclaration d'objets ElementFormSelectMaster
 
var zones = new ElementFormSelectMaster("zones", XMLElement01, null, null, null,
                     null, true, false, STATUT_ENABLED, 1, XMLDataElement01);
 
  var pays = new ElementFormSelectMaster("pays");
 
  var villes = new ElementFormSelect("villes");
 
  // Ajout des éléments au formulaire
  pays.addEsclave(villes);
  zones.addEsclave(pays);
  composantFormulaire.addElement(zones);

  // Ecriture du formulaire
  composantFormulaire.ecrireBind();
}

mesDonnees.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<PAGE>
    <!--  DESCRIPTION DU FORMULAIRE -->
    <FORMULAIRE>
        <ELEMENT>
           <LIBELLE>Zones:</LIBELLE>
           <OPTIONS>
               <OPTIONS_GRP>ZONES</OPTIONS_GRP>
           </OPTIONS>
        </ELEMENT>
    </FORMULAIRE>

    <!-- DESCRIPTION DES GROUPEMENTS DE DONNEES -->
    <DATA_PAYS>
       <OPTIONS_GRP_DEF>
           <ID>EUR</ID>
          <TYPE_TRI>LIBELLE</TYPE_TRI>
           <VALUE_SELECTED>1</VALUE_SELECTED>
           <OPTIONS>
               <OPTION>
                 <LIBELLE>France</LIBELLE>
                 <VALUE>1</VALUE>
                   <SLAVE>
                     <LIBELLE>Villes :</LIBELLE>
                       <OPTIONS>                  
                             <OPTIONS_GRP>FR_VILLES</OPTIONS_GRP>
                        </OPTIONS>                 
                  </SLAVE>
              </OPTION>
              <OPTION>
                  <LIBELLE>Italie</LIBELLE>
                  <VALUE>2</VALUE>
               </OPTION>
              <OPTION>
                  <LIBELLE>Espagne</LIBELLE>
                 <VALUE>3</VALUE>
               </OPTION>
           </OPTIONS>
        </OPTIONS_GRP_DEF>

       <OPTIONS_GRP_DEF>
          <ID>FR_VILLES</ID>
           <TYPE_TRI>LIBELLE</TYPE_TRI>
          <VALUE_SELECTED>10</VALUE_SELECTED>
           <OPTIONS>
              <OPTION>
                 <LIBELLE>Paris</LIBELLE>
                  <VALUE>10</VALUE>
              </OPTION>
            </OPTIONS>
       </OPTIONS_GRP_DEF>

       <OPTIONS_GRP_DEF>
           <ID>AME</ID>
          <TYPE_TRI>LIBELLE</TYPE_TRI>
          <VALUE_SELECTED>4</VALUE_SELECTED>
            <OPTIONS>
              <OPTION>
                  <LIBELLE>Etats-unisd'amérique</LIBELLE>
                 <VALUE>4</VALUE>
              </OPTION>
              <OPTION>
                 <LIBELLE>Canada</LIBELLE>
                  <VALUE>5</VALUE>
              </OPTION>
               <OPTION>
                 <LIBELLE>Espagne</LIBELLE>
                  <VALUE>6</VALUE>
              </OPTION>
           </OPTIONS>
       </OPTIONS_GRP_DEF>

       <OPTIONS_GRP_DEF>
          <ID>ASIE</ID>
          <TYPE_TRI>LIBELLE</TYPE_TRI>
          <VALUE_SELECTED>8</VALUE_SELECTED>
           <OPTIONS>
              <OPTION>
                 <LIBELLE>Japon</LIBELLE>
                  <VALUE>7</VALUE>
              </OPTION>
               <OPTION>
                 <LIBELLE>Chine</LIBELLE>
                  <VALUE>8</VALUE>
              </OPTION>
              <OPTION>
                  <LIBELLE>Thailande</LIBELLE>
                 <VALUE>9</VALUE>
              </OPTION>
           </OPTIONS>
       </OPTIONS_GRP_DEF>

        <OPTIONS_GRP_DEF>
          <ID>MONDE</ID>
          <TYPE_TRI>LIBELLE</TYPE_TRI>
           <VALUE_SELECTED>11</VALUE_SELECTED>
           <OPTIONS>
              <OPTION>
                  <LIBELLE>Amérique dunord</LIBELLE>
                 <VALUE>11</VALUE>
                   <SLAVE>
                     <LIBELLE>Pays :</LIBELLE>
                        <OPTIONS>                 
                        <OPTIONS_GRP>AME</OPTIONS_GRP>
                        </OPTIONS>                  
                  </SLAVE>
              </OPTION>
              <OPTION>
                 <LIBELLE>Asie</LIBELLE>
                 <VALUE>12</VALUE>
                  <SLAVE>
                      <LIBELLE>Pays :</LIBELLE>
                        <OPTIONS>                 
                        <OPTIONS_GRP>ASIE</OPTIONS_GRP>
                       </OPTIONS>                 
                  </SLAVE>
              </OPTION>
              <OPTION>
                 <LIBELLE>Europe</LIBELLE>
                 <VALUE>13</VALUE>
                   <SLAVE>
                     <LIBELLE>Pays :</LIBELLE>
                        <OPTIONS>                 
                         <OPTIONS_GRP>EUR</OPTIONS_GRP>
                        </OPTIONS>                  
                  </SLAVE>
              </OPTION>
           </OPTIONS>
       </OPTIONS_GRP_DEF>

       <OPTIONS_GRP_DEF>
           <ID>ZONES</ID>
          <TYPE_TRI>LIBELLE</TYPE_TRI>
           <VALUE_SELECTED/>
           <OPTIONS>
              <OPTIONS_GRP>MONDE</OPTIONS_GRP>
           </OPTIONS>
        </OPTIONS_GRP_DEF>
    </DATA_PAYS>
</PAGE>

Rendu graphique

IHM