La programmation avance avec JAVA Mohamedade FAROUK m

La programmation avancée avec JAVA Mohamedade FAROUK m. farouk@syskat. com 1

Systèmes de fenêtrage Structurer l’espace d’affichage Partager la ressource écran Gestionnaire de fenêtres ◦ interface utilisateur ◦ système de fenêtrage Fenêtre = zone autonome ◦ pour l’affichage ◦ pour les entrées 2

Système de fenêtrage Accès partagé à l'écran Subdivision de l'écran en fenêtres Chaque fenêtre est positionnée (x, y, z) et dimensionnée (largeur x hauteur) Modèle graphique d'affichage Modèle d'événements Communication entre les applications Gestion de ressources spécifiques 3

Modèles de fenêtrage Sans superposition Avec superposition Hiérarchique 4

Les API graphiques Dans une fenêtre, une application dessine en utilisant des fonctions qui prennent des paramètres 2 catégories en 2 D ◦ orientée pixel ◦ orientée "dimension réelle", ou "indépendante de la résolution" Richesse variable suivant les plate formes 5

La gestion de l'arbre d'affichage Afficher = appeler une succession de fonctions graphiques Représentation sous forme d'un arbre d'affichage On affiche récursivement, en profondeur d'abord, tous les nœuds de l'arbre On modifie l'arbre pour changer l'affichage puis on réaffiche 6

JFrame JTree JPanel JToolbar JRadio. Button JButton 7

Arbre Swing JFrame JTool. Bar JButton JPanel JButton JText. Area JList

Arbre Swing JFrame JMenu. Bar JMenu File JMenu View JMenu Help JMenu. Item Open JMenu. Item Undo JMenu. Item Save as… JMenu. Item Paste JMenu. Item Quit JMenu. Item Copy JMenu. Item About…

La gestion de l'arbre d'affichage Organisation sous forme d'objets Les langages à objets permettent de représenter ces nœuds comme des objets ayant une interface Tous les nœuds héritent d'une classe de base (JComponent dans Swing) Chaque composant particulier spécifie une interface particulière adaptée à sa sémantique 10

Principales différences Il existe un grand nombre de boîtes à outils graphiques interactives (Graphical User Interfaces ou GUI) Langage / portabilité / performances / mécanismes de communications / extensibilité / rapidité de développement / robustesse Pas de "meilleur" mais des spécialisations 11

Les boîtes à outils graphiques interactives de Java propose deux boîtes à outils graphiques : ◦ AWT (Abstract Window Toolkit), simple, petite et limitée ◦ SWING, cohérente, grosse et extensible. Les deux peuvent s'utiliser dans les applets SWING facilite la transition à partir d'AWT. 12

Java et les interfaces graphiques interactives Langage conçu d'emblée avec une interface graphique interactive Ajout de mécanismes spécifiques pour les interfaces ◦ inner classes 2 interfaces et 2 modèles graphiques en standard Beaucoup d'exemples, de documentations et d'expérience. 13

Conteneurs et composants Une interface graphique en Java est un assemblage conteneurs (Container) et de composants (Component). Un composant est une partie "visible" de l'interface utilisateur Java. ◦ C’est une sous-classes de la classe abstraite java. awt. Component. ◦ Exemple : les boutons, les zones de textes ou de dessin, etc. Un conteneur est un espace dans lequel on peut positionner plusieurs composants. ◦ Sous-classe de la classe java. awt. Container ◦ La classe Container est elle-même une sous-classe de la classe Component ◦ Par exemple les fenêtres, les applets, etc. 14

Conteneurs et composants Hiérarchie d’héritage des principaux éléments des interfaces graphiques en Java 15

Conteneurs et composants Les deux conteneurs les plus courants sont le Frame et le Panel. Un Frame représente une fenêtre de haut niveau avec un titre, une bordure et des angles de redimensionnement. ◦ La plupart des applications utilisent au moins un Frame comme point de départ de leur interface graphique. Un Panel n'a pas une apparence propre et ne peut pas être utilisé comme fenêtre autonome. ◦ Les Panels sont créés et ajoutés aux autres conteneurs de la même façon que les composants tels que les boutons ◦ Les Panels peuvent ensuite redéfinir une présentation qui leur soit propre pour contenir eux-mêmes d'autres composants. 16

