Ellipse Tutorial

Utilisation des stratégies de placement (Layout)


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

Accès rapide :
   Les différentes stratégies de placement
   Exemple d'utilisation de stratégies de placement

Comme vous l'avez déjà remarqué, le modèle objet de la librairie JWT (Javascript Widget Toolkit) s'inspire fortement de la librairie Java Swing. Il en va de même pour la logique de positionnement des composants dans les conteneurs JWT : des layouts (stratégies de placement) peuvent être injectés dans un conteneur pour contrôler le positionnement de ses composants. De même que Java, plusieurs classes de layout vous sont proposées : elles dérivent toutes de la classe corelib.services.web.javascript.jwt.LayoutManager.

Les différentes stratégies de placement

Dans l'état actuel des choses, trois stratégies de placement vous sont proposées : la stratégie FlowLayout, la stratégie VerticalLayout et la stratégie BorderLayout. Reprenons une à une ces différentes stratégies de placement.

Exemple d'utilisation de stratégies de placement

Afin de mieux comprendre la notion de layouts (de stratégies de placement), je vous propose d'étudier un petit exemple permettant, à chaud, de changer la stratégie de placement utilisée par un conteneur. Pour sélectionner la stratégie à appliquer, nous utiliserons une barre de menu JWT. Voici d'abord le code de la WebPage : celui-ci définit notamment un tag div qui servira à placer le conteneur JWT nécessaire à notre démonstration. 

 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>Layout Manager Sample</title>
        
        <script language="Javascript" src="corelib/services/web/javascript/Core.js">
        </script>
        
        <script language="Javascript" src="LayoutManagers.js">
        </script>
        
        <link rel="stylesheet" type="text/css" 
              href="corelib/services/web/javascript/jwt/Jwt.css" />
        
    </head>
    <body>
    
        <h1>Layout Manager Sample</h1> <br />
    
        <center>
            <div id="forMenuBar"></div>
            <div id="forPanel"></div>
        </center>

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

Ensuite il nous faut générer notre conteneur et les composants qui le constituent. Notez que cet exemple utilise plusieurs type de composants JWT et vous montre même comment définir une nouvelle classe de boutons. Lors de l'injection des composants dans le conteneur, via la méthode add, un second paramètre est utilisé : il s'agit de la contrainte de positionnement. Dans cet exemple, les contraintes ne sont utilisées qu'avec la stratégie de placement de type BorderLayout. 

 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 

importPackage( "corelib/services/web/javascript/jwt/FlowLayout.js" );
importPackage( "corelib/services/web/javascript/jwt/VerticalLayout.js" );
importPackage( "corelib/services/web/javascript/jwt/BorderLayout.js" );

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


var MyButton = Component.extendClass( {
    initialize : function( text ) {
        this._htmlTagName = "input";
        Component.prototype.initialize.call( this );
        this.htmlTag.value = text;
        this.htmlTag.type = "button";
    }
} );

var panel = null;

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

    panel = new Panel( new BorderLayout() );
                                              // \/ Only for BorderLayout
    panel.add( new DatePicker(),              BorderLayout.NORTH );
    panel.add( new MyButton( "Push me !" ),   BorderLayout.WEST );
    panel.add( new MyButton( "Pince me !" ),  BorderLayout.CENTER );
    panel.add( new MyButton( "Bidule me !" ), BorderLayout.EAST );
    panel.add( new ProgressBar( 75 ),         BorderLayout.SOUTH );
    
    panel.setCssStyle( "width:500px; height: 120px;" );
    panel.injectInDocument( document.getElementById( "forPanel" ) );

} );
Fichier "LayoutManagers.js"

Enfin, il faut gérer le changement de stratégie de positionnement : pour ce faire, nous allons définir une barre de menu avec les trois stratégies proposées précédemment. Le clic sur un des éléments du menu changera la stratégie utilisée. Voici le code Javscript final à fournir. Vous trouverez, immédiatement en dessous de l'extrait de code, le résultat produit par ce code. 

 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 
 52 
 53 
 54 
 55 
 56 
 57 
 58 
 59 

importPackage( "corelib/services/web/javascript/jwt/FlowLayout.js" );
importPackage( "corelib/services/web/javascript/jwt/VerticalLayout.js" );
importPackage( "corelib/services/web/javascript/jwt/BorderLayout.js" );

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

importPackage( "corelib/services/web/javascript/jwt/MenuBar.js" );
importPackage( "corelib/services/web/javascript/jwt/Menu.js" );
importPackage( "corelib/services/web/javascript/jwt/MenuItem.js" );


var MyButton = Component.extendClass( {
    initialize : function( text ) {
        this._htmlTagName = "input";
        Component.prototype.initialize.call( this );
        this.htmlTag.value = text;
        this.htmlTag.type = "button";
    }
} );

var menuBar = null, panel = null;

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

    panel = new Panel( new BorderLayout() );
                                              // \/ Only for BorderLayout
    panel.add( new DatePicker(),              BorderLayout.NORTH );
    panel.add( new MyButton( "Push me !" ),   BorderLayout.WEST );
    panel.add( new MyButton( "Pince me !" ),  BorderLayout.CENTER );
    panel.add( new MyButton( "Bidule me !" ), BorderLayout.EAST );
    panel.add( new DatePicker( 75 ),         BorderLayout.SOUTH );
    
    panel.setCssStyle( "width:500px; height: 120px;" );
    panel.injectInDocument( document.getElementById( "forPanel" ) );


    menuBar = new MenuBar();
        var layoutMenu = new Menu( "Layout Managers" );
        
            var flowLayoutMenuItem = new MenuItem( "FlowLayout", 
                "javascript: panel.setLayout( new FlowLayout( FlowLayout.CENTER ) );" );
            layoutMenu.add( flowLayoutMenuItem );

            var verticalLayoutMenuItem = new MenuItem( "VerticalLayout",
                "javascript: panel.setLayout( new VerticalLayout() );" );
            layoutMenu.add( verticalLayoutMenuItem );

            var borderLayoutMenuItem = new MenuItem( "BorderLayout",
                "javascript: panel.setLayout( new BorderLayout() );" );
            layoutMenu.add( borderLayoutMenuItem );

        
        menuBar.add( layoutMenu );

    menuBar.setCssStyle( "width:500px; height: 24px;" );
    menuBar.injectInDocument( document.getElementById( "forMenuBar" ) );

} );
Fichier "LayoutManagers.js"




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.