Ellipse Tutorial

Comment utiliser les barres de menu ?

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

Comme beaucoup de composants Web Ellipse, les éléments permettant de mettre en oeuvre des barres d'outils peuvent être utilisés de deux manières distinctes. Soit, directement via Javascript, sous forme de composants JWT (Javascript Widget Toolkit). Soit via des tags XML(eXtensible Markup Language) , sous forme de composants Ellipse. Dans ce dernier cas, le serveur HTTP(HyperText Transfert Protocol) (tomcat, ou autre) aura la responsabilité de transformer ce tag serveur en code Javascript JWT. Etudions de plus près ces deux possibilités. Nous finirons par voir comment adapter le look de vos barres de menu.

Utilisation sous forme de composants JWT

Bien entendu, avant d'exploiter la librairie JWT , 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. Notez aussi, qu'il peut être utile d'utiliser la feuille de styles CSS fournit par défaut par JWT.

<script language="Javascript" src="corelib/services/web/javascript/Core.js"></script>
<link rel="stylesheet" type="text/css" href="corelib/services/web/javascript/jwt/Jwt.css" />

La mise en oeuvre de barres de menu requière l'utilisation d'un certain nombre de classes JWT. L'extrait de code suivant vous montre les fichiers de code Javascript relatifs à ces "pseudo" classes. Je vous rappele que le concept de classes n'existe pas à proprement parler : référrez-vous au chapitre relatif au modèle objet du lanagage Javascript pour de plus amples informations.

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

La classe MenuBar permet de représenter une barre de menu. Cette barre accepte une stratégie de placement (un layout) ce qui permettra de controler le sens d'affichage de la barre : FlowLayout pour une barre horizontale (c'est la stratégie utilisée par défaut) et VerticalLayout pour obtenir une barre verticale.

Une barre de menu contient des éléments de type Menu. A chaque Menu est associé un bloc d'éléments de menu : c'est la classe PopupMenu qui gère ces blocs. Notez néanmoins que dans le code, vous ne gèrerez pas les PopupMenu. Enfin un bloc sera constitué d'éléments de menu : on introduira ce concept via la classe MenuItem. Les experts Java reconnaitront certainement la source d'inspiration pour le modèle objet. Le code suivant montre comment assembler un menu simple : notez aussi que ce menu vous est présenté ci-dessous.

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 horizontalMenuBar = new MenuBar( new FlowLayout() );
			
    var menu1 = new Menu( "First" );
        menu1.add( new MenuItem( "First entry", "http://..." ) );
        menu1.add( new MenuItem( "Second entry", "http://..." ) );
    horizontalMenuBar.add( menu1 );

    var menu2 = new Menu( "Second" );
        menu2.add( new MenuItem( "Third entry", "http://..." ) );
        menu2.add( new MenuItem( "Last entry", "http://..." ) );
    horizontalMenuBar.add( menu2 );

horizontalMenuBar.injectInDocument( document.getElementById( "forHorizontalMenuBar" ) );

Notez qu'il est aussi possible d'ajouter des séparateurs dans un PopupMenu. Pour ce faire, il vous faudra utiliser la méthode addSeparator. Autre possibilité intéressante : il est possible d'ajouter des icônes à la gauche d'un élément de menu. Pour ce faire, il vous faudra utiliser le constructor de la classe MenuItem. Ce constructeur peut accepter plusieurs paramètres : le premier correspond au libellé de l'élément de menu, le second correspond à l'URL associée à l'élément de menu, le troisième correpond au nom de la fenêtre dans laquelle ouvrir le lien et enfin, le dernier, correpond à l'adresse du fichier d'image utilisé pour l'icône du menu. La taille d'icône de menu préconisée est de 16x16 pixels. Si vous souhaitez utiliser des icônes de taille différentes, il vous faudra certainnement modifier la caractéristique CSS margin-top pour le sélecteur CSS .JwtMenuItemIcon. L'extrait de code ci-dessous vous montre comment utiliser ces deux possibilités (séparateurs + icônes).

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 horizontalMenuBar = new MenuBar( new FlowLayout() );
			
    var menu1 = new Menu( "First" );
        menu1.add( new MenuItem( "First entry", "http://..." ) );
        menu1.add( new MenuItem( "Second entry", "http://..." ) );
    horizontalMenuBar.add( menu1 );

    var menu2 = new Menu( "Second" );
        menu2.add( new MenuItem("Third entry","http://...","_blank","../Images/BlueBall.png") );
        menu2.add( new MenuItem("Last entry","http://...","_blank","../Images/BlueBall.png") );
        menu2.addSeparator();
        menu2.add( new MenuItem("Other entry","http://...","_blank","../Images/Empty.png") );
    horizontalMenuBar.add( menu2 );

