Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

SWINGUEZ!! JFRAME, JPANEL, JCOMPONENT, LAYOUTMANAGER, BORDERLAYOUT


Information sur le tutorial

Catégorie :Swing Date de création : 20/02/2006 13:06:00 Vu : 26 969 fois

Note :
8,67 / 10 - par 9 personnes
8,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (21)
Ajouter un commentaire et/ou une note


Description

Petit tutoriel sans prétention sur la conception d'interface graphique en JAVA.
Partie 1 : premiers pas

Tutorial

Swinguez !!!

Partie 1 : Premiers Pas



1. Introduction

Je vous propose ce petit tutorial pour la création d'interface graphique en JAVA, il se décomposera en plusieurs parties que je concevrai selon mon temps libre et l'engouement suscité…J'espère qu'il vous sera utile et sera assez didactique. Je tient avant tout m'excuser pour des éventuelles fautes d'orthographes et de français. Si vous avez des remarques/suggestions, n'hésitez pas!!

Cette première partie, intitulée "Premiers Pas" est consacrée, comme son nom l'indique, à une initiation rapide à l'élaboration d'interface graphique en JAVA.

Concepts abordés :

-Swing
-les JFrame
-les JPanel
-les layouts, LayoutManager
-les JComponent

 
2. Swing


Qu'est ce Swing ?!! si vous pensez que c'est une danse, c'est que vous n'avez pas fait beaucoup de Java…bon trêve de plaisanterie, une définition de Swing, vue sur Wikipédia résume en quelques phrases Swing :

Swing est une bibliothèque graphique pour le langagede programmation Java, faisant partie du package Java Foundation Classes (JFC), inclus dans J2SE. Swing constitue l'une des principales évolutions apportées par Java 2 par rapport aux versions antérieures.

Swing offre la possibilité de créer des interfaces graphiques identiques quelquesoit le système d'exploitation sous-jacent, au prix de performances moindres qu'en utilisant Abstract Window Toolkit (AWT). Il utilise le principe Modèle-Vue-Contrôleur (MVC) et dispose de plusieurs choix d'apparence (de vue) pour chacun des composants standard.

 
Vous devez comprendre en gros, que Swing permet de construire des interfaces graphiques en Java affichable sur toute JVM (Java Virtual Machine) de n'importe quel système qui se respecte(portabilité)

 

3. Entrons dans le vif du sujet

 

Pour créer des interfaces graphiques, il est nécessaire de connaître et de maîtriser certains objets debase de Swing :

 

Les fenêtres, les JFrame :

 

Les JFrame sont l'équivalent des fenêtres. Elles ont un titre, une dimension, un aspect et des éléments graphique affichés à l'intérieur.

Les JFrame font partie du package javax.swing, il faudra l'inclure avant toute utilisation avec un import. Nous allons voir comment ouvrir une fenetre JFrame pas a pas, vous allez voir que c'est pas compliqué.

 

import javax.swing.*;
public  class    test
{
            
public  static void       main(String args[])
            {
                        JFrame           f=new JFrame("Hello World!!");
                        f.setVisible(true);

            }
}

 

Tapez ce code dans"test.java" puis compilez ce petit programme (javac test.java) , puis lancez le programme (java test).

 

Vous verrez une petite fenetre :
  image1.jpg

 

Cette fenêtre est assez minuscule, si vous la redimensionnez a la main, vous verrez apparaître son titre et son contenu vide. Comme on n'a pas spécifié de dimension pour notre JFrame, Swing ouvre une fenêtre avec une dimension par défaut (ici 0x0). Nous verrons plus loin, que on n'a pratiquement jamais besoin de spécifier nous même la dimension d'une JFrame.

 

image2.jpg

 

Par défaut, une JFrame est toujours invisible, c'est-à-dire que la fenêtre est créée mais jamais affichée par défaut. C'est pour cela que l'on rajoute la ligne f.setVisible(true); qui permet de rendre visible la fenêtre.

 

Lorsque vous fermez la fenêtre,vous constaterez que Java ne rends pas la main au système, le programme java tourne toujours. Lorsque vous créez une JFrame, un Thread c'est-à-dire un programme d'arrière plan est créé. Par défaut, Swing ne tue pas le processus lorsque l'on ferme la JFrame avec la souris.

