Ellipse Tutorial

Comment utiliser le composant <web:TabbedPane> ?


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

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

L'utilisation d'onglets peut être très utile dans le cadre d'applications Web. Le framework Ellipse vous fourni donc ce type de composant. Comme à chaque fois, le framework Ellipse trouve sont inspiration dans la librairie Java Swing. Qui plus est, vous pouvez utiliser les onglets soit sous forme de composants JWT (en Javascript), soit sous forme de composants Web Ellipse. Reprenons ces deux possibilités une à une.

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

Pour utiliser des onglets en tant que composant JWT, il faut commencer par inclure le fichier Javascript qui définit ce type de composants : corelib/services/web/javascript/jwt/TabbedPane.js. Pour cela, utiliser la fonction importPackage : notez que cette fonction est sécurisée : si d'une manière ou d'une autre le fichier considéré est déjà chargé en mémoire, le second appel sera sans effet. 

 1 

importPackage( "corelib/services/web/javascript/jwt/TabbedPane.js" );
Importation de la classe Javascript de gestion des onglets

Ensuite, il faut définir la structure de la page HTML qui va héberger votre composant de type TabbedPane. A ce sujet, il faut savoir que pour chaque onglet, pour pouvez y associer soit un autre composant JWT, soit un noeud du DOM HTML (dit autrement un tag HTML). L'exemple qui suit, va générer deux composants <TabbedPane> positionnés l'un en dessous de l'autre. Le TabbedPane du haut contiendra trois onglets et celui du bas deux onglets. Notez aussi que dans le composant du haut, le troisième onglet sera associé à un noeud du DOM HTML. D'ou le <div id="oneHtmlPane">. 

 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 

<html>
    <head>
        <title>JWT TabbedPane samples</title>
        <script language="Javascript" src="corelib/services/web/javascript/Core.js"></script>
        <script language="Javascript" src="TabbedPaneSample.js"></script>
        <link rel="stylesheet" type="text/css" href="corelib/services/web/javascript/jwt/Jwt.css" />
        <style>
            body { padding: 0px; margin: 0px; }
            h1 { text-align: center; }
        </style>
    </head>
    
    <body>
        <h1 style="text-align:center">JWT TabbedPane samples</h1>
        <br/>

        <center>
            <div id="center" style="width: 60%; height: 300px"></div>
            <br/><br/>
            <div id="center2" style="width: 60%; height: 300px"></div>
        </center>        


        <div id="oneHtmlPane">
            This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane.
            This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane.
            This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane.
            This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane.
            This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane.
            This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane.
        </div>
    
    </body>
</html>
Fichier "TabbedPaneSample.html"

Maintenant, il nous faut mettre en place le code Javascript. Notez que la génération et l'injection des onglets dans les tags HTML sont réalisées qu'au terme du chargement complet de la page Web (ajout d'un gestionnaire d'événements déclenchant au onload). 

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

importPackage( "corelib/services/web/javascript/jwt/Calendar.js" );
importPackage( "corelib/services/web/javascript/jwt/TabbedPane.js" );
importPackage( "corelib/services/web/javascript/jwt/RssStreamViewer.js" );

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

    // First TabbedPane with PLACEMENT_TOP alignment 
    var tabbedPane = new TabbedPane( TabbedPane.PLACEMENT_TOP );
    tabbedPane.add( new Calendar(), "Calendar" );
    tabbedPane.add( new RssStreamViewer( "./News.xml", 4, 0 ), "RssStreamViewer" );
    tabbedPane.add( document.getElementById( "oneHtmlPane" ), "Simple HTML elements" );
    tabbedPane.injectInDocument( document.getElementById( "center" ) );
    
    addEventHandler( tabbedPane, "onTabChanged", function() {
        document.title = "Tab changed";
    });
    
    // Second TabbedPane with PLACEMENT_BOTTOM alignment 
    tabbedPane2 = new TabbedPane( TabbedPane.PLACEMENT_BOTTOM );
    tabbedPane2.add( new Calendar(), "Calendar" );
    tabbedPane2.add( new RssStreamViewer( "./News.xml", 4, 0 ), "RssStreamViewer" );
    tabbedPane2.injectInDocument( document.getElementById( "center2" ) );

});
Fichier "TabbedPaneSample.js"

Vos onglets peuvent, pour l'heure, être positionnés à deux endroits dans le composant TabbedPane : soit en haut, soit en bas. Dans l'exemple précédent, les deux possibilités sont utilisées. Voici le résultat produit par cet exemple.



This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane. This div is injected in a tab of the TabbedPane.

Utilisation sous forme de composant Ellipse

Bien entendu, les onglets JWT ont été encapsulés dans des tags web Ellipse. Les avantages de cette technique sont multiples : simplification importante de l'utilisation des composants de type TabbedPane, possibilité d'utilisation du moteur de "Data Binding" d'Ellipse (moteur de liaisons aux données côté serveur), ... 

 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 

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

        <center>
            <web:TabbedPane tabPlacement="top" cssStyle="width: 80%; height:400px">
                <web:Tab name="First">
                    <web:Calendar />
                </web:Tab>
                <web:Tab name="Second">
                    <div style="background: white; vertical-align: middle">
                        <h2>This part is a HTML block.</h2>
    
                        <p>
                            A little paragraph, just for test the SplitPane component.
                            A little paragraph, just for test the SplitPane component.
                            A little paragraph, just for test the SplitPane component.
                            A little paragraph, just for test the SplitPane component.
                            A little paragraph, just for test the SplitPane component.
                            A little paragraph, just for test the SplitPane component.
                            A little paragraph, just for test the SplitPane component.
                            A little paragraph, just for test the SplitPane component.
                        </p>
    
                    </div>                                    
                </web:Tab>
                <web:Tab name="Third">
                    <web:Calendar />
                </web:Tab>
            </web:TabbedPane>
        </center>

    </body>
</web:Html>
Fichier "TabbedPaneSamples.wp"

Voici le résultat produit par l'exemple précédent. Trois onglets vous sont proposés : le premier affiche un composant JWT de type <web:Calendar>, le second affiche le contenu du tag <DIV> et enfin, le troisième affiche un autre calendrier.

This part is a HTML block.

A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component. A little paragraph, just for test the SplitPane component.


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.