Exemple : Arborescence - Mode navigation Fermer la fenêtre
Description

L'objectif de cet exemple est d'illustrer le mode de fonctionnement "navigation" du composant Arborescence.
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 de style nécessaires au composant -->
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/arbo.css" />

   <!-- Inclusion des fichiers du framework nécessaires au composant -->
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_arborescence.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="monArborescence"></div>
</body>
</html>

maPage.js
// Déclaration d'un objet qui va contenir le flux de paramétrage de l'arborescence.
var XMLParamArbo = null;
var monArborescence = 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 de l'arborescence

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

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

  XMLParamArbo.importXML();
}


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

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

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

     // Création du composant Arborescence de type "navigation" à partir de l'objet
     // XMLArborescence

     monArborescence = new ComposantArborescence("monArborescence",
                                                      "navigation", XMLArborescence);
     
     // Désignation du point d'ancrage (div) dans la page HTML
     
monArborescence.setDivBind(document.getElementById("monArborescence"));

     // Ecriture du code HTML de l'arborescence dans le point d'ancrage
     monArborescence.ecrireBind();
  }
}

mesDonnees.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<page>
  <ARBORESCENCE>
    <ITEM>      <!-- un élément ITEM = 1 noeud -->
       <LIBELLE>AFGHANISTAN</LIBELLE>
       <URL>pageAfgha.html</URL>
       <LISTE>  <!-- un élément LISTE = 1 ensemble de noeuds (ITEM) -->
           <ITEM>
              <LIBELLE>KABOUL (Ambassade)</LIBELLE>
              <URL>pageKaboul.html</URL>
           </ITEM>
       </LISTE>
    </ITEM>
  </ARBORESCENCE>
</page>
Rendu graphique

IHM