2. 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
3. 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
4. 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
6. 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
7. 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
8. 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
9. 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
11. 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
12. 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
13. 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
14. 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
16. 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
17. 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
18. 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
19. 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
22. 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
23. Y. EL BOUZEKRI EL IDRISSI
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
24. Y. EL BOUZEKRI EL IDRISSI
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.
25. Y. EL BOUZEKRI EL IDRISSI
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
26. Y. EL BOUZEKRI EL IDRISSI
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
27. Y. EL BOUZEKRI EL IDRISSI
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
28. Y. EL BOUZEKRI EL IDRISSI
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
29. Y. EL BOUZEKRI EL IDRISSI
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
30. Y. EL BOUZEKRI EL IDRISSI
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
31. Y. EL BOUZEKRI EL IDRISSI
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
32. Y. EL BOUZEKRI EL IDRISSI
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
33. Y. EL BOUZEKRI EL IDRISSI
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
34. Y. EL BOUZEKRI EL IDRISSI
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
35. Y. EL BOUZEKRI EL IDRISSI
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
36. Y. EL BOUZEKRI EL IDRISSI
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
37. Y. EL BOUZEKRI EL IDRISSI
LE REGARD DE L’UTILISATEUR
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
38. Y. EL BOUZEKRI EL IDRISSI
LE REGARD DE L’UTILISATEUR
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
39. Y. EL BOUZEKRI EL IDRISSI
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
40. Y. EL BOUZEKRI EL IDRISSI
35%
42%
98%
61%
31 10%
33%
47%
66%
56%
83%
35%
parcours visuel d’une page Web
41. Y. EL BOUZEKRI EL IDRISSI
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
43. Y. EL BOUZEKRI EL IDRISSI
accessibilité des éléments de l’interface
44. Y. EL BOUZEKRI EL IDRISSI
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
45. Y. EL BOUZEKRI EL IDRISSI
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
46. Y. EL BOUZEKRI EL IDRISSI
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
48. Y. EL BOUZEKRI EL IDRISSI
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
49. Y. EL BOUZEKRI EL IDRISSI
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
50. Y. EL BOUZEKRI EL IDRISSI
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
51. Y. EL BOUZEKRI EL IDRISSI
APPLICATION 2-NIVEAUX (CENTRALISÉE)
51
• Plusieurs clients et un serveur.
• Découpage en deux de la charge de l’application
server
52. Y. EL BOUZEKRI EL IDRISSI
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
53. Y. EL BOUZEKRI EL IDRISSI
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
54. Y. EL BOUZEKRI EL IDRISSI
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
55. Y. EL BOUZEKRI EL IDRISSI
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
56. Y. EL BOUZEKRI EL IDRISSI
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
57. Y. EL BOUZEKRI EL IDRISSI
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
58. Y. EL BOUZEKRI EL IDRISSI
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
59. Y. EL BOUZEKRI EL IDRISSI
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
60. Y. EL BOUZEKRI EL IDRISSI
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
61. Y. EL BOUZEKRI EL IDRISSI
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
62. Y. EL BOUZEKRI EL IDRISSI
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
63. Y. EL BOUZEKRI EL IDRISSI
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
64. Y. EL BOUZEKRI EL IDRISSI
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
66. Y. EL BOUZEKRI EL IDRISSI
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
67. Y. EL BOUZEKRI EL IDRISSI
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)
68. Y. EL BOUZEKRI EL IDRISSI
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
69. Y. EL BOUZEKRI EL IDRISSI
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
70. Y. EL BOUZEKRI EL IDRISSI
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
72. Y. EL BOUZEKRI EL IDRISSI
PLAN
Introduction
Les fenêtres
Les conteneurs
Les composant d’une fenêtre
La barre de menu
Les événements
72
73. Y. EL BOUZEKRI EL IDRISSI
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
74. Y. EL BOUZEKRI EL IDRISSI
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
75. Y. EL BOUZEKRI EL IDRISSI
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
76. Y. EL BOUZEKRI EL IDRISSI
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
77. Y. EL BOUZEKRI EL IDRISSI
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
78. Y. EL BOUZEKRI EL IDRISSI
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
79. Y. EL BOUZEKRI EL IDRISSI
HIÉRARCHIE DE LA CLASSE SWING
79
javax.swing.*
80. Y. EL BOUZEKRI EL IDRISSI
COMPOSANT GUI
Java: GUI component = class
Properties
Methods
Events
80
JButton
81. Y. EL BOUZEKRI EL IDRISSI
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
82. Y. EL BOUZEKRI EL IDRISSI
SQUELETTE D’UNE APPLICATION
82
JPanel
JButton
JFrame
JLabel
GUI Internal structure
JFrame
JPanel
JButton JLabel
containers
83. Y. EL BOUZEKRI EL IDRISSI
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
84. Y. EL BOUZEKRI EL IDRISSI
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
85. Y. EL BOUZEKRI EL IDRISSI
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
86. Y. EL BOUZEKRI EL IDRISSI
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
87. Y. EL BOUZEKRI EL IDRISSI
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
88. Y. EL BOUZEKRI EL IDRISSI
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
89. Y. EL BOUZEKRI EL IDRISSI
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
91. Y. EL BOUZEKRI EL IDRISSI
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
92. Y. EL BOUZEKRI EL IDRISSI
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
93. Y. EL BOUZEKRI EL IDRISSI
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
94. Y. EL BOUZEKRI EL IDRISSI
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
95. Y. EL BOUZEKRI EL IDRISSI
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
97. Y. EL BOUZEKRI EL IDRISSI
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
98. Y. EL BOUZEKRI EL IDRISSI
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
99. Y. EL BOUZEKRI EL IDRISSI
LA CLASSE JCOMPONENT
Tous les composants atomiques sont accessibles par la
classe abstraite JComponent qui dérive de la classe
Container
99
100. Y. EL BOUZEKRI EL IDRISSI
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
101. Y. EL BOUZEKRI EL IDRISSI
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
102. Y. EL BOUZEKRI EL IDRISSI
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
103. Y. EL BOUZEKRI EL IDRISSI
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
104. Y. EL BOUZEKRI EL IDRISSI
LES ZONES DE TEXTES
La super Classe JTextComponent fournit plusieurs
variantes de zones de texte
104
106. Y. EL BOUZEKRI EL IDRISSI
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
107. Y. EL BOUZEKRI EL IDRISSI
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
108. Y. EL BOUZEKRI EL IDRISSI
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
109. Y. EL BOUZEKRI EL IDRISSI
JLIST II: ORIENTATION
setLayoutOrientation(int)
109
110. Y. EL BOUZEKRI EL IDRISSI
JLIST III: MODE
setModel(ListModel)
110
111. Y. EL BOUZEKRI EL IDRISSI
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
112. Y. EL BOUZEKRI EL IDRISSI
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
113. Y. EL BOUZEKRI EL IDRISSI
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
114. Y. EL BOUZEKRI EL IDRISSI
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
116. Y. EL BOUZEKRI EL IDRISSI
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
118. Y. EL BOUZEKRI EL IDRISSI
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
119. Y. EL BOUZEKRI EL IDRISSI
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
120. Y. EL BOUZEKRI EL IDRISSI
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
121. Y. EL BOUZEKRI EL IDRISSI
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
122. Y. EL BOUZEKRI EL IDRISSI
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) { }
}
123. Y. EL BOUZEKRI EL IDRISSI
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) ;
}
}
124. Y. EL BOUZEKRI EL IDRISSI
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
125. Y. EL BOUZEKRI EL IDRISSI
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