1680274500731_Interfacehommemachine.pptx

INTERFACES HOMME-MACHINE
PUISSANCE ET ERGONOMIE
Pr. Younès EL BOUZEKRI EL IDRISSI
y.elbouzekri@gmail.com
AU: 2017/2018

PLAN DU COURS
 Motivations
 Introduction
 Conception des interfaces
 Organisation du contenu et de l’information
 Création des interactions
 Communication avec l’utilisateur
 Ingénierie des interfaces
 Méthodes de conception des interfaces
 Formalismes des interfaces 2

MOTIVATION I
 L’introduction de l’informatique dans notre vie devient de
plus en plus fulgurante:
 Bureau;
 Maison;
 Personnel (objets portatifs)
 Industrie
 …
 On parle actuellement de l’informatique ambiante, du fait
que la plupart des objets embarquent des composants
intelligents;
 Finalement, l’utilisateur est exposé à une multitude
d’interaction avec son environnement. 3

MOTIVATION II
 Quelles sont les moyens avec lesquels un utilisateur
communique avec le système?
 Physique, logiciel, gestuel, capteurs…
 Y a t-il une possibilité que les moyens d’interaction limitent
l’utilisation ou/ et posent encore plus de difficultés?
 Est-ce qu’il y a des études préliminaires à propos de ces
interactions afin de les: concevoir, présenter, simplifier,
promouvoir….?
 Comment tout simplement évaluer les interfaces
d’interaction avec un système?
4

INTRODUCTION
Plusieurs dimensions
d’interaction avec une
machine:
Physique: périphérique
d’entrée;
Logicielle: le système
logiciel plus
précisément la
présentation ou
l’interface
5

INTRODUCTION II: IHM (INTERFACE HOMME MACHINE)
 Définition:
Ensemble de dispositifs matériels et logiciels permettant à
un utilisateur de communiquer avec un système
informatique;
 L’aspect de l’interface est un pilier principal dans l’ingénierie
des logiciels, en plus, c’est un élément de réussite ou
échec d’un système informatique;
 L’utilisation des interfaces se caractérise par la forte utilité
et la souple utilisabilité (traduction Usability).
6

INTRODUCTION IV
 La réussite d’un produit informatique n’est pas seulement
basée sur son aspect technique:
 Mac Vs Linux, Yahoo Vs Google
 Les développeurs des systèmes informatiques ne doivent
pas donner beaucoup d’importance à la technicité au
détriment de l’interface;
 La prise en compte tout au long du processus de
développement des interfaces et leur utilisabilité est un aspect
stratégique;
7

INTRODUCTION V
 L’utilisateur:
 Il faut introduire l’utilisateur dans le développement des
maquettes, et à chaque fois son avis doit être décisif pour la
version finale;
 Prototype:
 L’étape finale des maquettes permet de donner naissance à la
première version fonctionnelle de l’interface appelée
prototype. Néanmoins, l’avis de l’utilisateur doit être pris en
considération à ce stade;
8

INTRODUCTION VI
 Ergonomie des interfaces:
 L’affichage, les apparences, les observations…
 L’ergonomie était toujours perçue comme l’objectif de la
conception des interfaces.
 Ingénierie des interfaces:
 La dimension ingénierie signifie l’application de l'approche du
génie logiciel qui conduit à l'élaboration de:
 Modèles;
 Méthodes;
 Techniques et formalisme;
 Outils pour la conception des interfaces. 9

CHAPITRE I:
CONCEPTION DES INTERFACES
Généralités et ergonomie
10

ENJEUX DE LA CONCEPTION
 L’utilisation d’un logiciel, un site web ou toute autre
interface informatique repose sur les besoins et les attentes
de l’utilisateur;
 L’interaction avec l’interface va conditionner l’efficacité avec
laquelle il atteint son but et aussi la qualité de son utilisation;
 Plus l’interface paraît facile à utiliser, plus elle est appréciée
par les utilisateurs. En plus, si l’interactivité est ajoutée, ça
permet de donner plus de satisfaction et de confiance;
 Les interfaces sont conçues pour les utilisateurs, plus on
donne de l’importance lors de la conception, plus le nombre
d’utilisateur augmente.
11

DÉMARCHE PAR RÉUTILISATION
 La démarche doit être
orientée utilisateur et non
pas technique:
 Gain de coût
 Réduire le temps
 Productivité
 Diminuer le stress
 Qualité
 Satisfaction des clients
 ….
12
analyse
Faire évoluer la base
de composants
réutilisable
Design
Développer
une nouvelle
version

CONCEPTION DES SITES WEB
 Les sites web ciblent le grand public, qui est
majoritairement novice aux outils informatiques;
 Les clients préfèrent les sites faciles à utiliser, et bien
présentés. Le cas de IBM shop après modification des
interfaces les ventes grimpent de 400%;
 Il faut mettre en place une démarche spécifique aux sites
internet afin d’améliorer la rentabilité.
13

RÈGLES DE CONCEPTION DU WEB
 Définir le processus de fonctionnement du site;
 Connaitre son public et inciter le dialogue;
 Répondre aux utilisateurs;
 Suivre les statistiques;
 Mettre à jour régulièrement le site;
 Maintenir les liens externes.
14

EXEMPLE DE GESTION DES ERREURS
15

LES ENJEUX DE L’INTRANET
 Généralement, la conception des intranets ne diffère pas
