Développementd 'IHM par Développement dIHM par

chuckleelephantbutteΛογισμικό & κατασκευή λογ/κού

9 Ιουν 2012 (πριν από 5 χρόνια και 4 μήνες)

277 εμφανίσεις

Développementd

IHMpar
Développement

dIHM

par

com
p
osants
p
VandaLuengo
Vanda

Luengo
Vanda.luengo@imag.fr
Descriptionducours
Description

du

cours
CitDéldliti

C
oncevo
i
r e
t


ve
l
opper
d
es app
li
ca
ti
ons
interactives,
Utilitidbiblithèdt

Utili
sa
ti
on
d
es
bibli
o
thè
ques
d
e composan
t
s
graphiques pour construire l’interface utilisateur

fonctionnementdusystèmedansuncomposant
fonctionnement

du

système

dans

un

composant

séparé.
•Modèle MVC
•Java et NetBeans

Deuxprojetsetunexamen
Deux

projets

et

un

examen
–Projet 1 milieu du semestre

Projet2findusemestre
Projet

2

fin

du

semestre
–Examen fin semestre
OrganisationCours
Organisation

Cours

SemaineCMTDTP
36
INTRODUCTIONIHM

Historiquedesapplications
INTRODUCTION Programmation
36


Historique

des

applications

interactives
• Un exemple java avec exécution
contrainte
• Le même exemple avec une interface
pilotée par l’utilisateur
objet et Java
• Class, attributs, constructeurs,
méthodes
•Héritage, polymorphisme
INTERFACESAWT
éliti
d’
dl
37
INTERFACES GRAPHIQUES
• Les classes java pour dessiner et
disposer les composants d'une
interface graphique
INTERFACES

AWT
Exercice : modèle IMC
Mots clés AWT : itemListener, key
listener
r
é
a
li
sa
ti
on
d’
un programme
d
e
l
ancer
de dés dans l'environnement java (Sans
NetBeanset avec NetBeans)
38
MODELEA EVENEMENT
• Descri
p
tion du modèle à événements
•Décrire en java les composants de
l'interface
g
ra
p
hi
q
ue du lancer de dés et
Programmation d'IMC et Lancer des
dés avec les événements
p
• Gestion des événements en java
• Les classes écouteurs d'événements
gpq
d''IMC.
•Les disposer en utilisant les différents
mode FlowLayout, BorderLayout,
GridLayout,
•Choisir un exemple analogue, décrire
et disposer les composants.
39
Graphiquesen java
• Les mécanismes java pour dessiner
une interface.
• Surcharge de la méthode paintpour
dessiner dans un conteneur.
Conception des événements et
écouteurs
Programmation d'IMC et (ou)
Lancer des dés avec interface
(boutons, …)
40
Les EDI
• Conce
p
tion d'un
j
eu XXX • Pro
g
rammation JEU
40
Histoire de NetBeans
Conception d'une applet avec NetBeans
Programmer par événements
pj
permettant de dessiner et de gérer
des événements
g
41
MéthodologieMVC
• Conception d'un jeu XXX
permettant de dessiner et de gérer
des événements
• Programmation JEU
Suite Pr.Noel De Palma : programmation par composants, JavaBeans
50
EVALUATIONECRITE
Sources
Sources
•Cours Jean Pierre David 2005 et 2006

Historique
Historique
–Cours Roussel N., Interface et systèmes
interactifs
LRIINRIA
interactifs
,
LRI
,
INRIA
–Cours Antoine J.I., Tours

WEB

htt
p
://interstices.info/
j
cms/c23015/40-ans-
pj
_
dinteraction-homme-machine-points-de-
re
p
ere-et-
p
ers
p
ectives
p
pp
Introduction
Introduction
•Définition IHM

Historiquedesapplicationsinteractives
Historique

des

applications

interactives
•Programmation événementielle
Desévolutions
Des

évolutions
….

Evolutiondesinterfacesutilisateur

Evolution

des

interfaces

utilisateur

–1946 ENIAC : panneau de switch
–1950 IBM : Clavier, écran

