Voilà depuis le temps que l’on attendait un bon plugin WYSIWYG (What You See Is What You Get) sous Eclipse, WindowBuilder Pro fait son apparition.

WindowBuilder Pro, ancien produit de l’entreprise Instantiations (Spécialisée dans la technologie Smalltalk) , devient open source suite au rachat de cette société par Google. Intégré comme plugin java pour Eclipse, il permet de concevoir des interfaces graphiques très simplement via des composants drag’n’droppable (glissé déposé).

On peut utiliser plusieurs bibliothèques de composant JAVA comme AWT, SWT, GWT et SWING. Pour ma part je me suis surtout intéressé à l’utilisation des composants SWING dans ce plugin.

L’avantage de ce plugin outre sa simplicité de prise en main, c’est la qualité du code java généré. Que nous verrons plus tard.

Comme vous pouvez le voir ci-contre, le plugin jouit d’une vu « Design » qui donne accès aux composants que l’on souhaite utiliser dans notre interface (ici SWING).

On retrouve donc tout naturellement les JPanel, JLabel, JTextField, les layouts et bien entendu le fameux GridBagLayout qui a fait s’arracher les cheveux à plus d’un! ;-)

Autre plus intéressant, la gestion des évènements, il est désormais possible au travers de quelques clics (deux! :-) ) de générer les méthodes liées aux évènements.

Nous rentrerons dans les détails, de tout cela par la suite.

Pour l’instant il est bon de savoir que ce plugin est disponible pour les versions Eclipse Ganymède (3.4) à Indigo (3.7) et comment l’installer !

Installation de WindowBuilder Pro

Ici aussi, on reste dans la simplicité puisqu’il s’agit d’un plugin et que comme tout bon plugin d’Eclipse quelques clics suffisent pour faire fonctionner la bête!

Donc comme d’habitude Help >Install New Software … . Une petite recherche sur –All Available Sites– avec un filtre contenant « WindowBuilder » et le tour y est!

Ensuite vous sélectionnez les composants du plugin ci-contre, puis un appui sur Next et Eclipse se chargera de récupérer les librairies nécessaires au bon fonctionnement de WindowBuilder Pro.

Après un bon petit restart de votre Eclipse vous allez enfin pouvoir utiliser le plugin dans vos projets.

A savoir qu’il n’est pas nécessaire de recréer un projet spécifique à WindowBuilder Pro pour utiliser ces fonctionnalités.

 

 

 

Petit focus sur un JLabel & le GridBagLayout vue par WindowBuilder  Pro

On va partir d’un petit interface pour présenter succinctement les fonctionnalités de ce plugin.

 

Procédons par étape, sous la perspective du plugin il y a 4 vues, nous nous intéresserons seulement à trois ici (la dernière listant les différents composants disponibles)

La vue n°1 : Il s’agit de la vue principal, le rendu de votre interface utilisateur final. C’est dans cette vue que vous allez pouvoir faire du drag’n’drop de vos composants.

Pour la suite nous nous intéresserons au JLabel lblPhoto qui possède une instance d’ImageIcon .

La vue n°2 : Lorsque vous sélectionnez un composant dans la vue n°1 il est sélectionné dans l’arborescence de votre JFrame. Cette vue permet de voir la hiérarchie entre vos composants. Vous pouvez comme sur la vue n°1 faire des drag’n’drop des composants afin de les placer dans vos JFrame, JPanel ou encore JWindow.

La vue n°3 : Toujours après avoir sélectionné un composant (ici le composant JLabel lblPhoto), des informations modifiables le concernant s’affichent dans cette vue. Comme vous pouvez le voir ci-dessus, vous avez accès aux principaux paramètres du composant tel que son Object Identifier, sa contrainte (ici GridBagContraints), la valeur de son label etc… Bien sur en « switchant » dans la vue code du plugin vous pouvez valoriser d’autres paramètres à votre guise.

Justement parlons en de cette vue code! Puisque jusqu’à présent nous avons que déposé des composants graphiquement, intéressons nous maintenant au code généré par ce plugin :

//Vue du code généré par WindowBuilder Pro
lblPhoto = new JLabel("");
lblPhoto.setIcon(new ImageIcon(WMain.class.getResource("/irc/ui/images/users/nopic.png")));
GridBagConstraints gbc_lblPhoto = new GridBagConstraints();
gbc_lblPhoto.gridwidth = 2;
gbc_lblPhoto.gridheight = 3;
gbc_lblPhoto.insets = new Insets(0, 0, 5, 5);
gbc_lblPhoto.gridx = 4;
gbc_lblPhoto.gridy = 5;
frmOxianeIrc.getContentPane().add(lblPhoto, gbc_lblPhoto);