Notre deuxième petit programme va nous ouvrir une fenêtre avec une dimension par défaut et va quitter le logiciel lorsqu'on ferme la fenêtre avec la souris :

 

import  javax.swing.*;
import  java.awt.*;
public  class    test
{
            public  static void       main(String args[])
            {
                        JFrame           f=new JFrame("Hello World!!");
                         f.setSize(new Dimension(200,200));
                         f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                       
f.setVisible(true);
            }

}

 

On a rajouté que deux lignes :

-setSizepermet de spécifier la dimension de la fenêtre
- setDefaultCloseOperation permet de définir l'opération par défaut que l'on veut lorsqu'on ferme la fenêtre.Le paramètre  JFrame.EXIT_ON_CLOSE spécifie que l'on quitte le logiciel lorsqu'on ferme la JFrame.

  

Vous voyez donc qu'il n'est pas très difficile d'ouvrir une fenêtre avec Swing. Ouvrir une fenêtre seule sans rien à l'intérieur n'a pas grand intérêt, nous allons voir maintenant voir comment placer des composants à l'intérieur.

 

Contenu des fenêtres, les JPanel, les layouts et les JComponent


Pour ajouter des objets à une JFrame, on a besoin de JPanel. Un JPanel est en quelque sorte une boite dans laquelle on peut placer des composants de l'interface graphique. Un JPanel sert uniquement à stocker les objets, il est secondé par un LayoutManager pour les placer au bon endroit dans une fenêtre.

En effet, dans Swing, on place les objets non pas à une abscisse/ordonnée précise mais on les place avec une stratégie gérée par les LayoutManager. C'est le LayoutManager qui se charge de définir la position de l'objet dans la fenêtre. Par exemple, une des stratégies possible est de placer tous les objets en ligne les uns à cotés des autres. Un JPanel possède une unique stratégie de placement, un unique LayoutManager.

Les composants de l'interface graphique sont des classes qui héritent de la classe JComponent. Il en existe déjà un bon nombre par défaut dans Swing : les labels, les zones de texte éditables, les scrollbars, les boutons, les tables etc… et il est bien sur possible de créer ses propres composants (sujet peut être d'un futur tutorial).

Voici une petite liste des noms des classes des composants :

JLabel                         label (un texte)
JTextField                    un champ texte éditable
JButton                        un bouton
JComboBox                une combo box
 

Vous verrez, qu'il est très facile de créer et de placer ces objets.

Pour commencer, nous allons rajouter à notre exemple précédent, un texte centré sur la largeur de la fenêtre.

Le texte sera un JLabel. On créé simplement cet objet en faisant :
JLabel lab=new         JLabel("Bonjour tout le monde");

Un composant ne sert a rien si on a pas de JPanel où le stocker. Pour créer un JPanel :
JPanel pan=new        JPanel();

Il faut lui définir un LayoutManager, il en existe beaucoup dans Swing. Nous allons utiliser un FlowLayout qui a la particularité de pouvoir placer notre JLabel centré sur la largeur de la fenêtre :
FlowLayout    bl=new           FlowLayout(FlowLayout.CENTER)
Le paramètre FlowLayout.CENTER spécifie l'alignement que l'on désire, ici on veut centrer.

Pour attacher le LayoutManager auPanel :
pan.setLayout(bl);

Enfin, il ne faut pas oublier d'ajouter le JLabel au panel (une des erreurs classiques!)  :
pan.add(lab);
 
Pour finir, une JFrame lors de sa création, créé déjà un JPanel, ici nous avons créé notre propre JPanel pan, une deuxieme erreur classique est d'oublier de redéfinir le panel de la JFrame(sinon notre JPanel ne sera pas affiché !), on le fait tout simplement par :
setContentPane(pan)
 
Voici le programme complet :

