Les Interfaces graphiques Les Swing. Les interfaces graphiques: Introduction Une application est une boîte noire. Prend des entrées et produit des sorties.

Présentation au sujet: "Les Interfaces graphiques Les Swing. Les interfaces graphiques: Introduction Une application est une boîte noire. Prend des entrées et produit des sorties."— Transcription de la présentation:

1 Les Interfaces graphiques Les Swing

2 Les interfaces graphiques: Introduction Une application est une boîte noire. Prend des entrées et produit des sorties. Les utilisateurs ne sont pas des programmeurs. Nécessité dun mécanisme dinteraction entre lutilisateur et lapplication: –Echanger les données. –Echange de contrôle.

3 Solution la plus basique: les Intput/output Stream Vous pouvez passer par des objets de gestion de flux ou de données pour interagir avec lutilisateur. Saisir les données dans un fichier ou à partir du clavier (System.in, InputStream). affichage des résultats sur la console ou dans des fichiers (System.out et OutputStream).

4 Inconvénients: Très lourde (beaucoup de code pour peut de chose). Peu adaptée pour les interactions de type contrôle. Pas du tout intuitive: il faut connaître pour pouvoir lutiliser certains types de données ne peuvent être gérés en tant que flux. Solution : Les interfaces graphiques

5 Faire une interface graphique... 1. Comment construire un écran graphique ? 1. Comment gérer les événements ? 1. Comment maintenir la cohérence entre les objets applicatifs / objets graphiques ?

6 1.Définition des écrans ! Une application = plein d écrans graphiques Un écran graphique = 1 arbre de composants graphiques La racine = La fenêtre Les feuilles = des composants atomiques (button, List, TextField…) Les nœuds = des conteneurs (des zones pour mettre des composants atomiques)

7 Exemple: très simple fenêtre :Frame Bouton de commande: Button Zone de texte:TextField Caption: Label

8 Exemple : un arbre de composant graphique nom : Label post: TextField ????? ajout : Buttonl saisir: Frame Racine est écran Les feuilles composants atomiques Les nœuds des containeurs

9 Étape1: Comment construire des écrans Graphiques ? Java offre une « pléthora » de composantes graphiques. Deux packages java.awt.*; javax.swing.*; Le package swing est une extension de awt On peut les classer selon trois catégories –Les composantes écrans –Les composantes de gestion demplacement: les containers –Les composantes graphiques atomiques. –Les composantes de type menus.

10 Une vue partielle sur le modèle de classe du package swing JFrame Panel (from awt) JWindow JButton (from awt) JList JTextField Container (from awt) JComponent (from awt) component[] TextComponent (from awt) Les composants atomiques Une classe abstraite! Les composants composites ! Pas de nouvelles fenêtres

11 Les composants graphique de haut niveau ! Les fenêtres graphique (Jframe) Les sous-fenêtre (JInternalFrame) Les containers Les composants de gestion demplacement (Les Layout). JPanel

12 « Interface » WindowConstants Les Fenêtres Graphiques (JFrame) La classe qui permet de créer des fenêtres Cest lobjet racine Sous classe de la classe Frame de awt. Elle maintient un objet de gestion de composants. JFrame Frame (awt) « Interface » RootPaneContainer JRootPane

