Cours Java interface graphique (IHM) - Introductionramparison/IHMTP1/crs1.pdf · Interactivité :...

Cours Javainterface

graphique (IHM)

Introduction

Situation du cours

Plan du coursd’introduction

Généralités

Comment cela sepasse ?

Comment celafonctionne ?Notiond’évènement

La programmationévènementielle

Conception d’unlogiciel

Les APId’interfacesgraphiques

Les API Java

La classe JFrame

Une premièrefenêtre

Adaptation àl’ordinateur del’utilisateur

Cours Java interface graphique (IHM) -Introduction

T. Charnoisd’après le cours de S. Szulman

IUT Informatique Villetaneuse

juin 2014

(IUT Informatique Villetaneuse) Cours Java interface graphique (IHM) juin 2014 1 / 31

Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Situation du cours

PPN : Cours algorithmique, POOJusqu’à maintenant : programmation non graphiqueet séquentielle

Objectifs du cours :

Principes généraux de création d’interfacesgraphiqueApplication à Java (Swing)Modèle MVC (Modèle - Vue - Contrôleur)


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



1 Définitionsa) Terminologieb) Historiquec) Technique

2 Conséquence du mode graphiquea) Affichage asynchrone, non séquentielb) Programmation événementielle

3 Conception d’un logiciel avec une interfacegraphique

1 Les différentes parties2 Principes ergonomiques

4 Les API d’interfaces graphiques5 Les API d’interfaces graphiques Java6 Une première fenêtre7 La classe JFrame8 Prise en compte des caractéristiques matérielles de

l’ordinateur de l’utilisateura) La classe Toolkitb) La classe System


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Terminologie

AcronymesGUI Graphical User InterfaceIHM Interface Homme Machine

Une interface graphique assure la communicationentre le programme et l’utilisateurl’interface est constituée :

d’une fenêtre principale et d’éventuellement defenêtres secondairesde fenêtres de dialogue

Une fenêtre est composée de composantsgraphiques : zones d’édition, boutons, listesdéroulantes, cases à cocher, menus.L’utilisateur interagit avec le logiciel grâce à unesouris et/ou un touchpad et/ou le clavier, ecrantactile etc . . .


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Historique

Avant 1970, l’entrée des ordinateurs est sous formede cartes perforées et la sortie sous forme delistings.Les années 80 introduction de la souris (inventée en1963), de l’écran bipmap, des systèmes de fenêtrage(Apple II, Windows 3.1).Un système “révolutionnaire our l’époque“ Smalltalk76 (naissance des langages objets, d’un système defenêtrage, de l’architecture MVC)


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Technique

Changements par rapport à la programmation nongraphique

Partage de l’écran entre plusieurs fenêtres et/ouprocessus.Plus de sequentialité dans les affichages.Programmation évènementielle


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Conséquence du mode graphique : Partagede l’écran

Partage de l’écranEcran : ressource uniquePartage d’une ressource entre plusieurs processus

=)L’affichage ou la modification de l’écran esteffectué par le système d’exploitation.

Tout logiciel utilisant l’écran exécute une méthode quiexécute un appel au système pour mettre à jour l’écran.


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Plus de sequentialité dans les affichages

La méthode d’affichage doit donner les coordonnées dupoint d’affichage.=) un système de coordonnées.


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Le système de coordonnées


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Programmation évènementielle

Interactivité : l’utilisateur agit sur l’interface graphiqueA chaque action est associé un événementA chaque événement est associé un morceau decode


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



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

une boucle infinie est généréele programme attend les actions de l’utilisateur(enfoncer une touche de clavier, clic souris etc . . .]

le programme traite l’action si elle a été prévue


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Evènement

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

Clic souris : les coordonnées de la souris au momentdu clic, l’heure systèmeClavier : la touche utilisée, etc . . .


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



La programmation évènementielle

Ecriture de parties de codeChaque partie traite un évènement

Organisation du code différente d’un programmeséquentielA chaque fin de traitement d’un évènement, leprogramme revient à la boucle d’attente.


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Les différentes parties

La partie données qu’on appelle le modèleLa partie visualisation (Interface graphique) qu’onappelle la vueLa partie gestion des évènements qu’on appelle lecontrôleur


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Principes ergonomiques

Cohérence : un même élément doit toujours êtreutilisé de façon similaire dans un contexted’utilisation identique.Retour d’informations : toute action de l’utilisateurdoit amener un retour d’information rapide etpertinent afin de lui permettre d’analyser rapidementle nouvel état de l’application.Structuration des activités : l’application doit êtredécomposée suivant une hiérarchie de niveaux decomplexité croissanteGestion des erreurs : aider l’utilisateur à gérer seserreursFlexibilité : toute application doit pouvoir êtrefacilement personnalisée


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Deux types d’interfaces graphiques

Application WebXHTML + CSS + Javascript + AjaxFlash : outil de création graphique surtout utilisé pourle web avec divers utilitaires (de création graphique,d’animation d’images, de créations d’élémentsd’interactivité avec ActionScript comme langage descript, de génération de code html. . .) mais formatpropriétaire (MacroMedia) avec Flash player : plugindes navigateursApplet Java (technologie moins utilisée)

Machine seule


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



API = Application Programming Interface

Ensemble d’objets graphiquesEnsemble de fonctions permettant l’affichage,l’ouverture de fenêtreUtilisation de bibliothèques souvent objetsencapsulant les fonctions, les types


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Différentes API

