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

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

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 -->  

   <!-- 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
// Fonction preparepage (exécutée au chargement de la page)
// Ici elle appelle seulement la construction de la page
function preparepage()
{
  
construirepage();
}


// Fonction construirepage
function construirepage()
{
     //Creation des ObjectOption
     var tabOption = new Array();
     //Les ObjectOption dont l'attribut selected est à true apparaitront à gauche
     tabOption.push(new ObjectOption("element1", "1", true));
     tabOption.push(new ObjectOption("element2", "2", true));
     //Les ObjectOption dont l'attribut selected est à true apparaitront à droite
     tabOption.push(new ObjectOption("element3", "3", false));
     tabOption.push(new ObjectOption("element4", "4", false));

     // Création du composant Rattachement à partir de l'objet XMLRattachement
     var monRattachement = new ComposantRattachement("monRattachement", null,                                          tabOption, "Mon composant rattachement",
                               "Elements rattachables", "Elements rattachés",
                               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();
}


Rendu graphique

IHM