Conteneurs et composants On ajoute un composant dans un conteneur, avec la méthode add() : Panel p = new Panel(); Button b = new Button(); p. add(b); De manière similaire, un composant est retirer de son conteneur par la méthode remove() : p. remove(b); Un composant a (notamment) : ◦ une taille préférée que l’on obtient avec get. Preferred. Size() ◦ une taille minimum que l’on obtient avec get. Minimun. Size() ◦ une taille maximum que l’on obtient avec get. Maximun. Size() 17

Conteneurs et composants import java. awt. *; public class Essai. Fenetre 1 { public static void main(String[] args) { Frame f =new Frame("Ma première fenêtre"); Button b= new Button("coucou"); f. add(b); f. pack(); f. show(); } } Création d’une fenêtre (un objet de la classe Frame) avec un titre Création du bouton ayant pour label « coucou » Ajout du bouton dans la fenêtre On demande à la fenêtre de choisir la taille minimum avec pack() et de se rendre visible avec show() 18

Gestionnaire de présentation A chaque conteneur est associé un gestionnaire de présentation (layout manager) Le gestionnaire de présentation gère le positionnement et le (re)dimensionnement des composants d’un conteneur. Le ré-agencement des composants dans un conteneur a lieu lors de : ◦ la modification de sa taille, ◦ le changement de la taille ou le déplacement d'un des composants. ◦ l'ajout, l'affichage, la suppression ou le masquage d'un composant. Les principaux gestionnaires de présentation de l'AWT sont : Flow. Layout, Border. Layout, Grid. Layout, Card. Layout, Grid. Bag. Layout 19

Gestionnaire de présentation Tout conteneur possède un gestionnaire de présentation par défaut. ◦ Tout instance de Container référence une instance de Layout. Manager. ◦ Il est possible d'en changer grâce à la méthode set. Layout(). Les gestionnaires de présentation par défaut sont : ◦ Le Border. Layout pour Window et ses descendants (Frame, Dialog, …) ◦ Le Flow. Layout pour Panel et ses descendants (Applet, etc. ) Une fois installé, un gestionnaire de présentation fonctionne "tout seul" en interagissant avec le conteneur. 20

Flow. Layout Le Flow. Layout est le plus simple des managers de l'AWT Gestionnaire de présentation utilisé par défaut dans les Panel si aucun Layout. Manager n'est spécifié. Un Flow. Layout peut spécifier : ◦ une justification à gauche, à droite ou centrée, ◦ un espacement horizontal ou vertical entre deux composants. ◦ Par défaut, les composants sont centrés à l'intérieur de la zone qui leur est allouée. 21

Flow. Layout La stratégie de disposition du Flow. Layout est la suivante : ◦ Respecter la taille préférée de tous les composants contenus. ◦ Disposer autant de composants que l'on peut en faire tenir horizontalement à l'intérieur de l'objet Container. ◦ Commencer une nouvelle rangée de composants si on ne peut pas les faire tenir sur une seule rangée. ◦ Si tous les composants ne peuvent pas tenir dans l'objet Container, ce n'est pas géré (c'est-à-dire que les composants peuvent ne pas apparaître). 22

Flow. Layout OK Ouvrir Redimensionnement OK Ouvrir Fermer plus visible OK Ouvrir Redimensionnement OK Ouvrir Fermer 23 Fermer

Flow. Layout Redimensionnement 24

Flow. Layout Redimensionnement 25

Flow. Layout Le Flow. Layout cache réellement et effectivement les composants qui ne rent pas dans le cadre. Le Flow. Layout n'a d'intérêt que quand il y a peu de composants. L'équivalent vertical du Flow. Layout n'existe pas La présentation Flow. Layout positionne les composants ligne par ligne. ◦ Chaque fois qu'une ligne est remplie, une nouvelle ligne est commencée. Le gestionnaire Flow. Layout n'impose pas la taille des composants mais leur permet d'avoir la taille qu'ils préfèrent. 26

Border. Layout divise son espace de travail en cinq zones géographiques : North, South, East, West et Center. Les composants sont ajoutés par nom à ces zones (un seul composant par zone). ◦ Exemple add("North", new Button("Le bouton nord !")); ◦ Si une des zones de bordure ne contient rien, sa taille est 0. 27

