Prog IHM - Cours 1

Développement interfaces utilisateurs en Java

V. DESLANDRES, I. GUIDARA

[email protected]
Avril 2020
 Sommaire de ce cours

• Présentation du module 3
• Introduction : interfaces utilisateurs 5
• Swing : Composants, Conteneurs 13
• Créer une fenêtre 21

Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Organisation du cours

• Volume Horaire: 28h

• 7 séances de cours + TP

• Modalités d’évaluation (cours à distance, COVID-19):

- Note de TP (moyenne des 4 TP, 70%)
- DM final sur les concepts vus en TPs (30%)
- Bonus/malus sur l’implication (fréquence / pertinence des interactions, 2 pts)

• Contenu:
- Bases d’IHM, Interface utilisateur, Gestion événementielle
- Lien avec les BD (JDBC)

3 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Programme du Module

• Introduction sur les interfaces utilisateurs

• Bases de l’API Swing : Conteneurs, Composants
• Création des interfaces
• Gestionnaire de dispositions, mise en page :
– layout
• Gestion des événements
• Focus spécifiques :
– Présentation table (JTable), fenêtres de
dialogue
– JDBC : API liens avec les bases de données

4 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Introduction : les interfaces utilisateur
(IHM, GUI)

5 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Principes de base

• Interface Console
– C’est le programme qui pilote l’utilisateur, en le sollicitant quand
nécessaire pour qu’il fournisse des données
è Dialogue en mode texte et séquentiel
dans une fenêtre appelée « Console »
• Interface graphique (GUI – Graphical User Interface)
– L’utilisateur pilote le programme, qui réagit à ses demandes
(sélection d’articles, d’item de menu, clic bouton,…)

– Chaque action de l’user

= événement
– Programmation
« évenementielle »

Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Fondamentaux de l’IHM

• L’interface visible d’une application est

constituée de 2 éléments :

(1) Les conteneurs :

Contiennent des objets
graphiques qui peuvent être
des composants ou d’autres
conteneurs

(2) Les composants atomiques : boutons, cases

à cocher, zone de texte, slider, etc.
Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA
 Généralités

• Une interface utilisateur se compose de :

– Une fenêtre de travail
– Une zone où afficher les composants graphiques dans cette
fenêtre de travail :
• Un panneau (Panel)
– Des composants à insérer dans cette fenêtre
• Boutons, cases à cocher, menus, barre de tâches,…
– Une mise en page des composants
• Le Layout: mis bout à bout, centrés, en tableau,…
– La représentation graphique des composants
• Couleur, forme, image,…
– Des gestionnaires d’évènements
• Répondre aux actions de l’utilisateur

8 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Java propose

• Des composants graphiques

– Widgets
• Des classes de gestion de la position des composants
sur la fenêtre
– LayoutManager
• Des éléments de représentation graphique
– Color, Font, Graphics, Point, Rectangle,
Image, Icon...
• Des mécanismes de gestion d'événements
– java.awt.events

9 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 AWT, SWING

• Première bibliothèque graphique JAVA: AWT

– Package: java.awt
– Utilisation du code qui dépend du système d’exploitation
– Une gestion des événements
– Composants limités

• Nouvelle bibliothèque graphique JAVA: SWING

– Package: javax.swing
– Plus riche et plus personnalisable
– Construite sur AWT, fournit des composants plus performants

10 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Arborescence des packages AWT/SWING
• Hiérarchie d’héritage des principaux éléments des interfaces
graphiques en Java
java.lang.Object

java.awt.Component Composants
graphiques

java.awt.Container Conteneurs
Fenêtre simple sans titre

Panneaux java.awt.Panel java.awt.Window javax.swing.JComponent

Fenêtres de dialogue java.awt.Dialog java.awt.Frame Fenêtres cadres

11 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA
 Arborescence des packages SWING

javax.swing.JComponent

JPanel JWindow JTabbedPane JScrollPane

Fenêtre avec Fenêtre avec
onglets ascenseur
JDialog JFrame
Fenêtre de
base
JFileDialog
Fenêtre de
dialogue

12 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Bases de Swing Composants, Conteneurs

13 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Composants graphiques (SWING)

• Les widgets • Les containers

– JLabel – JWindow
– JButton • JFrame
– JToggleButton • JDialog
– JCheckbox – JFileDialog
– JRadioButton – JPanel
– ButtonGroup • Applet
– JComboBox – JTabbedPane
– JList – JScrollPane
– JTextField
– JTextArea
– JScrollBar
– JMenuBar
– JPopupMenu

