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

L'objectif de cet exemple est d'illustrer le mode de fonctionnement "fichier" 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>
   <br><div id="divDetailsFichier"></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",
                                                      "fichier", 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();
  }
}


// Fonction afficherDetailFichier (exécutée lors du clic sur l'item kaboul)
function afficherDetailFichier(item)
{
  // Affichage des détails sur le fichier
  // Item contient les noeuds fils du noeud data correspondant à l'item sélectionné
  var codeHTML = "";   
  var docNodeRacine=item.data.childNodes[0];

  codeHTML += "Taille du fichier : " + getDataElement(docNodeRacine,"TAILLEFICHIER");
   
  this.document.getElementById("divDetailsFichier").innerHTML = codeHTML;   
}


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) : pageKaboul.html</LIBELLE>
              <URL>pageKaboul.html</URL>
              <FUNC>afficherDetailFichier</FUNC>
              <DATA>
                 <DETAILFICHIER>
                    <URLFICHIER>kaboul.doc</URLFICHIER>
                    <TYPEFICHIER>Document Word</TYPEFICHIER>
                    <TAILLEFICHIER>10Ko</TAILLEFICHIER>
                 </DETAILFICHIER>
              </DATA>
              <IMAGE>@@CONTEXT_WEB/@FRAMEWORK_ERGO@/images/bouton/arbo/IcoFichierOOText.png@</IMAGE>
              <IMAGEOVER>@@CONTEXT_WEB/@FRAMEWORK_ERGO@/images/bouton/arbo/IcoFichierOOText.pngOver@</IMAGEOVER>
              <IMAGEEXPANDED>@@CONTEXT_WEB/@FRAMEWORK_ERGO@/images/bouton/arbo/IcoFichierOOText.png@</IMAGEEXPANDED>
  <IMAGEEXPANDEDOVER>@@CONTEXT_WEB/@FRAMEWORK_ERGO@/images/bouton/arbo/IcoFichierOOText.pngOver@</IMAGEEXPANDEDOVER>
           </ITEM>
       </LISTE>
    </ITEM>
  </ARBORESCENCE>
</page>

Rendu graphique

IHM