UNIVERSITE DR.

YAHIA FARES DE MEDEA

FACULTE DES SCIENCES
Département Mathématiques et Informatique
3eme Licence Systèmes Informatiques
Année universitaire : 2022/2023

TD N3
Modèles & architectures des IHM (Seeheim et MVC)

I. APIs des éléments graphiques :

• Les membres :
 Texte : Le texte affiché sur l’élément.
 Location : la position de l’élément dans son conteneur (l’élément qui le contient)
 Size : La taille de l’élément
 Couleur : La couleur de l’élément.
• Les méthodes :
 setTexte(text) : pour modifier le texte de l’élément.
 setLocation(x,y) : pour modifier la position de l’élément.
 setSize (largeur, longueur): pour modifier la taille de l’élément.
 setCouleur(couleur) : pour modifier la couleur de l’élément.
 setActive(booléen) : pour activer ou désactiver l’élément.
 text= getTexte() : pour récupérer le texte de l’élément.
 valueur = getAs (type) : pour récupérer la valeur de l’élément avec le type souhaité (entier, réel,
etc.).
 (x, y)=getLocation() : pour récupérer la position de l’élément.
 (largeur,longueur)= getSize() : pour récupérer la taille de l’élément.
 couleur = getCouleur() : pour récupérer la couleur de l’élément.
 Booleen = estActive() : pour savoir si l’élément est active ou non.
 Add(element) : pour ajouter un élément graphique.
• Les événements :
 onClique() : cette événement se déclenche quand on clique sur l’élément.
 onChange() : Cette événement quand on fait de modification sur l’un des propriétés de l’élément.
 onEnter() : Cette événement quand le curseur d’écriture entre dans la zone d’édition de l’élément.
 onQuitte() : Cette événement quant on le curseur d’écriture sort de la zone d’édition de l’élément.
• Exemple
Bouton B = new Bouton() ; //Déclaration d’un bouton
B .setTexte(«Ok » ) ; //Appeler de la méthode setTexte() du bouton.
B. onClique(){ //Implémentation le gestionnaire d’événement onClique() du bouton.
B. setTexte(«Non» ) ;
}

II. Remarque :
• S’il est nécessaire, vous prouvez proposer d’autre membre, méthodes et événements.
• Il n’est pas demandé d’implémenter les fonctions du noyau fonctionnel.
• Le noyau fonctionnel est le responsable de tous les traitements qui ne font partie de l’IHM.

1
III. Travail à faire :
Pour chaque exercice proposez les spécifications suivant pour le modèle Seeheim en suite le modèle
MVC avant de faire les implémentations :
• Analyse des besoins (Ce que l’IHM idéale doit effectuer).
• Spécification conceptuelle (Le schémas du modèle Seeheim ou modèle MVC, les APIs de
chaque élément de chaque modèle, l’interface graphique).
• Spécification fonctionnelle (la liste des commandes et la méthode utiliser pour chaque
commande).
• Spécification syntaxique (la syntaxe de chaque commande, les erreurs qui peuvent être
commises par l’utilisateur).
• Spécification lexicale (la syntaxe de chaque commande).

2
IV. Travail à faire :
Exercice 1 : Soit une calculatrice qui fait les quatre opérations (+, -, *, et /) sur deux nombres naturels
ayant un seul chiffre pour chacun, le résultat aussi est un nombre naturel d’un seul chiffre. En cas d’erreur,
la calculatrice affiche la lettre « E ».
1. Analyse de besoin : Les énoncés de l'exercice.
2. Spécification conceptuelle :
 Modèle de Seeheim
Calculer(o1, 02, OP)
OnValue(v)
Interface de
Contrôleur
Utilsateur l'application Application
de dialogue
AfficherResult(R)
Afficher(M)
Présentation

Utilsateur
 Modèle MVC

OnValue(v) Afficher(R)
Afficher(M)
Vue

Contrôleur Modèle

Calculer(o1, 02, OP)

Application
 API de l’application
R=calcule(o1,o2,op) : R contiendra le résultat si le résultat du calcule est dans l’intervalle [0,9],
autrement il contiendra la valeur «E » ;

3. Spécification fonctionnelle
Quand l’utilisateur introduire les opérandes, l’opération et la signe égale suivant l’expression régulière
«[0-9](+|-|*|/) [0-9]= » et le résultat du calcule est inférieur à 10 on affiche le résultat, autrement on afficher
«E».
Quand on taper sur le bouton « C » on supprime le contenu de la zone d’affichage et on réinitialise le
calcule
L’utilisateur devrait appuyer sur la touche pour réinitialiser le calcule.

