Cours 91 9 Interfaces graphiques avec awt. Cours 92 Plan Introduction : deux bibliothèques graphiques 1.Comment se dessine une fenêtre ?  Un exemple.

Slides:



Advertisements
Présentations similaires
Spécialisation/généralisation Héritage Polymorphisme
Advertisements

Vocabulaire pour la passage du modèle conceptuel des données au modèle relationnel des données. MCDMRD EntitéTable PropriétésChamps, attribut IdentifiantClé
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)
F. Voisin : Introduction à Java 1 Introduction à Java - les interfaces - Frédéric VOISIN FIIFO - « Remise à Niveau »
Voisin-Polian : Introduction à Java 1 Introduction à Java - AWT - Frédéric VOISIN – Nicole POLIAN FIIFO - « Remise à Niveau »
Les Interfaces graphiques Les Swing. Les interfaces graphiques: Introduction Une application est une boîte noire. Prend des entrées et produit des sorties.
Partiel : le sujet Un graphe non-orienté :
Lexique des manœuvres de base pour utiliser à PowerPoint
Retour sur MVC. Introduction aux IHM et à la réflexivité Java Vos premiers pas en Swing.
Principe de défilement du document dans un traitement de texte
Commission scolaire des Laurentides
PRÉSENTATION Logiciel de traitement de texte:
Par Fabrice Pasquier Cours IV
Créer une animation simple Gif avec ImageReady.
Concevoir un diaporama avec Power Point.
JavaBeans Réalise par: EL KHADRAOUY TARIK AOUTIL SAFOWAN.
Écouteurs de click d'une fenêtre
Langage Oriente Objet Cours 4.
Python Interfaces graphiques
Création d'un diaporama Création d'un diaporama
28 novembre 2012 Grégory Petit
IFT1025, Programmation 2 Jian-Yun Nie
© 2007 P. Van Roy. All rights reserved. FSAB1402: Informatique 2 Le Langage Java et les Exceptions Peter Van Roy Département dIngénierie Informatique,
Graphical User Interface (GUI)
Langage Oriente Objet Cours 2.
Master 1 SIGLIS Java Lecteur Stéphane Tallard Chapitre 5 – Héritage, Interfaces et Listes génériques.
Graphical User Interface
FICHIERS : Définition : Algorithme général:
Introduction au paradigme orienté-objet (suite)
P. Van Roy, LINF1251 LINF1251: Le Langage Java Peter Van Roy Département dIngénierie Informatique, UCL
1 IFT 6800 Atelier en Technologies dinformation Le langage de programmation Java chapitre 3 : Classes et Objects.
Formation Développeur Java Applet et interfaces graphiques avec AWT
COURS DE PROGRAMMATION ORIENTEE OBJET :
CSI1502 Principes fondamentaux en conception des logiciels
LIFI-Java 2004 Séance du Mercredi 22 sept. Cours 3.
11/04/ L'héritage Cours 7 Cours 7.
Plan de la leçon Réf. p. WRD- 149 Les styles Les listes hiérarchiques
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.
La liste des tâches  Un moyen commode pour accéder directement et facilement aux tâches programmées pour l’utilisateur et le praticien en cours d’utilisation.
12/04/ Le polymorphisme Cours 8 Cours 8.
© 2005 P. Van Roy. All rights reserved. FSAB1402: Informatique 2 Le Langage Java Peter Van Roy Département d’Ingénierie Informatique, UCL
Cliquez pour modifier le style du titre
Les classes et les objets Les données finales class A { … private final int n = 20 ; // la valeur de n est définie dans sa déclaration … } class A { public.
Le polymorphisme.
Cours du 5 novembre.
PROGRAMMATION INFORMATIQUE D’INGÉNIERIE II
Cours 4 (14 octobre) Héritage. Chapitre III Héritage.
Introduction à la programmation objet avec java
Iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 21 Charte graphique.
 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)
Cours d’introduction à Java Christophe Vaudry IUT - Cycle IRISM Année
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.
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.
Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX.
SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05.
Flash MX – Séance 2 Interactions & ActionScript David Rapin Si28 P06.
Dreamweaver le retour Avec Les Formulaires Les Calques
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
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.
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.
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.
Transcription de la présentation:

Cours 91 9 Interfaces graphiques avec awt