des sites web, les règles à suivre sont les mêmes.
Cependant, les enjeux sont différents;
 Au contraire des utilisateurs des sites qui sont des clients
potentiels, ceux de l’intranet sont les salariés de
l’entreprise;
 L’objectif n’est pas seulement un gain en terme de la
productivité, mais aussi un gain collectif en terme de
communication et le partage de la connaissance;
 La qualité de l’information, et la rapidité avec laquelle les
salariés y accèdent sont les principaux critères de
l'utilisabilité de l’intranet.
16

RÈGLES DE CONCEPTION D’UN INTRANET
 Facilité la navigation et la recherche d’information;
 Calquer la structure du site sur l’organisation de
l’entreprise;
 Définir un modèle de page unique pour l’ensemble de
l’intranet;
17

INTERFACES TACTILES ET MOBILES
 Les interactions tactiles se sont multipliées ce dernier
temps, offrant de nouvelles opportunités d’accès et la
manipulation de l’information;
 De nouvelles contraintes surgissent à ce niveau:
 Petit écran;
 Espace mémoire réduit;
 Limitation de batterie;
 Limitation de calcul;
 Limitation de logiciel.
 Toutefois ces limitation sont compensées par des
contenus systématiquement interactifs.
18

ENJEUX DES INTERFACES TACTILES
 L’absence d’intermédiaire physique entre l’utilisateur et
l’interface  interaction directe;
 Tout contenu est en soi manipulable indépendamment des
autres contenus composant l’interface;
 Pas de curseur dans l’interface, c’est le doigt qui pointe sur
l’endroit à traiter;
 L’affichage doit être optimisé, du fait que les zones non
concernées doivent être impérativement éradiquées de
l’affichage.
19

CHAPITRE II
ORGANISATION DU CONTENU
21

Y. EL BOUZEKRI EL IDRISSI
AGENDA
 Identifier le contenu;
 Architecture de l’information;
 Agencer l’information pour interagir;
 Techniques de l’agencement
 Multi-fenêtrage
22

OBJECTIFS
23
Déterminer les
caractéristiques
des utilisateurs
Basé sur les
services et les
fonctions que
l’utilisateur cherche
Définir les
moyens des
utilisateurs
comprendre les
attentes du public
Ces éléments aident
à construire
l’architecture de
l’information

S’ADAPTER AUX ATTENTES DES UTILISATEURS
24
• Tranche d’âge;
• Aspect socio-professionnel;
• Connaissance en
informatique;
• Matériel informatique
• Environnement.
Profil
Echantillon d’utilisateur
1. On précise les tâches et les services
par le produit;
2. On recueille les attentes et les besoins;
3. Dans quel contexte sont ils amenés à
utiliser l’interface;
4. D’après l’échantillon quelles sont les
lacunes des applications similaires.

TRANSMETTRE L’INFORMATION
 Selon le public de l’application, il faut aussi cibler les
fonctions de communication entre les utilisateurs afin
d’assurer l’objectif du partage et du dialogue:
 Outils;
 Types de messages;
 Éléments persuasifs des messages;
 Manière dont les textes et le graphisme du site vont transcrire les
messages.
 Il est utile d’établir le paysage concurrentiel dans le site se
positionne:
 Le contenu qu’ils proposent;
 La manière avec laquelle ils communiquent.
25

BENCHMARKING
 Lors de la conception il faut aussi prendre en considération
l’analyse détaillée sur l’objectif de l’application et les
applications concurrentes:
 En terme de design;
 Opportunités de communication;
 Utilisabilité.
 l’analyse détaillée permet de connaitre les points forts et faibles
des concurrents,
 Objectif sera que l’application remédie aux points faibles
des autres concurrents.
26

ARCHITECTURE DE L’INFORMATION
 C’est une étape de la conception où le contenu est
structuré et hiérarchisé selon des groupes d’information qui
deviendront des fenêtres ou des pages:
 Deux étapes principales:
1. Collecter et construire un contenu brut;
2. Regrouper l’information selon sa nature.
 On distingue deux types d’organisation:
1. Basé contenu;
2. Basé tâche. 27

ORGANISER SELON LA TÂCHE
28
Les informations affichées doivent
être directement exploitables dans
la tâche courante
Le découpage en page s’appuie
sur l’analyse de l’activité à
l’usage
1
• Dédier chaque zones de l’interface à une activité particulière
2
• Hiérarchiser la structure du général au particulier
3
• Positionner les éléments de l’interface pour qu’ils soient utilisés
dans le sens de la lecture;
4
• Présenter les commandes et les données dans l’ordre
d’utilisation

ORGANISER L’INTERFACE SELON LA TÂCHE
DES UTILISATEURS;
29
Gérer le
magasin
Etablir le
bilan des
ventes
Editer le
bilan des
ventes
Imprimer
bilan
Vérifier les
commandes
Editer le
dossier des
commandes
Imprimer
dossier
Gérer le
stock
Éditer l’état
du stock
Imprimer
état

SUITE
 Positionner les éléments de l’interface pour qu’ils soient
utilisés dans le sens de lecture;
 Exemple:
 La saisie est plus simple, intuitive lorsque les zones
d’interaction se suivent dans le sens de la lecture.
30

ORGANISER SELON LE CONTENU
 Cette méthodologie consiste à créer des regroupement en
impliquant les utilisateurs: appelée aussi Tri par carte;
 Dans cette approche le regroupement du contenu et son
