Créer une JFrame.

ouverture de Window Builder

Objectif : Faire une fenêtre JFrame (dans laquelle on va poser des éléments : bouton JButton, étiquette JLabel, …)

  1. Rajouter  extends JFrame  à la classe de votre programme (afin qu’il crée une fenêtre).
    ja_ExtendsJFrame
  2. Faire Ctrl+Shift+O pour supprimer l’erreur ja_ampoulError. Ce raccourci importe les librairies nécessaires, donc celle de JFrame, en rajoutant cette ligne   import javax.swing.JFrame;
  3. Pour supprimer l’avertissement sur le nom de la classe (soulignée en jaune) : clic sur l’ampoule jaune ja_ampoulAvert > Add default serial ID. Une variable globale serialVersionUID se crée.
  4. Ajouter dans public static void main(String[] args) l’instruction qui lance le constructeur de la classe (avec le mot-clénew).
    Concrètement (exemple ci-dessous) : la classe est  Mon_Interface_Graphique donc le constructeur est  Mon_Interface_Graphique() donc l’instruction est new Mon_Interface_Graphique();

    ? Le constructeur porte toujours le même nom que la classe.
    ? La méthode main() est la 1ère fonction exécutée par le programme [  main()= méthode principale ].

    import javax.swing.JFrame;
    
    public class Mon_Interface_Graphique extends JFrame 
    {
    	//Les variables globales à déclarer ici.
    	
    
    	public Mon_Interface_Graphique()  // Le constructeur (de la classe)
    	{  // Les instructions du pgm à mettre ici.		
    		
    	}
    
    	public static void main(String[] args) 
    	{ //Méthode de démarrage qui lance le constructeur.
    		new Mon_Interface_Graphique();
    	}
    }
  5. Ouvrir la classe dans le WindowBuilder Editor : clic droit > Open With > WindowBuilder Editor.
    ja_eclipOuvrirWB
  6. Puis apparaissent 2 onglets :  Source et Design. Clic sur l’onglet Design.
    ja_eclipOnglDesi

éléments de la JFrame

ObjectifPoser des éléments dans la JFrame : bouton JButton, étiquette JLabel, …

  1. Régler les paramètres de la fenêtre JFrame  :
    • EXIT_ON_CLOSE (rubrique defaultCloseOperation) : cela permet au client d’arrêter le programme en cliquant sur la croix.
    • mettre un titre, etc …
    • clic sur  pour avoir les ja_WBpropAvan propriétés avancées (dimensions et visibilité … car par défaut, une fenêtre ne s’affiche pas ! ) :
      • Remplir Size (largeur, hauteur).
      • Cocher Visible : true

    En parallèle (onglet Source), le code java est autogénéré dans le constructeur de la classe, c’est très appréciable.
    ja_WB  ja_eclipSetVisible

  2. Régler les paramètres du contentPane :
    • Layout absolute : pour un placement en coordonnées (pour les futurs boutons, cases à cocher, …) … c’est plus facile pour débuter !
    • couleur de fond (background), de texte (foreground) …

    La JFrame n’est que le contour. L’intérieur de la fenêtre est le contentPane, accessible par getContentPane().

    ja_WBContentpan

  3. Ajouter dans le getContentPane() les différents éléments (bouton JButton, étiquette JLabel, …) par glisser-déposer à partir de la palette. Redimensionner si besoin. C’est le principe du WYSIWYG (What You See Is What You Get).
    => Choisir un nom de variable pour chacun … commençant par une minuscule !
    => Un clic sur ja_eclipVarGlobal pour remonter cette variable locale en variable globale (en champ de classe), ce sera plus pratique pour la suite (pour les Listeners) … ensuite, l’icône s’inverse ja_varLocale.

    Un nom de variable commence par une minuscule.
    Un nom de classe commence par une Majuscule.

    ja_EclipseBtn

  4. De retour dans le code (onglet Source), vérifier que vous avez bien ces lignes dans le constructeur et rajouter le placement au centre de l’écran …. MAIS SURTOUT :

    Déplacer le setVisible (true); en DERNIÈRE instruction du constructeur !!!  sinon la fenêtre s’affiche vide.

    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//fermeture par clic sur la croix du haut
    setSize(new Dimension(1000,600)); //dimension de la fenêtre (largeur,hauteur)
    setLocationRelativeTo(null); //place la fenêtre au centre de l'écran
    setVisible (true); //car par défaut une fenêtre ne s'affiche pas !!! (très étonnant)
    

Listener : écouteur d’événement

Objectif : Programmer ce qui doit se passer, lorsqu’on clique sur un bouton.

Pour notre exemple : Lorsqu’on clique sur le bouton, je veux changer la couleur de la fenêtre en vert et afficher un texte « merci pour le clic ».

