F. Bonnefoi & F. Gayral 1/

Programmation Graphique - Cours No 1Formation continue

IUT de Villetaneuse - Mai 2010

Responsable :

Fabien Bonnefoi fabien.bonnefoi@iutv.univ-paris13.fr

Introduction à la programmation Graphique

F. Bonnefoi & F. Gayral 2/

Plan du cours

1) Présentation de l'enseignement

2) Présentation des « Interfaces Graphiques » (IG)

3) Présentation du développement graphique

4) Les différentes API graphiques

5) L'API graphique de Java

6) Un exemple

F. Bonnefoi & F. Gayral 3/

1-Présentation de l'enseignement

F. Bonnefoi & F. Gayral 4/

Organisation du cours

Contenu et outilsPrincipes généraux de la programmation graphique et événementielle (indépendants des langages d’implémentation)Utilisation du langage Java comme supportUtilisation de librairies (packages) prédéfnis dédiés au graphique

Organisation des séancesCours (entre 1h et 1h30)TD et correction des exercices (environ 30 minutes)TP salle machine (environ 2h)

Évaluation1 contrôle long : une partie sans document, une partie avec documents Cours Powerpoint avec photocopies distribuées en début de cours, à compléter et à enrichir durant le cours !

F. Bonnefoi & F. Gayral 5/

Plan de l'enseignement

Cours 1: Introduction à la programmation graphique

Cours 2: Les composants graphique et la mise en page

Cours 3: Gestion des événements

Cours 4: Dessin et graphisme

Cours 5: Les « threads »

Cours 6: Les Environnements de développement intégré

Cours 7: Aller plus loin et Révisions

F. Bonnefoi & F. Gayral 6/

Pré-requis

Algorithmique et programmation impérativeEx : langage C 1970 (Fortran 1954, Pascal 1970, Ada 1974 …)Paradigme: séquences d'instructions :

- assignation int a=10 - branchement conditionnel if(a>=10)- bouclage for (b=0;b<10;b++)- fonction int somme(int a, int b){return(a + b);}- pointeurs, etc. int* pta = &a

Algorithmique et programmation orientée objet Ex: langage Java 1996 (Smalltalk 1971, C++ 1985, Python 1990 ...)Nouveau paradigme : Interaction d'objets

- heritage- polymorphisme somme(2, 10) / somme(2.3, 10.5)- encapsulation public / private / set() / get()...- instanciation, etc. public class nombre{...} nombre a = new nombre(10)

nombre entierréel

complexe

F. Bonnefoi & F. Gayral 7/

Objectif

Savoir concevoir des applications avec interface graphique

Avant- les informations apparaissent dans une console sous forme de caractères- le principal organe de communication est le clavier - l’affchage est “séquentiel”:chaque information affchée ou lue s'inscrit à la suite de la précédente.

Après- les informations peuvent être affchées sous forme d'images, de dessins, de courbes ou de graphiques...- la souris s'ajoute au clavier- l'affchage est ''réactif'' aux actions de l'utilisateur

=> Plus intuitif et plus convivial=> Plus riche et plus complexe

F. Bonnefoi & F. Gayral 8/

Bibliographie

LivresSWING, les Cahiers du Programmeur – E. Puybaret (Eyrolles)Java 1.2, Le programmeur Java – L. Lemay & R. Cadenhead (S&SM)Au cœur de Java 2 – C.S. Horstmann & G. Cornel (Campus Press)

Tutoriels de « Sun Microsystems » pour Swing:http://java.sun.com/docs/books/tutorial/uiswing/http://java.sun.com/developer/onlineTraining/GUI/Swing1/shortcourse.html#JFCIntro

http://java.sun.com/developer/onlineTraining/GUI/Swing2/shortcourse.html#JFCIntro

Rechercher quelque chose de précis ou pointu:http://java.sun.com/developer/JDCTechTips/

http://java.sun.com/developer/technicalArticles/

F. Bonnefoi & F. Gayral 9/

2-Présentation des

« Interfaces graphiques »

F. Bonnefoi & F. Gayral 10/

Définition

Une interface graphique Assure le dialogue entre l'utilisateur et la machine. On l'appelle aussi « interface homme-machine » (IHM).(ou en anglais GUI pour Graphical User Interface)

