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

L'objectif de cet exemple est d'illustrer l'utilisation du composant Menu.
Il est important de noter l'organisation des frames autour de ce composant :



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 (chargée dans la frame MENU_WIN)
<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="@URL_CSS_CssCommunMenu@" />

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

maPage.js
// Déclaration d'un objet qui va contenir le flux de paramétrage du menu.
var XMLParamMenu = 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 menu.

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

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

  XMLParamMenu.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 = XMLParamMenu.parseErrorXML();
  if (testErreur == 0)
  {
     // Création du composant Menu de type documentaire, à partir de l'objet XMLMenu
     var monMenu = new ComposantMenu("monMenu", 0,"Mon Application", XMLParamMenu);
     
     // Désignation du point d'ancrage (div) dans la page HTML
     
monMenu.setDivBind(document.getElementById("monMenu"));

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


mesDonnees.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<MENU>
    <VERSION>1</VERSION>
    <LANGUE>FR</LANGUE>
    <ACCUEIL> <!-- un élément ACCUEIL = définition de la page d'acceuil du menu -->
        <URL>acceuil.html</URL>
    </ACCUEIL>
    <PIED_DE_PAGE>
        <COULEUR>black</COULEUR>
        <COULEUR_TEXTE>white</COULEUR_TEXTE>
        <TEXTE>© Ma Société</TEXTE>
    </PIED_DE_PAGE>
    <ITEM1>       <!-- un élément ITEM1 = un élément de menu de premier niveau -->
                  <!-- un élément ITEM1 peut contenir un ensemble d'élément ITEM2 -->
        <URL>catalogue.html</URL> <!-- URL de la page à charger dans la frame CONTENU_WIN lors de la sélection de cette élément -->
        <LIBELLE>Catalogue</LIBELLE>
        <LIBELLE_LONG>Catalogue des produits</LIBELLE_LONG>
        <ID>Catalogue</ID>
        <ITEM2>   <!-- un élément ITEM2 = un élément de menu de deuxième niveau -->
                  <!-- un élément ITEM2 peut contenir un ensemble d'élément ITEM3 -->
            <URL>cataParGenre</URL>
            <LIBELLE>Par genre</LIBELLE>
            <LIBELLE_LONG>Catalogue classé par genre</LIBELLE_LONG>
            <ID>CataParGenre</ID>
        </ITEM2>
    </ITEM1>
</MENU>

Rendu graphique

IHM