ISN, 2017IHM

Sylvie Alayrangues1

1Université de Poitiers Laboratoire XLIM-SICSylvie.Alayrangues@univ-poitiers.fr

1/11

Première partie I

IHM

2/11

Plan - A - IHM

1 Introduction

2 Ingrédients d’une interface

3 Modèle MVC

3/11

Plan → A - IHM

1 Introduction

2 Ingrédients d’une interface

3 Modèle MVC

4/11

A - IHM A.I - Introduction

IHMI comme ????H comme HommeM comme Machine

5/11

A - IHM A.I - Introduction

IHMInterface Homme-Machine vs Interactions Homme-Machine

5/11

Plan → A - IHM

1 Introduction

2 Ingrédients d’une interfaceÉléments graphiquesProgrammation événementielle

3 Modèle MVC

6/11

A - IHM A.II - Ingrédients d’une interfaceII.1 - Éléments graphiques

Éléments graphiques ou widgetsConteneurs "top niveau" : fenêtres, boîtes de dialogue. . .Conteneurs "secondaires" : panneaux, boites. . ."Simples" composants :

zones d’affichage (texte ou dessins) : labels, canvas. . .interaction avec l’interface : boutons, zones de texte, cases àcocher. . .

Look & FeelGénéralement basé sur celui du gestionnaire de fenêtres sous-jacent

7/11

A - IHM A.II - Ingrédients d’une interfaceII.1 - Éléments graphiques

Structure d’une interfacehiérarchie de composantsà chaque conteneur est associé un algorithme de placement decomposants (en ligne, en grille. . . )

Exemple

Fenêtre principale−→ Panneau

−→ Boîte verticale−→ Label "Bonjour"−→ Label "Soleil"−→ Checkbox "hello"

−→ Boîte horizontale−→ Label "Au revoir"−→ Label "Lune"−→ Checkbox "bye"

8/11

A - IHM A.II - Ingrédients d’une interfaceII.2 - Programmation événementielle

Programme interactifexécution non linéaireexécution non prévisibletemps d’attente

Programmation événementielle

Parfois plusieurs types d’événementsévénement bas-niveau : clic souris, touche clavier. . .événement haut-niveau ou sémantique : action sur un bouton,obtention du focus. . .

9/11

A - IHM A.II - Ingrédients d’une interfaceII.2 - Programmation événementielle

Programme interactifexécution non linéaireexécution non prévisibletemps d’attente

Programmation événementielle2 manières de voir :

Lier des événements à des comportements des composantswidget.bind(event, handler)

Abonner des composants à des écouteurs d’événements

Parfois plusieurs types d’événementsévénement bas-niveau : clic souris, touche clavier. . .événement haut-niveau ou sémantique : action sur un bouton,obtention du focus. . .

9/11

Plan → A - IHM

1 Introduction

2 Ingrédients d’une interface

3 Modèle MVC

10/11

A - IHM A.III - Modèle MVC

Modèle / Vue / Contrôleur

Exemple : montre / chronomètre

11/11

A - IHM A.III - Modèle MVC

Modèle / Vue / Contrôleur

Vue

Exemple : montre / chronomètre

11/11

A - IHM A.III - Modèle MVC

Modèle / Vue / Contrôleur

Contrôleur

Exemple : montre / chronomètre

11/11

A - IHM A.III - Modèle MVC

Modèle / Vue / Contrôleur

Modèle

Exemple : montre / chronomètre� �private int hours ;private int minutes ;private int seconds ;� �

� �private int seconds ;� �

11/11

A - IHM A.III - Modèle MVC

Modèle / Vue / Contrôleur

11/11