La fenêtre - Est l'élément fondamental d'une interface graphique- Une fenêtre est composée de composants graphiques (ou widgets) ‏- Une fenêtre peut rendre à l'écran des images, animations, vidéos… - L'utilisateur agit dans la fenêtre, dans ses composants (grâce à la souris, au clavier etc.).- Une interface graphique s’oppose à la ligne de commande oùl’interaction entre l’utilisateur et l’ordinateur se fait seulement au clavier ettout s'affche dans une fenêtre de terminal en mode texte

F. Bonnefoi & F. Gayral 11/

Historique

Avant 1970 : Premiers ordinateurs utilisés avec des traitements parlots (batch) : alimentés en entrée par des instructions encodées sur des cartes perforées et fournissant les données de sortie sur des imprimantes.

Milieu des années 1960 : Introduction du clavier et de l’écran, terminauxinteractifs en ligne de commande

Années 1980 : Introduction de l’écran bitmap (point par point ou modepixel) et de la souris, système de fenêtres et de menus

==> IHM tels Smalltalk (76)‏Apple avec Macintosh (84), Windows

1953 - IBM650

1983 – Apple Lisa

F. Bonnefoi & F. Gayral 12/

Conséquences:

Utlisaton:Tout programme s'exécute dans le cadre d'une fenêtre graphiqueL'utilisateur ne communique plus ses ordres en tapant une ligne de commande mais en agissant sur les différents composants de la fenêtreLes Informations peuvent être affchées sous forme d'images, de dessins, de courbes ou de graphiques, et bien sûr de caractères

-> Utilisation est plus convivialeConception:

Prise en compte des notions de coordonnées, de couleurs, d'images, du type (fonte) des polices de caractère, d’épaisseur de traits... La programmation est événementielle et non plus séquentielleUne grande partie du programme est dédié à l'affchage et aux interactions avec l'utilisateur: logique applicative + logique de présentationUtilisation acrue de bibliothèques d'objets: les API Graphiques

-> Conception plus riche / compliquée

F. Bonnefoi & F. Gayral 13/

3-Principes du développement

graphique

F. Bonnefoi & F. Gayral 14/

Programmation séquentielle:

Sans Intrface Graphique la programmation est séquentielle

C’est le programme qui garde le contrôle des opérations Les instructions du programme principal sont exécutées les unes après les autresL’utilisateur est simplement sollicité pour fournir des informations au moment voulu

public static void main(String[] args) {

System.out.println("le programme est séquentiel");

String nom=Console.readString("donner votre nom");

System.out.println("bonjour "+nom);

}

F. Bonnefoi & F. Gayral 15/

Programmation événementielle

Avec une IG

la programmation est événementielle

C’est l’utilisateur, par ses actions sur les composants graphiques de la

fenêtre qui permet d'interagir avec le programme.

C’est l'utilisateur qui "pilote" le programme

Le programme réagit aux sollicitations de l’utilisateur (pourvu qu'elles

aient été prévues) ‏

Le programme est dirigé par les actions de l'utilisateur → notion d'événements‏

F. Bonnefoi & F. Gayral 16/

Comment ça se passe ?

Dès que vous lancez un programme avec interface graphique :

une boucle infnie est générée

le programme attend les actions du "monde extérieur" : les

événements (enfoncer une touche du clavier, cliquer avec la

souris etc.)‏

le programme "attrape" et traite les événements quand ils se

produisent.

F. Bonnefoi & F. Gayral 17/

Notion d'événement

Evénement: Objet construit par le système en réponse à une action de l’utilisateur et qui contient toutes les informations concernant cette action

clic souris : clic, position etc...frappe d’un caractère : ....

Boîte noire

Système

Action de

l ’utilisateur

Evénement transmis

à l ’application qui

réagit à l ’événement

ou pas

F. Bonnefoi & F. Gayral 18/

Présentation et logique métier

Logique de l'applicaton (ou logique métier)Ce à quoi sert le programme: calcul, modifcation d'image, saisie d'information etc...

Logique de présentaton :questions d'ergonomie

• choix de la charte graphique• préférences menus/boutons/cases à cocher…

questions du type d'utilisateurs • l’applicatif apparaît-il de la même façon à tous les utilisateurs ? • Plusieurs interfaces graphiques pour le même applicatif

F. Bonnefoi & F. Gayral 19/

Exemples 1/2

Exemple d’une banque ❙ Logique applicative

❘ gérer les clients❘ gérer les comptes❘ gérer les transferts❘ gérer les salariés❘ ....

❙ GUI différentes suivant l’utilisateur : guichetier, administrateur, DRH…

=> notion de Modèle-Vue-Contrôleur (MVC)‏

F. Bonnefoi & F. Gayral 20/

Exemples 2/2:

Exemple du gestionnaire de notes de l'IUT logique applicative :

• calculer les moyennes, • éditer les bulletins, • les tableaux de jury….• Gérer la base de données, droits des utilisateurs…

logique de présentation• choix des composants : menu ou cases à cocher…

Quel enchaînement des actions ?A quel utilisateur s'adresse l'interface graphique ? (au professeur, à l' étudiant, à l' administateur ?)

F. Bonnefoi & F. Gayral 21/

Concevoir une interface graphique, c’est:

défnir la fenêtre “cadre” de l’application et les objets graphiques qu’elle contient : menu, composants...

- défnir les différentes actions que pourra réaliser l’utilisateur dans cette fenêtre (cliquer dans tel ou tel item du menu, dans tel composant : bouton, item d'une liste...) - écrire le traitement correspondant à chacune des actions prévues pour produire les résultats espérés lien avec l'applicatif

Aspect visuel

Aspect événementiel

F. Bonnefoi & F. Gayral 22/

Remarques

Toutes les actions de l’utilisateur qu’on veut traiter doivent avoir un traitement prévu

Mais on ne connaît pas le moment où l’action est déclenchée

Le traitement prévu concerne le plus souvent l’applicatif

F. Bonnefoi & F. Gayral 23/

2 types d'interface graphique:

Technologies pour les interfaces web❙ XHTML et CSS

❘ + JavaScript + Ajax (Asynchronous Javascript And XML)‏❙ Flash : outil de création graphique surtout utilisé pour le web avec divers

utilitaires (de création graphique, d'animation d'images, de créations d'éléments d'interactivité avec ActionScript comme langage de script, de génération de code html…) mais format propriétaire (MacroMedia) avec Flash player : plugin des navigateurs

❙ Applet java (de moins en moins utilisé) ‏

Pour machine "stand-alone"

F. Bonnefoi & F. Gayral 24/

4 – Les différentes

API Graphiques

F. Bonnefoi & F. Gayral 25/

API pour le graphique

API = Application Programming Interface❙ Ensemble d’objets graphiques❙ Ensemble de fonctions permettant l’affchage, l’ouverture de fenêtre

Utilisation de bibliothèques • encapsulant les fonctions, les types...

• souvent langages objets avec des bibliothèques de classes organisées en hiérarchie

F. Bonnefoi & F. Gayral 26/

Différentes API

XLib :bibliothèque de bas niveau en C utilisant le protocole X Window

Gtk+ (Gimp tool kit): bibliothèque de haut niveau (widget), surcouche de Xlib

Qt (société Trolltech):autre bibliothèque (C++). Qt a été choisi par Kde, environnement graphique de bureau Open Source pour les stations de travail Unix/Linux.

Tcl/Tk: Tcl (Tool Command Language) langage de script (langage de programmation interprété)‏ Tk (Tool Kit) : la bibliothèque graphique de widget pour l'écriture de GUI, surcouche de Xlib

F. Bonnefoi & F. Gayral 27/

Différentes API

XUL (Xml User-interface Language) :langage de création d'interface graphique au format XML, créé par Mozilla (navigateur open source).

Visual basic (pour windows), C++, bibliothèque java swing, etc...

F. Bonnefoi & F. Gayral 28/

Les éléments communs à ces API

Les widgets : composants visuels de base généralement implémentés sous forme d'objet

❙ posséde des attributs et méthodes par défaut et modifables ❙ défnis et organisés selon une hiérarchie de classes fournie par l’API ❙ par héritage, on peut défnir ses propres composants dérivés d'une des

classes fournies

La gestion événementielle par des déclenchements de fonctions ou méthodes

F. Bonnefoi & F. Gayral 29/

Les environnements de programmation

Integrated Development Environment (IDE) : a programming environment integrated into a software application that provides a GUI builder, a text or code editor, a compiler and/or interpreter and a debugger.

en français : environnement de développement intégré

Exemples :❙ Visual Studio (microsoft), Delphi, JBuilder (borland), KDevelop (license

GPL) pour KDE, Eclipse,...❙ Supportent souvent différents langages de programmation

F. Bonnefoi & F. Gayral 30/

5 – L'API de Java

F. Bonnefoi & F. Gayral 31/

Historique

«Java Framework» (Java 2 Platform) composé de trois éditions :

❙ J2ME : Java 2 Micro Edition : développement d'applications embarquées❙ J2SE : Java 2 Standard Edition : applications pour poste de travail❙ J2EE : Java 2 Enterprise Edition, destiné à un usage professionnel

J2SE :Toutes les API de base, +API spécialisées dans le poste client (Swing, AWT et Java2D) + API comme JAXP (pour le parsing XML) et JDBC (pour la gestion des bases de données)‏

Evolution du J2SE ❙ En 1996 : java 1.0 211 classes et interfaces❙ J2SE 5.0 : plus de 3000 classes et interfaces❙ beaucoup de méthodes de l'original JDK 1.0 déclarées deprecated (c'est-à-dire

obsolètes) ‏http://www.commentcamarche.net/contents/j2ee/j2ee-intro.php3

