Java : Customiser l’apparence des éléments swing – JButton et JPanel

Partager cet article

Temps estimé pour la lecture de cet article : 12 min

Salut les fans de Java ! Après l’article sur la customisation d’un JTabbedPane. Ici, je vais vous donner quelques conseils concernant deux classes de Swing à savoir la classe JPanel et JButton. Lors de mes études j’ai dû réaliser plusieurs projets en Java et bien souvent dès qu’on veut changer l’apparence des éléments graphiques, ce n’est pas forcément évident. je vais donc vous montrer comment on peut définir un JPanel avec une image en fond et comment on peut personnaliser un JButton.

Définir un JPanel avec une image de fond

On va créer une classe BackgroundPanel qui hérite de JPanel :

package view;

import java.awt.BorderLayout;
import java.awt.Graphics;

import javax.swing.ImageIcon;
import javax.swing.JPanel;

public class BackgroundPanel extends JPanel {

	private static final long serialVersionUID = 1L;
	private ImageIcon background;
  
	public BackgroundPanel(String fileName) {
		super();
		this.setLayout(new GridBagLayout());
		this.background = new ImageIcon(fileName);
	}

	public void setBackground(ImageIcon background) {
		this.background = background;
	}

	public void paintComponent(Graphics g) {
		super.paintComponent(g);
		g.drawImage(background.getImage(), 0, 0, this);
	}
}

Notre classe possède un constructeur qui prend en paramètre le chemin vers l’image. On surcharge la méthode paintComponent afin d’y dessiner notre image. La subtilité se situe peut-être ici. La fonction drawImage, attend une Image en paramètre, comme on utilise une ImageIcon, il faut utiliser la méthode getImage pour concorder avec l’argument.

Attention dans mon exemple, je définis le layout de mon BackgroundPanel comme étant un GridBagLayout, cela n’a pas d’intérêt pour vous, ici c’est juste pour mon exemple.

Personaliser un JButton

Passons à la classe MyButton :

package view;

import java.awt.Color;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.SwingConstants;

public class MyButton extends JButton {

	private static final long serialVersionUID = 1L;

	public MyButton(String txt, String icon, String iconHover) {
		super(txt);
		setForeground(Color.WHITE);
		
		setOpaque(false);
		setContentAreaFilled(false);
		setBorderPainted(false); 
		setFocusPainted(false);
		
		setHorizontalAlignment(SwingConstants.CENTER);
		setHorizontalTextPosition(SwingConstants.CENTER);
		
		setIcon(new ImageIcon(icon));
		setRolloverIcon(new ImageIcon(iconHover));
	}
}

Cette classe hérite d’un JButton, son constructeur attend trois arguments :

  • txt : le nom du texte à afficher
  • icon : l’image du bouton qui sera affiché
  • iconHover : l’image que l’on va afficher lors du clic

On utilise ici 3 méthodes pour supprimer les comportements visuels par défaut de Java :

  • setContentAreaFilled(false) – on met à false pour empêcher le composant de peindre l’intérieur du JButton
  • setBorderPainted(false) – on ne veut pas afficher les bordures du bouton
  • setFocusPainted(false) – on évite d’afficher l’effet de focus

Utilisons maintenant nos superbes classes

Enfin, voyons les résultat en action :

package launcher;

import javax.swing.JFrame;

import view.BackgroundPanel;
import view.MyButton;

public class Main {
	public static void main(String[] args) {
		JFrame window = new JFrame();
		BackgroundPanel back = new BackgroundPanel("data/back.jpg");
		MyButton test = new MyButton("Test background", "data/btn.png","data/btnh.png");
		
		window.setTitle("BackgroundPanel and Custom button !");
		window.setSize(800, 600);
		window.setLocationRelativeTo(null);
		window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		window.add(back);
		window.setVisible(true);

		back.add(test);
	}
}

On crée une instance d’une JFrame, on y ajoute notre panel customisé et un bouton sur celui-ci. Ce qui nous donne :

Java : BackgroundPanel & MyButton

Java : BackgroundPanel & MyButton

Enjoy ;).

2 comments

    • Le tutoriel a surtout pour but de parler de l’apparence des boutons pour les interactions et bien comme d’habitude en Java, c’est-à-dire, tu ajoutes un listener sur ton bouton, en faisant implémenter ta classe de ActionListener. Ensuite, tu ajoutes une méthode actionPerformed. Je te laisse suivre cet exemple.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.