Cours 92 Plan Introduction : deux bibliothèques graphiques 1.Comment se dessine une fenêtre ?  Un exemple  Les différentes couches  Terminologie 2.La bibliothèque awt  Classes utilitaires  Classe Graphics  Classes définissant des composants 3.Comment ça marche ?

Cours 93 Plan (suite) 4.Principe de conception d’une interface graphique  Créer une interface graphique ou dessiner ?  Faire un dessin 5.Etude de la classe Frame  Propriétés par défaut d'un Frame  Quelques méthodes que l’on peut employer 6.Un exemple : dessiner dans une fenêtre  L’application minimale  Amélioration  La bonne méthode

Cours 94 Deux bibliothèques graphiques awt : (Abstract Window Toolkit) bibliothèque de base où sont rassemblés des composants assez simples. swing : depuis la version Java 1.2. Bibliothèque beaucoup plus élaborée où seule la fenêtre de base fait appel à des routines dépendantes du système. Tout le reste est dessiné par Java. Les classes swing ont un nom commençant par J. JButton, JLabel…

Cours Comment se dessine une fenêtre ? Une fenêtre est dessinée par couches successives  Création d’un cadre conteneur Frame.  Ajout d’un panneau conteneur Panel  Définition de la disposition des composants ajoutés (Layout Manager)  Ajout des composants suivants. Chaque couche est modélisée par une classe. Chaque composant possède une méthode paint() prévue pour le dessiner. L’ensemble des composants d’une fenêtre forme ainsi une liste.

Cours 96 Un exemple

Cours 97 Les différentes couches

Cours 98 Terminologie Certains composants sont des conteneurs de composants (Frame, Panel), d'autres ont une utilisation spécifique (libellés Label, champ de texte TextField…).  Cadre conteneur : Frame Barre de titre, Menu système, case de fermeture, de mise en icône, case zoom.  Composants conteneurs de composants (Panel)  Conteneur de dessins (Canvas)  Contrôles : bouton poussoir (Button). Boutons radio (RadioButton), cases à cocher (CheckBox), Libellés (Label), champs d'édition de textes (TextField), listes déroulantes…