4. Spécification syntaxique
• «C » afficher « » ;
• «=» afficher « E»  «C »  afficher « » et réinitialiser le calcule;
• (+|-|*|/) afficher « E»  «C »  afficher « » et réinitialiser le calcule ;
• = afficher « E»  «C »  afficher « » ;

3
• [0-9] afficher le chiffre introduit  «C »  afficher « » et réinitialiser le calcule ;
• [0-9] afficher le chiffre introduit  « = »  afficher « E»  «C »  afficher « » et réinitialiser le
calcule;
• [0-9] afficher le chiffre introduit  [0-9]  afficher « E»  «C »  afficher « » et réinitialiser le
calcule;
• [0-9] afficher le chiffre introduit  (+|-|*|/) afficher le chiffre introduit concaténer avec l‘opération
introduite  «C »  afficher « » et réinitialiser le calcule ;
• [0-9] afficher le chiffre introduit  (+|-|*|/) afficher le chiffre introduit concaténé avec l‘opération
introduite  (+|-|*|/) afficher « E»  «C »  afficher « » et réinitialiser le calcule;
• [0-9] afficher le chiffre introduit  (+|-|*|/) afficher le chiffre introduit concaténé avec l‘opération
introduite  «= »  afficher « E»  «C »  afficher « » et réinitialiser le calcule;
• [0-9] afficher le chiffre introduit  (+|-|*|/) afficher le chiffre introduit concaténé avec l‘opération
introduite  [0-9]  afficher le premier chiffre introduit concaténé avec l‘opération introduite
concaténé avec le deuxième chiffer introduit «C »  afficher « » et réinitialiser le calcule ;
• [0-9] afficher le chiffre introduit  (+|-|*|/) afficher le chiffre introduit concaténé avec l‘opération
introduite  [0-9]  afficher le premier chiffre introduit concaténé avec l‘opération introduite
concaténé avec le deuxième chiffer introduit [0-9]  afficher « E» «C »  afficher « » et
réinitialiser le calcule ;
• [0-9] afficher le chiffre introduit  (+|-|*|/) afficher le chiffre introduit concaténé avec l‘opération
introduite  [0-9]  afficher le premier chiffre introduit concaténé avec l‘opération introduite
concaténé avec le deuxième chiffer introduit (+|-|*|/) afficher « E»«C »  afficher « » et
réinitialiser le calcule;
• [0-9] afficher le chiffre introduit  (+|-|*|/) afficher le chiffre introduit concaténé avec l‘opération
introduite  [0-9]  afficher le premier chiffre introduit concaténé avec l‘opération introduite
concaténé avec le deuxième chiffer introduit « = » afficher le premier chiffre introduit concaténé
avec l‘opération introduite concaténé avec le deuxième chiffer introduit concaténés avec le résultat du
calcule ;

C/A4
=, (+|-|*|/)/A5
[0-9],
=, (+|-|*|/)
(+|-|*|/) /A5
=, [0-9]/A5
/A5
[0-9]/A0 =/A3

(+|-|*|/)/A1 [0-9]/A2
S0 S1 S2 S3 S4
C/A4

(+|-|*|/),
C/A4
[0-9], =
C/A4 /A0

C/A4

4
• A0 : Afficher le chiffre introduit
• A1 : Afficher le chiffre introduit concaténé avec l’opération introduite
• A2 : Afficher le premier chiffre introduit concaténé avec l’opération introduite concaténé avec le
deuxième chiffre introduit
• A3 : Afficher le résultat
• A4 : réinitialiser le calcule et Afficher « »
• A5 : Afficher « E »
• A6 : rien faire.

5. Spécification lexicale
• Pour introduire un chiffre on appuie sur la touche correspondante.
• Pour introduire une opération on appuie sur la touche correspondante.
• Pour afficher le résultat on appuie sur la touche « = ».
• Pour réinitialiser le calcule on appuie sur la touche «C ».
• Pour afficher un message on modifie le contenu de la zone de texte.
6. Implémentation :
 Modèle de Seeheim
Main(){
P = new Présentation() ;
C = new ContrôleurDeDialogue() ;
I = new InterfaceDeApplication() ;
P.setContrôleurDeDialogue(C) ;
C.setPrésentation(P) ;
C.setInterfaceDeApplication(I) ;
I.setContrôleurDeDialogue(C) ;
P.setVisible(true) ;
}
Présentation{
c : ControleurDeDialogue ;
b0 = new Boutton(«0 » ) ;… ;b9 = new Boutton(«9 » ) ;
ba = new Boutton(«+» ) ;… ;bp vBoutton(«*» ) ;
bc = new Boutton(«C» ) ;
be = new Boutton(«=» ) ;
t = new TextEdit();
b0.Onclick(){
c.OnValue(“0”);
}
Afficher(M){
t.setTet(M) ;
}
setControleurDeDialogue(C) {c=C ;}
}