Pré-requis : Avoir déjà placé les 2 éléments (avec Window Builder) : monBouton (JButton) et etiquette (JLabel).

Voici comment on ajoute un Listener au bouton :

  1. double clic sur le bouton — OU — clic droit :  Add event handler > action > actionPerformed
    ja_actionPerformed
  2. Puis l’assistant vous renvoie au code pour que vous écriviez les instructions à effectuer (L’assistant a créé dans le constructeur, un écouteur anonyme qu’il a attaché au bouton). On insère donc les 2 instructions pour changer la couleur de fond du contentPane en vert et changer le texte de etiquette :
    monBouton.setBounds(12,66,139,25);
    monBouton.addActionListener(new ActionListener() {
       public void actionPerformed(ActionEvent arg0) {//Actions lors d'un clic
          getContentPane().setBackground(new Color(100,200,100));//met contentPane en vert		
          etiquette.setText("Merci pour le clic");	//change le texte
    	}
    });
    getContentPane().add(monBouton);

Voici le résultat : AVANT le clic ….. et APRES le clic :
ja_AvantClic    ja_ApresClic

Lors d’une GUI plus compliquée, on aura besoin de nommer le Listener avec une variable de type ActionListener. On pourra aussi rajouter une classe implémentant ActionListener … mais c’est plus technique !

Enlever des éléments

Désactiver/Supprimer un bouton

Plusieurs actions sont possibles :

  • désactiver un bouton :  monBouton.setEnabled(false);  (il devient grisé)
  • rendre le bouton invisible :  monBouton.setVisible(false);   (permet de faire ré-apparaître plus tard).
  • enlever le bouton : getContentPane().remove(monBouton);

Rafraîchir l’affichage

Une fois que la GUI est affichée, tout nouveau changement dans l’affichage nécessite un rafraîchissement du conteneur :

getContentPane().revalidate(); //recalcule les éléments absents/présents (après add/remove)
getContentPane().repaint(); // redessine la fenêtre = rafraichit l'affichage

Une exception  :  inutile de faire repaint() après setVisible(true) (car setVisible repeint immédiatement).

Supprimer un Listener

Le plus simple est de stocker le Listener dans une variable … puis utiliser la variable pour l’enlever  :

ActionListener monListener = new ActionListener () { ... }
monBouton.addActionListener(monListener);

//Puis plus tard, pour enlever le Listener :
monBouton.removeActionListener(monListener);

Éléments particuliers

JLabel : étiquette à fond transparentja_JLabel

Un JLabel est transparent, ainsi il permet d’écrire un texte sur un autre composant (une image..). Cependant pour mettre une couleur de fond à un JLabel il faut d’abord le rendre opaque puis lui donner une couleur :

label.setOpaque(true);
label.setBackground(new Color(250,250,250));

JSlider : curseurja_JSlider

Le JSlider est bien présent dans le Window Builder. Il est important de préciser ces propriétés :

  • minimum=0   maximum = 100 :   pour une fourchette de 0 à 100
  • majorTickSpacing = 10  :  c’est la graduation
  • paintTicks = true : pour afficher la graduation
  • value = 50 : c’est la position initiale du curseur

Ensuite pour le Listener, il y a 2 possibilités, ça dépend du scénario que vous préférez :

  • 1er cas : « Lorsque client bouge le curseur, les changements s’effectuent immédiatement ! »
    Dans ce cas, on met le Listener sur le curseur slider [clic droit sur le JSlider : Add event handler > change > stateChanged]. Puis dans le code, on insère les instructions sachant que la valeur du curseur est slider.getValue();
    ja_sliderListener
  • 2ème cas : « Lorsque client bouge le curseur, rien ne se passe … Il faut que le client clique sur un bouton « Valider » pour que les changements opèrent. » :
    1. Onglet Design (Window Builder) : Créer un bouton « Valider ».
    2. Ajouter le Listener sur ce bouton Valider [clic droit : Add event handler > action > actionPerformed] . Puis dans le code, on insère les instructions sachant que la valeur du curseur est slider.getValue();
      btnValider = new JButton("Valider");
      btnValider.addActionListener(new ActionListener() {
      	public void actionPerformed(ActionEvent arg0) {
      		System.out.println("valeur="+slider.getValue());
      	}
      });

JColorChooser : sélecteur de couleurja_JColorChooser

