Ce document a pour but de vous aider à prendre en
main un des meilleurs IDE Java: JBuilder 3.5. Vous devez lire la suite si
les IDE (environnements de développement intégrés) ne
vous sont pas familiers, ou si vous débutez avec JBuilder.
Nous allons vous présenter l'interface graphique, et créerun petit programme pour vous montrer comment se servir d'une des fonctionsles plus abouties: la création automatisée d'interfaces utilisateur.
NOTE: ce document contient 11 images, il peut être assez long à charger.
ENVIRONNEMENT JBuilder "au repos"
1 - Il s'agit de la zone où est présenté, en temps normal, le code source du fichier ouvert. On peut profiter de divers fonctions concernant cette vue telles que la colorisation automatique du code, l'auto-indentation, une ligne verticale qui définit la zone imprimable, etc...
Chaque fichier ouvert vient créer un nouvel onglet et s'affiche dans cette zone. Il n'y a ici qu'un seul fichier ouvert: MainFrame.java
2 - Il s'agit d'une zone (une JList) où sont affichés les fichiers du projet en cours. On peut voir ici 4 types de fichiers: le fichier central qui "regroupe" tous les fichiers du projet (c'est le fichier "projet") à l'extension .jpr, les fichiers Java source .java, les images .jpg et un fichier JavaDoc .html. Pour ouvrir un de ces fichiers, il suffit de cliquer dessus.
3 - Cette zone concerne le fichier ouvert. Elle affiche ici les imports, les variables, méthodes, et constructeurs de la classe en cours, car on est en mode "source" (voir 5). Si l'on était en mode "conception", dans cette zone serait affichées des informations relatives à la conception d'une GUI.
4 - Cette zone se retrouve dans pratiquement tous les logiciels: une barre de menus, une barre d'icônes. Vous utiliserez le plus souvent l'icône qui représente une flèche verte, en dessous du menu "Outils" et qui permet de compiler et de lancer un programme. Il faut aussi préciser que le menu Aide sera utile car il donne accès à la documentation du JDK de Sun ainsi qu'à la documentation des API et des outils Borland.
5 - Vous pouvez toujours accéder à l'onglet "Source" qui montre, comme ici, le code source de la classe en cours. Si cette classe permet une conception graphique (si elle étend de JFrame, JWindow, JInternalFrame, etc...), vous pourrez cliquer sur l'onglet "Conception" et lancer le concepteur graphique de JBuilder. L'onglet "Bean" permet de créer des Java Beans (composants réutilisables) et l'onglet "Doc" permet de créer des JavaDoc.
JBuilder en action!
Nous allons créer un petit programma avec une interface graphique à l'aide des assistants deJBuilder. Nous allons vous guider dans les étapes. Connençons:
1- Lancez JBuilder
2- Cliquez sur le menu FICHIER -> NOUVEAU PROJET
la fenêtre suivante s'ouvre:
Saisissez dans la zone "Fichier Projet" le chemin et le nom du fichier projet portant l'extension .jpr. Une fois fait, cliquez sur TERMINER.
2- Nous avons créé un projet, nous devons maintenant ajouter des classes. Nous avons choisi de créer une application graphique(JBuilder permet en outre de créer avec des assistants de servlets,des applets, des EJB, etc...). Cliquez sur le menu FICHIER -> NOUVEAUou faites CRTL+N.
La fenêtre souvante s'ouvre:
Cliquez sur "Application" puis sur le bouton "OK" pour lancer l'assistant de création d'applications.
Une seconde fenêtre s'ouvre:
Le "Paquet" est plus connu sous le nom anglais de "package". En fait, quand dans vo programmes vous écrivez des instruction d'importation du style "import java.io.*;", vous importez toutes les classes de ce paquet. De même si vous voulez lancer votre programme cela devra se faire, dans notre cas, par l'instruction "java sans_titre1.Application1". La "classe" étant la classe principale du programme, celle contenant la méthode main(), celle qu'il faut invoquer pour lancer le programme. Dans la plupart des cas, vous n'aurez pas à modifier le code de cette classe.
Cliquez sur "Suivant >".
Vous accédez à cette fenêtre:
La classe à laquelle l'on fait ici référence est laclasse qui définira le cadre principal de l'interface utilisateur.Elle étend de JFrame. Elle sera automatiquement lancée au démarrageduprogramme (le code pour ça est écrit automatiquement).
Par défaut les 3 cases que vous voyez cochées ici ne le sont pas, cochez-les pour ce tutoriel.
Cliquez sur "TERMINER".
Vous aboutissez à un écran similaire à celui de la première capture d'écran. Le fichier ouvert est "Cadre1.java".
3 - Nous allons créer l'interface. Cliquez sur l'onglet "Conception". Le concepteur met quelques secondes à se lancer, puis une fenêtre comme ceci apparaît:
1 - Cette zone est une simulation de ce à quoi ressemblera votre fenêtre. Vous y ajouterez des composants gaphiques (2) par Drag&Drop. Vous pourrez déplacer, redimentionner, etc ces composants directement an cliquant dessus.
ASTUCE: on y pense rarement, mais le bouton droit de la souris est très utile... essayez vous verrez comme les options proposées dans le menu qui surgit sont utiles !
2 - Vous pouvez cliquer sur un des composants de ce panneau, le curseur se transformera en une croix. Cliquez avec cette croix dans la zone (1 )pour déposer le composant. Les composants sont répertoriés dans différents onglets, vous trouverez dans Swing les principauxcomposants graphiques de Swing, dans Conteneurs Swing des JTabbedPane, JSplitPaneetd'autres gestionnaires de mise en page. DbSwing regroupe des composantsBorland(très utiles pour les bases de données notamment).
3 - Ici sont affichées les propriétés du composant graphique sélectionné. La fenêtre elle même étant sélectionnée, on voit ici ses propriétés. Si on clique sur l'onglet "Evenements", on a accès à tous les gestionnaires d'évèmements accessibles pour le composant sélectionné.
4 - Comme expliqué auparavant, les composants de l'interface -leur nom- sont affichés ici. On voit que "this" est sélectionné, c-à-d le fenêtre elle-même. Cette vue est très pratique pour savoir d'un coup d'oeil quels est le gestionnaire de mise en page d'un conteneur, quels composants il contient, etc...
4 - Cliquez sur l'onglet Conteneurs Swing, et sélectionnezle composant javax.swing.JPanel (le premier que nous désignerons sous le nom de JPanel), déposez-le au centre de this(le cadre gris de la capture d'écran ci-dessus).
Normalement le composant doit s'afficher (cela se matérialise parle fait que la fenêtre devient légèrement plus claire).Une entrée jPanel1 est ajoutée à la zone (4).Cliquez sur cette entrée. Les propriétés de la zone(3) changent. Cliquez sur la propriété layout de manièreà faire apparaître une menu déroulant regroupant lesgestionnaires de mise en page disponibles. Sélectionnez BorderLayout. Revenez à l'onglet Swing de la zone (2), cliquez ur le composant JButton et déposez-le vers le bas du jPanel1. Le boutton s'affiche automatiquement, remplissant la partie inférieure de lafenêtre. Recommensez la même opération en déposantun composant JTextAreaau milieu de la fenêtre.
5 - Nous avous créé l'interface, nous allons peaufiner tout àa pour faciliter l'écriture du code. Dans le concepteur, sélectionnez le bouton en cliquant (1 seule fois !) dessus. Dans ses propiétés, changez:
name: inscrivez "button"
text: effacez ce qui est écrit et ne mettez: "Cliquez ici !".
Faites de même avec la zone de texte:
name: inscrivez "textArea"
text: effacez ce qui est inscrit
lineWrap: mettez la propriété à TRUE
Ce que vous obtenez devrait ressembler à ceci:
6 - Nous avons terminé la partie conception et nous pouvons passer à l'étape écriture du code.
Nous allons assigner des gestionnaires d'évènement (en fait un seul au composant "button").
Pour assigner un gestionnaire d'évènement à un composant, il y a une seule méthode, par l'onglet "Evénements" de la zone (3) du concepteur. Cependant, pour le composant JButton, il existe une autre méthode (qui ne permet que d'assigner un gestionnaire OnClick d'ailleurs), c'est de double-cliquer tout simplement sur le bouton.
Nous allons essayer ici le 1° méthode dans le mesure où elle sera utilisée dans le majorité des cas.
Cliquez donc sur l'onglet "Evénements", voici à quoi il ressemble:
Avant d'avoir cliqué et ...
... après avoit cliqué
Vous avez remarqué que JBuilder a automatiquement ajouté une menu FICHIER -> QUITTER et un menu AIDE -> A PROPOS. Ces 2 menus sont fonctionnels, le code a été généré automatiquement. Cela est dû au fait que nous avions coché les cases "Créer une barre de menus" et "Créer une boîte de dialogue A Propos" à l'étape de définition de notre projet.
Je ne saurais trop vous conseiller de vous entrainer un peu à mdifier l'interface, en examinant par exemple le gestionnaire d'évènements du menu, en modifiant la conception graphique de la classe qui représente la boîte A Propos (Cadre1_AboutBox.java par défaut).
Voilà, c'est terminé :)
Comme morale à ce tutoriel (oui, oui, ce tutoriel est une vraie fable :) retenez que ce n'est pas parce qu'on utilise JBuilder ou un IDE que l'on doit se contenter de lui laisser tout faire. Personellement, je ne l'utilise pas beaucoup pour ses codes pré-écrits, et beaucoups de programmeurs à mon instar n'aiment pas trop ça, ils utilisent des IDE pour la conception graphique qui se révèle plus simple et plus rapide. et pour les gros projets, un Emacs n'est pas mal non plus...
Tutoriel distribué pour le FAQ Java de Java-France www.java-france.com / www.jgflsoft.com
Pour toute information sur cet article, écrire à [email protected]
Ecrit à Montpellier le 15 mars 2001
Nous allons vous présenter l'interface graphique, et créerun petit programme pour vous montrer comment se servir d'une des fonctionsles plus abouties: la création automatisée d'interfaces utilisateur.
NOTE: ce document contient 11 images, il peut être assez long à charger.
ENVIRONNEMENT JBuilder "au repos"
1 - Il s'agit de la zone où est présenté, en temps normal, le code source du fichier ouvert. On peut profiter de divers fonctions concernant cette vue telles que la colorisation automatique du code, l'auto-indentation, une ligne verticale qui définit la zone imprimable, etc...
Chaque fichier ouvert vient créer un nouvel onglet et s'affiche dans cette zone. Il n'y a ici qu'un seul fichier ouvert: MainFrame.java
2 - Il s'agit d'une zone (une JList) où sont affichés les fichiers du projet en cours. On peut voir ici 4 types de fichiers: le fichier central qui "regroupe" tous les fichiers du projet (c'est le fichier "projet") à l'extension .jpr, les fichiers Java source .java, les images .jpg et un fichier JavaDoc .html. Pour ouvrir un de ces fichiers, il suffit de cliquer dessus.
3 - Cette zone concerne le fichier ouvert. Elle affiche ici les imports, les variables, méthodes, et constructeurs de la classe en cours, car on est en mode "source" (voir 5). Si l'on était en mode "conception", dans cette zone serait affichées des informations relatives à la conception d'une GUI.
4 - Cette zone se retrouve dans pratiquement tous les logiciels: une barre de menus, une barre d'icônes. Vous utiliserez le plus souvent l'icône qui représente une flèche verte, en dessous du menu "Outils" et qui permet de compiler et de lancer un programme. Il faut aussi préciser que le menu Aide sera utile car il donne accès à la documentation du JDK de Sun ainsi qu'à la documentation des API et des outils Borland.
5 - Vous pouvez toujours accéder à l'onglet "Source" qui montre, comme ici, le code source de la classe en cours. Si cette classe permet une conception graphique (si elle étend de JFrame, JWindow, JInternalFrame, etc...), vous pourrez cliquer sur l'onglet "Conception" et lancer le concepteur graphique de JBuilder. L'onglet "Bean" permet de créer des Java Beans (composants réutilisables) et l'onglet "Doc" permet de créer des JavaDoc.
JBuilder en action!
Nous allons créer un petit programma avec une interface graphique à l'aide des assistants deJBuilder. Nous allons vous guider dans les étapes. Connençons:
1- Lancez JBuilder
2- Cliquez sur le menu FICHIER -> NOUVEAU PROJET
la fenêtre suivante s'ouvre:
Saisissez dans la zone "Fichier Projet" le chemin et le nom du fichier projet portant l'extension .jpr. Une fois fait, cliquez sur TERMINER.
2- Nous avons créé un projet, nous devons maintenant ajouter des classes. Nous avons choisi de créer une application graphique(JBuilder permet en outre de créer avec des assistants de servlets,des applets, des EJB, etc...). Cliquez sur le menu FICHIER -> NOUVEAUou faites CRTL+N.
La fenêtre souvante s'ouvre:
Cliquez sur "Application" puis sur le bouton "OK" pour lancer l'assistant de création d'applications.
Une seconde fenêtre s'ouvre:
Le "Paquet" est plus connu sous le nom anglais de "package". En fait, quand dans vo programmes vous écrivez des instruction d'importation du style "import java.io.*;", vous importez toutes les classes de ce paquet. De même si vous voulez lancer votre programme cela devra se faire, dans notre cas, par l'instruction "java sans_titre1.Application1". La "classe" étant la classe principale du programme, celle contenant la méthode main(), celle qu'il faut invoquer pour lancer le programme. Dans la plupart des cas, vous n'aurez pas à modifier le code de cette classe.
Cliquez sur "Suivant >".
Vous accédez à cette fenêtre:
La classe à laquelle l'on fait ici référence est laclasse qui définira le cadre principal de l'interface utilisateur.Elle étend de JFrame. Elle sera automatiquement lancée au démarrageduprogramme (le code pour ça est écrit automatiquement).
Par défaut les 3 cases que vous voyez cochées ici ne le sont pas, cochez-les pour ce tutoriel.
Cliquez sur "TERMINER".
Vous aboutissez à un écran similaire à celui de la première capture d'écran. Le fichier ouvert est "Cadre1.java".
3 - Nous allons créer l'interface. Cliquez sur l'onglet "Conception". Le concepteur met quelques secondes à se lancer, puis une fenêtre comme ceci apparaît:
1 - Cette zone est une simulation de ce à quoi ressemblera votre fenêtre. Vous y ajouterez des composants gaphiques (2) par Drag&Drop. Vous pourrez déplacer, redimentionner, etc ces composants directement an cliquant dessus.
ASTUCE: on y pense rarement, mais le bouton droit de la souris est très utile... essayez vous verrez comme les options proposées dans le menu qui surgit sont utiles !
2 - Vous pouvez cliquer sur un des composants de ce panneau, le curseur se transformera en une croix. Cliquez avec cette croix dans la zone (1 )pour déposer le composant. Les composants sont répertoriés dans différents onglets, vous trouverez dans Swing les principauxcomposants graphiques de Swing, dans Conteneurs Swing des JTabbedPane, JSplitPaneetd'autres gestionnaires de mise en page. DbSwing regroupe des composantsBorland(très utiles pour les bases de données notamment).
3 - Ici sont affichées les propriétés du composant graphique sélectionné. La fenêtre elle même étant sélectionnée, on voit ici ses propriétés. Si on clique sur l'onglet "Evenements", on a accès à tous les gestionnaires d'évèmements accessibles pour le composant sélectionné.
4 - Comme expliqué auparavant, les composants de l'interface -leur nom- sont affichés ici. On voit que "this" est sélectionné, c-à-d le fenêtre elle-même. Cette vue est très pratique pour savoir d'un coup d'oeil quels est le gestionnaire de mise en page d'un conteneur, quels composants il contient, etc...
4 - Cliquez sur l'onglet Conteneurs Swing, et sélectionnezle composant javax.swing.JPanel (le premier que nous désignerons sous le nom de JPanel), déposez-le au centre de this(le cadre gris de la capture d'écran ci-dessus).
Normalement le composant doit s'afficher (cela se matérialise parle fait que la fenêtre devient légèrement plus claire).Une entrée jPanel1 est ajoutée à la zone (4).Cliquez sur cette entrée. Les propriétés de la zone(3) changent. Cliquez sur la propriété layout de manièreà faire apparaître une menu déroulant regroupant lesgestionnaires de mise en page disponibles. Sélectionnez BorderLayout. Revenez à l'onglet Swing de la zone (2), cliquez ur le composant JButton et déposez-le vers le bas du jPanel1. Le boutton s'affiche automatiquement, remplissant la partie inférieure de lafenêtre. Recommensez la même opération en déposantun composant JTextAreaau milieu de la fenêtre.
5 - Nous avous créé l'interface, nous allons peaufiner tout àa pour faciliter l'écriture du code. Dans le concepteur, sélectionnez le bouton en cliquant (1 seule fois !) dessus. Dans ses propiétés, changez:
name: inscrivez "button"
text: effacez ce qui est écrit et ne mettez: "Cliquez ici !".
Faites de même avec la zone de texte:
name: inscrivez "textArea"
text: effacez ce qui est inscrit
lineWrap: mettez la propriété à TRUE
Ce que vous obtenez devrait ressembler à ceci:
6 - Nous avons terminé la partie conception et nous pouvons passer à l'étape écriture du code.
Nous allons assigner des gestionnaires d'évènement (en fait un seul au composant "button").
Pour assigner un gestionnaire d'évènement à un composant, il y a une seule méthode, par l'onglet "Evénements" de la zone (3) du concepteur. Cependant, pour le composant JButton, il existe une autre méthode (qui ne permet que d'assigner un gestionnaire OnClick d'ailleurs), c'est de double-cliquer tout simplement sur le bouton.
Nous allons essayer ici le 1° méthode dans le mesure où elle sera utilisée dans le majorité des cas.
Cliquez donc sur l'onglet "Evénements", voici à quoi il ressemble:
La première fois que vous le lancez, la caseà
droite de "mouseClicked" est identique aux autres cases, c-à-d,vide.
Nous vous la montrons ici une fois que vous aurez accompli l'actionsuivante:
double cliquer dessus. Allez-y, double-cliquez. JBuilder repasseen mode "Source"
et quitte le concepteur. Le curseur se trouve au milieude la méthode
gestionnaire d'évènement mouseClickeddu bouton. Completez cette
méthode avec le code visible ci-dessous:
REMARQUE: une des fonction les plus utiles de JBuilder est d'afficher unpetit menu déroulant au fur et à mesure de l'écrituredu code qui montre les méthodes disponibles pour telle ou telle classe.Par exemple, vous tapez ici "textArea" puis quand vous tapez le ".", le menuapparaît (attendez quelques secondes car si vous tapez la suite ducode tout de suite il n'apparaît pas), affichant toutes les méthodesde JTextArea, quand vous continuez à taper "set...", le menu affichetoutes les méthodes commençant pas "set", et ainsi de suite.
Vous comprendrez à quel point ce composant est utile quand vous aurez anvie d'appeler une méthode dont vous savez qu'elle existe amis dont vous ne connaissez par exactement la syntaxe. Ceci arrive constamment, et le menu déroulant permet d'éviter des erreurs à la compilation.
Cependant -eh oui il faut bien un "mais" - j'ai constaté sur mon système que ce menu ne fonctionnait pas sous Linux, je ne sais pas si c'est dû à un paramétrage qu'il faut faire manuellement, et en plus, du moins je n'ai rien trouvé concernant ce sujet dans la doc... en espérant que ce soit juste un bug chez moi et pas pour tous les linux... (en tout cas sous Windows, ça fontionne ! :))
7 - Nous avons terminé le programme, cliquez sur la flèche(le triangle vert) verte ou appuyez sur F9, le code se compile, et le programme se lance, cliquez sur notre bouton (dans la nouvelle fenêtre qui vient d'apparaître au bout de quelques secondes, et qui n'est autre que la fenêtre que nous achevons de concevoir) pour tester le programme, voici ce que ça donne:
REMARQUE: une des fonction les plus utiles de JBuilder est d'afficher unpetit menu déroulant au fur et à mesure de l'écrituredu code qui montre les méthodes disponibles pour telle ou telle classe.Par exemple, vous tapez ici "textArea" puis quand vous tapez le ".", le menuapparaît (attendez quelques secondes car si vous tapez la suite ducode tout de suite il n'apparaît pas), affichant toutes les méthodesde JTextArea, quand vous continuez à taper "set...", le menu affichetoutes les méthodes commençant pas "set", et ainsi de suite.
Vous comprendrez à quel point ce composant est utile quand vous aurez anvie d'appeler une méthode dont vous savez qu'elle existe amis dont vous ne connaissez par exactement la syntaxe. Ceci arrive constamment, et le menu déroulant permet d'éviter des erreurs à la compilation.
Cependant -eh oui il faut bien un "mais" - j'ai constaté sur mon système que ce menu ne fonctionnait pas sous Linux, je ne sais pas si c'est dû à un paramétrage qu'il faut faire manuellement, et en plus, du moins je n'ai rien trouvé concernant ce sujet dans la doc... en espérant que ce soit juste un bug chez moi et pas pour tous les linux... (en tout cas sous Windows, ça fontionne ! :))
7 - Nous avons terminé le programme, cliquez sur la flèche(le triangle vert) verte ou appuyez sur F9, le code se compile, et le programme se lance, cliquez sur notre bouton (dans la nouvelle fenêtre qui vient d'apparaître au bout de quelques secondes, et qui n'est autre que la fenêtre que nous achevons de concevoir) pour tester le programme, voici ce que ça donne:
Vous avez remarqué que JBuilder a automatiquement ajouté une menu FICHIER -> QUITTER et un menu AIDE -> A PROPOS. Ces 2 menus sont fonctionnels, le code a été généré automatiquement. Cela est dû au fait que nous avions coché les cases "Créer une barre de menus" et "Créer une boîte de dialogue A Propos" à l'étape de définition de notre projet.
Je ne saurais trop vous conseiller de vous entrainer un peu à mdifier l'interface, en examinant par exemple le gestionnaire d'évènements du menu, en modifiant la conception graphique de la classe qui représente la boîte A Propos (Cadre1_AboutBox.java par défaut).
Voilà, c'est terminé :)
Comme morale à ce tutoriel (oui, oui, ce tutoriel est une vraie fable :) retenez que ce n'est pas parce qu'on utilise JBuilder ou un IDE que l'on doit se contenter de lui laisser tout faire. Personellement, je ne l'utilise pas beaucoup pour ses codes pré-écrits, et beaucoups de programmeurs à mon instar n'aiment pas trop ça, ils utilisent des IDE pour la conception graphique qui se révèle plus simple et plus rapide. et pour les gros projets, un Emacs n'est pas mal non plus...
Tutoriel distribué pour le FAQ Java de Java-France www.java-france.com / www.jgflsoft.com
Pour toute information sur cet article, écrire à [email protected]
Ecrit à Montpellier le 15 mars 2001