Ellipse Tutorial

Comment utiliser le composant <web:Accordion> ?


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
   Utilisation de la liaison aux données
   Adaptez le look de vos composants <web:Accordion>

De nombreux sites proposent des éléments de menus afin de permettre à leurs utilisateurs de choisir une actions parmis un nombre de choix souvent important. Dans certains cas, le nombre de choix est tel qu'il est nécessaire de trouver une technique afin de catégoriser ces choix, afin de présenter, dans un espace restreint, que ceux qui sont les plus pertinants pour les besoins de l'utilisateur. C'est très exactement à ce type de problématique que cherche à répondre le composant <web:Accordion> (un composant Accordéon, si l'on cherche un traduction en français).

Effectivment, ce composant est capable de compacter ses blocs de menus afin de libérer un maximum d'espace pour le bloc le plus pertinant. D'ou l'analogie avant l'accordéon. Afin de mieux vous faire une idée d'un tel composant (si vous n'en avez pas déjà utilisés), vous pouvez tester celui présenté à la droite de ce paragraphe. Notez que dans cette exemple, le choix du menu affiche juste une boîte de dialogue afin de conserver ce document dans la fenêtre.

Comme toujours, pour les composants graphiques Ellipse, le composant <web:Accordion> 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) (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.

  First menu itemSecond menu itemThird menu itemFirst menu itemSecond menu itemThird menu itemEllipse FrameworkEllipse PluginEllipse JavadocEllipse sample applicationJWT - Standalone mode

Utilisation sous forme de composant JWT

Bien entendu, avant d'exploiter la librairie JWT(Javascript Widget Toolkit - partie client du framework Ellipse) , 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 faut maintenant définir la structure de la page HTML devant recevoir le menu accordéon. En guise d'exemple, nous allons utiliser un tableau afin de définir deux zones, l'une à côté de l'autre. La zone de gauche (un tag <td>) contiendra le menu accordéon. La zone de droite pourra contenir n'importe quelle information. Notez que la cellule de gauche recevra un identifiant (attribut id) afin d'y permettre l'injection des tags HTML générés par le menu accordéon. Voici le code de la partie HTML. 

 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 
 26 
 27 
 28 
 29 

<html>
    <head>
        <title>JWT Accordion samples</title>
        <script language="Javascript" src="corelib/services/web/javascript/Core.js">
        </script>
        
        <script language="Javascript" src="AccordionSample.js">
        </script>
        
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
    </head>
    
    <body>
        <h1 style="text-align:center">JWT Accordion samples</h1>
        <br/>

        <table border="0" width="100%">
            <tr>
                <td style="width:200px; height: 200px" id="forAccordionMenu">
                </td>
                <td>
                    This is a Accordion Menu sample !
                </td>
            </tr>
        </table>

    </body>
</html>
Fichier AccordionSample.html

Le code qui suit vous montre comment, via Javascript, instancier un composant JWT Accordion. En fait un composant accordéon est un compoosant complexe. Il est nécessaire de définir les différents menus qui vont le constituer. Chacun de ces menu contiendront à leur tour, différents éléments de menu. Pour ce faire, il est nécessaire d'importer dans votre script les trois classes Javascript suivantes : corelib/services/web/javascript/jwt/Accordion.js, corelib/services/web/javascript/jwt/AccordionMenu.js et corelib/services/web/javascript/jwt/MenuItem.js. Une fois que tous les éléments du menu accordéon ont été assemblés, il ne reste plus qu'à injecter le composant complet dans le tag HTML récepteur (le <td>). 

 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 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 

importPackage( "corelib/services/web/javascript/jwt/Accordion.js" );
importPackage( "corelib/services/web/javascript/jwt/AccordionMenu.js" );
importPackage( "corelib/services/web/javascript/jwt/MenuItem.js" );


addEventHandler( window, "onload", function( event ) {

    var accordion = new Accordion();

        var accordionMenu1 = new AccordionMenu( "First menu" );
            var menuItem1 = new MenuItem( "Menu Item 1", "http://..." );
            accordionMenu1.add( menuItem1 );
            var menuItem2 = new MenuItem( "Menu Item 2", "http://..." );
            accordionMenu1.add( menuItem2 );
            var menuItem3 = new MenuItem( "Menu Item 3", "http://..." );
            accordionMenu1.add( menuItem3 );
        accordion.add( accordionMenu1 );

        var accordionMenu2 = new AccordionMenu( "Second menu" );
            var menuItem4 = new MenuItem( "Menu Item 4", "javascript: alert('ok');" );
            accordionMenu2.add( menuItem4 );
            var menuItem5 = new MenuItem( "Menu Item 5", "javascript: alert('ok');" );
            accordionMenu2.add( menuItem5 );
            var menuItem6 = new MenuItem( "Menu Item 6", "javascript: alert('ok');" );
            accordionMenu2.add( menuItem6 );
        accordion.add( accordionMenu2 );

        var accordionMenu3 = new AccordionMenu( "Thrid menu" );
            var menuItem7 = new MenuItem( "Menu Item 7", "http://..." );
            accordionMenu3.add( menuItem7 );
            var menuItem8 = new MenuItem( "Menu Item 8", "http://..." );
            accordionMenu3.add( menuItem8 );
            var menuItem9 = new MenuItem( "Menu Item 9", "http://..." );
            accordionMenu3.add( menuItem9 );
        accordion.add( accordionMenu3 );    

    accordion.injectInDocument( document.getElementById( "forAccordionMenu" ) );
    
});
Fichier AccordionSample.js

Comme vous l'aurez certainnement observé, la classe (si l'on peut se permettre cette terminologie en Javascript) MenuItem est la même que celle utilisées pour les barres de menus JWT (je vous renvoie vers la page associée à la mise en oeuvre de barres de menu pour de plus amples informations). J'insiste sur ce point pour vous dire que, si vous le souhaitez, vous pouvez aussi spécifier la fenêtre utilisée pour l'affichage de la page liée (équivalent à l'attribut target d'un tag de lien hypertext HTML) : la valeur _blank permet d'obtenir un affichage dans une nouvelle fenêtre. Vous pouvez aussi spécifier une éventuelle icône. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 