organisation et personnalisation est faite par l’utilisateur lui-
même;
 Navigation entre les pages selon la perception de l’utilisateur;
 L’utilisateur est incapable de créer une simple navigation:
 Le système de navigation doit être conçu en mesure de l’aider lors de
regroupement.
31

TRI PAR CARTE: BONNES PRATIQUES
1. Minimiser la profondeur d’une application ou site (3-4
niveaux maximum);
2. Optimiser le nombre d’items par rubriques (8 sous-
rubriques maximum);
3. Préférer une arborescence régulière.
32

AGENCER POUR INTERAGIR
 Agencer l’information au niveau d’une interface est la
manière avec laquelle elle est organisée et représentée;
 Les types d’interface, les dimensions des écrans et leurs
modes d’interaction sont fortement diversifiés;
 La manière d’agencer l’information est toujours guidée par
la manière dont l’utilisateur interagit avec l’interface.
33

LES CRITÈRES D’AGENCEMENT
1. L’organisation de l’espace;
2. Le regard de l’utilisateur;
3. Le parcours visuel d’une page;
4. L’accessibilité des éléments de l’interface;
5. Les zones de manipulation;
6. Le multi-fenêtrage.
34

L’ORGANISATION DE L’ESPACE;
 Un positionnement cohérent des objet contribue à
l’homogénéité de l’interface;
 Il est recommandé d’utiliser des gabarits d’écran;
 Gabarit d’écran précise l’agencement des contenus et des
commandes pour les différents types de fenêtre ou de page de
l’application;
 Avantages:
 L’utilisateur lit et mémorise facilement;
 La cohérence du gabarit permet d’harmoniser l’ensemble des
interfaces, il renforce le sentiment de confiance et la fidélité des
clients envers la marque.
35

LE REGARD DE L’UTILISATEUR
 L’utilisateur ne regarde pas l’écran de la même
manière:
 L’exploitation visuelle;
 L’exploitation sélective.
36

 L’exploitation visuelle: Lorsque l’utilisateur découvre
pour la première fois une interface:
L’utilisateur explore l’affichage en adoptant un balayage visuel
en Z;
Le regard part du coin supérieur gauche de l’image, parcourt
systématiquement la zone centrale et se termine par le coin
inférieur droit;
Ce reflexe vaut pour les nouvelle interface mais également pour
un affichage chargé en information.
37

 L’exploration sélective: surgit dans le cas où l’utilisateur
connait à priori le logiciel:
 Il focalise son regard aux certains endroits susceptibles de
contenir des informations pertinentes;
 Avec l’habitude et l’expertise, les comportements visuels se
renforcent et parfois le regard se déplace plus vite, par
anticipation que l’écran ne se rafraichit pas immédiatement.
38

LE PARCOURS VISUEL D’UNE PAGE;
 Y a pas de standard pour le parcours visuel d’un utilisateur 
dépend du contenu;
 Selon des tests oculaire et des études montrent que:
 Le centre de la page est toujours vu en premier, lorsque le
contenu est affiché, l’utilisateur cherche son objectif au centre;
 Dans une dernière étape, l’utilisateur explore la partie haute de
l’écran où il cherche la barre de navigation.
39

35%
42%
98%
61%
31 10%
33%
47%
66%
56%
83%
35%
parcours visuel d’une page Web

L’ACCESSIBILITÉ DES ÉLÉMENTS DE
L’INTERFACE;
 Afin d’organiser l’interface, il convient non seulement
de prendre en compte la visibilité des différents
composants:
 l’accessibilité de la souris;
 les doits en cas d’écran tactile.
41

ACCESSIBILITÉ TACTILE
42

accessibilité des éléments de l’interface

LES ZONES DE MANIPULATION
 Les interfaces modernes se composent de zones de
contenus, de panels ou de fenêtres;
 L’écran est découpé en plusieurs espaces interdépendants
: titres, barres de menu, zone de contenu, boutons de
commande;
 Une zone de manipulation regroupe un ensemble d’objets
qui vont servir d’outils au dialogue entre l’utilisateur et
l’application.
44

LES ZONES DE MANIPULATION II
45
Organiser les zones de manipulation dans le sens de lecture
et en fréquence d’utilisation.
Commandes
importantes
Commandes
fréquemment utilisées
Commandes
annexes
Outils
importants
Outils
fréquemment
importants
Outils annexes
Arbre de
navigation

LE MULTI-FENÊTRAGE: PRINCIPES
 Faciliter l’accès et la compréhension des commandes de multi-
fenêtrage;
 Utiliser le tuilage pour les utilisateurs occasionnels, lorsque les sorties
sont prévisibles;
 Minimiser la quantité des informations à mémoriser d’une zone à
l’autre;
 Autoriser les recouvrements de fenêtres pour les utilisateurs
expérimentés, lorsque les sorties se sont pas prévisibles ou l’écran
est petit;
 Autoriser la mémorisation d’un arrangement de fenêtres. 46

ARCHITECTURE CLIENT/SERVEUR
 Un serveur est un processus offrant un service ou une
ressource (impression, annuaire, transaction, ...);
 Il s'exécute infiniment;
 Il accepte des requêtes, les traite et envoie le résultat au
demandeur;
 Un serveur peut offrir plusieurs services;
 Un service est fourni sur un port de communication
identifié par un numéro.
48

ARCHITECTURE CLIENT/SERVEUR
 Un client est un processus qui utilise le service offert
par un serveur;
 Il envoie des requêtes au serveur et reçoit des