5
ContrôleurDeDialogue{
P : Presentation;
i : InterfaceDeApplication;
s=0;
o1=0;
o2=0;
op=””;
m=””;
OnValue(v){
if(v==”C”){
s=0;
p.Afficher(“”);
retourne();
}else{
if(s==4){
retourne();
}
}

if(v in [0,1]){
if(s==0){
o1=v;
m=o1;
p.Afficher(m);
o1=v;
s=1;
retourne();
}

if(s==2){
o2=v;
m= m +o2;
p.Afficher(m);
s=3;
retourne();
}
p.Afficher(“E”);
s=5;
retourne();
}
if(v in (+,-,*,/)){
if(s==1){
op=v;
m= m +op;
p.Afficher(m);
s=2;
retourne();
6
 }
p.Afficher(“E”);
s=5;
retourne();
}
if(v ==”=”){
if(s==3){
m= m +v;
p.Afficher(m);
s=4;
i .calcule(o1,o2,op);
retourne();
}
p.Afficher(“E”);
s=5;
retourne();
}
}
AfficherResult(M) {
p.Afficher(M);
}
setPrésentation(P) {p=P ;}
setInterfaceDeApplication(I) {i=I;}
}
InterfaceDeApplication{
c : ControleurDeDialogue;
a= new Application() ;

calcule(o1,o2,op){
R=a .calcule(o1,o2,op);
c. AfficherResult(R) ;
}
setControleurDeDialogue(C) {c=C ;}
}

 Modèle MVC
Main(){
V = new Vue() ;
C = new Controleur () ;
M= new Modele() ;

V.setControleur (C) ;
C.setVue (V) ;
C.set Modele (M) ;
M.setControleur(C) ;
M.setVue (V) ;
V.setVisible(true) ;
7
}
Vue{
c : Controleur ;
b0 = new Boutton(«0 » ) ;… ;b9 = new Boutton(«9 » ) ;
ba = new Boutton(«+» ) ;… ;bp vBoutton(«*» ) ;
bc = new Boutton(«C» ) ;
be = new Boutton(«=» ) ;
t = new TextEdit();
b0.Onclick(){
c.OnValue(“0”);
}
Afficher(M){
t.setTet(M) ;
}
setControleur (C) {c=C ;}
}

Controleur{
v : Vue;
m : Modele;
s=0;
o1=0;
o2=0;
op=””;
ms=””;
OnValue(val){
if(val ==”C”){
s=0;
v.Afficher(“”);
retourne();
}else{
if(s==4){
retourne();
}
}

if(val in [0,1]){
if(s==0){
o1= val;
ms=o1;
v.Afficher(ms);
s=1;
retourne();
}
if(s==2){
o2= val;
ms= ms + o2;
8
 v.Afficher(ms);
s=3;
retourne();
}
v.Afficher(“E”);
s=5;
retourne();
}
if(val in (+,-,*,/)){
if(s==1){
op=val;
ms= ms + op;
v.Afficher(ms);
s=3;
retourne();
}
v.Afficher(“E”);
s=5;
retourne();
}
if(val ==”=”){
if(s==3){
ms= ms + val;
v.Afficher(ms);
s=4;
m .calcule(o1,o2,op);
retourne();
}
v.Afficher(“E”);
s=5;
retourne();
}
}
setVue(V) {v=V ;}
setModele(M) {m=M;}
}
Modele{
v: Vue;
c : Controleur;
a= new Application() ;
calcule(o1,o2,op){
R=a .calcule(o1,o2,op);
v. Afficher*(R) ;
}
setVue (V) {v=V ;}
setControleur (C) {c=C ;}
}
9
 Exercice 2 : Soit un formulaire d’authentification qui se compose d’un champ pour l’identifiant, un
champ pour le mot de passe, et un bouton pour valider le formulaire. Le système doit obliger l’utilisateur à
remplir le formulaire dans l’ordre (identifiant, mot de passe, en suite clique le bouton).

Exercice 3 : Soit le formulaire d’authentification de troisième exercice. Dans ce cas, l’identifiant est
obligatoirement un email, et le mot de passe doit être se composé d’au moins d’un chiffre, une lettre
minuscule, une lettre majuscule, et un caractère spécial.

Exercice 4 : Soit un formulaire d’inscription se compose d’un champ pour l’identifiant, un champ pour
le mot de passe, un champ pour confirmer le mot de passe, et le bouton de validation. L’identifiant est
obligatoirement un email, et le mot de passe doit être de longueur supérieure à 8 caractères, et de se compose
d’au moins d’un chiffre, une lettre minuscule, une lettre majuscule, et un caractère spécial.

10