Comme vous pouvez voir le plugin à généré l’instance du JLabel, lui a attaché une instance de la classe ImageIcon.
Ensuite comme nous utilisons dans cette JFrame le GridBagLayout, il a mis en place des contraintes correspondantes au placement souhaité.

Justement parlons en de ce GridBagLayout, au niveau de l’indice n°4 de l’image précédente on peut voir dans les marges des lignes et des colonnes numérotés. Il s’agit du quadrillage du fameux layout, bien entendu ce quadrillage à été généré que par la « magie » du plugin et donc aucune ligne de code java n’a été taper par mes soins. Toujours grâce a la souris on peut paramétrer au travers de quelques clics la largueur des colonnes, déplacer les composants sur la grille du layout, faire des fusions entre les colonnes ou les lignes etc… Exit la problématique de placer « à l’aveugle » ces composants dans ce fameux layout, merci le WYSIWYG ;-)

Et voici le code toujours généré par le plugin :

//Vue du code généré par WindowBuilder Pro
frmOxianeIrc = new JFrame();
...
GridBagLayout gridBagLayout = new GridBagLayout();
gridBagLayout.columnWidths = new int[]{87, 111, 35, 53, 39, 52, 56, 0};
gridBagLayout.rowHeights = new int[]{0, 0, 0, 23, 0, 0, 0, 0, 0, 31, 0};
gridBagLayout.columnWeights = new double[]{0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, Double.MIN_VALUE};
gridBagLayout.rowWeights = new double[]{0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, Double.MIN_VALUE};
frmOxianeIrc.getContentPane().setLayout(gridBagLayout);

Donc comme vous pouvez voir le plugin à généré le quadrillage avec le nombre de lignes et de colonnes, ainsi que leurs largeurs et hauteurs.
Ici on peut quand même commencer à voir les limites de la génération automatique de code, puisque celui pourrait être optimisé.

Et si on générait nos actions ?!

Voilà on est content, on a dessiné notre bel interface graphique, avec nos boutons, nos labels et nos entrées textuelles! Mais n’oublions pas le principal, il faut que lorsque je clique sur tous cela, il se produise quelque chose!! ;-)

Donc justement le plugin va plus loin est propose de générer les actions sur nos composants afin que nous ayons plus qu’à mettre en place l’appel de notre code métier.

 

Pour afficher le menu de génération des événements d’écoute (Event Handler), un simple clic droit sur le composant vous permet de faire apparaitre la possibilité d’ajouter une action.

Comme vous pouvez le voir ci-contre , le choix du type d’écouteur d’événement est complet et permet donc de répondre à tous les cas courants.

Une fois qu’on a choisit le type d’événement que l’on souhaite gérer sur notre composant, le plugin génère le code et il nous reste plus qu’à implémenter l’appel vers le processus métier désiré.

 

 

 

 

 

 

Voici le code java généré :

//Le code généré par le plugin WindowBuilder Pro
JButton btnJoin = new JButton("Join");
btnJoin.addMouseListener(new MouseAdapter() {
@Override
public void mouseClicked(MouseEvent event) {
//Appel vers le processus métier
});

GridBagConstraints gbc_btnJoin = new GridBagConstraints();
gbc_btnJoin.insets = new Insets(0, 0, 0, 5);
gbc_btnJoin.gridx = 3;
gbc_btnJoin.gridy = 9;
frmOxianeIrc.getContentPane().add(btnJoin, gbc_btnJoin);

On retrouve donc bien l’ajout sur le bouton d’un listener de type MouseAdapter. Ici on créer donc une instance de cet adapter et on vient redéfinir sa méthode mouseClicked(…) avec le code métier qui nous intéresse!! Il y a toujours possibilité d’encapsuler cette méthode dans une action que l’on aurait créer toujours via les fonctionnalités du plugin afin d’avoir un composant réutilisable !!

Conclusion

Bien sur, le but ici n’est pas de présenter toutes les fonctionnalités présentes dans cet outil, mais de vous donnez envie de le tester et pourquoi pas l’utiliser dans vos projets actuels ou futurs!

D’autant que les fonctionnalités sont nombreuses, comme la possibilité de choisir les différents types de rendu, la gestion de l’internationalisation, la possibilité d’intégrer ces propres composants ou encore l’encapsulation de vue complète.

Pour finir, il faut voir cet outil comme un plus dans vos projet, puisqu’il vous permettra de vous faire gagner du temps dans la génération de vos interfaces utilisateur pour ainsi vous concentrer sur les problématiques métiers.

Sur ces mots je vous souhaites à tous de bonnes fêtes!!!! :-D