Border. Layout Division de l’espace avec le Border. Layout 28

Border. Layout import java. awt. *; public class Essai. Border. Layout extends Frame { private Button b 1, b 2, b 3, b 4, b 5; public Essai. Border. Layout() { set. Layout(new Border. Layout()); b 1 = new Button ("Nord"); b 2 = new Button ("Sud"); b 3 = new Button ("Est"); b 4 = new Button ("Ouest"); b 5 = new Button ("Centre"); this. add(b 1, Border. Layout. NORTH); this. add(b 2 , Border. Layout. SOUTH); this. add(b 3, Border. Layout. EAST); this. add(b 4, Border. Layout. WEST); this. add(b 5, Border. Layout. CENTER); } public static void main (String args []) { Essai. Border. Layout essai = new Essai. Border. Layout(); essai. pack (); essai. set. Visible(true) ; }} 29

Border. Layout Stratégie de disposition du Border. Layout ◦ S'il y a un composant dans la partie placée dans la partie NORTH, il récupère sa taille préférée, respecte sa hauteur préférée si possible et fixe sa largeur à la totalité de la largeur disponible de l'objet Container. ◦ S'il y a un composant dans la partie placée dans la partie SOUTH, il fait pareil que dans le cas de la partie NORTH. ◦ S'il y a un composant dans la partie placée dans la partie EAST, il récupère sa taille préférée, respecte sa largeur préférée si possible et fixe sa hauteur à la totalité de la hauteur encore disponible. ◦ S'il y a un composant dans la partie placée dans la partie WEST, il fait pareil que dans le cas de la partie EAST. ◦ S'il y a un composant dans la partie CENTER, il lui donne la place qui reste, s'il en reste encore. 30

Border. Layout Lors du redimensionnement, le composant est lui-même redimensionné en fonction de la taille de la zone, c-à-d : ◦ les zones nord et sud sont éventuellement élargies mais pas allongées. ◦ les zones est et ouest sont éventuellement allongées mais pas élargies, ◦ la zone centrale est étirée dans les deux sens. 31

Border. Layout N N Redimensionnement O C E C O S S 32 E

Border. Layout (8) Redimensionnement 33

Grid. Layout Le Grid. Layout dispose les composants dans une grille. ◦ Découpage de la zone d'affichage en lignes et en colonnes qui définissent des cellules de dimensions égales. ◦ Chaque composant à la même taille quand ils sont ajoutés dans les cellules le remplissage s ’effectue de gauche à droite et de haut en bas. ◦ Les 2 paramètres sont les rangées et les colonnes. ◦ Construction d'un Grid. Layout : new Grid. Layout(3, 2); 34

Grid. Layout import java. awt. *; public class Appli. Grid. Layout extends Frame { public Appli. Grid. Layout() { super("Appli. Grid. Layout"); this. set. Layout(new Grid. Layout(3, 2)); for (int i = 1; i < 7; i++) add(new Button(Integer. to. String(i))); this. pack(); this. show(); } public static void main(String args[]) { Appli. Grid. Layout appli = new Appli. Grid. Layout(); } } 35

Grid. Layout Lors d’un redimensionnement les composants changent tous de taille mais leurs positions relatives ne changent pas. 1 2 3 4 5 6 Redimensionnement 1 2 3 4 5 6 36

Grid. Layout Redimensionnement 37

Card. Layout Le Card. Layout n'affiche qu'un composant à la fois : ◦ les composants sont considérées comme empilées, à la façon d'un tas de cartes. La présentation Card. Layout permet à plusieurs composants de partager le même espace d'affichage de telle sorte que seul l'un d'entre eux soit visible à la fois. Pour ajouter un composant à un conteneur utilisant un Card. Layout il faut utiliser add(String cle, Component mon. Composant) Permet de passer de l ’affichage d ’un composant à un autre en appelant les méthodes first, last, next, previous ou show 38

