Introduction à MigLayout

#framework#java#outil

I. Introduction

MigLayout est une librairie open source de positionnement d’éléments graphiques. Dans la suite de cet article, nous appellerons ces organisations d’interfaces graphiques des « Layouts ». Créé par Mikael Grev, un ancien pilote de chasse (d’où le préfixe « Mig »), cette librairie permet de réaliser des Layouts complexes pour Swing, SWT et JavaFX 2. Basé sur l’enchaînement de mots clé de type String, cet outil offre une gestion du positionnement d’éléments souple et compréhensible.

II. Installation

MigLayout est compatible avec tous les autres gestionnaires de Layout et est actuellement en version 3.7.4. La librairie s’intègre facilement à tout projet en utilisant les déclarations ci-dessous.

Avec Maven :

1
2
3
4
5
6
7
<!-- https://mvnrepository.com/artifact/com.miglayout/miglayout -->
<!-- https://mvnrepository.com/artifact/com.miglayout/miglayout -->
<dependency>
    <groupId>com.miglayout</groupId>
    <artifactId>miglayout</artifactId>
    <version>3.7.4</version>
</dependency>

Avec Gradle :

1
2
// https://mvnrepository.com/artifact/com.miglayout/miglayout
compile group: 'com.miglayout', name: 'miglayout', version: '3.7.4'

MigLayout utilise l’enchainement de mot clé de type chaîne de caractères pour la définition du positionnement d’un élément graphique, contrairement à SWTLayout qui utilise quant à lui l’objet GridData. Dans le cas d’une migration technique d‘un projet existant, la transformation se traduira par l’exemple suivant :

1
2
3
4
5
6
7
8
GridData layoutData = new GridData(SWT.FILL, SWT.CENTER, true, false, 2, 1);
this.mSWTText = new Text();
this.mSWTText.setLayoutData(layoutData);
 
// Un Champ de saisie dont le composant parent est initialisé avec MigLayout
String layoutData = "wrap";
this.mSWTText = new Text();
this.mSWTText.setLayoutData(layoutData);

A noter que les deux Frameworks sont compatibles et peuvent cohabiter au sein d’un même projet. Lorsqu’un besoin d’économie de place ou de positionnement précis d’éléments graphiques est nécessaire sur un écran, MigLayout offre la souplesse nécessaire permettant d’obtenir un résultat très proche de l’attendu.

III. Concept

MigLayout utilise une grille (lignes et colonnes) avec gestion des espacements pour une disposition précise des composants. La grille est très flexible et peut par exemple être modifiée plus simplement qu’une table HTML. Chaque cellule de la grille peut être divisée pour contenir plus d’un composant, et plusieurs cellules peuvent être fusionnées pour fonctionner comme une seule grande cellule. Les cellules peuvent même être à la fois fractionnées et divisées en même temps, ce qui permet de réaliser pratiquement n’importe quelle disposition imaginable, sans recourir à des contournements techniques.

Il existe trois manières principales de mettre en page des composants avec MigLayout : en grille, en ancrage ou en positionnement absolu. Ils peuvent être combinés librement dans le même conteneur. Le mode grille est celui utilisé par défaut si aucun des autres moyens n’est spécifié. L’ancrage ajoute des composants à l’un des quatre bords du conteneur ou au centre. Le positionnement absolu positionne les composants avec des coordonnées absolues et liées aux extrémités d’autres composants. Lors de l’ajout d’un élément à une cellule, on utilise un chaînage d’arguments définissant le comportement attendu.

La quantité d’arguments, aussi appelés contraintes, existant pour gérer les positionnements d’éléments étant considérable, l’objectif est de faire ici une introduction aux concepts de MigLayout en présentant les principaux aspects. Trois types de contraintes peuvent être définis sur les composants.

Les contraintes de mise en page : ces contraintes spécifient par défaut comment l’instance du gestionnaire de disposition doit fonctionner concernant, entre autres, l’alignement des composants ou la gestion de l’espace restant disponible. Ces contraintes sont définies directement sur l’instance du gestionnaire de disposition, soit dans le constructeur, soit en utilisant une propriété get / set standard. Par exemple « align center, fill ». Il s’agit ici de définir, à l’image d’un document Word, l’aspect général des marges, de l’espacement et de l’alignement.

