(2) Plan Partie 1 : JFC et Swing  Partie II : Gestionnaires de mise en forme (Layout

Texte intégral

(1)JFC/Swing UBO/ISEN Ahcène Bounceur [email protected] 02 98 01 62 17 Bureau Lc 208 (département informatique, étage 2).

(2) Plan Partie 1 : JFC et Swing  Partie II : Gestionnaires de mise en forme (Layout)  Partie III : Gestion des événements .

(3) Partie 1. JFC ET SWING.

(4) JFC Java Foundation Classes (1997)  Ensemble d'éléments pour construire des interfaces (GUI, Graphical User Interfaces) .

(5) JFC AWT (Abstract Window Toolkit)  Swing  Java 2D, JAVA 3D  Drag and Drop  Accessibilité .

(6) C’est quoi Swing ? . Composant majeur de JFC. Collaboration SUN, Netscape, IBM, etc.  Les Swing sont utilisés pour faire des interfaces graphiques  Les Swing sont des composants (bouton, fenêtre, label, zone de texte, etc.)  Tous ces composants sont regroupés dans le package Swing  Les Swing sont des JavaBeans .

(7) C’est quoi Swing ? Séparé de AWT  Implémenté en AWT (pur Java) . . Indépendance de la plate-forme.. . "Look" paramétrable.

(8) Look & Feel . Les programmes qui utilisent Swing peuvent modifier leur présentation : ◦ Windows look and feel ◦ Java look and feel. ◦ CDE/Motif look and feel (sun).

(9) Exemple (suite : Look and Feel) . UIManager.getCrossPlatformLookAndFeelClassName() ◦ String du look-and-feel pouvant être utilisé avec la garantie de marcher (Java Look & Feel). . UIManager.getSystemLookAndFeelClassName() ◦ Spécifie le look and feel de la plateforme utilisée (Win32 pour windows, Mac OS pour mac, CDE/Motif pour sun).

(10) Exemple (suite : Look and Feel) . Liste des look and feel : ◦ "javax.swing.plaf.metal.MetalLookAndFeel" : Java. ◦ "com.sun.java.swing.plaf.windows.WindowsLookAn dFeel" : Windows. ◦ "com.sun.java.swing.plaf.motif.MotifLookAndFeel“ : Sun ◦ "javax.swing.plaf.mac.MacLookAndFeel" : Mac OS.

(11) Exemple (suite : Look and Feel) UIManager.setLookAndFeel ("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");.

(12) Exemple (suite) UIManager.getCrossPlatformLookAndFeelClassName(). com.sun.java.swing.plaf.windows.WindowsLookAndFeel. com.sun.java.swing.plaf.motif.MotifLookAndFeel.

(13) Swing Ré-implémentation de nombreux composants AWT  Composants AWT utilisables .

(14) Composants lourds et composants légers . Composants lourds (AWT) ◦ Dépendent du système ◦ Exemple : fenêtre du système. . Composants légers (SWING) ◦ Entièrement écrit en Java.

(15) Swing Les composants Swing (hiérarchie)  Des centaines de classes et d'interfaces.  Au sommet de la hiérarchie, la classe JComponent qui hérite de la classe java.awt.Container .

(16) Exemple.

(17) Exemple (suite) . 3 composants Swing ◦ JFrame (fenêtre principale) ◦ JPanel ◦ JButton.

(18) JFrame . Conteneur (Container) principal qui permet la visualisation des autres composants. . Autres conteneurs principaux : ◦ JDialog ◦ JApplet.

(19) JPanel . Conteneur intermédiaire dont le seul but est de simplifier le positionnement du bouton.. . Autres conteneurs intermédiaires: ◦ JScrollPane ◦ JTabbedPane.

(20) JButton . Composant (Component) atomique qui sert à présenter l'information à l'utilisateur. . Ne peut pas contenir d'autres composants Swing. . Autres composants : ◦ JComboBox ◦ JTextField ◦ JTable.

(21) Conteneurs . La hiérarchie JFrame. Content Pane. JPanel. JButton.

(22) Conteneurs . Un conteneur principal contient en fait un conteneur intermédiaire (Content Pane). . Entre le conteneur principal et le Content Pane, il y a encore d'autres éléments (sans utilité directe).

(23) Content Pane . Le "Content Pane" contient tous les composants visibles de l'interface.. . Exception : ◦ La barre de menu.

(24) Ajout d'un composant Un composant s’ajoute dans un conteneur  La méthode utilisée : add(args)  Args : plusieurs arguments dont un est obligatoire : le composant à ajouter .

(25) Ajout d'un composant . Exemple : ◦ add(bouton1, "identifiant") ◦ bouton1 : est une variable désignant un bouton JButton ◦ "identifiant" : un identifiant qui peut être utilisé par un layout par exemple. . Des arguments supplémentaires permettent de fournir des informations sur le placement..

(26) Exemple import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; public class Main { public static void main(String[] args) { JFrame jf = new JFrame("Ma fenetre"); JPanel jp = new JPanel(); JButton jb = new JButton("OK"); jp.add(jb); jf.getContentPane().add(jp); jf.pack(); jf.setVisible(true); } }.

(27) Exemple (suite) public class SwingApplication { public JComponent createComponents() { ... } public static void main(String[] args) { ... } }.

(28) Exemple (suite) private JComponent createComponents() { Jbutton bouton = new JButton("b1"); JPanel jp = new JPanel(); jp.add(bouton); return jp ; }.

(29) Exemple (suite) public static void main(String [] args) { JFrame frame = new JFrame("Mon Appli"); JComponent composants = createComponents(); Container conteneur = frame.getContentPane(); conteneur.add(composants);. }.

(30) Exemple (suite) public static void main(String [] args) { JFrame frame = new JFrame("Mon Appli"); JComponent composants = createComponents(); Container conteneur = frame.getContentPane(); conteneur.add(composants); frame.pack(); frame.setVisible(true); }.

(31) Exemple (explication).




(35) Classes.

(36) Swing (Top-Level) . JFrame, JDialog, JApplet. Applet JOptionPane.showMessageDialog (null, "message" , "Titre du message" , JOptionPane.TYPE_DU_MESSAGE);. JOptionPane.showMessageDialog(fenetre, "Le panneau est jaune");.

(37) Swing (Conteneur généraux) . Panel. . ScrollPane.

(38) Swing (Conteneur généraux) . SplitPane, TabbedPane, ToolBar.

(39) Swing (Conteneurs spéciaux) . InternalFrame, LayeredPane.

(40) Swing (Contrôles). Buttons, ComboBox, List.

(41) Swing (Contrôles). Menu, Slider, TextField.

(42) Swing (afficheurs non éditables). Label, ProgressBar. Propriété : toolTip Text.

(43) Swing (afficheurs éditables). Table, Text, Tree.

(44) Swing (afficheurs éditables) ColorChooser, FileChooser.

(45) Partie II : Les gestionnaires de mise en forme. SWING – LAYOUT.

(46) Exemple public static void main(String[] args) { JFrame jf = new JFrame("Layout Test"); JPanel jp = new JPanel(); JButton b1 = new JButton("Rouge"); JButton b2 = new JButton("Vert"); JButton b3 = new JButton("Bleu"); jp.add(b1); jp.add(b2); jp.add(b3); jf.getContentPane().add(jp); jf.pack(); jf.setVisible(true); }.

(47) Placement des composants . Java dispose d'un conteneur spécial, le panel destiné à regrouper des composants.. . Chaque panel peut utiliser un layout manager différent. . Un panel peut contenir d'autres panels.. 47.

(48) Layout manager . Dans un langage classique, un composant sera sans doute affiché dans le coin supérieur gauche de la fenêtre si aucun emplacement n'est précisé.. . En Java, le "layout manager" décide de la position de chaque composant.. 48.

(49) Philosophie des "layout managers" Les programmes doivent fonctionner sur tous les systèmes  La disposition doit être la même si les systèmes d'affichage diffèrent par leur taille, leur résolution, le nombre de couleurs, les ressources disponibles. . 49.

(50) Solution . Pas d'indication de positions. . A chaque type de disposition correspond un layout manager.. . Si la disposition désirée est particulière, on doit créer un nouveau layout manager.. 50.

(51) BorderLayout Division zone d'affichage en 5 zones  Paramètres . ◦ Zone (Nord, Sud, Est, Ouest, Centre)  Valeur par défaut : Centre. ◦ Espacement horizontal entre composants  Exemple : setHgap(8). ◦ Espacement vertical entre composants  Exemple : setVgap(15). 51.

(52) BorderLayout Constante symbolique Valeur. Emplacement correspondant. BorderLayout.NORTH. "North". En haut. BorderLayout.SOUTH. "South". En bas. BorderLayout.EAST. "East". A droite. BorderLayout.WEST. "West". A gauche. BorderLayout.CENTER. "Center". Au centre (valeur par défaut).

(53) Exemple d'utilisation de BorderLayout. 53.

(54) Exemple d'utilisation de BorderLayout public static void main(String[] args) { JFrame jf = new JFrame("Layout test"); JPanel jp = new JPanel(); JButton jb1 = new JButton("B1"); JButton jb2 = new JButton("B2"); JButton jb3 = new JButton("B3"); JButton jb4 = new JButton("B4"); JButton jb5 = new JButton("B5"); BorderLayout bl = new BorderLayout(20,5); jp.setLayout(bl); jp.add(jb1,BorderLayout.CENTER); jp.add(jb2,BorderLayout.NORTH); jp.add(jb3,BorderLayout.EAST); jp.add(jb4,BorderLayout.WEST); jp.add(jb5,BorderLayout.SOUTH); jf.getContentPane().add(jp); jf.setSize(400,200); jf.setVisible(true); } 54.

(55) FlowLayout Séquence horizontale  Paramètres . ◦ Alignement (Gauche, Droite et Centré)  Valeur par défaut : Gauche. ◦ Espacement horizontal entre composants  Exemple : setHgap(8). ◦ Espacement vertical entre composants  Exemple : setVgap(15). 55.

(56) FlowLayout Constante symbolique Valeur. Alignement. FlowLayout.LEFT. "Left". A gauche. FlowLayout.RIGHT. "Right". A droite. FlowLayout.CENTER. "Center". Centré.

(57) Exemple d'utilisation de FlowLayout.

(58) Exemple d'utilisation de FlowLayout public static void main(String[] args) { JFrame jf = new JFrame("Layout Test"); JPanel jp = new JPanel(); JButton b1 = new JButton("Rouge"); JButton b2 = new JButton("Vert"); JButton b3 = new JButton("Bleu"); FlowLayout fl = new FlowLayout(FlowLayout.CENTER,50,60); jp.setLayout(fl); jp.add(b1); jp.add(b2); jp.add(b3); jf.getContentPane().add(jp); jf.pack(); jf.setVisible(true); } 58.

(59) Exemple d'utilisation de FlowLayout public static void main(String[] args) { JFrame jf = new JFrame("Layout Test"); JPanel jp = new JPanel(); JButton b1 = new JButton("Rouge"); JButton b2 = new JButton("Vert"); JButton b3 = new JButton("Bleu"); FlowLayout fl = new FlowLayout(FlowLayout.CENTER,50,60); jp.setLayout(fl);. jp.setComponentOrientation(ComponentOrientation.RIGHT_TO_LEFT); jp.add(b1); jp.add(b2); jp.add(b3); jf.getContentPane().add(jp); jf.pack(); jf.setVisible(true); } 59.

(60) CardLayout Disposition en pile  Seul le premier composant supérieur est visible  Propriétés : ◦ Afficher le composant suivant : .  next(conteneur). ◦ Afficher le composant précédent :  previous(conteneur). ◦ Afficher le premier composant :  first (conteneur). ◦ Afficher le dernier composant :  last(conteneur). ◦ Affichage par identifiant :  show(conteneur, identifiant).

(61) Exemple d'utilisation de CardLayout Il y a 6 boutons mais on ne peut voir que le premier On peut demander de voir le 6ème.

(62) Exemple d'utilisation de CardLayout  .    .  . Création de 6 boutons (jb1, …, jb6) CardLayout cl = new CardLayout(40,60); jp = new JPanel(); jp.setLayout(cl); jp.add(jb1,"coucou1"); cl.next(jp); // On va voir le bouton 2 cl.last(jp); // On va voir le bouton 6 cl.show(jp,"coucou1"); // On va voir le bouton 1.

(63) GridLayout Disposition en tableau ou en grille régulière. Chaque cellule est occupée par une seule composant  Paramètres . ◦ ◦ ◦ ◦. Nombre de colonnes Nombre de lignes Espacement entre colonnes Espacement entre lignes. 63.

(64) Exemple d'utilisation de GridLayout GridLayout gl = new GridLayout(2,2,10,10);. GridLayout gl = new GridLayout(3,1,10,40);. 64.

(65) Exemple d'utilisation de GridLayout.

(66) BoxLayout . Semblable au GridLayout mais avec une seule dimension. . Un seul paramètre ; l'alignement (vertical ou horizontal). 66.

(67) GridBagLayout . Le GridbagLayout fonctionne comme un tableau dont les cellules peuvent être fusionnées.. . Remarque : assez difficile à manipuler. . Il faut utiliser un GridBagConstraints. 67.

(68) GridBagConstraints . gridx, gridy (indice de ligne et colonne). . gridwidth, gridheight ◦ Largeur et hauteur en nombre de cases. . weightx, weighty ◦ Largeur et hauteur en pixels. . fill (en cas de pb de débordement). . anchor (alignement). . ipadx, ipady. . insets 68.

(69) Exemple d'utilisation de GridBagLayout JFrame jf = new JFrame("Layout test"); Container c = jf.getContentPane();. GridBagLayout gbl = new GridBagLayout(); GridBagConstraints gbc = new GridBagConstraints(); c.setLayout(gbl); gbc.fill = GridBagConstraints.BOTH; JButton b1 = new JButton("B1"); JButton b2 = new JButton("B2"); JButton b3 = new JButton("B3"); JButton b4 = new JButton("B4");. JButton b5 = new JButton("B5"); JButton b6 = new JButton("B6"); JButton b7 = new JButton("B7");.

(70) Exemple d'utilisation de GridBagLayout gbc.gridx = 0; gbc.gridy = 0; gbc.gridwidth = 1; gbc.gridheight = 2; gbc.weightx = 200; gbc.weighty = 60; c.add(b1,gbc);.

(71) Exemple d'utilisation de GridBagLayout gbc.gridy=0 (indice) gbc.gridheight=2 (2 cases lignes). gbc.weightx=200 (200 pixels). indices gbc.weighty=60 60 pixels. 0. B2 B1 B3. 1 B7. 2. B4 B6 B5. 3 gbc.gridx=0 (indice) 0. 1. 2. indices. gbc.gridwidth=1 (1 case colonne) 71.

(72) Exemple d'utilisation de GridBagLayout gbc.weightx=60 (60 pixels). gbc.gridy= gbc.gridheight=. indices gbc.weighty=. 0. B2. 1. 2 3 0. gbc.gridx=. 1. 2. indices. gbc.gridwidth= 72.

(73) Autres layouts … . ScrollPanelLayout ◦ Composant pouvant défiler horizontalement et verticalement dans la surface d'affichage. . ViewportLayout ◦ Disposition d'un seul composant, aligné en bas de la surface disponible tant que celle-ci est inférieure à la taille du composant et en haut lorsqu'elle est supérieure.. . OverlayLayout ◦ Empilement des composants les uns au dessus des autres. . … 73.

(74) Résumé . Le résultat souhaité doit être exprimé à l'aide de 3 éléments: ◦ Séquence ◦ Tableau ◦ Bordures. 74.

(75) Exemple : tableaux imbriqués. 75.

(76) Exemple: tableaux imbriqués BorderLayout. Nord : JPanel (2). Centre : JPanel (1). GridLayout. JButton 1. JButton 2. 76.

(77) Utilisation de setBounds . setBounds(new Rectangle(…));. . Le layout manager se contente de disposer les éléments les uns à la suite des autres. Si un composant ne tient pas sur une ligne, il est mis sur la suivante.. . setBounds permet de dimensionner la fenêtre en fonction des composants. 77.

(78) Méthode getPreferredSize() . Chaque composant dispose de trois méthodes (getPreferredSize(), getMinimumSize(), getMaximumSize()) qui donnent les dimensions d'un composant.. . LayoutManager utilise ces méthodes pour faire la mise en page. . Ces méthodes peuvent aussi être utilisées pour calculer la taille d'une fenêtre. 78.

(79) Méthode pack . La méthode pack() permet de donner automatiquement à la fenêtre la taille "idéale".. 79.

(80) Rafraichissement d’un composant Méthode : updateUI()  Méthode : validate()  Méthode : revalidate() .

(81) Partie III. GESTION DES ÉVÉNEMENTS.

(82) Gestion des événements . Evénement chaque fois que l'utilisateur tape un caractère ou clique sur la souris. . L'événement est envoyé à un objet s'il implémente la bonne interface et s'est enregistré comme écouteur d'événements sur une source donnée. 82.

(83) Types d'écouteurs ActionListener (bouton, menu, zone de texte)  WindowListener (fermeture fenêtre)  MouseListener (clic souris)  MouseMotionListener (mouvement)  ComponentListener (visibilité)  KeyListener (clavier)  ListSelectionListener (sélection dans tables ou listes) . 83.

(84) WindowsListener et WindowAdapter . Problème de la fermeture d'une fenêtre. . WindowListener est une interface qui possède 7 méthodes.. . La classe WindowAdapter implémente l'interface WindowListener (méthodes vides).. . En étendant la classe WindowAdapter, il suffit de redéfinir la méthode utile. 84.

(85) WindowAdapter . Gestion de la fermeture de la fenêtre:. frame.addWindowListener( new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } } );. 85.

(86) Suite … . Cours Fenêtres et Applets !.

(87) ?.

(88)