Le graphisme

Le graphisme
Utilisation de Swing et Awt
Swing
• Swing : bibliothèque assez complète sur le graphisme
• Toutes les applications ont le même « look » quel que soit le
système d'exploitation (Windows, Linux, …)
• Inconvénient : Swing est un peu lent
• Inconvénient : Swing est (un peu) complexe à manipuler
Conteneurs et composants
Deux types de éléments dans l'IG proposé par défaut
● les composants (comme les boutons, les champs textuels,…)
● les conteneurs (principalement les cadres Frame et les
panneaux Panel) qui sont utilisés pour y positionner des
composants.
● Un conteneur peut contenir d'autres conteneurs
Exemple
• il y a dans l'exemple ci-dessus trois conteneurs (une Frame et
deux Panel)
• La Frame contient deux Panel
• Il y a 5 composants (deux dans le premier Panel, trois dans le
second)
Fenêtre / Frame
• La Frame est l'objet le plus classique
– La Frame est en général la fenêtre principale
– possède une barre de titres
– un icône
– des boutons de réduction – maximisation - agrandissement
Fenêtre (conteneur de base)
• Peuvent être créées en utilisant un objet JFrame ou en
héritant de JFrame
• La classe JFrame dispose de nombreuses méthodes
permettant de créer et modifier les attributs des fenêtres
• Un objet JFrame est invisible par défaut. Il faut appeler la
méthode setVisible(true)
• La hauteur et la largeur sont précisées en pixels
• Quelques attributs des JFrame
– titre
– hauteur
– largeur
La classe MaFrame
import javax.swing.JFrame;
public class MaFrame {
public
public
public
public
static
static
static
static
final
final
final
final
int
int
int
int
HAUTEUR = 800;
LARGEUR = 600;
POSITION_X = 50;
POSITION_Y = 100;
public MaFrame(){
d'où viennent
ces méthodes
JFrame maFrame = new JFrame();
maFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
maFrame.setLocation(POSITION_X, POSITION_Y);
maFrame.setSize(LARGEUR, HAUTEUR);
?maFrame.setResizable(false);
maFrame.setTitle("année 2015 2016");
maFrame.setVisible(true);
}
public static void main(String [] args){
Dimension tailleEcran = Toolkit.getDefaultToolkit().getScreenSize();
System.out.println("Hauteur de l'écran en pixels :" + tailleEcran.height);
System.out.println("Largeur de l'écran en pixels :" + tailleEcran.width);
MaFrame test = new MaFrame();
}
}
La méthode main
public static void main(String [] args){
MaFrame test = new MaFrame();
}
La méthode
setDefaultCloseOperation
• Indique à Java quoi faire quand l'utilisateur clique sur la croix
en haut à droite de la fenêtre
• JFrame.EXIT_ON_CLOSE le programme se termine
• JFrame.DISPOSE_ON_CLOSE la fenêtre se ferme mais le
programme continue
• JFrame_HIDE_ON_CLOSE la fenêtre est cachée mais peut
peut redevenir visible avec la méthode setVisible(true)
• JFrame_DO_NOTHING_ON_CLOSE la fenêtre ne se ferme
pas et le programme continue
Architecture de l'écran
Méthodes de JFrame
• setLocation(x,y) : indique la position en haut à gauche de la
fenêtre
• setSize(largeur,hauteur) : indique la taille de la fenêtre en
pixels
• setResizable(false) : indique que la fenêtre n'est pas
redimensionnable
• Comment déterminer la taille de l'écran ?
Dimension tailleEcran = Toolkit.getDefaultToolkit().getScreenSize();
System.out.println("Hauteur de l'écran en pixels :" + tailleEcran.height);
System.out.println("Largeur de l'écran en pixels :" + tailleEcran.width);
Comment écrire/dessiner
dans la fenêtre
• On instancie un objet qui hérite de la classe JPanel
• La classe MonPanel hérite de la classe JPanel
– toutes les méthodes de JPanel sont donc disponibles
dans notre classe MonPanel
– MonPanel est une classe JPanel spécialisée
• On ajoute l'objet à la fenêtre (au JFrame)
• JPanel a une méthode intéressante :
– void paintComponent(Graphics g)
– cette méthode est exécutée à chaque fois que le JPanel a besoin d'être
(ré)-affiché
• Un objet JPanel a les propriétés suivantes :
– on peut dessiner à l'intérieur
– c'est un conteneur : on peut y ajouter d'autres objets graphiques
(boutons, ascenseurs, labels, ...)
Comment ajouter un
JPanel
• On crée un classe qui hérite de JPanel et on l'ajoute à la
JFrame par la méthode add
• Pour le moment, on n'ajoute qu'un JPanel, en ajouter plusieurs
est un peu plus complexe
public MaFrame(){
maFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
maFrame.setLocation(POSITION_X, POSITION_Y);
maFrame.setSize(LARGEUR, HAUTEUR);
maFrame.setResizable(false);
MonPanel panel = new MonPanel();
maFrame.add(panel);
m
é
t
h
o
de h
é
r
i
t
é
e de
J
F
r
ame
}
Exemple rajouter un JPanel
La méthode add ou setContentPane de Jframe permet d'ajouter
un conteneur
public MaFrame(){
maFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
maFrame.setLocation(POSITION_X, POSITION_Y);
maFrame.setSize(LARGEUR, HAUTEUR);
maFrame.setResizable(true);
maFrame.setTitle("année 2015 2016");
MonPanel2 p2 = new MonPanel2();
maFrame.setContentPane(p2);
}
JPanel (suite)
• Le JPanel est un conteneur
• Il peut contenir d'autres objets
– Du texte
– Des boutons
– Des boîtes de dialogue
– Des images
• Nous allons rajouter du texte (JLabel)
Exemple
import javax.swing.JPanel;
import javax.swing.JLabel;
public class MonPanel2 extends JPanel {
public MonPanel2(){
JLabel label1 = new JLabel("premier texte");
add(label1);
JLabel label2 = new JLabel("second texte");
add(label2);
}
}
Ajouter un bouton dans le
JPanel
• Classe JButton
• https://docs.oracle.com/javase/7/docs/api/javax/swing/JButton.
html
• Comme toutes les classes de Swing, il y a de nombreux
constructeurs différents
Affichage
JButton bouton =
new JButton("un bouton");
add(bouton);
Un champ de saisie de
texte
• Classe JTextField
• Comme tous les objets, un objet JTextField se rajoutent dans
un container comme un JPanel
Comment agencer tout ça ?
• Par défaut, tous les éléments que l'on place dans le JPanel
sont placés les uns à côté des autres
• Java propose 6 gestionnaires de placement et il est possible
de créer le sien (LayoutManager)
– FlowLayout gestionnaire par défaut (les uns à côté des autres)
– BorderLayout : conteneur divisé en 5 zones: nord, sud, est, ouest, centre
– GridLayout : grille virtuelle
– BoxLayout : les uns à côté des autres (X_AXIS) ou les uns au-dessus
des autres (Y_AXIS)
– CardLayout : superpose les objets les uns au-dessus des autres
– GridBagLayout : positionnement sous forme de grille où les cellules
peuvent être configurées par l'utilisateur
Exemple
import javax.swing.JPanel;
import javax.swing.JLabel;
import javax.swing.JButton;
import javax.swing.JTextField;
import java.awt.GridLayout;
public class GridLayoutExemple extends JPanel {
public GridLayoutExemple(){
setLayout(new GridLayout(3,2));
JLabel label1 = new JLabel("premier texte");
add(label1);
JLabel label2 = new JLabel("second texte");
add(label2);
JButton bouton = new JButton("un bouton");
add(bouton);
JTextField texte = new JTextField("test ");
add(texte);
}
}
Méthode paintComponent
• Définie dans la classe JPanel
• Cette méthode est appelée automatiquement à chaque fois
que la fenêtre a besoin d’être ré-affichée
• La méthode peut être explicitement appelée par la méthode
repaint()
• On n’appelle jamais la méthode paintComponent() directement
JPanel - paintComponent
• C'est par la surcharge de la méthode paintComponent de
JPanel que l'on va pouvoir faire des dessins
• Chaque JPanel permet d’accéder à un objet de type Graphics
qu’il contient. C’est cet objet qui permet de manipuler le
graphisme au sein d’un composant
• Comme pour la JFrame, chaque JPanel contient son propre
système de coordonnées
import javax.swing.JPanel;
import java.awt.Graphics;
public class MonPanel extends JPanel {
appel de la méthode
drawRect qui dessine
des rectangles !
public void paintComponent(Graphics g){
g.drawRect(10,10,200,200);
}
}
Document
Dessiner par exemple un
rectangle
import javax.swing.JPanel;
import java.awt.Graphics;
import java.awt.Color;
public class MonPanel extends JPanel {
public void paintComponent(Graphics g){
g.drawRect(10,10,200,200);
}
}
Bonne pratique d’utilisation
de paintComponent()
• Les programmeurs débutants mettent en général de
nombreuses instructions dans la méthode paintComponent()
• Ce n’est pas l’approche correcte
• Le résultat est que chaque fois que la fenêtre est ré-affichée
ce code est ré-exécuté
• Une meilleure approche est d’utiliser la méthode
paintComponent() pour réaliser juste l’affichage
• Les calculs sont effectués ailleurs
Écrire sur écran – Les
fontes
• Il est possible de créer un objet Font et de l’utiliser pour
afficher du texte
• Font maFonte = new Font("SansSerif",Font.Bold,40) ; spécifie
le nom de la fonte, le style et la taille
• Les fontes toujours présentes :
– SansSerif
– Serif
– Monospaces
– Dialog
– DialogInput
import
import
import
import
import
import
javax.swing.JPanel;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.geom.Rectangle2D;
java.awt.Color;
java.awt.Font;
public class MonPanel extends JPanel {
Font maFonte = new Font("SansSerif",Font.BOLD,40);
public void paintComponent(Graphics g){
g.drawRect(10,10,200,200);
g.setFont(maFonte);
g.drawString("Ce cours de Java",20,60);
g.drawString("est excellent",20,100);
}
méthode drawString de la classe Graphics
Quelques infos utiles
• Obtenir toutes les fontes disponibles :
– String[] fontNames =
GraphicsEnvironment.getLocalGraphicsEnvironment().getAvailableFontF
amilyNames();
• Obtenir la taille du JPanel
– méthodes getWidth() (largeur) et getHeight() (hauteur)
–
Et les couleurs ?
• La classe Color permet de travailler avec les couleurs
•
g.setColor(new Color(20,30,40)); positionne les couleurs
rouge, verte et bleue sur une échelle de 0 à 255
• on peut aussi utiliser g.setColor(Color.RED) ;
• La méthode setColor change la couleur du pinceau
•
D'autres moyens
• Utilisation d'outils dédiés comme WindowsBuilder
• C'est un plugin d'eclipse
Code généré
/**
* Create the application.
*/
public WindowsTest() {
initialize();
}
/**
* Initialize the contents of the frame.
*/
private void initialize() {
frame = new JFrame();
frame.setBounds(100, 100, 450, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JTabbedPane tabbedPane = new JTabbedPane(JTabbedPane.TOP);
frame.getContentPane().add(tabbedPane, BorderLayout.NORTH);
JPanel panel = new JPanel();
tabbedPane.addTab("New tab", null, panel, null);
JPanel panel_1 = new JPanel();
tabbedPane.addTab("New tab", null, panel_1, null);
}
}
Résumé
• Créer une JFrame
• Créer un ou plusieurs JPanel
• Créer éventuellement un gestionnaire de positionnement
(layout)
– mettre le ou les JPanel dans la JFrame
– rajouter des widgets (boutons, ascenseurs,….)
– si vous voulez dessiner sur l'écran
• surcharger la méthode paintComponent()