// D?but du script

var accordionMenu = new AccordionMenu( "The Menu" );

var menuItem = new MenuItem( "Menu Item", "http://...", "_blank", "icon.png" );

accordionMenu.add( menuItem );

// Suite du script
Exemple d'utilisation d'une icône sur un élément de menu

Utilisation sous forme de composants Ellipse

Si vous utilisez la solution Ellipse dans son intégralité, l'utilisation de menu accordéon (comme pour tout les autres composants d'ailleurs) devient beaucoup plus simple. L'exemple suivant vous montre comment assembler correctement les tags Ellipse d'un menu accordéon. 

 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 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.webapplications.WebPage">
    <head>
        <title>JWT Accordion samples</title>
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
    </head>
    
    <body>
        <h1 style="text-align:center">JWT Accordion samples</h1>
        <br/>

        <table border="0" width="100%">
            <tr>
                <td style="width:200px; height: 200px">
                    <web:Accordion>
                        <web:AccordionMenu text="First menu">
                            <web:MenuItem
                                text="Item 1" url="http://..." target="_blank" />
                            <web:MenuItem
                                text="Item 2" url="http://..." target="_blank" />
                            <web:MenuItem
                                text="Item 3" url="http://..." target="_blank" />
                        </web:AccordionMenu>
                        <web:AccordionMenu text="Second menu">
                            <web:MenuItem text="Item 4" icon="../Images/BlueBall.png"
                                          url="javascript: alert('ok');" />
                            <web:MenuItem text="Item 5"  icon="../Images/BlueBall.png"
                                          url="javascript: alert('ok');" />
                            <web:MenuItem text="Item 6" icon="../Images/BlueBall.png"
                                          url="javascript: alert('ok');" />
                        </web:AccordionMenu>
                        <web:AccordionMenu text="Third menu">
                            <web:MenuItem
                                text="Item 7" url="http://..." target="_blank" />
                            <web:MenuItem
                                text="Item 8" url="http://..." target="_blank" />
                            <web:MenuItem
                                text="Item 9" url="http://..." target="_blank" />
                        </web:AccordionMenu>
                    </web:Accordion>
                </td>
                <td>
                    This is a Accordion Menu sample !
                </td>
            </tr>
        </table>

    </body>
</web:Html>
Fichier AccordionSample.wp
Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9

Notez que cet exemple, les valeurs des liens hypertextes sont fictives. Qui plus est, l'attribut target est utilisé afin de renvoyer ces liens vers une nouvelle page (valeur _blank).

Notez aussi que des icônes ont été utilisées pour réhausser l'intérêt visuel de vos menus : utilisation de l'attribut icon.

Enfin, il est a remarquer que le tag de cellule du tableau n'a pas nécessité d'être identifié via un attribut id pour pouvoir recevoir le menu accordéon (contrairement à l'exemple utilisant simplement l'API JWT).

Utilisation de la liaison aux données