réponses;
 Une requête est un message transmis par un client à
un serveur décrivant l’opération à exécuter pour le
compte du client;
 Une réponse est un message transmis par un serveur
à un client suite à l’exécution d’un service, contenant le
résultat de l’exécution.
49

MODEL D'INTERACTION
 Lors du développement d'une application on vise un
niveau architectural bien précis:
 Une application desktop;
 Une application centralisée;
 Une application répartie.
50

APPLICATION 2-NIVEAUX (CENTRALISÉE)
51
• Plusieurs clients et un serveur.
• Découpage en deux de la charge de l’application
server

IHM ET LE MODÈLE DE DÉVELOPPEMENT
 La conception et la création des IHM n'a pas toujours les
mêmes contraintes d'un niveau à un autre;
 Les besoins tehcniques ne sont pas identiques;
 Le besoin métier s'impose en précisant le genre des utilisateurs
finaux;
 Dans la plus part des cas, la partie des IHM est traitée
indépendamment des autres parties de l'application;
 Pour plusieurs raisons objectives, le développeur fait
recours à un outil logiciel pour les IHM: Framework. 52

FRAMEWORK
 Un Framework (cadre de travail) est une partie logicielle
qu'on réutilise dans le développement des application en
fournissant un ensemble d’outils et de librairies.
 Il garantit une architecture cohérente et fiable respectant les
bonnes pratiques en matière de génie logiciel;
 Des frameworks peuvent se présenter aussi sous forme d’une
logique de paramétrage, un langage, une technologie
particulière, des outils de transformation, etc
53

UTILITÉ D'UN FRAMEWORK
 Fournir un certain nombre de briques logicielles permettant de
résoudre les tâches récurrentes;
 Permettre au développeur de se concentrer sur le code métier de
l'application;
 Epargner au développeur plusieurs semaines d’étude, de choix de
bibliothèques de code et de développement pour tout relier ensemble;
 Séparer les concepts et faciliter le travail en équipe sur les gros
projets;
 Cependant, l’utilisation d'un framework modifie en profondeur les
habitudes de développement 54

LE CHOIX D'UN FRAMEWORK
 Pérennité du framework;
 Extensibilité;
 Performances des moteurs de templates (ex, efficacité dans
l’interprétation des templates, optimisation des ressources de
stockage de données, système de cache, etc.);
 Courbe d’apprentissage: La qualité de la documentation et la mise
en place d'une communauté dynamique sont primordiales pour
permettre un apprentissage aisé du framework;
55

LE CHOIX D'UN FRAMEWORK II
 Internationalisation par l’adaptation à des langues et
des cultures différentes. Ceci intervient sur quatre
parties d'un logiciel :
 les contenus en base de données;
 les textes de l'interface;
 les formats régionaux (devises, dates, etc.);
 la gestion des jeux de caractères.
 Respect des standards d’internet (ex. XHTML, HTTP,
email, etc). 56

STANDARDISATION ET FRAMEWORK
 La standardisation offre une forte crédibilité et permet une
utilisation ouverte du Framework;
 La standardisation est un ensemble de règles régissant sur
l'utilisation de la technologie dans un contexte particulier;
 Elle proposée par le(s) organisme(s) ou communauté qui est
derrière l'évolution de la technologie:
 Lucraive ou non;
 Structuré ou libre;
 Opensource ;
 Etc;
 Elle est basée sur des modèles patrons;
57

MODÈLES DE CONCEPTION
 On désigne par modèle de conception (design pattern) une manière
récurrente de résoudre un problème de conception;
 Ces modèles de conception ont été documentées, nommées et
standardisées;
 Ils sont tirés de l’expérience de chercheurs ou d’industriels et sont
appliqués comme des bonnes pratiques en général par consensus;
 A l’inverse, des anti-patterns décrivent des mauvaises pratiques
couramment rencontrées. Ce sont des réponses à des problèmes qui
sont donc à éviter;
 Il y’a trois grandes familles de modèles de conception: les modèles de
création, les modèles de comportement et les modèles de structuration;
58

MODÈLES DE CRÉATION
Ils définissent la manière dont les classes et les objets sont instanciés et
configurés.
 La fabrique (the Factory) permet de déléguer l’instanciation d’un objet à un objet
spécial "création" afin de s’abstraire d’une politique d’instanciation;
 Le monteur (Builder) permet d’instancier plusieurs objets complexes et différents
ayant des caractéristiques communes;
 Le prototype (Prototype) permet d’économiser des ressources lorsque l’on a
plusieurs classes identiques à instancier, grâce à un procédé de clonage (créer
des objets sans passer par l’étape de construction);
 Le singleton (Singleton) permet de restreindre l'instanciation d'une classe à un
seul objet. Il est utilisé lorsque l'on a besoin d'exactement un objet pour
coordonner des opérations dans un système. 59

MODÈLES DE COMPORTEMENT
Il s'agi des modèle qui définissent l’algorithmique et la répartition des
tâches entre les objets.
Exemples:
 La chaîne de responsabilité (Chain of responsability) permet à différentes
classes de succéder: si la première ne peut prendre la décision, elle passe
le relais à la deuxième et ainsi de suite.
 La commande (Command) permet de recevoir la requête de l’émetteur,
d’invoquer le récepteur associé et de fournir un résultat.
 L’itérateur (Iterator) met en place une stratégie de parcours. Il agit sur des
collections;
 L’observateur (Observer) permet d’effectuer des opérations lorsque