13 Les constructeurs de JFrame Deux constructeurs: 1.public JFrame() 2.public JFrame(String titre) Exemple: public static void main(String[] args) { //mode daffichage par défaut (mode java) JFrame.setDefaultLookAndFeelDecorated(true); Jframe e= new JFrame(« Ecran de saisie Employé"); e.setSize(300,40);//spécification de la taille e. show(); //affiche la composante de type écran en mode java } Hauteur=40 Largeur=300

14 Deuxième méthode Parfois, vous avez besoin dassocier des données ou des méthodes à des écrans Vous voulez une type de fenêtre personnalisée. Solution: ………..lhéritage Exemple : créer une classe EcranEmp qui prend en paramètre un employé dont le titre sera initialisé comme suit : ceci est lécran de lemployé XXXX public class Employé {String nom;…. public Employé(String n) {nom=n;} public String toString() {return nom;}} ********************************************************** public class EcranEmp extends JFrame { Employé emp; public EcranEmp(Employé emp) { super("ceci est l'écran de l'employé: "+emp.toString()); this.emp=emp;}} ***************************************************************** public static void main(String[] args) { JFrame.setDefaultLookAndFeelDecorated(true); Employé emp=new Employé("Harry"); EcranEmp eemp=new EcranEmp(emp); eemp.setSize(300,40); eemp.show();}

15 qq méthodes de la classe Jframe Personnaliser le comportement du bouton de fermeture –Par défaut rend la fenêtre invisible – setDefaultCloseOperation(int ); –Trois constantes: JFrame.DISPOSE_ON_CLOSE JFrame.DO_NOTHING_ON_CLOSE JFrame.HIDE_ON_CLOSE JFrame.EXIT_ON_CLOSE Show() elle dessine la fenêtre et tous les objets appartenant a la fenêtre setLocation(x,y); setLocationRelativeTo(Component); Pack() calcule automatiquement la taille minimale. setIconImage(new imageIcon(uriImage).getImage())

16 Quatre modèles daffichages Java Look & Feel GTK Look & Feel MacOS Look & FeelWindows Look & Feel La gestion daffichage est gérée par UIManager UIManager: intermédiaire entre les composantes java et le système daffichage de la machine Trois modes : mode programme, commande en ligne ou en cours dexécution Méthode static : UIManager.setLookAndFeel(NomClassLookAndFeel) try { //affichage mode GTK UIManager.setLookAndFeel( "com.sun.java.swing.plaf.gtk.GTKLookAndFeel"); //affichage mode java UIManager.setLookAndFeel( UIManager.getCrossPlatformLookAndFeelClassName()); } catch (Exception e) { }

17 Comment ajouter des composants dans un JFrame?(1) Chaque JFrame maintient un conteneur dobjets graphiques (Container). Le container de JFrame est JRootPane. Le JRootPane maintient une hiérarchie de conteneur comme suit: –JRootPane –JLayeredPane –JContentPane –JGlassPane

18 Comment ajouter des composants dans un JFrame?(2) il ne faut pas ajouter des composants directement dans lobjet JFrame: passer par sont conteneur. getContentPane(): Container Par défaut cest le JContentPane. Utilisez la méthode add(Component). Vous pouvez ajouter tout sauf des composants de Type JFrame. les objets sont ajoutés sur le plan JLayeredPane: en couche

19 Exemple: ajouter un label dans une fenêtre public static void main(String[] args) { JFrame.setDefaultLookAndFeelDecorated(true); JFrame emp=new JFrame( " fenêtre avec des composants dedans"); Container Con=emp.getContentPane(); Con.add( new JLabel("je suis un composant Dans une fenêtre")); emp.pack();emp.show(); }

20 Cas particulier: Ajouter des sous-écrans: Vous pouvez ajouter des sous fenêtres à une fenêtre. Il faut changer le JContentPane par un JDesktopPane …..considérer la fenêtre comme lécran de machine Sous Classe de JLayeredPane….. Les sous fenêtres sont de type JInternalFrame JInternalFrame se comporte exactement comme un JFrame (ajouter des composants …..).

21 JInternalFrame & JDesktopPane public JDesktopPane(){} –Il maintient également toutes les méthodes et constantes des containers –La méthode add est valable Public JInternalFrame(String titre, boolean resizable, boolean closable, boolean maximazable). Une fois fait Les JInternalFrame sont manipuler de la même manière que les JFrame: ajout passe par le JContentPane etc…

22 Exemple: public static void main(String[] args) { JFrame.setDefaultLookAndFeelDecorated(true); JFrame emp=new JFrame("fenêtre intérieur"); emp.setContentPane(new JDesktopPane()); JInternalFrame sf1=new JInternalFrame("sous fenêtre 1",true,true,true); JInternalFrame sf2=new JInternalFrame("sous fenêtre 2",true,true,true); emp.getContentPane().add(sf1); emp.getContentPane().add(sf2); sf1.setVisible(true); sf2.setVisible(true); sf1.setSize(100,40); sf2.setSize(100,40); emp.setSize(200,100); emp.show(); }

23 Comment placer les objets ? Une fenêtre dispose dun ensemble de containers. Le container des composants est JContentPane (getComponentPane). Pas de placement absolu i.e. pas de button1 en x=3, y=4 Chaque container délègue la gestion des emplacements de composants à une Classe de type Layout

24 Les Layout & les Containeurs Chaque container dispose dun gestionnaire demplacement. Les gestionnaires demplacement sont: –Celles de awt: GridLayout BorderLayout –Spécifique à swing BoxLayout FlowLayout SpringLayout

25 Comment changer le Layout Chaque containeur maintient une méthode pour définir lobjet Layout. Par défaut le JContentPanel maintient un FlowLayout. ObjetContainer.setLayout(objetLayout) La méthode add(…) change de type de paramètre selon les objets Layout

26 BorderLayout Constructeur: –public BorderLayout(); Divise le containeur en cinq parties Add( « placement »,component )

27 Exemple: public static void main(String [] args) { JFrame.setDefaultLookAndFeelDecorated(true); JFrame layout=new JFrame("BorderLayout dans le ContentPane de la fenêtre"); layout.getContentPane().setLayout(new BorderLayout()); layout.getContentPane().add(BorderLayout.NORTH,new JButton("je suis au Nord")); layout.getContentPane().add(BorderLayout.SOUTH,new JButton("je suis au Sud")); layout.getContentPane().add(BorderLayout.CENTER,new JButton(« je suis au Centre")); layout.getContentPane().add(BorderLayout.EAST,new JButton("je suis à l'East")); layout.getContentPane().add(BorderLayout.WEST,new JButton("je suis à l'Ouest")); layout.pack(); layout.show(); }

28 GridLayout Positionner les objets graphiques dans des cellules dune grille i.e matrice. Découper lespace de container en cellule a espace égales. Il faut spécifier le nb ligne et colonne dans le constructeur (la valeur 0 signifie une gestion dynamique). Les objets sont ajoutés ligne par ligne de gauche à droite selon lordre dajout dans le programme.

29 Exemple: Ecrire un programme qui affiche 6 boutons en grille: –Déclarer une fenêtre –Obtenir son JContentPane –Changer le gestionnaire demplacement en gridLayout –Ajouter les 6 bouton. –Afficher la fenêtre JFrame GLF=new JFrame("GridLayout exemple"); Container JCP=GLF.getContentPane(); GridLayout GL=new GridLayout(2,3) JCP.setLayout(GL); for(int i=0;i<GL.getRows();i++) for(int j=0;j<GL.getColumns();j++) JCP.add(new JButton(i+","+j)); GLF.pack(); GLF.show();

30 Résumons nous: Une fenêtre est un objet de type JFrame ou une de ses sous-classe. Pour ajouter des composants graphique il faut passer par le Container: – getComponentPane() pour obtenir le container – add(Component) pour ajouter des objets graphiques Pour gérer lemplacement des objets dans le container utilisez les objets XXXXLayout. –Construire un objet XXXXLayout. –Affecter au container ContainerOb.setLayout(layoutOb).

31 Un autre container: JPanel Vous pouvez utiliser vos propre container, mais…. Il faut les ajouter au container de la fenêtre Le JPanel vous permet de gérer lespace dans une fenêtre. Il peuvent définir des formats de placement différent. Vous ajoutez vos objets directement dans le JPane.

32 qq méthodes de JPanel Constructeur –new JPanel() –New JPanel(Layout) La méthode setLayout(Layout) La méthode add(Component) Les JPanel sont des composants et peuvent simbriqués entre elles. Les JPanel napparaissent pas à lecran leurs rôle se limite à une découpage dune espace dffichage. Pour le rendre visible il faut ajouter un objet de type Border : setBorder(BorderFactory.xxxx)

33 Exemple: public static void main(String[] args) {// création de la fenêtre et récupération de son caontainer JFrame.setDefaultLookAndFeelDecorated(true); JFrame JPF=new JFrame("Jpanel Exemple"); Container JCP=JPF.getContentPane(); //changer le Layout et la couleur du fond du container de la fenêtre JCP.setLayout(new BorderLayout()); JCP.setBackground(Color.green); // construire le JPanel avec son objet Layout JPanel panel=new JPanel(new GridLayout(2,2,10,10)); // ajout des composants graphiques panel.add(new JButton("0.0")); panel.add(new JButton("0.1")); panel.add(new JButton("1.0")); panel.add(new JButton("1.1")); panel.setOpaque(true); //ajout de la bordure et changer la couleur du fond panel.setBackground(Color.yellow); panel.setBorder(BorderFactory.createTitledBorder( BorderFactory.createLineBorder(Color.BLACK,3),"je suis un panel crée par utilisateur")); panel.setSize(100,100); //attention !!!!!!! ajout du JPanel au container de la fenêtre JCP.add(BorderLayout.SOUTH,panel); JPF.setSize(140,140); JPF.show();

34 Excercice1: Écrivez une méthode main() qui affiche la fenêtre suivante:

35 Solution: Créer un objet Jframe Mettre à jours le gestionnaire de placement (GridLayout(2,1)). Mettre ajour la couleur de fond du panel de la fenêtre Créer deux JPanel avec la bordure Mettre à jours les couleurs de fonds Ajouter les JPanel dans la fenêtre Enfin afficher la fenêtre // création de la fenêtre et récupération de son caontainer JFrame.setDefaultLookAndFeelDecorated(true); JFrame JPF=new JFrame("Ecercice Jpanel"); Container JCP=JPF.getContentPane(); //changer le Layout et la couleur du fond du container de la fenêtre JCP.setLayout(new GridLayout(2,1,10,10)); JCP.setBackground(Color.green); //Création de deux panel, mise à jours de leurs couleur de fond JPanel panel1=new JPanel(); JPanel panel2=new JPanel(); panel1.setBackground(Color.yellow); panel2.setBackground(Color.BLUE); // ajout de la bordure (ligne) et ajouter du texte panel1.setBorder(BorderFactory.createTitledBorder( BorderFactory.createLineBorder(Color.BLACK,3),"je suis un panel jaune vide")); panel2.setBorder(BorderFactory.createTitledBorder( BorderFactory.createLineBorder(Color.BLACK,3),"je suis un panel bleue vide")); // ajout des deux JPanel au panel de la fenêtre JCP.add(panel1); JCP.add(panel2); JPF.setSize(120,220); JPF.show();