1975 écran
g
ra
p
hi
q
ue et souris
gpq
–1984 Apple Macintosh : métaphore du bureau (dossiers, corbeille...)
–1990 Windows
–1991 Ubiquitous Computing (Xerox PARC) : plusieurs ordinateurs capables de
communiquerentreeuxpourpourfournirunréelenvironnementinteractifCette
communiquer

entre

eux

pour

pour

fournir

un

réel

environnement

interactif
.
Cette

vision préfigure clairement l'avènement des PDA, Tablet PC et téléphones
mobiles, mais elle reste loin d'être réalisée et fait l'objet de nombreux travaux de
recherche.

Evolutiondeslangages
Evolution

des

langages

–Fortran, langage impératif
–ancêtre des langages à objets : Simula (1973)
–premier langage à objets : Smalltalk-80, puis Pascal Objet, C++, Eiffel, Java
•Evolution des méthodes de conceptions et outils associés (AGL)
–UML 1995 avec ROSE
–apparition des Interfaces Builder 1990 (Windev, InterfaceBuilder de Next,
WindowBuilderpourSmalltalkV)
WindowBuilder

pour

Smalltalk

V
...
)

–apparition des IDE 1995 (Integrated Development Environnements) : Jbuilder,
NetBeans...
Systèmeinteractif
et
interface
Système

interactif

et

interface
•Un système interactif est un système dont le
fonctionnementdépendd
'
informationsfourniesparun
fonctionnement

dépend

dinformations

fournies

par

un

environnement externe qu'il ne contrôle pas [Wegner,
1997]
•Les systèmes interactifs sont également appelés
ouverts, par opposition aux systèmes fermés -ou
autonomes
-
dontlefonctionnementpeutêtre
autonomes

-
dont

le

fonctionnement

peut

être

entièrement décrit par des algorithmes
•L'interface est l'ensemble des dis
p
ositifs matériels et
p
logiciels qui permettent à un utilisateur de commander,
contrôler, superviser un système interactif
Evolutiondesinterfaces
Evolution

des

interfaces
Itfàlidddt

I
n
t
er
f
aces
à

li
gnes
d
e comman
d
e :
d
onnen
t

