Ellipse Tutorial

Comment utiliser le composant <web:ProgressBar> ?


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
   Adaptez le look de vos barres de progression

Le framework Ellipse fournit des composants de type "barre de progression". Bien entendu, ces barres de progressions peuvent être utilisées de deux manières : soit sous forme de composant JWT(Javascript Widget Toolkit) , via le langage Javascript, soit sous forme de composant Ellipse, via le tag <web:ProgressBar />. Notez aussi qu'il est possible de décorer à votre convenance vos barres de progression. Reprenons chacun de ces points un à un.

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 une barre de progression 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/ProgressBar.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/ProgressBar.js" );
Importation de la classe Javascript de barre de progression

Ensuite, il faut définir la structure de la page HTML qui va héberger la (ou les) barre de progression. Afin de contrôler le positionnement de votre barre, il vous est conseiller de placer un tag HTML à cet effet dans la page. Ce tag devra être identifié via un attribut id. Dans l'absolu, ce tag peut être de n'importe quelle nature : <td>, <span>, <div> ou autre. La barre de progression qui sera injectée dans le tag, cherchera à y occuper 100% de l'espace disponible. L'exemple suivant défini deux zones qui recevront des barres de progressions : notez les deux identifiants utilisés (ils serviront dans la partie Javascript). 

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

<html>
    <head>
        <title>ProgressBar Samples</title>
        
        <script language="Javascript" src="corelib/services/web/javascript/Core.js">
        </script>
        
        <script language="Javascript" src="ProgressBarSamples.js">
        </script>
        
        <link rel="stylesheet" type="text/css" 
              href="corelib/services/web/javascript/jwt/Jwt.css" />
        
    </head>
    <body>
    
        <h1>ProgressBar Samples</h1> <br />
    
        <div id="forProgressBar1"></div> <br />

        <div id="forProgressBar2"></div> <br />

    </body>
</html>
Fichier "ProgressBarSamples.html"

Une fois la structure HTML en place, il faut ensuite mettre en oeuvre le code Javascript. Ce code doit produire une instance de ProgressBar, initialiser cette instance, puis l'injecter dans la structure HTML. Le constructeur accepte un paramètre : la valeur initiale de la barre de progression. Par défaut, la valeur minimale, ainsi que la valeur initiale, sont a zéro. De même la valeur maximale est de 100. Vous pouvez changer la valeur minimale via la méthode setMinimalValue et la valeur maximale via la méthode setMaximalValue. Pour faire évoluer la barre, le plus simple est d'utiliser un timeout. Pour injecter l'instance, utiliser la méthode injectInDocument. 

 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 

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


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

    function updateProgressBar( progressBar ) {
        var value = progressBar.getValue() + 1;
        if ( value == progressBar.getMaximumValue() ) {
            value = 0;
            //window.clearInterval( progressBar.clockId );
        } 
        progressBar.setValue( value );
    }
    
    var progressBar1 = new ProgressBar();
    progressBar1.injectInDocument( document.getElementById( "forProgressBar1" ) );
    
    var progressBar2 = new ProgressBar();
    progressBar2.setMaximumValue( 500 );
    progressBar2.injectInDocument( document.getElementById( "forProgressBar2" ) );
    
    progressBar1.clockId = window.setInterval( "updateProgressBar( progressBar1 );", 10 );
    progressBar2.clockId = window.setInterval( "updateProgressBar( progressBar2 );", 10 );

});
Fichier "ProgressBarSamples.js"



Utilisation sous forme de composant Ellipse

Le framework Ellipse défini le composant web <web:ProgressBar>amp;. Chaque utilisation de ce tag sera, bien entendu, substitué par un bloc Javascript injectant un composant JWT de barre de progression. L'exemple suivant vous montre comment utiliser ce composant. 

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

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.webapplications.WebPage">
    <head>
    
        <title>ProgressBar Samples</title>        
        <link rel="stylesheet" type="text/css" 
              href="corelib/services/web/javascript/jwt/Jwt.css" />
        
    </head>
    <body>
    
        <h1>ProgressBar Samples</h1> <br />
    
        <web:ProgressBar id="progressBar" text="ProgressBar as Ellipse Component"
                         minimumValue="0" maximumValue="100" value="75"/>

    </body>
</web:Html>
Fichier "ProgressBarSamples.html"

La progression d'une telle barre peut être réaliser de deux manières différentes. Soit en soumettant la page au serveur Web qui pourra alors faire évoluer la valeur de la barre de progression : dans ce cas, le réaffichage de la page pourra être observé (ce qui ne sera pas du plus bel effet. Soit par code Javascript en modifiant la valeur de progression directement sur le poste client. Voici un petit exemple. 

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

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


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

    function updateProgressBar( progressBar ) {
        var value = progressBar.getValue() + 1;
        if ( value == progressBar.getMaximumValue() ) {
            value = 0;
            //window.clearInterval( progressBar.clockId );
        } 
        progressBar.setValue( value );
    }
    
    var progressBar = document.getElementById( "progressBar" ).jwtComponent;
    progressBar.clockId = window.setInterval( "updateProgressBar( progressBar );", 100 );

});
Fichier "ProgressBarSamples.js"

Adaptez le look de vos barres de progression

Bien entendu, pour mettre à jour le look de vos barres de progression, il va vous falloir utiliser CSS(Cascading Style Sheet) . La liste suivante vous donne les principaux sélecteurs a utiliser pour contrôller le look. Pour de plus amples informations sur la notion de sélecteurs CSS, je vous renvoie vers le tutorial Infini sur le langage CSS.

Il vous est possible de décorer une barre en particulier (et pas les autres) en l'injectant dans un <div> nommé. Si, par exemple, votre <div> porte un attribut id avec comme valeur myProgress alors le sélécteur #myProgress .JwtProgressBarCaption permettra de changer les caractéristiques visuelles du message de la barre de progression.


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.