Exemple : Composant Bulle Fermer la fenêtre
Description

L'objectif de cet exemple est d'illustrer l'utilisation du composant Bulle.
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 -->
   <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 des fichiers de style nécessaires au composant -->
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/bulle.css" />
   
   <!-- Inclusion des fichiers du framework nécessaires au composant -->
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_bulle.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="#" >   
       <table><tr><td><div id="Position_libelle_reference"></div></td>
       <td><div id="Position_reference"></div></td></tr></table>
   </form>
</body>
</html>

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

// Fonction preparepage (exécutée au chargement de la page)
function preparepage()
{
  // 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; };

  // Déclaration d'un objet ElementFormText (champs de saisie).
 
var reference = new ElementFormText("reference", null, null, "4", "10", "Référence ",
                                      false, null, 24);             

  // Définition d'une bulle d'information
  var codeHTMLBulle = "<b>Saisir la référence du produit.</b>";   
  var bulleRef = new ComposantBulle(codeHTMLBulle, TYPE_BULLE_HAUT_DROITE);
 
  // Définition du style de la bulle
  bulleRef.setClasseCSSDiv("divBulleAideForm");

  // Association de la bulle à l'élément de formulaire

  reference.setBulleInfo(bulleRef, POS_BULLE_BOITE);
 
  // Ajout de l'élément au formulaire
  composantFormulaire.addElement(reference);

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

Rendu graphique

IHM