L'objectif de la liaison aux données consiste à lier le contenu de vos composants web (affichés sur le navigateur client) avec des données présentes sur le serveur web (sous forme d'objets Java). Pour de plus amples informations, je vous renvoie vers les articles précédent de ce tutorial. Afin de pouvoir être exploité, le modèle de liaison de données du framework Ellipse vous offre une syntaxe particulière (qu'on retrouve certes sur certains autres framework Web): #{expression}. Un tel élément syntaxique doit être placé dans la valeur d'un attribut d'un composant web Ellipse.

Dans le cadre de la mise en oeuvre d'un menu accordéon, cette possibilité peut être très pratique. Effectivement, il est courant d'avoir un menu dont le nombre d'éléments dépend d'informations dynamiques stockées sur le serveur. Pour répondre à ce type de problématique, un tag <Repeater> va être utilisé : il permettra de générer autant d'éléments de menu que nécessaire. Chaque élément de menu se varra affecté une valeur propre à partir des données stockées sur le serveur. Voici un petit exemple de mise en oeuvre. Quelques explications suivront.

Rappels : l'écriture de l'expression de liaison aux données est basée sur le modèle Java Beans. En conséquence, vous vous devez, au minimum, de fournir les méthodes d'accès en lecture (les getters) à vos données. Vous définissez ainsi des propriétés (en lecture seules, si vous fournissez uniquement les getter. Ces propriétés seront associées à vos attributs. Le code suivant correspond à la source de données utilisées pour l'affichage de votre menu accordéon. Vous pourrez très facilement en changer son code pour vous connecter à une base de données. 

 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 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 

package corelib.services.web.samples.virtualcaddy.webpages.samples;

import corelib.services.web.webapplications.WebPage;

public class AccordionSample extends WebPage {
    
    /** The dataPart1 attribute, used for the first menu */
    private Pair [] dataPart1 = {
        new Pair( "First menu item", "http://..." ),
        new Pair( "Second menu item", "http://..." ),
        new Pair( "Last menu item", "http://..." )
    };

    /** The dataPart2 attribute, used for the second menu */
    private Pair [] dataPart2 = {
        new Pair( "Other menu item", "http://..." ),
        new Pair( "Another menu item", "http://..." ),
        new Pair( "A menu item", "http://..." )
    };
    
    /** The dataPart1 readonly property. 
     * This property is bind to the dataPart1 attribute
     */
    public Pair [] getDataPart1() {
        return this.dataPart1;
    }

    /** The dataPart2 readonly property.
     * This property is bind to the dataPart2 attribute
     */
    public Pair [] getDataPart2() {
        return this.dataPart2;
    }

    /** This class represents data for one menu item */
    public class Pair {
        private String text;
        private String url;
        
        public Pair( String text, String url ) {
            this.text = text;
            this.url = url;
        }
        
        public String getText() { return this.text; }
        public String getUrl() { return this.url; }
    }
}
Fichier AccordionSample.java

Maintenant, il faut mettre en oeuvre la page web pour que ses menus (dans l'accordéon) soient liés aux données exposées par la classe de page Web presentée ci-dessus. 

 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 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.samples.virtualcaddy.webpages.samples.AccordionSample">
    <head>
        <title>JWT Accordion samples</title>
        <link rel="stylesheet" type="text/css"
              href="corelib/services/web/javascript/jwt/Jwt.css" />
    </head>
    
    <body>
        <h1 style="text-align:center">JWT Accordion samples</h1>
        <br/>

        <table border="0" width="100%">
            <tr>
                <td style="width:200px; height: 200px">
                    <web:Accordion>
                        <web:AccordionMenu text="First menu">
                            <web:Repeater values="#{this.dataPart1}" elementAlias="item">
                                <web:MenuItem
                                    text="#{item.text}" url="#{item.url}" target="_blank" />
                            </web:Repeater>
                        </web:AccordionMenu>
                        <web:AccordionMenu text="Second menu">
                            <web:Repeater values="#{this.dataPart2}" elementAlias="item">
                                <web:MenuItem
                                    text="#{item.text}" url="#{item.url}" target="_blank" />
                            </web:Repeater>
                        </web:AccordionMenu>
                    </web:Accordion>
                </td>
                <td>
                    This is a Accordion Menu sample with data binding!
                </td>
            </tr>
        </table>

    </body>
</web:Html>
Fichier AccordionSample.wp

Adaptez le look de vos composants <web:Accordion>

Pour clore cette page, sachez que, comme tout les composants Web Ellipse, les composants <web:Accordion> peuvent être décorés à votre convenance, via un ensemble de classes CSS (Pour de plus amples informations sur CSS(Cascading Style sheet) , je vous renvoie vers notre tutorial CSS). Voici la liste de classes CSS associées aux menus accordéons.


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.