Ellipse Tutorial

Comment utiliser le composant <web:ToolTip> ?


ATTENTION : Tutorial en cours d'écriture ! N'hésitez pas à nous signaler toute erreur ou suggestion.

Accès rapide :
   Utilisation sous forme de composants JWT
   Utilisation sous forme de composants Ellipse

Il est fréquent de vouloir ajouter un complément d'informations sur un texte et de souhaiter que ce complément ne s'affiche que si cela est souhaité. Cela permet notamment d'y gagner en place. Fréquemment, ce complément d'information et présenté par le biai d'une bulle d'information (aussi appelée infobulle ou Tool Tip en anglais). Le langage HTML(HyperText Markup Language) (notez que le mot précédent s'est vu adjoindre une bulle d'information) propose déjà ce concept : il suffit d'ajouter l'attribut title sur quasiment n'importe quel tag HTML. Mais ce type d'infobulle est très rudumentaire et ne peut pas contenir de contenu riche (images, couleurs, ...) : seul un texte simple est supporté. A titre de rappel, placez la souris sur le mot TEST pour en avoir un exemple.

Le framework Ellipse vous propose donc le composant <web:ToolTip> afin de pouvoir afficher des bulles d'informations plus sophistiquées. Pour être précis, ce composant est capable de présenter un contenu HTML quelconque dans l'infobulle.

Comme pour tous les autres composants graphiques Ellipse, le composant <web:ToolTip> peut être utiliser de deux manières différentes : soit sous forme de composants JWT(Javascript Widget Toolkit : API Javascript de mise en oeuvre d'IHM Web. Cette API trouve notamment son inspiration auprès de l'API Java SWING. Elle constitue la partie cliente du framework Ellipse) (et donc utilisable directement en Javascript, quelque soit la technologie serveur retenue pour le développement du projet considéré), soit sous forme de composants Web Ellipse. Dans ce dernier cas, le composant aura bien entendu, une existance côté client (en Javascript), mais aussi côté serveur (en Java). Reprenons ces deux possibilités une à une.

Utilisation sous forme de composants JWT

Bien entendu, avant d'exploiter la librairie JWT, il est nécessaire de charger le coeur de cette librairie en mémoire (notamment, pour avoir accès à la fonction importPackage). L'extrait de code suivant montre comment réaliser cette étape au sein d'une page HTML(HyperText Markup Language) standard. Notez, bien entendu, que si vous utilisez une page Web Ellipse, cette inclusion de script est réalisée automatiquement : il ne faut donc surtout pas la rejouer une seconde fois. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 

<html>
    <head>
        <title>JWT library is used in a simple HTML page</title>
        
        <!-- You can specify the root of the JWT library.
            By default this variable is set with this value.
            
            var __APPLICATION_PATH__ = "./";
        -->
        
        <!-- Load JWT core library: should be loaded once -->
        <script language="Javascript" src="corelib/services/web/javascript/Core.js">
        </script>
        
        <!-- Load the default JWT CSS styles -->
        <link rel="stylesheet" type="text/css" 
              href="corelib/services/web/javascript/jwt/Jwt.css" />
        
    </head>
    <body>
    
        <!-- Your page content -->

    </body>
</html>
Chargement du module de base de la librairie JWT

Il nous faut maintenant définir le contenu de notre page web de test. Chaque zone de cette page devant recevoir une infobulle devra posséder un identifiant unique (un attribut id) afin de pouvoir leur associer leur infobulle. Voici un petit exemple simple. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 

<html>
    <head>
        <title>ToolTip Samples</title>
        <script language="Javascript" 
                src="corelib/services/web/javascript/Core.js"></script>
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
        <script language="Javascript" src="ToolTipSample.js"></script>
    </head>
    <body>
        <h1 id="title">
            Place the cursor on each HTML tag to view a different tooltip
        </h1> <br/>
        
        <input id="button" type="button" value="A HTML Button" /> <br/>
        <input id="textbox" type="text" value="A HTML text box" /> <br/>
        <p id="paragraph">This is a little paragraph</p>
        
    </body>