import  javax.swing.*;
import  java.awt.*;
public  class    test extends JFrame
{
    public test()
    {
        super("Hello World !");                 //défini le titre
        setSize(new Dimension(200,200));        //la taille


       
JPanel pan=new JPanel();              //Panel
        FlowLayout    bl=new FlowLayout(FlowLayout.CENTER);   //layoutManager
       
pan.setLayout(bl);                      //attache le layoutManager au panel           

        JLabel  lab=new JLabel("Bonjour le monde!!");  //créé un label
        pan.add(lab);           //l'ajoute au panel       

        setContentPane(pan);        //defini le panel de la JFrame
       
setVisible(true);           //affiche la JFrame

       setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //opération par défaut ala fermeture

    }

 

    public          static void       main(String args[])
   
{
        new test();
    }

}

 

Voici une capture du résultat :

 

image3.jpg

 

Il faut noter, qu'on peut aussi placer d'autre JPanel dans un JPanel. Chaque sous panel ayant son propre LayoutManager, on peut créer ainsi une interface graphique complète, qui sera l'objet d'un prochain tutorial.

 

Voici un exemple plus complet,pour ceux qui veulent en apprendre un peu plus :

 

import  javax.swing.*;
import  java.awt.*;
public  class    test extends JFrame
{
   
public  test()
    {
        super("Hello World!");                 //défini le titre
        setSize(new Dimension(300,300));        //la taille       

        JPanel pan=new JPanel();              //panel
        BoxLayout    bl=new BoxLayout(pan,BoxLayout.Y_AXIS);   //layoutManager
       
pan.setLayout(bl);                      //attache le layoutManager au panel           

        JLabel  lab=new JLabel("Bonjour le monde!!");  //créé un label
        pan.add(lab);           //l'ajoute au panel       

        JTextField  tf=new JTextField("Editez !"); //un champ texte!
       
pan.add(tf);       

        //un 2eme panel qui va etre imbriqué dans le 1er panel !
       
JPanel  pan2=new   JPanel();   //2eme panel
        bl=new BoxLayout(pan2,BoxLayout.X_AXIS);  //un autre alignement
        pan2.setLayout(bl);       

        lab=new JLabel("ComboBox:");
        pan2.add(lab);  //ajout dans le 2eme panel
       
String  c[] ={"Un","Deux","Trois","Zéro !"};   //contenu de la comboBox
       
JComboBox   cb=new JComboBox(c);
       
pan2.add(cb);       

        //ajoute le panel 2 dans le panel 1!
        pan.add(pan2);       

        //un dernier composantpour la route...
        JButton but=newJButton("C'est un bouton !!");
        pan.add(but);       

        //

        setContentPane(pan);        //defini le panel de la JFrame
        setVisible(true);           //affiche la JFrame
       setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //opération par défaut a la fermeture
   
}   

    public          static void       main(String args[])
   
{
        new test();
}

 

}

 

Voici une capture du résultat :

 

 image4.jpg


4. Liens :

 

La doc Java est indispensable pour dévellopper mais malheureusement elle est en anglais, jetez y un œil quand meme pour approfondir :

http://java.sun.com/j2se/1.4.2/docs/api/

 

Consultez les pages sur lesJFrame, JPanel, JComponent, JLabel et FlowLayout

 

5. Fin :

et oui, ce petit tutorial est déjà finit !! Vous pouvez déjà vous entraîner a créer vos interfaces graphiques.


20 février 2006 13:09:12 :
Problème de mise en page... :)
21 février 2006 12:31:24 :
bug de l'éditeur?!!!
23 février 2006 00:41:06 :
1ere correction
23 février 2006 00:58:51 :
correction des espaces manquants normalement ça devrait etre bon...
23 février 2006 01:04:07 :
modification de la taille de la police pour les exemples
01 mars 2006 10:00:08 :
modification du titre
signaler à un administrateur
Commentaire de altair_606 le 22/02/2006 22:50:13

Ce tutorial est une très bonne idée. J'ai appris pas mal de choses. Par contre une relecture est absolument necessaire au moins pour les erreurs lors des exemples de programmation. Il manque souvent des espaces entre les mots... (c'est encore plus valable pour le texte en soi...)

signaler à un administrateur
Commentaire de tucobouch le 23/02/2006 00:34:47

Merci
Les exemples ont tous été testés. En fait les problèmes viennent de l'affichage, sous l'éditeur de tutorial, la page n'a pas la meme largeur. La mise en page va etre remise a jour d'ici peu... :D

