Les interfaces Graphiques
avec JAVA Swing
TP 02
Principes de base
• Des composants graphiques
(exemple: JFrame, JButton …)
• Hiérarchie de classes
• Des événements et les actions à effectuer
(exemple presser un bouton)
• (Et d'autres choses…)
Principes
• Définir les composants (instance de classes)
• Les placer à la main (layout Manager) dans un
JPanel ou un content pane ou en utilisant des
outils comme netbeans
• Définir les actions associées aux événements
(Listener) et les associer aux composants
graphiques
Principes
• Dans une interface graphique, le
programme réagit aux interactions avec
l'utilisateur
• Les interactions génèrent des événements
• Le programme est dirigé par les
événements (event-driven)
Evénements
• Chaque composant génère des événements:
– Presser un JButton génère un ActionEvent (système
d'interface graphique)
• Cet ActionEvent contient des infos (quel bouton, position de
la souris, modificateurs…)
– Un event listener (implémente ActionListener)
• définit une méthode actionPerformed
• S'enregistre auprès du bouton addActionListener
– Quand le bouton est "clické",l'actionPerformed sera
exécuté (avec l'ActionEvent comme paramètre)
Un exemple
• Un bouton qui réagit
Le code:
• Un JButton
• deux Jlabel, et 3 TextField
• Implementer ActionListener
– actionPerfomed définit ce qui se passe quand le
bouton est cliqué
Le code:
Le code:
Les objets graphiques
• 3 niveaux
– Haut niveau
• Définir une fenêtre
• JApplet, JDialog, JFrame, JWindow
– Niveau intermédiaire
• Pour composer la fenêtre
• JPanel, JScrollPane, JSplitPane, …
– Niveau inférieur
• Les éléments de base
• JButton, JCheckBox, JTextField, JTextArea, …
Insérer des éléments dans la fenêtre
• Composition d’une fenêtre JFrame
Jframe internal structure
Ajouter des composants dans une fenêtre
import [Link].*;
public class DisplayFrame {
public static void main (String[] args) { Haut niveau
JFrame f = new JFrame("FrameDemo");
Composante de
JLabel label = new JLabel("Hello World"); base
JPanel p = (JPanel)[Link]();
Niveau
[Link](label);
intermédiaire
[Link](300,200); //alternative: [Link]();
[Link](JFrame.EXIT_ON_CLOSE);
[Link](true);
}
}
Composer une fenêtre
• Créer une fenêtre (1)
• Créer un ou des composants intermédiaires (2)
– Pour JFrame, un JPanel est associé implicitement
(ContentPane)
• Créer des composants de base (3)
• Insérer (3) dans (2)
• Insérer (2) dans (1) (s’ils ne sont pas déjà associés)
• Afficher
Composant de base (pour obtenir
des données)
• JButton
• JCheckBox a toggled on/off button displaying state to user.
• JRadioButton a toggled on/off button displaying its state to user.
• JComboBox a drop-down list with optional editable text field.
The user can key in a value or select a value from drop-down list.
• Jlist allows a user to select one or more items from a list.
• Jmenu popup list of items from which the user can select.
• Jslider lets user select a value by sliding a knob.
• JTextField area for entering a single line of input.
Composants de base pour afficher
l’information
• Jlabel contains text string, an image, or both.
• JProgressBar communicates progress of some work.
• JToolTip describes purpose of another component.
• Jtree a component that displays hierarchical data in outline form.
• Jtable a component user to edit and display data in a two-
dimensional grid.
• JTextArea, JTextPane, JEditorPane
– define multi-line areas for displaying, entering, and editing text.
Swing components: Illustration
LayoutManager
• Chaque container est associé avec un LayoutManager.
• Spécifier un LayoutManager pour un Container (JPanel est
une sous classe de Container):
public LayoutManager getLayout();
public void setLayout (LayoutManager manager);
e.g.
JButton b = new JButton("Press");
JLabel label = new JLabel("Hello World");
JPanel p = new JPanel();
[Link](new BorderLayout());
[Link](label, [Link]);
[Link](b, [Link]);
Les Layout
• BorderLayout
• FlowLayout
• GridLayout
• CardLayout
• ….
BorderLayout
En 5 zones
BorderLayout .NORTH
BorderLayout .WEST BorderLayout .CENTER, BorderLayout .EAST
BorderLayout .SOUTH
FlowLayout
• comme ils viennent …
Grid Layout
En une table