horizontalMenuBar.injectInDocument( document.getElementById( "forHorizontalMenuBar" ) );

Utilisation sous forme de composants Ellipse

Bien entendu, le framework Ellipse encapsule les composants JWT relatifs à la mise en oeuvre de barres de menu dans des composants serveurs Ellipse. Cela permettra, notamment, de pouvoir tirer profit du mécanisme de liaison aux données proposé par le framework. L'exemple ci-dessous est équivalent à l'exemple proposé précédemment (notez que le concept de liaison aux données n'est pas proposées dans cet exemple).

<web:MenuBar orientation="horizontal">
    <web:Menu text="First">
        <web:MenuItem text="First entry" url="http://..." />
        <web:MenuItem text="Second entry" url="http://..." />
    </web:Menu>
    <web:Menu text="Second">
        <web:MenuItem text="First entry" url="http://..." icon="../Images/BlueBall.png" />
        <web:MenuItem text="Second entry" url="http://..." icon="../Images/BlueBall.png" />
        <web:MenuSeparator />
        <web:MenuItem text="Second entry" url="http://..." icon="../Images/BlueBall.png" />
    </web:Menu>
</web:MenuBar>

Adaptez le look de vos barres de menu

Pour finir cette fiche technique, sachez qu'il est possible de décorer vos barres d'outils en utilisant un ensemble de classes de styles CSS. Ces classes sont initialement définies dans une feuille de style offerte par JWT/Ellipse, mais il vous est bien-entendu possible de la compléter en utilisant la construction CSS @import. Les classes de styles disponibles sont :

.JwtMenuBar : permet d'associer du style CSS à la barre de menu à proprement parler.
.JwtMenu : cette classe définie le style des différents éléments présents dans la barre de menu.
.JwtSelectedMenu : cette classe définie le style de l'élément de la barre de menu qui est séléctionné par le pointeur de la souris.
.JwtPopupMenu : quand vous activerez un menu, un sous menu s'affichera. Ce sous menu est aussi appelé "popup menu". Vous pouvez donc, via cette classe CSS, décorer un popup menu.
.JwtPopupMenuSeparator : il est possible, dans un popup menu, de séparer les éléments via une barre de horizontale de séparation. Il est possible de décorer cette barre.
.JwtMenuItem : cette classe décore les éléments présents dans un popup menu.
.JwtSelectedMenuItem : de même, cette classe permet de décorer l'élément sélectionné dans un popup menu.
.JwtMenuItemIcon : enfin, cette classe permet de décorer les éventuels icônes présentes à la gauche des éléments de menu. Cela peut notamment être utile pour jouer sur les marges affichées autour des icônes.

Notez que dans l'exemple ci-dessous, on ne décore pas toutes les barres des menu, mais seulement celles qui seraient présentes, directement ou indirectement, dans un tag possédant l'identifiant theDecoratedMenuBar.

<td id="theDecoratedMenuBar">
    <web:MenuBar orientation="horizontal">
        <!-- . . . -->
    </web:MenuBar>
    <style>
        @import "corelib/services/web/javascript/jwt/Jwt.css";
    
        #theDecoratedMenuBar .JwtMenuBar {
            background: #FFC0C0;
            background-image: none;
            color: red;
            border: 1px solid red;
        }

        #theDecoratedMenuBar .JwtPopupMenu {
            background: #FFC0C0;
            background-image: none;
            color: red;
            border: 1px solid red;
        }
		
        #theDecoratedMenuBar .JwtMenu, #theDecoratedMenuBar .JwtSelectedMenu,
        #theDecoratedMenuBar .JwtMenuItem, #theDecoratedMenuBar .JwtSelectedMenuItem {
            color: red;
        }
		
        #theDecoratedMenuBar .JwtSelectedMenuItem, #theDecoratedMenuBar .JwtSelectedMenu {
            background: #FFA0A0;
        }

        #theDecoratedMenuBar .JwtPopupMenuSeparator {
            background: red;
        }
    </style>
</td>

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.