Développement d’interfaces graphiques en Java à l’aide de Version 0.4 SWING Sommaire Introduction Rappel sur les JFC AWT Swing Première Application (TD1) Fenêtres, panneaux Fenêtres : JFrame, JDialog, JWindow Panneaux : JRootPane, J Panel, JMenuBar PremierJMenu (TD2) Les évènements PremierJMenu (TD2 – suite) + SecondJMenu +FocusEvent Rappel sur les JFC JFC = Java Foundation Classes. Ensemble de librairies Java permettant la constructions d’applications graphiques (GUI et graphiques) sous n’importe quel OS. Les 5 parties majeures des JFC : AWT – SWING – Accessibility - Java2D Internationalization Native Windows Look and Feel supported on Microsoft Windows only Native Mac Look and Feel "Aqua" implemented by Apple and supported on Mac only Java Look and Feel "Metal" supported on all platforms Motif Look and Feel (Solaris & Linux) supported on all platforms 1- Contexte D’abord… AWT : Abstract Windowing Toolkit. Première librairie fournie par SUN pour le développement d’interfaces graphiques. Eléments graphiques auront l’apparence que l’OS leur donne (utilisation ressources systèmes via abstractions) ! 1- Contexte Ensuite … SWING : utilise des éléments d’AWT. SWING peut être considérée comme une évolution d’AWT. Eléments graphiques dessinés par la librairie ellemême ! Composant graphique peut ne pas avoir d’équivalent système. Donc -> Portabilité accrue. SWING ne remplace pas AWT, c’est juste un couche au dessus. 2- TD n°1 Première application SWING Ordre des tâches à effectuer ; 1. Ecriture du code de la classe, 2. Compilation (javac.exe) et debugage (?), 3. Création du Manifest, 4. Création de l’archive auto exécutable (jar.exe), 5. Exécution de notre archive auto exécutable (java.exe) 2.1- Ecriture du code de la classe import javax.swing.*; public class PremiereApp { private static String texte = "Hello World!"; public static void main(String[ ] args) { JFrame maFenetre = new JFrame( "ma première fenêtre SWING"); maFenetre.setSize(250,80); JLabel monLabel = new JLabel(texte, SwingConstants.LEFT); maFenetre.getContentPane().add(monLabel); maFenetre.show(); maFenetre.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } } 2.2- Compilation (javac.exe) et debugage Sous Eclipse ou autre Framework -> automatique. En ligne de commande -> positionnez vous dans le répertoire qui contient votre classe java, puis : "/pathtojavac.exe/javac" MaClass.java 2.3 - Création du Manifest Manifest -> Qu'est ce que c'est ? C'est un fichier qui spécifie la classe "exécutable". Celle qui contient la méthode ??? public static void main (String[ ] args){ … } 2.3 - Création du Manifest Créez un fichier Manifest.mf. Contenu : Main-Class: MaClass Attention : - Pas d'espace entre "Main-Class" et ":", - un espace entre ":" et "MaClass", - (au moins) un retour à la ligne à la fin de cette ligne ! 2.4 - Création de l’archive auto exécutable (jar.exe) Sous Eclipse ou autre Framework -> automatique. En ligne de commande -> positionnez vous dans le répertoire qui contient votre classe java, puis : "/pathtojarexe/jar" -cmf Manifest.mf NomduJar.jar MaClass1.class MaClass2.class Pour notre exemple : "/pathtojar.exe/jar" -cmf Manifest.mf PremiereApp.jar PremiereApp.class Sur moka : U:/pathtojar.exe/> "C:\Program Files\java\j2sdk1.4.1_02\bin\jar" -cmf manifest.mf PremiereApp.jar PremiereApp.class 2.5- Exécution de notre archive auto exécutable (java.exe) En mode "fenêtre" : double clic sur l'archive auto exécutable "MonArchive.jar". En mode console : "/pathtojava.exe/java" -jar MonArchive.jar 2.6- Listing du contenu d'un jar En mode console : jar –tvf MonArchive.jar 3 – Fenêtres, panneaux et bordures 3.1- FENETRES En SWING : JFrame, JDialog (fenêtres secondaires modales), JWindow (Splash screen). 3.1.1- JFrame - Architecture JFrame JRootPane glassPane (1 Jpannel par défaut) layeredPane ( JLayeredPane) contentPane (1 JPannel par défaut) menuBar (Null JmenuBar par défaut) 3.1.1- JFrame - Architecture menuBar glassPane layeredPane contentPane 3.2 – Les panneaux Conteneurs JRootPane. glassPane (attrape événements). layeredPane (conteneur de fenêtres filles), contentPane (JPanel par défaut). menuBar (null par défaut). JPanel : conteneur de composant(s), leur organisation dépend d'un "layour manager". JMenuBar : "null", sinon unique par JFrame. JLayeredPanel : construction de fenêtres fille (MDI) 3- TD n°2 Premier JMenu Créer la fenêtre suivante (l'affichage seulement, les évènements seront ajoutés après). 3.2.5- La gestion des évènements Evènement : action de l'utilisateur (en règle générale), clic sur un bouton; sélection, simple déplacement souris. Exemples de classes d’évènements : FocusEvent : Passage du focus à un composant MouseEvent : Clic sur un JPanel ActionEvent : Clic sur un JButton DocumentEvent : Ajout d’une lettre à un JTextField Objet évènement contient des informations sur son contexte d'apparition(coordonnée, source, valeur d'une touche). 3.2.5- La gestion des évènements Classe java.util.EventObject : Superclasse de tous les évènements. Exemple de classe d'évènements : ActionEvent -> clic sur un composant, ComponentEvent -> modification d'un composant ContainerEvent -> composant ajouté à un conteneur FocusEvent KeyEvent MouseEvent 3.2.5- La gestion des évènements Listener : objet java à l'écoute d'un évènement sur un composant déterminé. -info sur lui-même, -sur l'objet à son origine (source). Abonnement addActionListener, addKeyListener, addFocusListener Listener Bouton Notification 3.2.5- La gestion des évènements Listener = classe qui implémente une des interfaces de Méthodes à redéfinir (cf. cours) Exemple : java.awt.Event (à importer). public class PremierMenu extends JFrame implements ActionListener { public void actionPerformed(ActionEvent e) { … } } TD n°2 Premier JMenu (suite) Ajout des évènements TD Second Menu TD FocusEvent TD FocusEvent aide Construction d'une classe implémentant l'interface "listener " gérant les focus. Redéfinir les méthodes nécessaires. Créer un constructeur qui initalise deux couleurs. Construction d'une classe étendant JFrame. Celle-ci doit contenir 3 javax.swing.JButton JFrame.getContentPane(Object, BorderLayout.North) Color JFrame.setBackground() / getBackground() java.awt.Color -> Color.GREEN TD KeyEvent But : Coder la JFrame suivante : Comportement : A chaque pression d'une touche, le caractère correspondant est ajouter à la barre de titre. Attention : bien différencier "getKeyChar()" et getKeyCode() TD KeyEvent aide Définir une classe étendant JFrame avec un simple JLabel dont vous déterminer une bordure de votre choix (utilisez la méthode setBorder()) de la façon la plus "rapide" possible (cf. cours). Définir une classe étendant le Listener de votre choix, dans laquelle vous définirez la construction d'une barre de menus et les évènements associés aux clic sur chacun de ses MenuItems 3.3- Les bordures Bordures SWING prédéfinies : BevelBorder : Bordure 3D (élevée / abaissée) TitledBorder : Bordure avec titre. EtchedBorder : Bordure à l’apparence gravée. CompoundBorder : Combinaison de bordures interne et externe. EmptyBorder : Bordure transparente délimitant des espaces vides. LineBorder : Bordure aplatie. MatteBorder : Bordure pleine (couleur) ou en mosaïque (images). SoftBevelBorder : Bordure 3D avec côtés arrondis. BorderFactory 3.3- Les bordures TD3 PremiereBordure 3.3- Les bordures Possibilité de développer ses propres éléments graphiques dont les bordures font partie ! Une façon de faire : Commencez par définir la classe implémentant Border. Attention, 3 methodes à redéfinir : public Insets getBorderInsets(Component c) { } public boolean isBorderOpaque() { return true; } public void paintBorder(Component c, Graphics g, int x, int y, int w, int h) { } : méthode qui affiche la bordure avec la taille et la position spécifiées. Utiliser les méthodes adéquates de g (ex: setColor(), drawLine(), drawArc()). Ensuite définissez une JFrame. Appliquer votre bordure par l'intermédiaire d'un objet de CompoundBorder: CompoundBorder Mabord = new CompoundBorder(new EmptyBorder(10,10,10,10), new BordurePerso (10,10,Color.X,Color.Y)); 3.3- Les bordures TD3 BordurePersonnalisee 4 – Libellés et boutons 4.1 - JLabel Label contenant du texte : alignement à gauche Label contenant une image : alignement au centre Possibilité de spécifier son alignement personnel : setVertical[Text]Alignement(int alignement) setHorizontal[Text]Alignement(int alignement) - SwingConstants.LEFT - SwingConstants.CENTER - SwingConstants.RIGHT - SwingConstants.TOP - SwingConstants.BOTTOM 4 – Libellés et boutons 4.2 - Bouton classe javax.swing.AbstractButton boutons poussoirs(JButton), boutons bascule (JToggleButton), cases à cocher (JCheckBox), boutons radio (JRadioButton), mais aussi les élements de menu (JMenuItem) et les menus eux-mêmes (JMenu) 4.2 - Bouton 4.2.1 - boutons poussoirs(JButton) : Texte, image (neutre, survol, clic), raccourci vers le bouton (setMnemomic(char)-> Alt+"char") JRootPane.setDefaultbutton(Button) -> focus 4.2 - Bouton 4.2.2 - boutons bascule (JToggleButton): javax.swing.JToggleButton JCheckBox et JRadioButton -> principe d'exclusion mutuelle. ButtonGroup.add( Button ) TD 4 - Boutons Bascules et ActionListeners 1 JButton 3 JToggleButton 1 ButtonGroup 1 JLabel 1JPanel les contenant tous (FlowLayout par défaut) 4 – Layouts Définition : Lorsqu'un "container" contient plusieurs composants, un layout est implémenté afin de gérer correctement le positionnement de chacun d'eux. Composant.size() != Composant.preferredSize() Liste : FlowLayout GridLayout BoxLayout BorderLayout GridBagLayout 4 – Layouts 5.1.1 classe java.awt.FlowLayout Les composants sont placés : les uns à côté des autres de gauche à droite sur une seule ligne tant que c'est possible ajout de ligne si nécessaire impossible de connaître la ligne du composant à l'avance Layout par défaut des JPanel (sauf le JRootPane -> BorderLayout) FlowLayout.LEFT, FlowLayout.RIGHT, FlowLayout.CENTER 4 – Layouts 5.1.2 classe java.awt.GridLayout import java.awt.*; import java.applet.Applet; public class ButtonGrid extends Applet { public void init() { setLayout(new GridLayout(3,2)); add(new Button("1")); add(new Button("2")); add(new Button("3")); add(new Button("4")); add(new Button("5")); add(new Button("6")); } } Applique la .preferredSize() -> réajustement non souhaité ? 4 – Layouts 5.1.3 java.swing.BoxLayout C'est un FlowLayout qui peut être soit horizontal soit vertical, en fonction des paramètres donnés au constructeur : BoxLayout(Container target, int axis) Composant affichés selon leur "preferredSize" et ne sont pas redimensionnés ! 4 – Layouts 5.1.3 java.swing.BoxLayout java.swing.Box Structures solides : espace fixe entre 2 composants Box. createHorizontalStrut(int width) Box. createVerticalStrut(int height) Glues : composants qui occupe le + d'espace possible horizontalement ou verticalement. Box. createHorizontalGlue() Box. createVerticalGlue() Zones rigides : composant invisible de taille fixe Box. createRigidArea(Dimension d) 4 – Layouts 5.1.4 java.swing.BorderLayout Stratégie de positionnement en 5 cases : Zone centrale Z. Nord et Sud Z. Est et Ouest -> max H et max V -> max H et min V -> min H et max V NORD (NORTH) OUEST (WEST) CENTRE (CENTER) SUD (SOUTH) EST (EAST) TD 5 - TD5 Layouts les plus courants 6 – Combo Box 6.1 java.swing.JComboBox JComboBox = JList + bouton Exemple : ComboBox de base à partir d’un vecteur 6.1.1 TD6 ComboBox pour choix de films (cf. cours) 6 – Combo Box 6.1.2.1 Les Renderers Objet simple permettant de dessiner des composants complexes Exemple : ComboBox (chaque ligne = 1 JLabel) Combo Box Comment dois je dessiner la ligne ? ( envoi de l’objet ) Objet Renderer JLabel Renvoie le composant graphique entièrement paramétré 6 – Combo Box 6.1.2.1 Les Renderers Interface Interface Interface ListCellRenderer TableCellRenderer TreeCellRenderer DefaultListCellRenderer DefaultTableCellRenderer DefaultTreeCellRenderer 6.1.2 TD6 ComboBox personnalisée (cf. cours) 6 – Combo Box 6.1.2 TD6 ComboBox personnalisée (cf. cours) JComboBox cb1=new JComboBox(images); MonRenderer renderer=new MonRenderer(); cb1.setRenderer(renderer); 6 – Combo Box 6.1.2 TD6 ComboBox personnalisée (cf. cours) API (http://www.labo-java.com/Javadoc/api/javax/swing/ListCellRenderer.html): class MyCellRenderer extends JLabel implements ListCellRenderer { public MyCellRenderer() { setOpaque(true); } public Component getListCellRendererComponent( JList list, Object value, int index, boolean isSelected, boolean cellHasFocus) { setText(value.toString()); setBackground(isSelected ? Color.red : Color.white); setForeground(isSelected ? Color.white : Color.black); } } // Ajouter ici le nécessaire // pour obtenir l’affichage // ci-contre : return this; 7 - JList Utilisation Permet d’afficher une liste d’éléments Modèles de sélections Types de sélections Utilisation de Renderer possible Contraintes d’utilisation : Liste d’objets (Object[], Vector, ListModel) Les objets doivent redéfinir toString() 7 - JList Quelques fonctions disponibles (sélections) setSelectionMode(int) SINGLE_SELECTION SINGLE_INTERVAL_SELECTION MULTIPLE_INTERVAL_SELECTION getSelectedIndices() getSelectedValue[s]() get[Min/Max]SelectionIndex() addListSelectionListener(ListSelectionListener) 7 - JList TD 9 TD 10