Les contraintes de ligne / colonne : elles spécifient les propriétés des lignes et des colonnes de la grille. Des contraintes telles que les tailles et les alignements par défaut peuvent être spécifiées. Ces contraintes sont définies directement sur l’instance du gestionnaire de disposition, soit dans le constructeur, soit en utilisant les propriétés get / set standard. Par exemple « [35px]10px[50:pref] » .

Les contraintes de composants : elles sont utilisées pour spécifier les propriétés et les limites des composants individuels. Cela peut par exemple servir à remplacer les tailles verticales et / ou horizontales minimales, préférées ou maximales pour le composant. Il est ainsi possible de définir l’alignement, et de préciser si une cellule doit être divisée et / ou étendue, et bien plus encore. Cette contrainte est normalement définie en tant qu’argument lors de l’ajout du composant au conteneur ou de l’utilisation de propriétés get / set standard. Par exemple « width 100px, left ».

IV. Utilisation

Tout d’abord, il faut créer le composite devant contenir les futurs éléments. Pour simplifier les exemples présentés, seuls des objets de type « label » serons ajoutés au composite parent :

1
2
3
final MigLayout migLayout = new MigLayout();
final Composite pan = new Composite(parent, SWT.NONE);
pan.setLayout(migLayout);  

Ajouter des éléments sans condition
Dans ce premier exemple, nous allons ajouter sans aucune condition des éléments graphiques de type bouton.

1
2
3
4
pan.add(libelle1);
pan.add(libelle2);
pan.add(libelle3);
pan.add(libelle4);

 
wrap : Cette condition permet de revenir à la ligne. Il est possible également de définir un retour automatique à la ligne lors de la déclaration du Layout. Par exemple,
final MigLayout migLayout = new MigLayout(“wrap 3”);
permet de revenir à la ligne tous les trois éléments.

1
2
3
4
pan.add(libelle1);
pan.add(libelle2, “wrap”);
pan.add(libelle3);
pan.add(libelle4);

  
span : Cette condition permet à un élément de prendre plusieurs cases sur la grille de positionnement. Le nombre suivant le mot clé « span » détermine le nombre de case à réunir. Si aucun nombre n’est défini, alors le span occupe toute la ligne.

1
2
3
4
pan.add(libelle1);
pan.add(libelle2, “wrap”);
pan.add(libelle3, “span 2”);
pan.add(libelle4);

  
split : Cette condition permet de réunir plusieurs éléments dans une même case de la grille de positionnement. Le nombre suivant le mot clé « split » détermine le nombre d’éléments à réunir. Les conditions « split » et « span » ne sont pas exclusives et peuvent fonctionner ensemble.

1
2
3
4
5
6
pan.add(libelle1);
pan.add(libelle2, “split 2”);
pan.add(libelle3, “wrap”);
pan.add(libelle4);
pan.add(libelle5);
pan.add(libelle6);

Le résultat de span et split peuvent sembler être les mêmes parfois, pourtant la grille obtenue est différente. Notamment concernant le nombre de case, de ligne et de colonne.

  
docking : Les éléments de type « docking » sont toujours positionnés autour du layout courant, en prenant tout l’espace disponible. L’ordre de ce type d’éléments est important puisqu’il détermine quel côté est prioritaire sur l’autre. Autrement dit, le premier élément « docking » positionné sera toujours placé au-dessus des autres.

1
2
3
4
5
6
7
8
pan.add(zone1);
pan.add(zone2);
pan.add(zone3, “wrap”);
pan.add(zone4);
pan.add(dockNord, “dock north”);
pan.add(dockWest, “dock west”);
pan.add(dockSouth, “dock south”);
pan.add(docEast, “dock east”);

1
2
3
4
5
6
7
8
pan.add(zone1);
pan.add(zone2);
pan.add(zone3, “wrap”);
pan.add(zone4);
pan.add(dockWest, “dock west”);
pan.add(dockNord, “dock north”);
pan.add(docEast, “dock east”);
pan.add(dockSouth, “dock south”);

V. Conclusion

Cet article présente uniquement le principe général du fonctionnement de MigLayout dont les possibilités sont bien plus étendues. De nombreux mot clés permettent, à la manière des fichiers .css, de gérer très finement le positionnement et le rendu graphique des éléments d’une page. Malgré une prise en main quelque peu fastidieuse, le gain en souplesse et flexibilité est réel. Peu intuitif à l’apprentissage, il le devient pourtant rapidement à l’utilisation, en apportant une réponse complète aux besoins des interfaces graphiques.

VI. Liens utiles

http://www.miglayout.com/
http://www.miglayout.com/QuickStart.pdf