 1) Il faut connaître le modèle et son fonctionnement  2) Définir le contrôle que l’on veut faire ouvrir, fermer, afficher, etc.) sur le modèle  3)

Présentation au sujet: " 1) Il faut connaître le modèle et son fonctionnement  2) Définir le contrôle que l’on veut faire ouvrir, fermer, afficher, etc.) sur le modèle  3)"— Transcription de la présentation:

1

2  1) Il faut connaître le modèle et son fonctionnement  2) Définir le contrôle que l’on veut faire ouvrir, fermer, afficher, etc.) sur le modèle  3) Faire un croquis de l’interface pour définir les widgets (menu, bouton, label, etc.) à utiliser et leurs caractéristiques (nom, position, etc.)

3  JAVA, langage de programmation de SUN utilise deux bibliothèques pour vous aider à développer des interfaces graphiques : ◦ AWT (ne s'utilise plus sans SWING) ◦ SWING  Documentation ◦ http://java.sun.com/docs/books/tutorial/uiswing/ mini/index.html

4 SWING est en sus de AWT, mais en réutilise quelques parties. Il est inclu dans le SDK (software Development Kit) de JAVA depuis la version 1.2. SWING est contenu dans le package : javax.swing. ◦ import javax.swing. ◦ import java.awt.event.*; SWING est indépendant du système d'exploitation (Mac, Windows, Linux, …) ◦ On garde donc une portabilité des programmes.

5 Fenêtre Conteneur Layout Widgets Arranger les Widgets

6

7  5 étapes  Création d’une fenêtre par héritage  Récupération du conteneur  Modification du layout  Insertion des Widgets dans le conteneur  Arranger les Widgets

8  JFrame est un composant de haut niveau, il contiendra toute l’application, c’est la première brique de l’interface. Pour l’utiliser et simplifier le code, on implémente une nouvelle classe qui hérite de Jframe. Une JFrame possède un conteneur par défaut.

9  Pour hériter de JFrame : ◦ on crée une nouvelle classe (ici FenetreView) qui hérite (extends) de JFrame. ◦ Toujours créer un constructeur pour pouvoir insérer les éléments dans cette fenêtre. ◦ Appeler le constructeur de Jframe par super()!

10

11  Le conteneur est l’objet en Java qui permet d’afficher plusieurs objets graphiques. ◦ On peut insérer un ou plusieurs objets dans un même conteneur ◦ Les objets sont placés dans le conteneur suivant les règles imposées par le layout (voir suite). ◦ Par la suite, pour réaliser des interfaces plus complexes, on insère des conteneurs dans d’autres conteneurs pour spécifier plusieurs politiques de placement. ◦ Les conteneurs les plus souvent utilisés sont les JPanels.

12  Le panneau est un conteneur intermédiaire invisible. ◦ Il a pour finalité de positionner d’après son “layout” les composants, boutons et les labels (JScrollPane, JTabbedPane). ◦ Son layout par défaut est un FlowLayout.  Classe JPanel : déclaration et instanciation : ◦ JPanel panel = new JPanel();

13

14  Les « layout » permettent de positionner les éléments avec une politique de placement des objets.  Les layouts sont toujours liés aux conteneurs (JPanels, Tabbed pane). Il sont par défaut dans tous les composants (JFrame, JPanel).  Il existe 7 types : FlowLayout, BorderLayout, GridLayout, BoxLayout, GridBagLayout, SpringLayout et le CardLayout.

15  Chaque layout est une classe Java :  Pour créer un layout : déclaration puis instanciation ◦ FlowLayout flo = new FlowLayout();  Les composants utilisent souvent par défaut un BorderLayout (JFrame, JDialog, JApplet)  Les Layouts sont utilisés surtout avec les panneaux (JPanel) et les fenêtres : ◦ On peut affecter un layout dans un panneau au moment de l’instanciation : JPanel panel = new JPanel(new BorderLayout()); ◦ Affectation d'un layout dans le conteneur d’une fenêtre "frame": Container pan = frame.getContentPane(); pan.setLayout(new FlowLayout());

16  Le BorderLayout possède 5 zones déterminées par les points cardinaux (north, south, east, west) et le centre (center).  Le BoxLayout positionne tous les composants sur une colonne ou une ligne, aligne les composants et respecte leur taille maximum.

17  Le FlowLayout est le « layout » par défaut des « JPanel ». Les composants sont insérés de gauche à droite. Si la largeur est trop petite, il passe à la ligne suivante  Le GridLayout positionne les composants dans une grille (ligne, colonne) et adapte la taille des boutons au plus grand composant.

18  Le GridBagLayout aligne les widgets en une grille où les cellules sont de hauteur et largeur variables. Il permet à un widget de s’étaler sur plusieurs cellules.  http://download.oracle.com/javase/tutorial/uiswing/layout/visual.html

19

20 http://download.oracle.com/javase/tutorial/ui/features /components.html

21

22 Pourquoi cette étape ?  Seulement quand SWING connaît toutes les composantes de la mise en page, les positions peuvent être attribuées  Compatibilité avec les différentes résolution d’écran ◦ PC ◦ PC portable ◦ PDA ◦ Téléphone portable..

23  Egalement possible : Aranger les Widgets Manuellement JLabel titreLabel = new JLabel("Space "); titreLabel.setLocation(10,10); pan.add(titreLabel); Déconseillé (problèmes de redimensionnement de fenêtre)

24

25 Implémenter les actions en réactions aux évènements de la Vue

26  Les évènements sont les interventions de l’utilisateurs sur l’interface graphique à l’aide des périphériques (par exemple : clavier, souris) ◦ Frappe au clavier ◦ Clic de souris ◦ Mouvement de la souris  L’action est la traduction par un composant (widget, bouton) de l’évènement. Elle peut être traitée ou pas par le programme. Swing propose des interfaces (au sens Génie logiciel) à implémenter pour traiter les évènements en fonction des composants. C’est vous qui choisissez les événements à traiter…

27 CLASSE Vue CLASSE Contrôleur CLASSE Modèle Clic utilisateur Envoi de la valeur au contrôleur Transmission de la valeur contrôlée (appel d'une méthode du modèle) Le modèle notifie la vue: MAJ. (cf pattern Observateur/Observable) CLASSE Evènement

28

29  Après avoir créé la partie visible de l’interface (Vue), il faut lier les actions réalisées avec le modèle.  Il faut gérer les évènements (souris, clavier, etc.) : ◦ les « intercepter » : lier une action à un composant (bouton, list, tableau, etc.) ◦ les « interpréter » : implémenter l’interface correspondante  Avec Swing, vous devez implémenter une interface pour chaque signal.  Par exemple pour actionner un bouton : ◦ l'interface est ActionListener dont la seule méthode est actionPerformed.  Rappel : Utilisation du mot clef « implements », et vous devez implémenter toutes les méthodes de l'interface.

30 http://download.oracle.com/javase/tutorial/uiswing/ events/eventsandcomponents.html

31  Nous voulons réaliser une fenêtre avec un bouton, qui affiche « bonjour » sur la sortie standard.  Evènement : bouton enfoncé  Action : afficher le message à l’écran  Modèle : aucun

32  Gestion de l’action sur un bouton :  1) Création du bouton : JButton button; button = new JButton("Click Me");  2) On attache la gestion de l’événement (Listener Type) à ce bouton (cf Tableau précédent) : bouton.addActionListener(new MyEventClass()); syntaxe addXXX(); où XXX est l’interface écouteur  3) Implémentation de l'interface : public class MyEventClass implements ActionListener  Une classe portant le nom de l'évènement implémente la classe liée (Implements ActionListener) (plus propre et « Génie logiciel »)

33  Création de la classe MyEventClass qui implémente l'interface ActionListener import java.awt.*; import java.awt.event.*; import javax.swing.*; class MyEventClass implements ActionListener { public MyEventClass () { System.out.println("My action Event : appel constructeur"); } public void actionPerformed(ActionEvent e) { System.out.println("reçu") }

34

35 Et lui permettre de réagir aux évènements transmis par la Vue.

36

37 Vue Evènement Contrôleur