Les espaces entre les mots viennent aussi de la mise en page... grr c'est enervant! lol

désolé...

signaler à un administrateur
Commentaire de tucobouch le 23/02/2006 01:00:56

Voila c'est mis a jour. C'est vrai que j'avais vraiment pas vu tout ces problèmes d'espaces. c'est un copié collé sous l'editeur qui s'est mal passé... normalement tout devrait etre en ordre!

Si un des exemples marche pas, contactez moi!

signaler à un administrateur
Commentaire de nicolondon le 09/03/2006 23:48:07

Merci pour ce tutorial court et pratique. J'ai appris les regles de bases de Java l'an dernier mais je n'ai pas pu programmer depuis, cette courte lecon a ete tres apreciee.
J'ai tout de meme une question car je n'ai pas trouve de tutoriaux pour m'entrainer sur la passation de donnees entre classes. Est-ce que quelqu'un(e) qurait des exemples commentes a m'envoyer.
Merci encore pour la lecon Tucobouch.

signaler à un administrateur
Commentaire de tucobouch le 10/03/2006 10:04:46

Merci bien
Pour le "passation" de données, si je comprends bien c'est comment passer les données d'une interface a d'autres classes? c'est le sujet d'un prochain tutoriel, sinon tu peux essayer de jeter un oeil a mes productions, il y a souvent des interfaces graphiques completes

signaler à un administrateur
Commentaire de Horfee le 04/04/2006 14:45:24

Bon, moi je vais pas mettre un commentaire qui fait forcément plaisir, mais bon il faut se dire que c'est pour faire avancé les autres...
- Tout d'abord, étant donné le framework de java, je pense qu'il aurait été préférable, meme si ton topic est swing, de parler un petit peu de la librairie awt, etant donné que swing s'appuie enormement dessus.
- Ensuite, il aurait fallu (ce n'est qu'une opinion personnelle) parlé de la hierarchie des classes, faire un petit le menage sur "comment fonctionne une interface", les evenements et tout ca...
- Puis, puisque swing l'utilise, parler du pattern composé MVC avec si possible les dp utilisés (je sais que tu as fait un tuto la dessus mais j'ai eu des erreurs lors de la consultation...), et aussi du pattern Composite, etant donné que tous les components sont des containers, etc..
- Pour finir, il me semble qu'il y a de petites erreurs : on peut ne pas utiliser de LayoutManager, les JFrame ne sont pas vraiment des objets de base (d'autant plus que ce sont des classes, mais bon là c'est vraiment jouer sur les mots :D)

Mais bon ton tutoriel a déjà aidé certaines personnes, ce qui est louable. Le seul problème c'est qu'elles manipulent des objets sans savoir vraiment comment ca fonctionne...en clair ca devient (presque) de la bidouille...

Connais-tu Eclipse ? il me semble avoir vu des tuto la dessus...je pense qu'un petit support la dessus ne ferait pas de mal à ton tutoriel, etant donné que cet IDE est vraiment plebiscité (oups pour l'orthographe) par la communauté java et super pratique pour réaliser les interfaces graphiques... (je suppose que tu utilise ca pour faire tes applications java). A moins biensur que tu n'utilise autre chose pour développer.

Si tu veux je peux t'aider a faire d'autre tuto...j'ai du temps a perdre, donc bon...

signaler à un administrateur
Commentaire de tucobouch le 04/04/2006 15:06:51

Merci pour tes remarques constructives...

Je sais que mon tuto fait un peu recette de cuisine mais je voulais un tuto accessible aux debutants, qu'ils puissent avoir un point de depart car je sais pas si tu vas souvent sur le forum, tu verra beaucoup de questions sur les interfaces.

Sinon, pour venir sur ta derniere question, j'utilise perso NetBeans mais je me refuse pour le moment d'utiliser les IDE : où on fait tout a la souris et que l'on ne code pas vraiment mais bon, je sais que ça fait gagner du temps, mais j'apprends perso beaucoup plus en mettant les mains dans le camboui! Tu verra que mes application sont toutes faites a la main (ça ve voit bcp!!!) Le seul outil c'est mes dix doigts et ma cervelle!!! :D

