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

Slides:



Advertisements
Présentations similaires
Maquetter avec netbeans
Advertisements

Conception d’IHM en Java
Les Interfaces Graphiques
Gestion des événements (suite)
Android View, onClick, Activity, Modèle Vue Contrôleur
Gestionnaires de géométrie
Page 1 Les applets Jacques Lonchamp. Page 2 Présentation Une applet est téléchargée à partir dune machine distante qui fournit le code. Ce chargement.
(Classes prédéfinies – API Java)
Les Interfaces graphiques Les Swing. Les interfaces graphiques: Introduction Une application est une boîte noire. Prend des entrées et produit des sorties.
MIKHAYLOVA Vera Exposé Java principe de fonctionnement Lundi 17 mai 2004 DEUG 1ère année Science du langage Paris III.
! ! ! PROCEDURE TYPE POUR ORGANISER L ’ANONYMAT
Lexique des manœuvres de base pour utiliser à PowerPoint
TD 1 IJA Introduction Objet, méthode, attribut Classe, instance
Les TABLEAUX Retour au menu principal.
بسم الله الرحمن الرحيم. Institut Supérieure des Etudes Technologiques de Kébili.
Systèmes d’exploitation
PRÉSENTATION Logiciel de traitement de texte:
Développement Mobile : Android
JavaBeans Réalise par: EL KHADRAOUY TARIK AOUTIL SAFOWAN.
Python Interfaces graphiques
Python Interfaces graphiques
Création d'un diaporama Création d'un diaporama
Introduction au paradigme objet Concepts importants surcharge (overload) redéfinition (override) Définition d’une classe Définition des attributs.
Graphical User Interface (GUI)
Manipulation de formulaires en Javascript
Comment réaliser une mise en page ?. Tracer une zone de texte.
Android View, onClick, Activity, Modèle Vue Contrôleur
Leçon 1 : notion dobjet IUP Génie Informatique Besançon Méthode et Outils pour la Programmation Françoise Greffier Université de Franche-Comté.
TYPES DE COMPOSANTES SWING Cours 420-B43. On peut distinguer 3 Niveaux 3 niveaux Haut niveau : toute application graphique doit comprendre au moins une.
Création et présentation d’un tableau avec Word 2007
Programmation objet La base.
Plan de la leçon Réf. p. WRD- 149 Les styles Les listes hiérarchiques
Cours 91 9 Interfaces graphiques avec awt. Cours 92 Plan Introduction : deux bibliothèques graphiques 1.Comment se dessine une fenêtre ?  Un exemple.
Interfaces graphiques. Composants d'interface utilisateur graphique (GUI) 1 Bibliothèques Awt et Swing Procédures communes pour l'utilisation de ces clases.
14 La gestion d’événements
Interface graphique PO2 ( ) Chapitre 3 Gestionnaires géométrie.
12/04/ Le polymorphisme Cours 8 Cours 8.
5ième Classe (Mercredi, 19 octobre) Prog CSI2572.
Iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 21 Charte graphique.
Interfaces Graphiques
Cours d’introduction à Java Christophe Vaudry IUT - Cycle IRISM Année
Les interfaces de gestion d’événements (la suite).
Conception des pages Web avec
1 Initiation aux bases de données et à la programmation événementielle Cours N°8 : Gestion de la cohérence avec des zones de liste déroulantes. Souheib.
Master 1 SIGLIS Java Lecteur Stéphane Tallard Correction du TD Chapitre 3.
Projet Java : La classification périodique des éléments sous forme d’Applet Projet réalisé en 2006 par : BESSON Sandra FLOREA Alina FOUCAULT Julie SALLOT.
Dreamweaver Séance 1.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004.
Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX.
Dreamweaver le retour Avec Les Formulaires Les Calques
Plan de la présentation Le langage HTML Dreamweaver MX Les premiers outils pour créer une page web :  Propriétés d’une page  Création de cadres  Création.
Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
DREAMWEAVER Séance 2 SI28 – P06 Nolwenn PICHAUD.
DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.
Chapitre 7: Héritage Présentation pour Java Software Solutions Foundations of Program Design Second Edition by John Lewis and William Loftus Java Software.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
FLASH Séance 2 Xiaoliang Liang Morgane Le Nan SI28 P05.
© 2010 Sage - Tous droits réservés 1 SIGMA Atelier Découvertes Ergonomie et Prise en Main SAGE ERP X3 Version 6.
Soumis par: DRPU équipe Software Site:
Java Swing. Principes de base  Des composants graphiques (exemple: JFrame, JButton …)  Hiérarchie de classes  Des événements et les actions à effectuer.
Les vues O.Legrand G.Seront. Les vues Dans Android, une ihm est composée de vues. Ces vues.
Stéphane Frénot, Frederique Laforest, Frédéric Le-Mouël IJA 1 TD 7 IJA Les interfaces graphiques JAVA.
Transcription de la présentation:

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

 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 ◦ mini/index.html

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.

Fenêtre Conteneur Layout Widgets Arranger les Widgets

 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

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

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

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

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

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

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

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

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

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

/components.html

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

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

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

 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…

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

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

events/eventsandcomponents.html

 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

 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 »)

 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") }

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

Vue Evènement Contrôleur