accès à une commande (une fonction) du
système
système
•Menus et écrans de saisie : donnent accès à
uneapplication(unsous
ensembledes
une

application

(un

sous
-
ensemble

des

fonctions du système)

Multi
fenêtrageinterfacesiconiqueset

Multi
-
fenêtrage
,
interfaces

iconiques

et

manipulation directe : donnent accès à
l
'
ensembledesfonctionsdusystèmeetau
-
delà
lensemble

des

fonctions

du

système
,
et

au
delà
,
à celles du réseau
•http://www.dailymotion.com/video/x4zt4p_les-nouvelles-interfaces-technologi_videogames
Evolutiondel
'
interactivité
Evolution

de

linteractivité
Ldéd'ittiitéd'tèt

L
e
d
egr
é

d'i
n
t
erac
ti
v
ité

d'
un sys

me peu
t
se mesurer au
nombre et à la nature de ses échanges avec les
utilisateurs
•Deux éléments importants ont contribué à
l'augmentation du degré d'interactivité :

la possibilité d'exécution en parallèle de plusieurs tâches
–l'avènement des interfaces graphiques

Lenombredeséchangesabeaucoupaugmentémais

Le

nombre

des

échanges

a

beaucoup

augmenté
,
mais

leur nature n'a pas vraiment évolué
•Mais cela
p
eut chan
g
er avec les nouveaux dis
p
ositifs et
pgp
le concept d’ubiquité, que nous ne traiterons pas dans le
cours …
Interactivité offerte à l'utilisateur
dans une page Web

Quelleinteractivitépossibleàtraversdespagesweb?Commentcréerde

Quelle

interactivité

possible

à

travers

des

pages

web

?

Comment

créer

de

l'interactivité ? Suivant la complexité du contenu, l'interactivité de l'utilisateur
sur les pages créées peut s'enrichir :
•Avec le lan
g
a
g
e HTMLseul
gg
–Naviguer de lien en lien, pour consulter de l'information
–Désigner des zones sur un graphique
•Avec des "plug-in"(programmes intégrés au navigateur)
ldii(i)lltiédi

l
ancer
d
es v
i
s
i
onneuses
(
v
i
ewer
)
pour
l
e mu
lti
m
édi
a.
–lancer des visionneuses (viewer) pour les animations.
–lancer des programmes externes.

Avec
javascript
(scriptintégréaucodeHTML)
Avec

javascript
(script

intégré

au

code

HTML)

–programmation de fonctions pour contrôler l'interaction dans la page.
–exemple : contrôle de saisie de formulaires
.
•Avec des applets java(langage à objets)

lancer des animations
–Simuler le fonctionnement d'un mécanisme. Exemple : calculette de conversion
Francs-Euros

lancer des simulations avec modification de
p
aramètres.
p
Programmation événementielle
Eétliééihéi

E
v
é
nemen
t
s
lié
s aux p
é
r
i
p

r
i
ques
–entrée/sortie du curseur dans une fenêtre
–utilisation d'un des boutons

fra
pp
e au clavie
r
pp
–etc.

Evénementsliésauxapplications

Evénements

liés

aux

applications
–création/destruction de fenêtre
éffih

r
é
a
ffi
c
h
age
–autre
Programmationévénementielle
Programmation

événementielle
Aliti
itti“ttd

A
pp
li
ca
ti
on non-
i
n
t
erac
ti
ve :

s
t
ar
t
,
d
o
something, stop”

Anciennefaçondevoirlesapplications

Ancienne

façon

de

voir

les

applications

interactives : de temps en temps, le système
pose des questions à l’utilisateu
r
•Version plus moderne
–l’utilisateur contrôle l’application

celle-ci attends un signe (notion de boucle principale
dans laquelle sont traités les événements)

denombreuxétatsàconserverc

estcompliqué!
de

nombreux

états

à

conserver

cest

compliqué

!
•La solution de facilité : l’utilisation de modes
Programmation événementielle et
interaction
•Un exemple java avec exécution
contrainte
•Exemple
avec une interface pilotée par
l

utilisateur
lutilisateur
•Dans une applet
Conception d'Interfaces
Modèles d’architecture
Les trois composants de l'interface dans le modèle de Seeheim(1983)
Modèle
Vue
Contrôleur(MVC)
Modèle
-
Vue
-
Contrôleur

(MVC)
Oii

O
r
i
g
i
ne :
–modèle issu de Smalltalk-80

adoptépardenombreusesboîtesàoutils(JavaAWT

adopté

par

de

nombreuses

boîtes

à

outils

(Java

AWT
,
–Microsoft MFC, …)

Principe:
Principe

:
–le modèle correspond aux données de l'application
(structures et fonctions)
létdiftiàl'tilitàti

l
a vue pr
é
sen
t
e
d
es
i
n
f
orma
ti
ons
à

l'
u
tili
sa
t
eur
à
par
ti
r
des données du modèle

lecontrôleursechargedel
'
interactionavec
le

contrôleur

se

charge

de

linteraction

avec

l'utilisateur
Encoreunschema
Encore

un

schema
ThMVCttiiililt

Th
e
MVC
pa
tt
ern
i
s surpr
i
s
i
ng
l
y s
i
mp
l
e, ye
t

incredibly useful. Essentially, the pattern
forces one to think of the application in
termsofthesethreemodles
terms

of

these

three

mod
u
les
-
•Model :The core of the application. This
maintains the state and data that the
lititWhiifit
app
li
ca
ti
on represen
t
s.
Wh
en s
i
gn
ifi
can
t

changes occur in the model, it updates all
of its views
Cll
Thifd

C
ontro
ll
er :
Th
e user
i
nter
f
ace presente
d

to the user to manipulate the application.
•View :The user interface which displays
information about the modelto the user.
Any object that needs information about the
modelneeds to be a registered viewwith
th
dl
th
e mo
d
e
l
.
http://cristobal.baray.com/indiana/projects/mvc2.html
MVCadvantages
MVC

advantages
•Clarity of design :the public methods in the model stand as an API for all the commands available to manipulate
itsdataandstateByglancingatthemodel
'
spublicmethodlistitshouldbeeasytounderstandhowtocontrolthe
its

data

and

state
.
By

glancing

at

the

models

public

method

list
,
it

should

be

easy

to

understand

how

to

control

the

model's behavior. When designing the application, this trait makes the entire program easier to implement and
maintain.
•Efficient modularityof the design allows any of the components to be swapped in and out as the user or
programmer desires -even the model! Changes to one aspect of the program aren't coupled to other aspects,
eliminating many nasty debugging situations. Also, development of the various components can progress in
parallel, once the interface between the components is clearly defined.
•Multiple views :the application can display the state of the model in a variety of ways, and create/design them in
a scalable, modular way. This comes up in games, with a cockpit and a radar view, and in my research
applicationswhereIhaveaviewtodisplaythestateofthemodelandanotherviewthatcollectsdatacalculates
applications
,
where

I

have

a

view

to

display

the

state

of

the

model

and

another

view

that

collects

data
,
calculates

statistics, then to saves the data to disk. Both views are using the same data, they just use the information
differently. During the development process, I usually start out with a text based view, which just prints out the
data that the model is generating. Later, as I create new views, I can use the text based view to verify the
performance of the new views.
•Ease of growth :controllers and views can grow as the model grows; and older versions of the views and
controllers can still be used as long as a common interface is maintained (the text view just mentioned is an
example). For instance, if an application needs two types of users, regular and administrator, they could use the
same model, but just have different controller and view implementations. This is related to the similarity with the
client/server architecture -where the new views and servers are analo
g
ous to the clients.
g
•Distributable :with a couple of proxies (another design pattern -used in the snake game
) one can easily
distribute any MVC application by only altering the startup method of the application. Now, the application
becomes a full fledged set of client and server applications.
•Powerful user interfaces :using the model's API, the user interface can combine the method calls when
presenting commands to the user. Macros can be seen as a series of "standard" commands sent to the model, all
triggered by a single user action. This allows the program to present the user with a cleaner, friendlier interface.
http://cristobal.baray.com/indiana/projects/mvc2.html
MVCSmalltalk
80
MVC

Smalltalk
-
80
3classesabstraitesdéfinissentlescomportements

3

classes

abstraites

définissent

les

comportements

génériques
•des com
p
osants MVC
p
•Class Model
––mécanismes permettant la gestion des dépendants
mécanismesdediffusiondesnotifications


mécanismes

de

diffusion

des

notifications
•Class View
––traite l’interaction avec le modèle et le contrôleur


traite l’interaction avec les vues parentes et filles
•Class Controller


permetlecontrôleetlamanipulationd

unmodèleetd

unevue
permet

le

contrôle

et

la

manipulation

dun

modèle

et

dune

vue
––assure qu’un unique contrôleur gère les événements utilisateur
à un moment donné
Modèle PAC (présentation,
abstraction, contrôle)
UtPACiétài

U
n agen
t

PAC

i
ncarne une comp
ét
ence
à
un n
i
veau
d’abstraction donné composé de trois facettes :

Présentation(leV+CdeMVC)
Présentation

(le

V+C

de

MVC)
–définit le comportement perceptible de l’agent (entrée/sortie)

A
bstraction
(
le M de MVC
)
()
–représente l’expertise de l’agent
•Contrôle (pas d’équivalent dans MVC)
fitllitAtP(ditidit)

f
a
it

l
e
li
en en
t
re
A
e
t

P

(
pas
d
e commun
i
ca
ti
on
di
rec
t
e
)
–gère les relations avec les autres agents de la hiérarchie
PAC
PAC
Environnement de Développement
Intégré
Piid'EDI

P
r
i
nc
i
pe
d'
un
EDI
:
–Offre des espaces de travail multiples et des palettes de
com
p
osants
p
–permet la génération automatique de code source du squelette
de l'application en manipulant des menus et des palettes.

Exemplesd
'
EDI

Exemples

dEDI

–ToolBook Asymetrix Openscript
–Delphi Borland (Pascal objet)
–C++Builder Borland
–Jbuilder Borland Java

VisualAgeIBMJava

VisualAge

IBM

Java

–NetBeans Sun Java