Grid. Bag. Layout Le gestionnaire Grid. Bag. Layout fournit des fonctions de présentation complexes ◦ basées sur une grille dont les lignes et les colonnes sont de taille variables. ◦ permet à des composants simples de prendre leur taille préférée au sein d'une cellule, au lieu de remplir toute la cellule. ◦ permet aussi l'extension d'un même composant sur plusieurs cellules. Le Grid. Bag. Layout est compliqué à gérer. ◦ Dans la plupart des cas, il est possible d’éviter de l’utiliser en associant des objets Container utilisant des gestionnaires différents. 39

Grid. Bag. Layout (2) Le gestionnaire Grid. Bag. Layout est associé à un objet Grid. Bag. Constraints ◦ l’objet Grid. Bag. Constraints définit des contraintes de positionnement, d’alignements, de taille, etc. d’un composant dans un conteneur géré par un Grid. Bag. Layout. ◦ On associe chaque composant que l’on place dans le Grid. Bag. Layout avec un objet Grid. Bag. Constraints Un même objet Grid. Bag. Constraints peut-être associé à plusieurs composants. Définir les objets Grid. Bag. Constraints en spécifiant les différents paramètres est assez fastidieux… Voir la doc 40

super("Appli. Complexe. Layout"); set. Layout(new Border. Layout()); Panel pnorth = new Panel(); pnorth. add(b 1); pnorth. add(b 2); pnorth. add(b 3); pnorth. add(b 4); this. add(pnorth, Border. Layout. NORTH); Panel pcenter = new Panel(); pcenter. set. Layout(new Grid. Layout(2, 2)); pcenter. add(gr 1); pcenter. add(gr 2); pcenter. add(gr 3); pcenter. add(gr 4); this. add(pcenter, Border. Layout. CENTER); Panel psouth = new Panel(); psouth. set. Layout(new Flow. Layout()); psouth. add(ch); psouth. add(tf); this. add(psouth, Border. Layout. SOUTH); 41

D’autres gestionnaires? On peut imposer à un objet « container » de n’avoir pas de gestionnaire en fixant son Layout. Manager à la valeur null ◦ Frame f = new Frame(); f. set. Layout(null); ◦ A la charge alors du programmeur de positionner chacun des composants « manuellement » en indiquant leur position absolue dans le repère de la fenêtre. ◦ C’est à éviter, sauf dans des cas particuliers, . Il est possible d’écrire ses propres Layout. Manager… 42

Récapitulatif Flow. Layout ◦ Flux : composants placés les uns derrière les autres Border. Layout ◦ Ecran découpé en 5 zones ( « North » , « West » , « South » , « East » , « Center » ) Grid. Layout ◦ Grille : une case par composant, chaque case de la même taille Card. Layout ◦ « Onglets » : on affiche un élément à la fois Grid. Bag. Layout ◦ Grille complexe : plusieurs cases par composant 43

Java AWT Interface indépendante de la plate-forme API simple (simpliste) Composants peu nombreux Apparence pauvre Relativement rapide Similaire sur toutes les plate-formes 44

Organisation d ’AWT Packages java. awt et java. applet Classes de composants (dérivées de Component) ◦ Composants conteneurs ◦ Composants « feuille » Classes de gestionnaire d’événements Myriade de classes utilitaires ◦ Image, Color, Cursor, Dimension, Font, etc. 45

Java SWING implémente tous les composants en Java SWING offre plusieurs mécanismes originaux, pratiques et puissants SWING peut se programmer à plusieurs niveaux SWING est très gros et a des performances variables. 46

Concepts de SWING Basé sur des containers générique gère collection de composants design Pattern composite 47

Programmation SWING Package javax. swing Relativement proche de AWT pour faciliter la migration, ajout « J » avant le nom des classes: 48

Construction d ’une application Construire un arbre d ’objets dérivés de « JComponent » Attacher des gestionnaires d ’événements Ce sont les gestionnaires d ’événements qui feront les actions et modifieront les composants 49

Exemple import java. awt. *; import javax. swing. *; class hw. Swing { public static void main(String args[]) { JFrame f = new JFrame("Mini"); f. . set. Preferred. Size(new Dimension(400, 400)); f. pack(); f. set. Visible(true); } } 50

Autre approche import java. awt. *; import javax. swing. *; public class Test { public static void main(String args[]) { Simple f = new Simple(); f. pack(); f. set. Visible(true); } } public class Simple extends JFrame { JLabel texte = new JLabel("Hello World"); public Simple() { get. Content. Pane(). add(texte); } } 51