<html>
Fichier ToolTipSample.html

Passons au code Javascript : en premier lieu, il faut charger la librairie de manipulation d'infobulles. Ensuite, il faut bien comprendre une chose : une infobulle sera associée à un tag via un appel (masqué dans la librairie JWT) à la méthode document.getElementById. Or le fichier de script est chargé dans le header de la page : à ce moment là les tags définis dans le corps de la page ne sont pas encore existant. Il faut donc construire les composants <web:ToolTip> qu'une fois que la page sera complétement chargée. C'est pour cela que l'exemple ci-dessous utilise un gestionnaire d'événements associé à l'événement window.onload (pour rappel la fonction addEventHandler permet d'ajouter autant de gestionnaires d'événements que souhaités sur un événement et un objet donnés. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 

importPackage( "corelib/services/web/javascript/jwt/ToolTip.js" );

addEventHandler( window, "onload", function ( event ) {
    new ToolTip( document.getElementById( "title" ), "This is the title" );
    new ToolTip( document.getElementById( "button" ), "This is a button" );
    new ToolTip( document.getElementById( "textbox" ), "This is a text box" );
    new ToolTip( document.getElementById( "paragraph" ), "This is a paragraph" );
});
Fichier ToolTipSample.js

Pour être précis, le constructeur de la classe ToolTip (je rappel que le langage Javascript ne supporte pas à proprement parler le concept de classe, et encore moins le concept de constructeur : par contre la librairie JWT propose une abstraction qui tend à s'en rapprocher) accepte trois paramètres. Le premier correspond au noeud (au tag HTML) auquel accrocher l'infobulle. Le second paramètre correspond au contenu HTML de l'infobulle. Un troisième paramètre permet de spécifier une éventuelle classe de styles CSS, afin de décorer votre infobulle. En l'abscence de ce paramètre, la classe de style CSS .JwtToolTip sera utilisée. Il est a noter que le fichier corelib/services/web/javascript/jwt/Jwt.css propose un style CSS par défaut. Vous pouvez le redéfinir dans vos CSS.

Utilisation sous forme de composants Ellipse

L'utilisation des infobulles via le tag Ellipse simplifie considérablement leur mise en oeuvre. Il n'est plus nécessaire d'utiliser de code Javascript. Un tag XML se substituera (sur le serveur HTTP) par le code Javascript Equivalent. Voici un petit exemple d'utilisation. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.webapplications.WebPage">
    <head>
        <title>ToolTip Samples</title>
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
    </head>
    <body>
        <h1 align="center">ToolTip Samples</h1> <br/>
        
        <ul>
            <li><web:ToolTip text="HyperText Transfert Protocol">HTTP</web:ToolTip> :
                a network applicative protocol.</li>
            <li><web:ToolTip text="HyperText Markup Language">HTML</web:ToolTip> :
                a document language definition.</li>
            <li><web:ToolTip text="eXtensible Markup Language">XML</web:ToolTip> :
                a language for structure data.</li>
            <li><web:ToolTip text="eXtensible Stylesheet Language">XSL</web:ToolTip> :
                a style sheet language.</li>
        </ul>        
        
    </body>
</web:Html>
Fichier ToolTipSample.wp

ATTENTION : Ellipse Framework vous est proposé en version beta (d'évaluation) afin de vous permettre d'évaluer ce framework. Infini Software se dégage de toutes responsabilités relatives à l'utilisation de ce framework. De plus, Infini Software ne pourra nullement être tenu responsable de l'utilisation des informations présentes dans ces tutoriaux.

Dominique LIARD - © 2007..2010 SARL Infini Software - Tous droits réservés
Les autres marques et les noms de produits cités dans ces documents sont la propriété de leurs détenteurs respectifs.