Pour d'autres tuto, tu peux t'y lancer dedans (mais malheureusement sans moi car je n'ai plus beaucoup de temps en ce moment) ou si tu veux ameliorer les miens, te gene pas lol!! :D


Merci

signaler à un administrateur
Commentaire de rounhi le 15/04/2006 03:09:12

Merci bcp pour tes efforts tu nous a resumé lesssentiel je cherchais ça depuis longtemps merci encore et on attend du nouveau

signaler à un administrateur
Commentaire de Tanaka24 le 24/06/2006 12:32:18

Merci bien pour ce tuto. Bien que certain aspect me semble assez peu développé, il reste très intéressant.

signaler à un administrateur
Commentaire de melianos31 le 20/07/2006 11:50:03

vraiment merci pour ce tuto, ca fait 2 jours que je galère pour faire une interface graphique en java, là je vois comment modifier ton code pour faire mon appli.

signaler à un administrateur
Commentaire de itake le 11/10/2006 10:43:56

Super tuto,m'a fait comprendre pas mal de trucs.Merci encore et courage!

signaler à un administrateur
Commentaire de rom1v le 26/10/2006 18:00:36

Salut,

Juste une petite remarque, très importante en Swing, tout ce qui concerne l'affichage graphique doit être effectué dans l'EDT (Thread dédié à l'interface graphique...

Ainsi, pour ton exemple,

public static void main(String args[]) {
    new Test();
}

doit être remplacé par:

public static void main(String args[]) {
    SwingUtilities.invokeLater(new Runnable() {
        public void run() {
            new Test();
        }
    });
}

signaler à un administrateur
Commentaire de wyswyg le 07/12/2006 07:57:23

Noter qu'un JPanel a pour defaut layout le FlowLayout. On n'a donc pas besoin d,utiliser le setLayout method.
Par contre on peut changer un panel en:
-BorderLayout (default layout pour le JFrame)
-GridLayout

signaler à un administrateur
Commentaire de pakit le 05/04/2007 10:49:30

bien que ce ne soit pas vraiment poussé ca m'a permis d'avancer dans mon apprentissage du java avec swing et je te remercie .

bon courage pour la suite du tutoiel.

merci.

signaler à un administrateur
Commentaire de vincedav31 le 04/07/2007 10:14:14

Joli tuto mais dans ton dernier exemple il manque un petit espace dans ta partie "//un dernier composant" entre "new" et "JButton" : ) Mais c'est tout !

signaler à un administrateur
Commentaire de huguette123 le 26/01/2008 22:35:46

merci,pas mal mais il y a qlq petites erreurs qu'un debutant peut avoir du mal à corriger sans aide.Notamment les bons sont:
setSize(200,200) et des espaces comme
JButton but=new JButton("C'est un bouton !!");

signaler à un administrateur
Commentaire de TSI3ISSAT le 30/03/2008 22:42:28

Merci beaucoup sur ce Tutorial mon camarade tucobouch
ça m'a vraiment aidé dans mon projet
si tu as quelque choses qui peut nous aidée n'hésite pas STP!!!

  

signaler à un administrateur
Commentaire de baratribord le 04/04/2008 22:28:21

Bonjour à tous,

Ça fait bien 7 ans que j'ai pas développé une ligne de code et plus de 10 ans de façon professionnel.
A vrai dire je suis bien content de trouver des tutos ici qui permette de bien reprendre. J'ai donc trouvé ce tutoriel excellent.

Sinon j'ai une question :
J'utilise Eclipse mais je trouve l'interface compliqué et je voudrai connaitre vos avis sur NetBeans dont j'entends un peu parler.

signaler à un administrateur
Commentaire de killer113 le 20/10/2008 22:57:57

Ça aide vraiment merci beaucoup.

signaler à un administrateur
Commentaire de fatim1 le 09/11/2008 14:32:54

Salut. Moi j'ai fait l'introduction de Java l'année passée.Mais je peux t'avouer que ce petit tuto m'a fait beaucoup de bien en quise de revision et m'a éclaircir quelques zones d'ombre.
Merci encore pour ce tuto.

signaler à un administrateur
Commentaire de demahom82 le 13/11/2008 12:38:28

MERCI MON AMIE POUR SETTE EXEMPLE

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,016 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.