XLib : bibliothèque de bas niveau en C utilisant leprotocole X WindowGtk+ (Gimp tool kit) bibliothèque de haut niveau(widget), surcouche de XlibQt (société Trolltech) autre bibliothèque (C++). Qt aété choisi par Kde, environnement graphique debureau Open Source pour les stations de travailUnix/LinuxTcl/Tk : Tcl = Tool Command Lnaguage langage descriptTk = Tool Kit : bibliothèque graphique decomposants pour l’écriture de GUI, surcouche deXlibVisual basic, Visual C++ (pour Windows) etcXUL (Xml User-interface Language) : langage decréation d’interface graphique au format XML, créépar Mozilla (navigateur open source)


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Les éléments communs à ces API

Les widgets : composants visuels de basegénéralement implémentés sous forme d’objetposséde des attributs et méthodes par défaut etmodifiables, définis et organisés selon une hiérarchiede classes fournie par l’API par héritage, on peutdéfinir ses propres composants dérivés d’une desclasses fourniesLa gestion événementielle par des déclenchementsde fonctions ou méthodes


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Les API d’unterfaces graphiques en JAVA

Java 1.1 (1996) : package awt- Les classes utilisentdirectement les composants du systèmeJava 1.2 : package Swing plus complet - permetd’adapter la forme des composants. Les composantssont dessinés en java. Cela permet d’augmenter lescomposants disponibles et de s’adapter au systèmeutilisé mais c’est beaucoup plus lentpackage SWT-JFace : développement sous eclipsebibliothèques de classes créées par IBM,essentiellement pour pallier la lenteur de l’API swingau détriment de la portabilité.


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Les classes de base pour les fenêtres

Pour une application graphique standard développéesur la machine locale, on utilise la classe JFramePour une applet développée pour le web, c’est laclasse JApplet

Dans la mesure du possible, éviter le mélange descomposants swing et awtLes classes Swing commencent par la lettre J


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



La hiérarchie de JFrame


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Une première fenêtre

impor t javax . swing .⇤ ;

p u b l i c c lass FenSimple extends JFrame {

p u b l i c FenSimple ( S t r i n g t i t r e , i n t x , i n t y , i n t w, i n t h ) {super ( t i t r e ) ;t h i s . se tDefau l tC loseOpera t ion (EXIT_ON_CLOSE ) ;t h i s . setBounds ( x , y ,w, h ) ;t h i s . s e t V i s i b l e ( t r ue ) ;

}p u b l i c s t a t i c vo id main ( S t r i n g [ ] args ) {

new FenSimple ( "Ma premiere fene t re " , 300 ,200 ,500 ,400);}


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Une première fenêtre

Ajout d’un curseur (voir classe Cursor dans doc java)pour différents curseurs

impor t javax . swing .⇤ ;

p u b l i c c lass FenSimple extends JFrame {

p u b l i c FenSimple ( S t r i n g t i t r e , i n t x , i n t y , i n t w, i n t h , Cursor c ) {super ( t i t r e ) ;t h i s . setCursor ( c ) ;t h i s . se tDefau l tC loseOpera t ion (EXIT_ON_CLOSE ) ;t h i s . setBounds ( x , y ,w, h ) ;t h i s . s e t V i s i b l e ( t r ue ) ;

}p u b l i c s t a t i c vo id main ( S t r i n g [ ] args ) {

new FenSimple ( "Ma premiere fene t re " , 300 ,200 ,500 ,400 , new Cursor ( Cursor .HAND_CURSOR) ) ;}


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Remarques sur le programme

Ce programme se contente d’afficher une fenêtre àl’écranQuand la fonction main() se termine :

le programme ne s’arrête pas : il attend lesévénementsla fenêtre est toujours à l’écransi l’utilisateur agit, rien ne se passe car rien n’a étéprévule programme tourne tant que la fenêtre n’est pasfermée

Fenêtre pas du tout paramétrée : position etdimensions "en dur"


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Détails sur le programme

setVisible : permet d’afficher la fenêtresetDefaultCloseOperation(EXIT_ON_CLOSE)permet de fermer la fenêtre quand l’utilisateurcliquera sur la croixsetSize définit la taille de la fenêtresetLocation définit le point en haut à gauchesetBounds définit la taille de l’écran et le point enhaut et à gauche


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Positionnement et taille

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


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Java est indépendant des plateformes

Comment récupérer informations liées au système ?1 exemple : taille de l’écran2 exemple : répertoire utilisateur


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



La classe Toolkit

permet de faire le lien entre les classes javaindépendantes de toute plateforme et la plateformesur laquelle tourne le programmeOn obtient une instance de Toolkit par la méthode declasse (de Toolkit) :public static Toolkit getDefaultToolkit()


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



La classe System

Permet d’accéder à des informations liées ausystème ou à l’utilisateurVariables de classe connuesin, out, err (dans System.out)Pour avoir la liste des propriétés du système :public static Properties getProperties()Pour avoir la valeur d’une propriété :public static String getProperty(String key) : retournela valeur de la propriété repérée par la clé key


Cours Javainterface

graphique (IHM)

Introduction

Situation du cours


Généralités






Les API Java

La classe JFrame



Exemples

S t r i n g d i r = System . getProper ty ( " user . d i r " ) ;/ / va leur de l a v a r i a b l e d ’ environnement CLASSPATHS t r i n g c lasspath = System . getenv ( "CLASSPATH" ) ;S t r i n g vers ion = System . getProper ty ( " java . vers ion " ) ;. . .

T o o l k i t aTK= T o o l k i t . g e t D e f a u l t T o o l k i t ( ) ;Dimension dim = aTK . getScreenSize ( ) ;System . out . p r i n t l n ( " l a rgeu r de l ’ ecran "+dim . width+

" hauteur de l ’ ecran "+ dim . he ig th ) ;


Date post:	12-Sep-2018
Category:	Documents
Upload:	hoangmien
View:	247 times
Download:	0 times

Cours Java interface graphique (IHM) - Introductionramparison/IHMTP1/crs1.pdf · Interactivité :...

Documents