F. Bonnefoi & F. Gayral 32/

Au début de Java :

Les Applications indépendantes :Programmes autonomes (stand-alone) ‏

Les AppletsProgrammes exécutés dans l’environnement d’un navigateur Web et chargés au travers de pages HTMLMais applets : technologie de moins en moins employée

F. Bonnefoi & F. Gayral 33/

Premiers éléments:

Conteneurs et Composants:

Conteneurs:- défnissent un espace pour y mettre des composants- peuvent aussi contenir des conteneurs- le conteneur principal est la fenêtre (Frame / Jframe)

Composants:- Éléments graphiques élémentaires: boutons, champ de texte, étiquette...

F. Bonnefoi & F. Gayral 34/

Application graphique java:

Indépendante du web : sur la machine locale

Utilisation de la classejavax.swing.JFrame

The Swing API is powerful, fexible — and immense. The Swing API has 18 public packages:

• javax.accessibility• javax.swing.plaf• javax.swing.text• javax.swing• javax.swing.plaf.basic• javax.swing.text.html

• javax.swing.border• javax.swing.plaf.meta• javax.swing.text.html.parser• javax.swing.colorchooser• javax.swing.plaf.multi• javax.swing.text.rtf

• javax.swing.event• javax.swing.plaf.synth• javax.swing.tree• Javax.swing.flechooser• javax.swing.table• javax.swing.und

F. Bonnefoi & F. Gayral 35/

JFrame et ses superclasses

JFrameJFrame

FrameFrame

WindowWindow

ContainerContainer

ComponentComponent

ObjectObject

javax.swing

java.awt

java.langComponent : objet qui peut être

dessiné (bouton, scrollbar.)

Un Container est un composant qui peut contenir d’autres composants

Une fenêtre des plus simples : pas debarre de titre, ni de bords

Une fenêtre avec barre de titre etbords

Une JFrame est une Frame aveccertaines extensions

F. Bonnefoi & F. Gayral 36/

6 – Un exemple

F. Bonnefoi & F. Gayral 37/

Ouvrir une fenêtre

i mpor t j avax. s wi ng. * ;

/** Classe FenSimple: réalise une fenêtre en java. */

publ i c cl as s FenSi mpl e ext ends JFr ame {

publ i c FenSi mpl e ( St r i ng t i t r e, i nt x, i nt y, i nt w, i nt h) {

s uper ( t i t r e) ;

t hi s . s et Def aul t Cl os eOper at i on( EXI T_ON_CLOSE) ;

t hi s . s et Bounds ( x, y, w, h) ;

t hi s . s et Vi s i bl e( t r ue) ;

}

publ i c s t at i c voi d mai n( St r i ng[ ] ar gs ) {

new FenSi mpl e ( " Ma pr emi èr e f enêt r e " , 300, 200, 500, 400) ;

}

}

F. Bonnefoi & F. Gayral 38/

Remarques sur le programme

Ce programme se contente d'afficher une fenêtre a l'écran

Quand la fonction main() se termine :❙ le programme ne s'arrête pas : il attend les événements

❙ la fenêtre est toujours à l'écran

❙ si l'utilisateur agit, rien ne se passe car rien n'a été prévu

❙ le programme tourne tant que la fenêtre n'est pas fermée

F. Bonnefoi & F. Gayral 39/

Positionnement et taille

this.setBounds(300,200,500,400); //Position et taille

‏(0,0)X =300‏

Y =200‏

W=500‏

H= 400‏

F. Bonnefoi & F. Gayral 40/

Détails sur les méthodes employées

❚ setVisible : “Réalise” la fenêtre, la rend visible au premier plan❚ setDefaultCloseOperation(EXIT_ON_CLOSE) permet de fermer la

fenêtre quand l’utilisateur cliquera sur la croix (voir TP)‏❚ Autres méthodes :

● setSize(int w, int h)‏ :

● setLocation (int x, int y)‏ :