Cours 99 Disposition des composants les uns par rapport aux autres : Layout managers. Ces composants ont des propriétés par défaut. La technique de conception d'interface va donc consister à utiliser l'héritage pour réutiliser, étendre, ou redéfinir, le comportement (l'affichage) par défaut. Par exemple, on peut réutiliser le copier/coller associé au composant TextField. On peut modifier le dessin d'une fenêtre en redéfinissant la méthode qui le dessine…

Cours La bibliothèque awt Classes utilitaires Classe Graphics Classes définissant des composants

Cours 911 Classes utilitaires PointDimensionRectangleColorFontFontMetrics int x int y int width int height int x int y int width int height Consta ntes static Nom de police, taille, style Caractéris tiques des fontes

Cours 912 Classe Graphics Un objet de cette classe contient toutes les informations pour dessiner (ou écrire) sur un composant (la couleur du dessin, la fonte utilisée, l’origine des coordonnées…). La classe Graphics possède des méthodes draw… pour dessiner une Line, un Oval, une String, une Image… Pour dessiner, il faudra donc :  se procurer un objet g de cette classe adapté au composant sur lequel on veut dessiner (c’est Java qui nous le donne).  faire appel aux méthodes draw : g.drawLine(…), g.drawRect(…), etc.

Cours 913 Classes définissant des composants de awt ComponentClasse abstraite. Caractéristiques communes : Position, taille, couleur, fonte, visible, paint… LabelLibellés ButtonBoutons CanvasZone de dessin CheckboxCases à cocher ChoiceListe de choix ListListe déroulantes ScrollbarBarres de scrolling TextComponenent TextFieldZone de saisie d’une seule ligne TextAreaEditeur de texte ContainerClasse abstraite, ajout, retrait de composants, Possède un gestionnaire de disposition PanelPanneau conteneur, disposition: FlowLayout Window DialogTitre, resizable, modale, icône, BorderLayout FileDialog FrameTitre, menu, resizable, icône, BorderLayout

Cours Comment ça marche ?

Cours 915 Affichage et polymorphisme L’affichage repose sur le fait que :  Chaque composant est un objet responsable de son affichage.  Sa méthode paint le redessine quand cela est nécessaire. Les composants internes à une fenêtre forment alors une liste d'objets d'une même lignée. Pour les afficher, il suffit d'appliquer à la liste des composants une action analogue à celle vue au cours 8. Le polymorphisme fait le reste.

Cours 916 Exemple de polymorphisme avec les classes Point et PointColoré qui possèdent chacune une méthode afficher() en redéfinition. Point a = new Point("A", 10, 20); Point b = new Point("B", 100, 200); PointColoré g = new PointColoré("G", 25, 30, Color.yellow); PointColoré pc = new PointColoré("PC", 40, 50); Point p = pc; // Ref ancêtre = ref descendant Point f[] = {a, b, g, p, new PointColoré("U", 5, 5)};// Noter l’objet anonyme for(int i=0; i < f.length; i++) f[i].afficher(); // Choix de la bonne méthode à l'exécution

Cours 917 Nous avons vu pour des objets issus d’une même lignée : Point f [ ] = {a, b, g, p, new PointColoré("U", 5, 5)}; for (int i=0; i < f.length; i++) f[i].afficher(); Choix de la bonne méthode à l'exécution Avec awt, Java effectue un traitement similaire : Component [ ] liste={maFen, monPanneau, libel1, libel2, champ1, champ2, bouton} ; for (int i = 0 ; i < liste.length, i++) liste[i].paint(g); Choix de la bonne méthode à l'exécution

Cours 918 Donc : Pour personnaliser l'affichage d'un composant, il suffit de : redéfinir sa méthode paint. Il faut donc créer une classe héritière. Lorsqu’on crée une interface, généralement, on ne personnalise pas les composants standards (boutons, liste…). On ajoute les composants à un conteneur.

Cours 919 La méthode paint Pour la majorité des composants awt, la méthode paint(g) est héritée de Component. Lors de l’exécution le système Java lui procure le contexte graphique dans lequel elle doit s’exécuter. public void paint (Graphics g) Le handle g est un paramètre d’entrée.

Cours Principe de conception d’une interface graphique On ne dessine pas habituellement directement dans les composants : On crée une classe héritière  Qui possède donc les mêmes propriétés.  On personnalise ces propriétés (couleur, police, taille…) : méthodes set…  On peut redéfinir certaines méthodes pour modifier le comportement : paint, toString()

Cours 921 Créer une interface graphique ou dessiner ? Lorsqu’on crée une interface graphique on ajoute (add) des composants à des cadres conteneurs.  Un problème : comment organiser leur disposition les uns par rapport aux autres ?  Solution Java : les layout managers. Ces composants sont automatiquement redessinés par leurs méthodes paint. On ne redéfinit pas (habituellement) les méthodes paint (lorsqu’on crée une interface graphique).

Cours 922 Faire un dessin Lorsqu’on veut faire un dessin (une courbe par exemple), on prévoit un conteneur de dessins appelé Canvas dans awt. On redéfinit la méthode paint du Canvas. C’est là que se passe le dessin. Ce conteneur de dessins est ajouté à l’interface graphique.

Cours Etude de la classe Frame Un Frame est le cadre conteneur initial de toute application avec awt.

Cours 924 Propriétés par défaut d'un Frame Quelques propriétés par défaut d'un FrameElles peuvent être modifiées par Est invisiblesetVisible(true) (héritée de Component) S'affiche au point (0, 0)setBounds(x, y, larg, haut) ou setLocation(x, y) (héritée de Component) Sa taille est minimalesetBounds(…) ou setSize(…) Possède une barre de titre videsetTitle("titre") (de Frame) A une couleur par défautsetBackground(Color) (de Component) A une police par défaut définie dans le contexte graphique. Police qui s'affiche en noir Font fonte = new Font(…) setFont(fonte) (héritée de Container) g.setColor(Color) (g = contexte graph) La disposition de ses composants est gérée par BorderLayout qui définit cinq zones Nord, Sud, Est Ouest et Centre setLayout(autre manager) (héritée de Container) Sait changer de taille, se mini-miser (icône) et se maximiser setResizable(false) (de Frame) Ne sait pas répondre à un clic sur la case de fermeture Ajout d'un écouteur d'événement

Cours 925 Quelques méthodes que l’on peut employer La hiérarchie : Object  Component  Container  Window  Frame Etude de quelques méthodes : Héritées de java.awt.Component Héritées de java.awt.Window Héritées de java.awt.Frame

Cours 926 boolean isEnable()true si le composant détient le focus boolean isShowing()true si le composant est visible à l’écran (son parent doit donc être visible) boolean isVisible()Détermine si le composant devrait être visible lorsque son parent l’est Rectangle getBounds()Largeur, hauteur et position par rapport au parent Point getLocation() int getX() int getY() int getWidth() int getHeight() Position relative à l'écran Point getLocation() int getX() int getY() int getWidth() int getHeight() Position relative au parent Héritées de java.awt.Component

Cours 927 Point getLocationOnScreen()Position relative à l'écran Dimension getSize()Taille void repaint() void repaint(int x, int y, int width, int height) Repeint le composant dès que possible void setBackground(Color c)Couleur du fond void setBounds(int x, int y, int width, int height) void setBounds(Rectangle r) Déplace et redimensionne le composant Héritées de java.awt.Component

Cours 928 void setEnable(boolean b)Rend le composant susceptible ou non de recevoir les événements (focus) void setForeground(Color c)Définit la couleur du premier plan void setLocation(int x, int y) void setLocation(Point p) Relativement aux coordonnées du parent void setSize(int width, int height) void setSize(Dimension d) Définit la taille du composant void setVisible(boolean b)true ou false Héritées de java.awt.Component (suite)

Cours 929 void hide()Cache la fenêtre boolean isShowing()True si la fenêtre est visible void show()Rend la fenêtre visible void pack()Ajuste la fenêtre à sa taille préférée void toFront()Met au premier plan void toBack()Met à l'arrière plan Héritées de java.awt.Window

Cours 930 void setResizable(boolean b)true ou false void setTitle(String s)Définit un titre void setIconImage(Image image)Définit un icône Héritées de java.awt.Frame

Cours Etude d’un exemple élémentaire Dessiner dans une fenêtre  L’application minimale : création d’une fenêtre  Amélioration : on utilise l’héritage  La bonne solution

Cours 932 Dessiner dans une fenêtre L'application minimale, création d’une fenêtre // Fenêtre visible, taille minimale // import java.awt.*;// Donne accès aux méthodes de awt class Fen0 { public static void main(String[] arg) { Frame f = new Frame(); f.setVisible(true); // Car, par défaut, un Frame est invisible } }

Cours 933 Amélioration On pourrait dessiner dans la fenêtre en redéfinissant sa méthode paint mais ce n'est pas la bonne méthode. On crée une classe spécifique qui hérite de Frame. // Fenêtre visible, on dessine dans le Frame // import java.awt.*; class Fen1 { public static void main(String[] arg) { MaFen f = new MaFen(); }

Cours 934 Amélioration (suite) class MaFen extends Frame { MaFen() // Le constructeur personnalise le Frame { super(); // Important pour initialiser le comportement par défaut setBounds(10, 20, 200, 100);// Position et taille setTitle("Première fenêtre");// Titre setVisible(true); } // REDEFINTION DE paint public void paint(Graphics g)// On dessine dans le Frame { g.drawOval(5, 25, 50, 20);// Coord relatives à MaFen } } Chaque fois que cela est nécessaire la méthode paint est réactivée.

Cours 935 Noter l’éllipse coupée en raison de l’origine des coordonnées dans le domaine où l’on dessine.

Cours 936 La bonne méthode pour dessiner En fait la bonne méthode c'est d'utiliser un conteneur spécifique pour les dessins : un Canvas. Ce conteneur est ajouté (add) au Frame. class MaFen extends Frame // Construction héritée du modèle de Frame { MaFen() { super();// Active les caractéristiques par défaut // Personnalisation des caractéristiques setBounds(10, 20, 200, 100);// Position et taille setTitle("Première fenêtre");// Titre setBackground(Color.pink) ;// Couleur du fond personnalisée add(new ZoneDeDessin());// Ajout d’un Canvas conteneur de dessin setVisible(true);// A mettre en dernier } }

Cours 937 class ZoneDeDessin extends Canvas// On dessine dans un objet approprié { ZoneDeDessin()// Constructeur { super();// Définit les caractéristiques par défaut } public void paint(Graphics g)// REDEFINITION de la méthode de dessin { g.setColor(Color.blue) ;// Choisit une autre coueleur de tracé g.drawOval(5, 25, 50, 20); // Coord relative à la zone de dessin } }

Cours 938