survient un événement.
60

MODÈLES DE CONCEPTION
Les motifs de structuration définissent des structures types faisant
intervenir plusieurs classes.
 Exemples:
 L’ adaptateur (Adapter) permet de convertir l'interface d'une classe en
une autre interface que le client attend;
 Le pont (Bridge) permet de découpler l'interface d'une classe et son
implémentation. Ainsi l'interface et l'implémentation peuvent varier
séparément;
 Le composite (Composite) permet de manipuler un groupe d'objets de
la même façon que s'il s'agissait d'un seul objet;
 MVC (Model View Controler) permet de séparer les travaux de
conception, de logique métier et d’IHM (Interface homme machine).
61

LE MODÈLE DE CONCEPTION MVC
MVC vise à décomposer l'application en trois couches:
 Modèle: l'interface avec la base de données et la
logique métier;
 Vue: Les régles des IHM à afficher un utilisateur
 Contrôle:sce charge de la gestion des actions des
utilisateurs et le traitement adéquat.
62

LA VUE
 Se charge de la logique d'affichage des données
(éventuellement des résultats), elle n'effectue aucun
traitement;
 L'interface qui permet à l'utilisateur d'interagir avec
l'application:
 recevoir toutes les actions de l'utilisateur (clic,
sélection…);
 événements envoyés au contrôleur;
63

QUELQUES FRAMEWORKS UTILISANT MVC
 JSF: http://www.javaserverfaces.java.net
 Struts2: http://apache.org
 EntityFramework: http://www.microsoft.com/
 Code Igniter: http://codeigniter.fr/
 CackePHP: http://cakephp.org/
 Zend: http://www.zend.com
 Symfony: http://symfony.com/
64

CAKEPHP
65

CAKEPHP
 Projet distribué sous licence MIT, dont l'objectif est le
développement rapide en utilisant des paradigmes bien
définis:
 MVC
 Convention au lieu de configuration
 Dans CakePHP chaque fonctionnalité se code d’une
façon particulière, le framework impose une
architecture et un best practice.
66

CAKEPHP: ARCHITECTURE
67
L'installation:
Décompression du fichier cakephp dans votre
répertoire racine de votre serveur web (ou un sous
dossier représentant votre application)

LES CONVENTIONS DE CAKEPHP
 Les noms de fichiers et de dossier sont généralement en CamelCase
sauf pour les vues;
 Les classes sont en CamelCase;
 Les modèles s’écrivent au singulier, il y a un modèle par table et ces
dernières n’ont qu’une clé ;
 Les contrôleurs s’écrivent au pluriel;
 Les actions s’écrivent en lowerCamelCase;
 Les dossiers des vues on les noms des Contrôleurs, donc au pluriel.
Les fichiers sont le nom des actions en minuscule traduit avec des
underscores; 68

DÉVELOPPEMENT
1. Configuration
 Base de données
 Les différents parties de l'application (mvc);
2. Routing
 Paramètrages des URL des fichiers de l'application,
3. Sessions
 Gestion du temps et des données durant une session
4. Exceptions
5. Gestion des erreurs
69

ATELIER 1
 Créer une maquette de la page d'ajouter une nouvelle annonce du site
www.marocannonces.ma
 Analyser l’organisation du contenu et des tâches en fixant l'objectif de
la page;
 Proposer une maquette équivalente sur Android;
 Assurer que la visibilité, l'accessibilité des composants de l'interface
sont bien claires;
 Assurez vous que les zone de manipulation sont facilement utilisées.
70

LES INTERFACES GRAPHIQUES AVEC
JAVA SWING
Chapitre IV
71

PLAN
 Introduction
 Les fenêtres
 Les conteneurs
 Les composant d’une fenêtre
 La barre de menu
 Les événements
72

JAVA ET LE GRAPHIQUE
 Java a été soutenu par plusieurs bibliothèques pour
créer des interfaces graphiques d’utilisateur (GUI):
 AWT
 Swing
 Qt
 SWT
 GWT
 JavaFx
 …
 Le choix demeure difficile!!!
 SUN: AWT, SWING, JavaFx
73

WEB OU DESKTOP
74
Solutions
Environnement
d’exécution RIA – RDA Technologies
Adobe Flex/AIR Runtime Flash/AIR RIA/RDA XML+AS3
Microsoft
Silverlight
Plugin
Silverlight/Moolight RIA/RDA XAML+.NET
JavaFX JRE/JWS RIA/RDA Java+JavaFX Script
AJAX Natif RIA JavaScript+XML+CSS
Swing JRE Desktop Java

SWING OU AWT
 Swing est plus récente que l’AWT;
 L’ambition de Sun est que, progressivement, les
développeurs réalisent toutes leurs interfaces avec Swing et
laissent tomber les anciennes API graphiques.
 Swing est suffisamment légère:
 En terme de chargement et exécution;
 AWT ne comporte que des composants lourds.
 Ce choix technique a été initialement fait pour assurer la portabilité.
75

COMPOSANT LOURD?
 Définition :
 Un composant graphique lourd s'appuie sur le gestionnaire de
fenêtres local, celui de la machine sur laquelle le programme
s'exécute.
 Exemple (AWT):
 Un bouton de type Button intégré dans une application Java sur la
plate-forme Unix est représentée grâce à un vrai bouton Motif
 Java communique avec ce bouton Motif en utilisant la Java Native