14 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Composants graphiques (SWING)

JButton

JSlider

JTree

JComboBox

JTextField

JProgressBar

15 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Composants graphiques (SWING)

16 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Composants Texte de la Swing

JComponent

JTextField

JTextField numTel = new JTextField("",10);

JTextArea
JTextArea commentaire=new JTextArea("Enter more text to see scrollbars", 10, 10);

17 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 JLabel et JButton

JLabel JLabel texte=new JLabel("Texte");

JButton JButton bouton=new JButton("OK");

JCheckBox
JCheckBox box1=new JCheckBox("BOX1", true);
JCheckBox box2=new JCheckBox("BOX2");

JRadioButton pour cocher un élément par défaut (facultatif)

JRadioButton radio1=new JRadioButton("Radio1", true);

JRadioButton radio2=new JRadioButton("Radio2");
ButtonGroup groupRadio=new ButtonGroup();
groupRadio.add(radio1);
groupRadio.add(radio2); Groupe : pour gérer choix exclusif (facultatif)

18 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Différentes catégories de composants (1/2)

JLabel, JButton, JCheckBox,

JRadioButton, JToggleButton,
Composants JComboBox, JScrollBar,
atomiques JSeparator, JSlider, JSpinner,
JProgressBar

JTable, JTree, JList,

Composants
JFileChooser, JColorChooser,
complexes JOptionPane
JTextField, JFormattedTextField,
Composants JPasswordField, JTextArea,
textuels JTextPane, JEditorPane

19 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Différentes catégories de composants (2/2)

JMenuBar, JMenu, JPopupMenu,

Composants de JMenuItem, JCheckboxMenuItem,
menus JRadioButtonMenuItem

JPanel, JScrollPane, JSplitPane,

Composants JTabbedPane, JDesktopPane,
Conteneurs JToolBar

Composants JFrame, JDialog, JWindow,

JInternalFrame, JApplet
de haut niveau

20 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

Création d’une fenêtre

21
 Création + appel dans le main

à Fenêtre non redimensionnable

à Quitter qd on ferme la fenêtre

Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Création + appel dans le main

Adapter la taille de la fenêtre à

ses composants

Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Création + appel dans le main

du
Écriture IDE
r l’
main pa

Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Création de fenêtre
setDefaultCloseOperation() de JFrame

JFrame.EXIT_ON_CLOSE
— quitte l’application

JFrame.HIDE_ON_CLOSE (choix par défaut)

— Cache la fenêtre sans quitter l’application
— Quand on a plusieurs fenêtres, on peut souhaiter fermer une
fenêtre et continuer l’application

JFrame.DISPOSE_ON_CLOSE
— Rend la main à une fenêtre parent tout en fermant la fenêtre
courante

JFrame.DO_NOTHING_ON_CLOSE
— Ignore la demande de fermeture

25 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Construction en couches
Panneau racine Frame Panneau couche
(root pane) (layered pane)
un seul dans chaque conteneur permettant
conteneur racine, il de positionner la
contient les autres barre de menu et le
éléments panneau contenu

Barre de menu
Panneau contenu
(menu bar)
(content pane)
optionnelle, contient
conteneur pour les les différents menus
composants visibles de commandes
Panneau vitre
(glass pane)
caché, il permet d'intercepter
les différents événements de
la fenêtre
26 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA
 ContentPane

• Les JRootPane, le JLayeredPane et le GlassPane sont utilisés par Swing pour

implémenter le look and feel
– n'ont donc pas à être considérés dans un 1er temps par le développeur

• Le niveau qui nous intéresse pour déposer un composant sur une fenêtre
JFrame est le ContentPane
– C’est lui qui contient les composants (boutons et autres widgets)
– C’est une instance de la classe Container

27 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 Accès par niveau

Par exemple pour ajouter un bouton sur une fenêtre Frame :

maFrame.getContentPane().add(new JButton("OK"));

28 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA

 La fenêtre java.swing.JFrame

• Construire une IHM, c’est mettre des composants les uns à

l’intérieur des autres, dans le bon ordre
• Dans cet arbre d’instanciation, la flèche signifie « contient » :
Fenêtre principale
texte
contCouleurs aireDessin contButt contLigne

btNoir btTrait btText

btRouge btCancel btOk btRect
cancel OK
btVert btElips

(analogie : arborescence de fichiers et de répertoires)

29 Cours Java Avancé – IUT LYON1 DESLANDRES GUIDARA