Le JColorChooser n’est pas proposé dans Window Builder, donc il faut l’ajouter directement dans le code (onglet Source) :

  1. dans les variables globales, il faut le déclarer : JColorChooser selecteurCouleur;
  2. puis dans le constructeur, il faut le créer, le positionner puis l’ajouter au contentPane :
    selecteurCouleur = new JColorChooser(); //création de l'objet 
    selecteurCouleur.setBounds(5,20,695,380); // position: (x,y,largeur,hauteur)
    getContentPane().add(selecteurCouleur); //ajout dans le contentPane
  3. Faire Ctrl+Shift+O pour importer la librairie JColorChooser (pour supprimer l’erreur ja_ampoulError ).
  4. Onglet Design (Window Builder) : Créer un bouton « Valider ».
  5. Ajouter un Listener sur ce bouton [clic droit : Add event handler > action > actionPerformed] et c’est dans ce Listener (lorsqu’on clique sur Valider) qu’on récupère la couleur qui a été choisie avec selecteurCouleur.getColor(); pour en faire ce que vous voudrez. On peut aussi récupérer les composantes RGB avec getRed() getBlue() et getGreen().
    Exemple : int rouge =  selecteurCouleur.getColor().getRed();

    btnValider = new JButton("Valider");
    btnValider.addActionListener(new ActionListener() {
    	public void actionPerformed(ActionEvent arg0) {
    		Color couleur = selecteurCouleur.getColor();
    		System.out.println("R="+couleur.getRed()+" B="+couleur.getBlue());
    	}
    });

JFileChooser : sélecteur de fichierja_JFilechooser

Le JFileChooser n’est pas proposé dans Window Builder, donc il faut l’ajouter directement dans le code (onglet Source) :

  1. dans les variables globales, il faut le déclarer : JFileChooser selecteurFichier;
  2. puis dans le constructeur, il faut le créer, le positionner puis l’ajouter au contentPane :
    selecteurFichier = new JFileChooser(); //création de l'objet 
    selecteurFichier.setBounds(5,20,870,400); // position: (x,y,largeur,hauteur)
    getContentPane().add(selecteurFichier); //ajout dans le contentPane
  3. Faire Ctrl+Shift+O pour importer la librairie JFileChooser (pour supprimer l’erreur ja_ampoulError ).
  4. Onglet Design (Window Builder) : Ajouter un Listener sur ce JFileChooser [clic droit :  Add event handler > action > actionPerformed] et c’est dans ce Listener qu’on récupère le fichier selecteurFichier.getSelectedFile() qui a été choisi. Sauf que le client a 2 boutons donc il faut d’abord tester s’il a cliqué sur la commande « Ouvrir » ou « Annuler ».

Exemple pour sélectionner un fichier d’image et l’afficher dans une étiquette (JLabel). On pourra placer de petite image dans le répertoire /src de taille inférieure à 550 x 250.

JLabel etiquette = new JLabel();
etiquette.setBounds(5,260,550,250); // étiquette (l'image) en (x,y,largeur,hauteur)
getContentPane().add(etiquette);

selecteurFichier = new JFileChooser(); //création de l'objet 
selecteurFichier.addActionListener(new ActionListener() {
   public void actionPerformed(ActionEvent e) {
      String command = e.getActionCommand(); //command ="Ouvrir" ou "Annuler"
      if (command.equals(JFileChooser.APPROVE_SELECTION)) {//égalité de String
         File fichier = selecteurFichier.getSelectedFile();	
         try { // Puis on essaie d’ouvrir le fichier (si possible ..)
            BufferedImage img = ImageIO.read(fichier); // stocke l’image du fichier
            etiquette.setIcon(new ImageIcon(img));//met img ds JLabel (transformée en ImageIcon)	
         } catch (IOException ae) {//Si on ne peut pas ouvrir le fichier, on attrape l’exception
            ae.printStackTrace();  // écrit le message d’erreur
         }	
      }
   }
});
selecteurFichier.setBounds(5,5,550,250); // position du selecteur (x,y,largeur,hauteur)
getContentPane().add(selecteurFichier);

De plus, on peut apporter quelques réglages supplémentaires sur le selecteurFichier (JFileChooser) :

  • selecteurFichier.setFileSelectionMode(JFileChooser.FILES_ONLY); permet de ne sélectionner que des fichiers (pas de répertoires). [Cette ligne est à ajouter dans le constructeur.]
  • Déclarer un filtre qui ne laisse que les fichiers d’images (ceux qui ont pour extension jpg, jpeg ou gif ) puis appliquer ce filtre sur le selecteurFichier (JFileChooser) :
    FileNameExtensionFilter filtre = new FileNameExtensionFilter("JPG & GIF Images", 
                new String[] {"jpg","jpeg","gif"});
    selecteurFichier.setFileFilter(filtre);

Voici le résultat : AVANT  ….. et APRES le choix d’un fichier d’image :
ja_selFichierAvant     ja_selFichierApres