explications Création de l ’arbre de composants : ◦ JFrame + JLabel ou JButton Déclaration des actions Calcul du placement des composants: Affichage 52

Arbre Swing JFrame JTree JPanel JToolbar JRadio. Button JButton 53

Mon premier Composant JFrame ◦ fenêtre principale JDialog ◦ fenêtre de dialogue (modale) Jwindow show() hide() ou dispose() to. Front() ou to. Back() set. Title(“titre !”) set. Size(int, int) et set. Resizable(false) 54

Les autres composants 55

JLabel Javax. swing. Jlabel descriptif : texte statique + image exemple : devant un champ de saisie JLabel jl = new Jlavel(“Label 1”); ou jl. set. Text(“Label 1”); // ->. get. Text() jl. set. Icon(new Image. Icon(“java. gif”)); jl. set. Vertical. Text. Position(Swing. Constants. BOTTOM) jl. set. Horizontal. Text. Position(Swing. Constants. CENTER); 56

JText. Field Javax. swing. JText. Field saisie de texte (non typé) JText. Field jt = new JText. Field(“Thomas”); String nom = new String(“Thomas”); jt. set. Text(nom); jt. set. Columns(nom. length()); jt. copy(); jt. cut(); jt. paste(); 57

JButton Bouton simple à états JButton jb= new JButton(“OK”, new Image. Icon(“boc. gif)); jb. set. Rollover. Icon(new Image. Icon(“cob. gif”)); jb. set. Pressed. Icon(new Image. Icon(“ocb. gif”)); jb. set. Disabled. Icon(new Image. Icon(“obc. gif”)); jb. set. Mnemonic(‘o’); // ALT + o jb. set. Border. Painted(false); jb. set. Focus. Painted(false); jb. do. Click(); 58

Jmachin. Button JToggle. Button ◦ deux états (set. Icon et set. Selected. Icon) JCheck. Box ◦ cases à cocher JRadio. Button ◦ dans un groupe de boutons “radio” 59

Exemple de Radio Button. Group grp = new Button. Group(); JRadio. Button r 1 = new JRadio. Button(“it 1”); JRadio. Button r 2 = new JRadio. Button(“it 2”); r 2. set. Selected(true); grp. add(r 1); grp. add(r 2); 60

Le modèle de bouton poussoir Modèle utilisé pour les Check. Box, Radio. Button et Button Plusieurs niveaux d ’utilisation ◦ gère l’état du bouton, au repos, sous le pointeur, appuyé et relâché. ◦ Gère la notification vers les listeners ◦ Gère l ’envoie d ’un événement « action » 61

JCombo. Box Liste déroulante (ouverte ou fermée) vector ou tableau d’objets passés en paramètres JCombo. Box cb = new JCombo. Box( items); cb. set. Maximum. Row. Count(4); cb. set. Editable(true); // JText. Field 62

JMenu Une instance de JMenu. Bar par Jframe set. JMenu. Bar(JMenu. Bar mb); Plusieurs Jmenu par JMenu. Bar add(JMenu jm); Plusieurs JMenu. Item/JCheckbox. Menu par Jmenu add(JMenu. Item mi); add. Separator(); 63

JPanel ◦ conteneur JScroll. Pane ◦ un seul composant ! ◦ barres de défilement Panel JScroll. Pane sp = new JScroll. Pane(); sp. add(mon. JLabel); sp. set. Viewport. View (mon. JLabel); ◦ composants implémentant Scrollable Scroll. Pane class Mon. Label extends Jlabel implements Scrollable 64

Les composants de SWING Dialog Tabbed Pane Frame Split pane Tool bar Internal frame Layered pane 65

Les composants SWING List File chooser Color chooser Progress bar Slider Table Text Tree 66

Capacités communes des composants (dés)activation is. Enabled() (in)visible set. Enabled(…) set. Visible(…)is. Visible() ◦ module le coût de l’instanciation d’un container ! tailles réelle et souhaitable Dimension get. Size() ou Dimension get. Size(Dimension r) set. Size(…) Dimension get. Preferred. Size() ; set. Preferred. Size(Dimension r); 67