Interface. Cette communication induit un coût.
 C'est pourquoi ce bouton est appelé composant lourd. 76

COMPOSANT LÉGER (SWING)
 Un composant graphique léger est un composant
graphique indépendant du gestionnaire de fenêtre
local.
 Un composant léger ressemble à un composant du
gestionnaire de fenêtre local mais n'en est pas un vrai.
 un composant léger émule les composants de gestionnaire de
fenêtre local.
 Un bouton léger est un rectangle dessiné sur une zone de
dessin qui contient une étiquette et réagit aux événements
souris. 77

SWING: MOTIVATIONS
 Elle a toutes les caractéristiques de AWT;
 Enormément riche en composants graphiques;
 Interface purement Java;
 Version certifiée 100% Java des composants d’AWT;
 Intégration facile des aspects look & feel (L&F)-Style.
78

HIÉRARCHIE DE LA CLASSE SWING
79
javax.swing.*

COMPOSANT GUI
 Java: GUI component = class
 Properties

 Methods

 Events

80
JButton

UTILISATION D’UN COMPOSANT GUI
1. La création
 Instancier l’objet: b = new JButton(“press me”);
2. La configuration
 Propriétés: b.text = “press me”; [avoided in java]
 Méthodes: b.setText(“press me”);
3. L’ajout
 panel.add(b);
4. L’écouter
 Evénements: Listeners
81
JButton

SQUELETTE D’UNE APPLICATION
82
JPanel
JButton
JFrame
JLabel
GUI Internal structure
JFrame
JPanel
JButton JLabel
containers

ORDRE DE CRÉATION
Pour un composant, doit subir:
1. Le créer
2. Le configurer
3. Ajouter ses sous composants (si conteneur)
4. L’ajouter à son parent (excepter JFrame)
5. L’écouter
83
ordre
d’importance

CRÉATION DU BAS VERS LE HAUT
 Création:
 Frame
 Panel
 Composant
 Listeners
 Ajout: (bottom up)
 listeners dans le composant
 Composant dans le panel
 panel dans la frame 84
JPanel
JButton
Listener
JFrame
JLabel

PAQUETAGES SWING I
 javax.swing
 le paquetage général
 javax.swing.border
 pour dessiner des bordures autour des composants
 javax.swing.colorchooser
 classes et interfaces utilisées par le composant JColorChooser
 javax.swing.event
 les événements générés par les composants Swing
 javax.swing.filechooser
 classes et interfaces utilisées par le composant JFileChooser 85

PAQUETAGES SWING II
 javax.swing.table
 classes et interfaces pour gérer les JTable
 javax.swing.text
 classes et interfaces pour la gestion des composants « texte »
 javax.swing.tree
 classes et interfaces pour gérer les JTree
 javax.swing.undo
 pour la gestion de undo/redo dans une application 86

COMPOSANTS: EXEMPLES
 JTextPane
 un éditeur de texte qui permet la gestion de texte formaté, le
retour à la ligne automatique (word wrap), l'affichage
d'images.
 JPasswordField
 un champ de saisie de mots de passe : la saisie est invisible
et l'affichage de chaque caractère tapé est remplacé par un
caractère d'écho (* par défaut).
 JEditorPane
 un JTextComponent pour afficher et éditer du code HTML. 87

FENÊTRE: JFRAME
 La création d’une fenêtre graphique se fait via l’appel
de la classe Jframe;
 Pour instancier, Jframe dispose de deux constructeurs:
 Par défaut: Jframe fen = new Jframe()
