Les Interfaces graphiques

Les Swing

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é d’un mécanisme d’interaction

entre l’utilisateur et l’application:– Echanger les données.– Echange de contrôle.

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 l’utilisateur.

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).

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 l’utiliser certains types de données ne peuvent

être gérés en tant que flux.

Solution : Les interfaces graphiques

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 ?

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)

Exemple: très simple fenêtre :Frame

Bouton de commande: ButtonZone de texte:TextField

Caption: Label

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

É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 d’emplacement: les

containers– Les composantes graphiques atomiques.– Les composantes de type menus.

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)

Lescomposantsatomiques

Une classe abstraite!

Les composantscomposites !

Pas de nouvelles fenêtres

Les composants graphique de haut niveau !

Les fenêtres graphique (Jframe)Les sous-fenêtre (JInternalFrame)Les containers Les composants de gestion d’emplacement (Les Layout).JPanel

« Interface »WindowConstants

Les Fenêtres Graphiques (JFrame) La classe qui permet de créer des fenêtres C’est l’objet racine Sous classe de la classe Frame de awt. Elle maintient un objet de gestion de

composants.

JFrame

Frame(awt)

« Interface »RootPaneContainer

JRootPane

Les constructeurs de JFrame Deux constructeurs:

1. public JFrame()2. public JFrame(String titre)

Exemple:

public static void main(String[] args) {//mode d’affichage 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

Deuxième méthode

Parfois, vous avez besoin d’associer des données ou des méthodes à des écrans

Vous voulez une type de fenêtre personnalisée.

Solution: ………..l’hé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 l’employé 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();}

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())

Quatre modèles d’affichagesJava Look & Feel GTK Look & Feel

MacOS Look & FeelWindows Look & Feel

•La gestion d’affichage est gérée par UIManager

•UIManager: intermédiaire entre les composantes java et le système d’affichage de la machine

•Trois modes : mode programme, commande en ligne ou en cours d’exé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) { }

Comment ajouter des composants dans un JFrame?(1)

Chaque JFrame maintient un conteneur d’objets graphiques (Container).

Le container de JFrame est JRootPane. Le JRootPane maintient une hiérarchie de

conteneur comme suit:– JRootPane– JLayeredPane– JContentPane– JGlassPane

Comment ajouter des composants dans un JFrame?(2) il ne faut pas ajouter des composants

directement dans l’objet JFrame: passer par sont conteneur.

getContentPane(): Container Par défaut c’est 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

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(); }

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 …..).

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…

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(); }

Comment placer les objets ? Une fenêtre dispose d’un 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

Les Layout & les Containeurs Chaque container dispose d’un

gestionnaire d’emplacement. Les gestionnaires d’emplacement sont:

– Celles de awt:• GridLayout• BorderLayout

– Spécifique à swing• BoxLayout• FlowLayout• SpringLayout

Comment changer le Layout

Chaque containeur maintient une méthode pour définir l’objet 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

BorderLayout Constructeur:

– public BorderLayout(); Divise le containeur en cinq parties

Add(« placement »,component)

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(); }

GridLayout Positionner les objets graphiques dans

des cellules d’une grille i.e matrice. Découper l’espace 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 l’ordre d’ajout dans le programme.

Exemple:

Ecrire un programme qui affiche 6 boutons en grille:– Déclarer une fenêtre– Obtenir son JContentPane– Changer le gestionnaire d’emplacement 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();

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 l’emplacement des objets dans le container utilisez les objets XXXXLayout.– Construire un objet XXXXLayout.– Affecter au container ContainerOb.setLayout(layoutOb).

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

l’espace dans une fenêtre. Il peuvent définir des formats de

placement différent. Vous ajoutez vos objets directement

dans le JPane.

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

s’imbriqués entre elles. Les JPanel n’apparaissent pas à l’ecran leurs rôle se

limite à une découpage d’une espace d’ffichage. Pour le rendre visible il faut ajouter un objet de type Border : setBorder(BorderFactory.xxxx)

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êtreJCP.setLayout(new BorderLayout()); JCP.setBackground(Color.green); // construire le JPanel avec son objet LayoutJPanel 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 fondpanel.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();

Excercice1: Écrivez une méthode main() qui affiche

la fenêtre suivante:

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 caontainerJFrame.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êtreJCP.setLayout(new GridLayout(2,1,10,10));JCP.setBackground(Color.green);//Création de deux panel, mise à jours de leurs couleur de fondJPanel 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();