The Ellipse Tutorial

Use of the layout


WARNING: This tutorial is being written! Do not hesitate to report any errors or suggestions.

Quick access:
   The different layout
   Example of use of the layout

As you already noticed, the object model of the JWT library (JavaScript Widget Toolkit) draws heavily on the Java Swing library. This is the same for the positioning logic of the components within the JWT containers: layouts can be injected in a container to control the positioning of its components. Like Java, several layout classes are offered: they derive all of the class corelib.services.web.javascript.jwt.LayoutManager.

The different layout manager

In the present state of things, three layout are proposed to you: the strategy FlowLayout, the strategy VerticalLayout and the strategy BorderLayout. Consider one to one of these different layout.

Example of use of the layout manager

To better understand the concept of layout, i propose you to study a small example which allows to change the layout used by a container. To select the strategy to apply, we will use a JWT menu bar. First, here is the code of the webpage: it especially defines a tag div that will be used to place the JWT container necessary for our Demonstration. 

 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"

Then we must generate our container and the components that constitute it. Note that this example uses several types of JWT components and even shows you how to define a new class of buttons. During the injection of the components into the container, through the method add, a second parameter is used: it is the positioning imposition. In this example, the impositions are used only with the layout of 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"

Finally, we must manage the change of layout: to do so, we will define a menu bar with the three strategies proposed earlier. The click on any items of the menu will change the strategy used. Here is the final Javscript code to deliver. You will find immediately below the extract of code and the result produced by this 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"




CAUTION : Ellipse Framework is proposed to you in BETA version to allow evaluation of this framework. Infini Software is released from any responsibility for the use of Ellipse Framework. In addition, Infini Software can in no way be liable for the use of information contained in these tutorials.

Dominique LIARD - © 2007..2010 SARL Infini Software - All rights reserved
Other brands and product names in these documents are the property of their respective owners.