Fen.setTitle("titre de mon choix")
 Avec argument: Jframe fen = new Jframe ("titre de mon
choix")
88

JFRAME: CONTENEUR
 Jframe en lui-même est conteneur par défaut,
cependant il possible d'en ajouter d'autres conteneurs
pour incorporer des composants atomique;
 Exemple:
 GetContentPane(): permet une référence Container à la
Jframe:
 Component add(composant)
 Remove(composant)
89

JFRAME: ANATOMIE
90

JFRAME: ANATOMIE II
 La Jframe est composée en plusieurs parties :
 RootPane: conteneur principal
 le LayeredPane: composé du ContentPane et de la barre de menu
(MenuBar)
 ContentPane : contient la partie utile de la fenêtre,
 GlassPane : pour intercepter les actions de l'utilisateur avant qu'elles ne
parviennent aux composants.
91

JFRAME: POSITIONNEMENT DES COMPOSANTS
 Le contentPane se base sur le Z-ordering pour l'organisation des
éléments;
 Le positionnement personnalisé: le développeur utilise un système
de coordonnées en x et en y.
 L'utilisation des layout Managers (gestionnaire de placement) : le
développeur profite des layouts prédéfinis qui vont s'occuper de placer
correctement les composants dans la fenêtre. C'est cette solution qui
nous intéresse le plus développer maintenant.
92

GESTIONNAIRES DE LAYOUT
93
Left to right,
Top to bottom
c
n
s
e
w
FlowLayout GridLayout
BorderLayout
none,
programmer
sets x,y,w,h
null
One at a time
CardLayout GridBagLayout
JButton

GESTIONNAIRES DE PLACEMENT (LAYOUT)
 FlowLayout : place les composants sur une ligne et recommence une
nouvelle ligne à chaque fois qu'il atteint la fin de la ligne.
 BorderLayout : place les composants dans 5 zones du container : La
zone du haut, la zone du bas, la zone de gauche, celle de droite et la
zone du centre.
 CardLayout : place les composants sur des couches disposées les
unes sur les autres. On ne peut voir qu'une couche à la fois. On
utilise surtout ce layout quand on a une série de composants qui
s'affichent en fonction de quelques choses;
 GridLayout : Ce composant place les composants dans une grille. Il
va redimensionner les composants pour les rendre tous de la même
taille.
94

BORDURES
 Des bordures peuvent être dessinées autour de tous composants
graphiques:
 AbstractBorder : ne fait rien
 BevelBorder : une bordure 3D en surépaisseur ou en creux
 CompoundBorder : permet de composer des plusieurs bordures
 EmptyBorder; pas de bordure
 EtchedBorder: Gravé
 LineBorder : bordures d'une seule couleur)
 MatteBorder: Gras
 SoftBevelBorder : une bordure 3D aux coins arrondis
 TitledBorder : une bordure permettant l'inclusion d’une chaîne de
caractères
95

BORDURES II
96

MÉTHODES PRATIQUES I
Utilisasation : composant.methode()
 void setVisible(boolean b) : montrer et cacher un composant
 void setEnabled(boolean b): activer et désactiver un composant
 boolean isEnabled(): tester l’état d’un composant
 void setBounds(int x, int y, int largeur, int hauteur): personnaliser le
positionnement et la taille
 void setSize(int largeur, int hauteur): personnalise la taille
 void setBackground(Color c): personnaliser la couleur du fond
 Void set size(new dimension(largeur, hauteur) ou setpreferedsize 97

COMPOSANTS ATOMIQUE
 Les boutons
 Les cases à cocher
 Les boutons radio
 Les étiquettes
 Les champs de texte.
 Les boîtes de liste
 Les boîtes de liste combinée
98

LA CLASSE JCOMPONENT
 Tous les composants atomiques sont accessibles par la
classe abstraite JComponent qui dérive de la classe
Container
99

LES BOUTONS
 Instanciation de la Jcomponent:
 JButton bouton1 = new JButton (String, icon)
 JButton("titre")
 JButton ("titre", chemin d'icon) // pr afficher une icon
 L'ajout à la fenêtre via un Pane():
 getContentPane().add(bouton1); // Pane() par défaut
 Modifier la taille:
 bouton1.setBounds(10, 10, 10, 10); 100

JCHECKBOX: CASES À COCHER
 JCheckBox: plusieurs constructeurs:
 myCase = new JCheckBox("Ma première case à cocher")
 myCase = new JCheckBox(Icon chemin)
 JCheckBox(Icon /String, boolean selected)
 Personnaliser la bordure:
 myCase.setBorderPaintedFlat(boolean)
 Selection:
 myCase.setSelected(boolean); //void
 myCase.isSelected() // booelan
101

JRADIOBUTTON
 Presque similaire à la classe JCheckButton sauf la
différence de la limitation d'un seul bouton à cocher, et
surtout l'adhésion à un groupe:
 JRadioButton f = new JRadioButton(String +| icon +| etat)
 JRadioButton h = new JRadioButton(String +| icon +| etat)
 Création du groupe:
 ButtonGroup mygroup = new ButtonGroup() ;
 Appartenance au groupe:
 mygroupe.add(f); mygroupe.add(h);
102

JRADIOBUTTON: REMARQUES
 Le groupe n'est pas un conteneur!!
 Son rôle est juste pour s'assurer qu'un seul bouton est
coché à la fois;
 Les boutons radio peuvent aussi s'ajouter à un conteneur:
 Par défaut: getContentPane().add(f)
 Personnalisé:
Container contenu = getContentPane() ;
contenu.setLayout(new FlowLayout()) ;
contenu.add(f) ;
contenu.add(h) ;
103

LES ZONES DE TEXTES
 La super Classe JTextComponent fournit plusieurs
variantes de zones de texte
104

JTEXTCOMPONENT
105

JTEXTFIELD
 Constructeurs:
 JTextField()
JTextField(String)
JTextField(String, int)
JTextField(int)
 Exemple
JTextField mazone = new JTextField("default", 12);
 Ajouter au Pane():
getContentPane().add(mazone) ;
 Récuperer le contenu:
String ch= mazone.getText() ;
106

JLABEL: ÉTIQUETTES
 Un texte non modifiable mais le programme peut
l'utiliser;
 Constructeurs:
 JLabel(Icon)
 JLabel(Icon, int)
 JLabel(String)
 JLabel(String, Icon, int)
 JLabel(String, int)
 Exemple
 Jlabel MonTexte = new Jlabel ("Nom et prénom") ;
107

LES LISTES: JLIST
 Composants pouvant avoir plusieurs valeurs,mais
aucun n'est sélectionné par défaut.
 Pas de barre de défilement par défaut, le développeur
doit explicitement définir la barre et la taille maximale;
 Constructeurs:
JList(ListModel) // proposer une liste
JList(Object[]) //proposer un objet contenant des éléments
JList(Vector) // //proposer un tableau
JList()
108

JLIST II: ORIENTATION
 setLayoutOrientation(int)
109

JLIST III: MODE
 setModel(ListModel)
110

JLIST IV: FONCTIONS UTILES
 Ajout:
 listModel.addElement("ENSA");
 Suppression:
 void clearSelection()
 int index = list.getSelectedIndex(); list.remove(index);
 Tests:
 void setSelectedIndex(int)
 void setSelectedIndices(int[])
 void setSelectedValue(Object, boolean)
 void setSelectionInterval(int, int)
111

JLIST IV: AUTRES
 Récupérer l'élément sélectionné:
 String getSelectedValue();
 Exemple:
String[] statut = {"Mlle", "Mme", "Mr"};
JList MyList = new Jlist(statut) ;
MyList.setSelectedIndex(1) ;
String element = (String) MyList.getSelectedValue();
JScrollPane defile = new JScrollPane(MyList) ;
MyListe.setVisibleRowCount(7) ;
myframe.getContentPane().add(defile) ; 112

JCOMBOBOX
 Une liste déroulante héritant toutes les méthodes
précédentes, mais ayant de propriétés supplémentaires:
 Constructeurs:
 JComboBox()
 JComboBox(ComboBoxModel)
 JComboBox(Object[])
 JComboBox(Vector)
 Exemple:
String[] statut = {"Mlle", "Mme", "Mr"};
JComboBox MaCombo = new JComboBox(statut) ;
MaCombo.setSelectedIndex(1) ;
113

JCOMBOBOX II: MÉTHODES
 MaCombo.setMaximumRowCount(4) ;
 Par défaut 8 élément sont affichés, on peut forcer un
nombre précis, exemple 4.
 Ajouter un element:
 void addItem("yyyyy") //
 void insertItemAt(element, position)
 Suppression:
 void removeAllItems()
 void removeItemAt(int)
 void removeItem(Object)
114

BARRE DE MENU
115

BARRE DE MENU II: DÉMARCHE
 Cinq pricipales parties:
 Création de la barre de menu
private JMenuBar menuBar = new JMenuBar();
 Création des menus (Fichiers, vues, help..)
private JMenu test1 = new JMenu("Fichier");
private JMenu test2 = new JMenu("Help");
 Création des éléements d'un menu (ouvrir, sauvegarder..)
private JMenuItem item1 = new JMenuItem("ouvrir");
private JMenuItem item2= new JMenuItem("online help");
 L'ajoute de chaque sous composants dans son conteneur:
test1.add(item1);
test2.add(item2);
menuBar.add(test1);
menuBar.add(test2);
 Ajouter la barre de menu dans le pannel
116

GESTION DES ÉVÈNEMENTS
 Un évènement est l'ensemble des actions établies par
l'utilisateur en utilisant un périphérique E/S:
 Un click
 Une frappe au clavier
 Un mouvement de souris
 Un changement interne dans le programme
118

GESTION DES ÉVÈNEMENTS II
 Un évènement est toujours lié à une source:
 L'objet qui le déclenche: Bouton par exemple;
 XXXEvent (javax.swing.event):
 C'est le type de tous les évènements d'une interface Swing;
 Pour manipuler un évènement il faut introduire un
écouteur des évènements XXXListener ;
 Remarque: Les composants ne sont pas capables de gérer
leurs évènements;
119

EVEMENEMENTS
120
Action provoquant l'événement Type de listener
L'utilisateur clique sur un bouton de
souris, tape sur une touche ...
ActionListener
L'utilisateur ferme ou iconifie une
fenetre
WindowListener
L'utilisateur presse un bouton au
dessus d'un composant
MouseListener
Détection du mouvement de la souris MouseMotionListener
Un composant devient visible ComponentListener
Un composant obtient le focus FocusListener
Changement de la sélection dans
une liste
ListSelectionListener

ECOUTEURS: EXMEPLES
 public void addMouseListener(MouseListener l) ;
//événements souris
 public void addMouseMotionListener(MouseMotionListener l)
// déplacement de la souris
 public void addFocusListener(FocusListener l) ;
//prise et perte du focus
 public void addKeyListener(KeyListener l) ;
//événements clavier
121

ECOUTEUR: CODE PART I
122
class EcouteurSouris implements MouseListener {
public void mouseClicked(MouseEvent e) {
System.out.println("vous avez cliquer sur la fenetre"); }
public void mousePressed(MouseEvent e) { }
public void mouseReleased(MouseEvent e) { }
public void mouseEntered(MouseEvent e) { }
public void mouseExited(MouseEvent e) { }
}

ECOUTEUR: CODE PART II
123
import javax.swing.* ; import javax.swing.event.* ;
class MaFenetre extends JFrame {
public MaFenetre () {
super("Une fenetre qui traite les clics souris") ;
setSize(300, 200) ;
addMouseListener(new EcouteurSouris());
}
public static void main(String args[]) {
JFrame fen = new MaFenetre() ;
fen.setVisible(true) ;
}
}

EXEMPLE AVEC UN BOUTON
 L'interface ActionListner est réservée pour les boutons;
 La méthode ActionPeroformed() contient le traitement
si l'utilisateur clique sur le bouton:
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e)
{
//Execute when button is pressed
System.out.println("You clicked the button");
}
});
124

PLUSIEURS BOUTONS
JButton addButton = new JButton( new AbstractAction("add") {
public void actionPerformed( ActionEvent e ) {
// add Action
}
});
JButton substractButton = new JButton( new AbstractAction("substract") {
² public void actionPerformed( ActionEvent e ) {
// substract Action
}
});
125

1680274500731_Interfacehommemachine.pptx

Recommandé

Recommandé

Contenu connexe

Similaire à 1680274500731_Interfacehommemachine.pptx

Similaire à 1680274500731_Interfacehommemachine.pptx (20)

Dernier

Dernier (20)

1680274500731_Interfacehommemachine.pptx