Conception Applications Web

Conception d'appIications web avec WAhh 1.
0
version 0.1.3 2007
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conceton d'alcatons web

avec WAMM 1.0
Nathanael Cottin
www.ncottn.net
hodIisation et impIantation
version 0.1.J - 2007 2
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conception d'applications web avec WAVV 1.0
Avant propos : prrequis
ModIisation :
Diagrammes UML : cas d'utilisation, tats, classes, squences
ImpIantation :
JSP
JavaBeans
Connaissances (X)HTML
Notions de CSS (annexes)

version 0.1.J - 2007 J
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Qu'est-ce que WAMM ?
WAMM (Web Applications Modeling Method) permet de
modliser et mettre en ouvre des applications web
indpendamment des technologies employes selon les
recommandations du PM de l'OMG
l s'agit d'un ensemble de strotypes, de nouvelles notations et
d'intgration de modles
WAMM est base sur le standard UML 2
WAMM s'inspire des travaux mens par Pascal Roques et relatifs
l'adaptation d'UML aux besoins spcifiques des architectures web
version 0.1.J - 2007 4
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas prise pour exemple
Iection d'un individu dans un ensembIe prdfini Iors d'un

concours
II peut s'agir d'animaux, d'humains ou d'objets queIconques

identifiabIes
L'appIication raIiser doit proposer :
Le vote pour un candidat (le vote blanc n'est pas pris en compte)
La consultation du nombre de votes (statistiques) des candidats,

accessible :
Avant de procder un vote (factultatif)
Ncessairement aprs avoir vot
Est dcIar gagnant Ie candidat ayant comptabiIis Ie pIus

grand nombre de votes
Aucun gagnant si pIusieurs ex-quo I'issue de I'Iection
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conception d'applications web avec WAVV 1.0 version 0.1.J - 2007
Plan gnral
Pcrte 1 : Concepton prlmncre
Pcrte 2 : Concepton dtclle
Pcrte J : Mse en uvre cvec les 1SP
Annexes
N
a
t
h
a
n
a
I

C
D
T
T
I
N
version 0.1.J - 2007 Conception d'applications web avec WAVV 1.0
Parte 1
Conceton rlmnare
Utilisation du standard UVL 2 comme base de modlisation
Prsentation de diagrammes d'analyse
0finition de strotypes adapts la modlisation web

Conception prliminaire
Conception dtaille
Mise en ouvre avec les JSP
Annexes
version 0.1.J - 2007 7
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conception prliminaire : tapes de ralisation
1. Expression des besoins :
Dictionnaire de donnes
Diagramme de contexte statique
Cas d'utilisations de contexte

2. Cas d'utiIisation d'impIantation
3. ModIisation contextueIIe de navigation
4. Prdfinition du visueI :
Charte graphique, images, etc.
Techniques de navigation
5. VisueI sous forme de maquette
Conception dtaille
Annexes
version 0.1.J - 2007 8
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Lister Ies mots-cIs
Donner une dfinition non ambigu
Les dfinitions peuvent faire rfrence d'autres mots-cIs

+ Dictionnaire de correspondances au cas o Ies termes empIoys
par Ie cIient et Ie dveIoppeur diffrent
A viter...
Conception dtaille
Annexes
Cas d'utilisation de contexte
Cas d'utilisation d'implantation
version 0.1.J - 2007 9
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : dictionnaire de donnes
Internaute : personne physique prenant part au vote
Individu : cible de vote possible qu'un internaute peut choisir lors de

son vote
Candidat : syn. individu
Vote : processus de slection d'un individu par un internaute,

accessible pendant une priode donne
Vote bIanc : galement appel vote nul, permet un internaute

d'indiquer qu'aucun individu ne lui convient
Statistique : ratio du nombre de votes pour un individu (ou votes

blancs) par rapport au nombre total de votes
Vainqueur : individu dont la statistique est la plus leve la clture

des votes
Gagnant : syn. vainqueur

Conception dtaille
Annexes
version 0.1.J - 2007 10
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Diagramme de contexte statique : vue d'ensemble
Conception dtaille
Annexes
Acteur
systme
<<actor>>
Acteur
0..1
0..1
<<secondary>>
Acteur
0..1
version 0.1.J - 2007 11
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : lection d'un individu lors d'un concours
Conception dtaille
Annexes
nternaute
Concours
0..1
version 0.1.J - 2007 12
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Cas d'utilisation de contexte : dclaration
Conception dtaille
Annexes
Acteur
Cas d'utilisation
systme
Cas d'utilisation
<<actor>>
Acteur
Cas d'utilisation
<<support>>
Aide
version 0.1.J - 2007 1J
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : lection d'un individu lors d'un concours
nternaute
Voter
Concours
Consulter
les statistiques
Conception dtaille
Annexes
version 0.1.J - 2007 14
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Cas d'utilisation de contexte : description
Conception dtaille
Annexes
Pour chaque cas d'utiIisation identifi, prciser :
Titre
Description
Acteur(s)
Prconditions
Postconditions
Version
Auteur
Date de mise jour

Facultatifs
version 0.1.J - 2007 15
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : description des cas d'utilisation de contexte
Conception dtaille
Annexes
Cas d'utiIisation :
Voter
Propose l'internaute de choisir un individu dans une liste et de valider

son choix
Acteur humain : internaute
...
Cas d'utiIisation :
Consulter les statistiques
Affiche pour chaque individu le pourcentage de votes
Acteur humain : internaute
...
version 0.1.J - 2007 16
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conception dtaille
Annexes
Cas d'utilisation
systme
Cas d'utilisation
Cas d'utilisation
Cas d'utilisation
<<extend>>
Acteur
Acteur
<<include>>
Cas d'utilisation
Cas d'utilisation
<<fragment>>
<<include>>
version 0.1.J - 2007 17
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : cas d'utilisation d'implantation
Conception dtaille
Annexes
Voter
concours
Statistiques
nternaute
<<include>>
Lister individus
<<fragment>>
version 0.1.J - 2007 18
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Cas d'utilisation d'implantation : description
Conception dtaille
Annexes
Pour chaque cas d'utiIisation non encore identifi, prciser :
Titre
Description
Acteur(s)
Prconditions
Postconditions
Version
Auteur
Date de mise jour

Facultatifs mais recommands
version 0.1.J - 2007 19
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : description des nouveaux cas d'utilisation
Conception dtaille
Annexes
Cas d'utiIisation :
Lister individus
Propose l'ensemble des donnes d'identit affrentes chaque individu
Aucun acteur (fragment)
Prconditions : la liste des individus est initialise (non vide)
Postconditions : nant
Version 1.0.0
Nathanal Cottin
9 avril 2007
version 0.1.J - 2007 20
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Dclaration des scnarii
Principaux
AIternatifs
EmpIoi de diagrammes d'activit

Conception dtaille
Annexes
Action Dcision
Action
[condition]
[else]
Action
Temporisation
Succs
chec
Acteur
version 0.1.J - 2007 21
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Dfinition des chemins critiques
tabIir des reIations de prcdence entre cas d'utiIisation
Note <
Typiquement, une incIusion se traduit par une prcdence

<<incIude>> <
Conception dtaille
Annexes
version 0.1.J - 2007 22
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : dfinition des chemins critiques
La Iiste des individus doit tre disponibIe d'offrir Ia

possibiIit de voter :
Lister individus < Voter
Conception dtaille
Annexes
version 0.1.J - 2007 2J
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Attribution de priorits et de risques aux cas d'utilisation
Priorit
*
:
Trs faible (TF)
Faible (F)
Moyennement faible (MF)
Moyennement leve (ME)
leve (E)
Critique (C)
Risque
*
:
Bas (B)
Moyen (M)
Haut (H)
Cas d'utilisation
Priorit
Risque
Cas d'utilisation 1 MF M
Cas d'utilisation 2 C H
... ... ...
Conception dtaille
Annexes
*
Dcompositions recommandes
version 0.1.J - 2007 24
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : priorits et risques lis aux cas d'utilisation
Priorit
*
:
Trs faible (TF)
Faible (F)
Moyennement faible (MF)
Moyennement leve (ME)
leve (E)
Critique (C)
Risque
*
:
Bas (B)
Moyen (M)
Haut (H)
Cas d'utilisation
Priorit
Risque
Voter
MF B Consulter les statistiques
E H
Ces valeurs permettent un dcoupage
du projet en itrations (processus unifi)
Attention bien hirarchiser priorits et risques
Conception dtaille
Annexes
version 0.1.J - 2007 25
N
a
t
h
a
n
a
I

C
D
T
T
I
N
lments de modlisation contextuelle de navigation
Sous forme de diagrammes d'tats - transitions :
Etat : situation accessible au cours du cycle de vie d'un objet
Transition : passage d'un tat un autre en rponse un vnement

(when, after, ...) ou un message (back, reload, ...)
Etats initiaux
Etats finaux succs chec

Conception dtaille
Annexes
Modlisation contextuelle de navigation
Prdfinition du visuel
Maquette
<<page|frame|exception|process|fragment|connector>>
LibeII
entry / action (excute en entre)
do / activit
exit / action (excute en sortie)
Facultatif
<<visible|process>>
ou <<*>>
Ou *
version 0.1.J - 2007 26
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Principes de modlisation contextuelle de navigation
Conception dtaille
Annexes
Maquette
<<page>>
LibeII
Acteur
<<exception>>
LibeII
back
[condition] /action
<<exception>>
LibeII
message
when (e)
reload
Libell super-tat
<<page>>
LibeII
<<process>>
LibeII
Pseudo-tat
H
message
vnement (paramtres)
vnement
interne
(boolen)
message /action
after
(dlai)
[condition]
Transition
automatique
version 0.1.J - 2007 27
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : navigation gnrale
Conception dtaille
Annexes
Maquette
sm Concours
<<page>>
Vote
nternaute
<<process>>
ActuaIisation votes
<<page>>
Statistiques
reload
[vote non
comptabilis]
consultation
des statistiques
validation du vote
<<exception>>
Vote non trait
nouveau
vote
nouveau vote
State machine
Vote termin
version 0.1.J - 2007 28
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Prdfinition de la charte graphique
StyIes, couIeurs et textes aIternatifs
Images :
Logos
Boutons
Autres images
Conception dtaille
Annexes
Maquette
version 0.1.J - 2007 29
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Prdfinition des techniques de navigation
Techniques de navigation :
Menus droulants
Hyperliens
Canevas de page :
Homognit
Conformit aux standards (W3C notamment) : XHTML (Strict), CSS

Conception dtaille
Annexes
Maquette
version 0.1.J - 2007 J0
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Ralisation de la maquette
Permet au cIient de vaIider :
Les informations des pages
Les enchanements de pages
Aucun traitement (coquiIIes vides)
Mise en page sommaire utiIisant ou non Ia charte graphique

Conception dtaille
Annexes
Maquette
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Parte 2
Conceton dtalle
0rive des diagrammes UVL de conception
Niveau de dtail permettant de gnrer du code source

Conception dtaille
Annexes
version 0.1.J - 2007 J2
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conception dtaille : tapes de ralisation
1. ModIisation dtaiIIe de navigation
2. ModIisation dtaiIIe de conception
3. ModIisation comportementaIe
4. ModIisation des donnes (tabIes, requtes)
5. Modification du visueI
6. Mise en uvre
Processus incrmentaI et itratif
Conception dtaille
Annexes
version 0.1.J - 2007 JJ
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Met en vaIeur Ia transmission d'informations
UtiIisation du strotype <<form>>

Modlisation dtaille de navigation : dclaration d'un formulaire
Conception dtaille
Annexes
Modlisation dtaille de navigation
Modlisation dtaille de conception
Modlisation comportementale
<<page>>
LibeII
dentifiant de la page
entry / action
do / activit
exit / action
<<form>>
Nom du formulaire
Attributs:types
Oprations :
+ submit():void
+ reset():void
1 nom
{mthode d'envoi}
<<*>>
LibeII
vnement
text
radio
select
password
hidden
file
get
post
multipart
version 0.1.J - 2007 J4
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : dclaration du formulaire de vote
Conception dtaille
Annexes
<<page>>
Vote
index.jsp
entry / select
voteForm.candidate[0]
<<form>>
VoteForm
+ candidate[1..*]:radio
+ submit():boolean
+ reset():void
voteForm 1
{post}
Slection du premier
individu par dfaut
<<process>>
ActuaIisation votes
validation du vote
updateVotes.jsp
version 0.1.J - 2007 J5
N
a
t
h
a
n
a
I

C
D
T
T
I
N
ModIisation des Iiens pouvant contenir des paramtres
UtiIisation du strotype <<Iink>>

Modlisation dtaille de navigation : intgration d'hyperliens
Conception dtaille
Annexes
<<*>>
Destination
dentifiant destination
<<link>>
Attributs
<<visible>>
Source
dentifiant source
1 id
Soumission
de type {get}
version 0.1.J - 2007 J6
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : consultation des statistiques depuis la page de vote
Conception dtaille
Annexes
<<link>>
<<page>>
Vote
index.jsp
<<page>>
Statistiques
statistics.jsp
1
consulter les
statistiques
version 0.1.J - 2007 J7
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Homognit des pages (frames, etc.), traitements communs
UtiIisation du strotype <<fragment>>

Modlisation dtaille de conception : inclusion de parties
Conception dtaille
Annexes
<<visible>>
LibeII
entry / action
do / activit
exit / action
{localisation}
header
head
body
foot
footer
<<include>>
<<fragment>>
LibeII
entry / action (select)
do / activit
exit / action
version 0.1.J - 2007 J8
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : inclusion d'en-tte et pied de page
Conception dtaille
Annexes
<<fragment>>
En-tte
header.inc
<<fragment>>
Pied de page
footer.inc
<<include>>
<<include>>
{header} {footer}
<<page>>
*
version 0.1.J - 2007 J9
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Un script peut tre appeI par un formuIaire, une page, etc.
UtiIisation du strotype <<script>>

Modlisation dtaille de conception : appel d'un script
Conception dtaille
Annexes
text
radio
select
password
hidden
file
<<form>>
Nom du formulaire
Attributs:types
Oprations :
+ submit():void
+ reset():void
vnement /opration
<<script>>
Nom du script
Oprations :
+ validate():boolean
...
Attributs
1 nom
onsubmit
onreset
onload
onunload
version 0.1.J - 2007 40
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Interactions entre pages et entits de programmation
Fait intervenir Ies diagrammes de cIasses
Sparation prsentation - traitements (paradigme MVC)

Modlisation dtaille de conception : intgration d'entits
Conception dtaille
Annexes
<<entity>>
Nom de l'entit
Attributs
Oprations
1 nom
{porte}
page
request
session
application
LibeII
<<visible>>
/proprits
mises jour
Noms de proprits spares
par des virgules, ou *
1..*
version 0.1.J - 2007 41
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : vote
Conception dtaille
Annexes
<<page>>
Vote
<<entity>>
CandidatesList
+ isCandidate(id:string):boolean
+ getCandidatesds():Set<string>
+ getCandidatenfo(id:string):Candidatenfo
candList
1
candidates
<<entity>>
VotesList
id:string
Candidatenfo
+ name:string = null
+ ...
...
0..*
1
cands
{application}
version 0.1.J - 2007 42
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : comptabilisation d'un vote
Conception dtaille
Annexes
<<entity>>
VoteEntity
- id:string = null
+ setCandidate(id:string):void
+ getCandidate():string
myVote
Votenfo
- nbVotes:int = 0
+ addVote():void
+ getVotes():int
1 votes
listVotes
{application}
<<entity>>
VotesList
+ addVote(id:string, cands:CandidatesList):boolean
+ getVote(id:string):Votenfo
+ getTotalVotes():int
-/ totalVotes:int
<<process>>
ActuaIisation votes
/candidate
id:string
<<entity>>
CandidatesList
candList
{application}
version 0.1.J - 2007 4J
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Modlisation comportementale : objets manipuls
Conception dtaille
Annexes
ModIisation squentieIIe des interactions

<<page|frame|exception|fragment>>
<<process>>
<<entity>>
nteractions entre systme et acteurs
Traitements sans interface avec les acteurs : lien entre pages et entits
A rapprocher de l'lment <<control>> du MVC
Units de traitement (gnrales ou orientes mtier)
version 0.1.J - 2007 44
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Modlisation comportementale : vue d'ensemble
Conception dtaille
Annexes
:identifiant :identifiant :identifiant
create()
opration()
opration()
set{proprit}
Nom de proprit
ou caractre
gnrique *
destroy()
{prcondition}
version 0.1.J - 2007 45
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : soumission d'un vote
Conception dtaille
Annexes
sd Soumission d'un vote
:Vote :Actualisation votes
create()
Sequence diagram
version 0.1.J - 2007 46
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : comptabilisation d'un nouveau vote
Conception dtaille
Annexes
sd Comptabilisation d'un vote
:Actualisation votes :VoteEntity :VotesList
addVote(v, candList)
v = get{candidate}
version 0.1.J - 2007 47
N
a
t
h
a
n
a
I

C
D
T
T
I
N
tude de cas : processus de vote (soumission et comptabilisation)
Conception dtaille
Annexes
sd Rception et comptabilisation d'un vote
:Vote :Actualisation votes
set{candidate}
ref
Soumission d'un vote
:VoteEntity
create()
:VotesList
ref
Comptabilisation d'un vote
version 0.1.J - 2007 48
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Modlisation des donnes
A I'aide de Merise (dconseiII)

ou
A I'aide de diagrammes de cIasses utiIisant Ies cIasses

d'associations
Conception dtaille
Annexes
Modification du visuel
Mise en ouvre
0..*
Association
+ attr1:int = 0
+ attr2:string = null
Class 1
0..*
Class 2
Attributs
version 0.1.J - 2007 49
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Nouveaux styIes et mises en pages
Images
Prise en compte des nouveaux besoins :
ntgration directe
Prparation l'intgration
En fonction des Iimitations (X)HTML et de Ia conformit des

navigateurs cibIes
Conception dtaille
Annexes
Mise en ouvre
version 0.1.J - 2007 50
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Recommandations de mise en ouvre
Respecter Ies priorits tabIies (cas d'utiIisation)
Garder I'esprit que Ie mieux est I'ennemi du bien (VoItaire)
Dbuter si possibIe par Ia partie d'administration :
Permet de reprer rapidement les erreurs de modlisation
Utile lors des autres dveloppements (reconstruire une base de

donnes, grer les comptes utilisateurs, etc.)
Sparer Ies rIes :
Administration des serveurs web
Dveloppement web
nfographie
Conception dtaille
Annexes
Mise en ouvre
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Parte 3 :
Mse en uvre avec les JSP
Exemple de ralisation : tude de cas
Prrequis : manipulation de JSP et Java8eans
Note : beans prsents en annexe

Conception dtaille
Annexes
version 0.1.J - 2007 52
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Page de vote : index.jsp
<%@page
language="java"
contentType="text/html;charset=ISO-8859-1"
import="java.util.*" %>
<jsp:useBean
id="candList"
class="concours.CandidatesList"
scope="application" />
<%@include file="header.inc" %>
<h1>Votez pour votre favori</h1>
<form name="voteForm" method="post" action="updateVotes.jsp">
<%
Set<String> ids = candList.getCandidatesIds();
for (String id : ids) {
%>
<p><input type="radio" name="candidate" value="<%= id %>"/>
<%= candList.getCandidateInfo(id).getName() %></p>
<%
}
%>
Conception dtaille
Annexes
Page index.jsp
Page updateVotes.jsp
Page statistics.jsp
Page error.jsp
1/2
version 0.1.J - 2007 5J
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Page de vote : index.jsp
<p class="button"><input type="submit" value="Envoyer"/>
<input type="reset" value="Initialiser"/></p>
</form>
<div id="navig">
<ul>
<li><a href="statistics.jsp">Consulter les statistiques
actuelles</a></li>
</ul>
</div>
<%@include file="footer.inc" %>
Conception dtaille
Annexes
Page index.jsp
Page statistics.jsp
Page error.jsp
2/2
version 0.1.J - 2007 54
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Actualisation des votes : updateVotes.jsp
<%@page
language="java"
errorPage="error.jsp"
contentType="text/html;charset=ISO-8859-1" %>
<jsp:useBean
id="candList"
<jsp:useBean
id="listVotes"
class="concours.VotesList"
<jsp:useBean
id="myVote"
class="concours.VoteEntity" />
<jsp:setProperty
name="myVote"
property="candidate" />
Conception dtaille
Annexes
Page index.jsp
Page statistics.jsp
Page error.jsp
1/2
version 0.1.J - 2007 55
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Actualisation des votes : updateVotes.jsp
<%
listVotes.setCandidatesList(candList);
if (!listVotes.addVote(myVote.getCandidate())) {
throw new Exception("Vote non trait");
}
%>
<jsp:forward page="statistics.jsp" />
Conception dtaille
Annexes
Page index.jsp
Page statistics.jsp
Page error.jsp
2/2
version 0.1.J - 2007 56
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Page de statistiques : statistics.jsp
<%@page
language="java"
contentType="text/html;charset=ISO-8859-1"
import="java.util.*,java.text.DecimalFormat,concours.*" %>
<jsp:useBean
id="candList"
<jsp:useBean
id="listVotes"
class="concours.VotesList"
<%@include file="header.inc"%>
<%
int total = listVotes.getTotalVotes();
double ratio = (total == 0) ? 0 : (double)100 / total;
Set<String> candIds = candList.getCandidatesIds();
DecimalFormat df = new DecimalFormat("##0.00");
Conception dtaille
Annexes
Page index.jsp
Page statistics.jsp
Page error.jsp
1/3
version 0.1.J - 2007 57
N
a
t
h
a
n
a
I

C
D
T
T
I
N
CandidateInfo cInfo;
VoteInfo voteInfo;
%>
<h1>Statistiques</h1>
<table>
<%
for (String id : candIds) {
cInfo = candList.getCandidateInfo(id);
voteInfo = listVotes.getVoteInfo(id);
%>
<tr>
<td><%= cInfo.getName() %></td>
<td class="vote"><%= df.format(voteInfo.getVotes() * ratio) %></td>
<td>%</td>
</tr>
<%
}
%>
Conception dtaille
Annexes
Page index.jsp
Page statistics.jsp
Page error.jsp
2/3
version 0.1.J - 2007 58
N
a
t
h
a
n
a
I

C
D
T
T
I
N
<tr class="more">
<td colspan="3">Total : <span class="vote"><%= total %></span>
vote<%
if (total > 1) {
out.print("s");
}
%></td>
</tr>
</table>
<div id="navig">
<ul>
<li><a href="statistics.jsp">Mise jour des statistiques</a></li>
<li><a href="index.jsp">Nouveau vote</a></li>
</ul>
</div>
<%@include file="footer.inc"%>
Conception dtaille
Annexes
Page index.jsp
Page statistics.jsp
Page error.jsp
3/3
version 0.1.J - 2007 59
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Page d'erreur : error.jsp
<%@page
language="java"
isErrorPage="true"
contentType="text/html;charset=ISO-8859-1" %>
<%@include file="header.inc" %>
<h1 class="error">Erreur</h1>
<p><%= exception.getMessage() %></p>
<div id="navig">
<ul>
<li><a href="index.jsp">Nouveau vote</a></li>
</ul>
</div>
<%@include file="footer.inc" %>
Conception dtaille
Annexes
Page index.jsp
Page statistics.jsp
Page error.jsp
version 0.1.J - 2007 60
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conclusion gnrale
Attention Ia synchronisation des traitements dans Ies entits

et processus
Persistence des entits (sriaIisation)
ContrIe des donnes soumises (en Java) avec utiI
Penser respecter Ia distinction entre prsentation et

traitements (MVC)
UtiIiser Ies design patterns si possibIe

Diffrents modIes peuvent rpondre
favorabIement un mme probIme
Conception dtaille
Annexes
1/2
version 0.1.J - 2007 61
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Conclusion gnrale
WAMM permet une gnration automatique des pages et entits

modIises ainsi que de Ia rtroconception
Futures versions :
Prise en compte des informations de page (charset, mime, XML d'en-

tte, etc.)
ntgration de balises de mise en page (couches DV, etc.)
Ajout de nouveaux strotypes en fonction des besoins (<<embed>>,

etc.)
Objectif : gnration automatique > 80% du code

Conception dtaille
Annexes
2/2
version 0.1.J - 2007 62
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Rfrences utilises
[ROQ 07] P. Roques, UML 2 Modliser une application web, Les
cahiers du Programmeur, Eyrolles, 3
me
dition, 2007
[COT 07b] N. Cottin, Servlets et JSP par la pratique, 2007
[COT 07a] N. Cottin, librairie Java util, http://util.ncottin.net
[ROQ 06] P. Roques, UML 2 par la pratique Etudes de cas et
exercices corrigs, Eyrolles, 5
me
dition, 2006
[DEL 05] J.-L. Deleage, JSP et servlets efficaces, Dunod, 2005
[JAC 99] . Jacobson et al., The Unified Software Development
Process, Addison Wesley, 1999
Conception dtaille
Annexes
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Parte 4 :
Annexes
Entte et pied de page inclus au sein des pages JSP
Fichier de styles
Java8eans utiliss
Conception dtaille
Annexes
version 0.1.J - 2007 64
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Fichier d'en-tte : header.inc
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><%!
private static final String titre = "Election lors d'un concours"; %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title><%= titre %></title>
<link rel="stylesheet" title="Default style" type="text/css"
href="default.css"/>
</head>
<body>
<div id="title">
<h1><%= titre %></h1>
</div>
<div id="info">
<p>Informations diverses...</p>
</div>
<div id="data">
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
version 0.1.J - 2007 65
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Fichier de pied de page : footer.inc
</div>
</body>
</html>
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
version 0.1.J - 2007 66
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Bean VoteEntity
package concours;
public final class VoteEntity {
private String value = null;
public void setCandidate(String id) {
value = id;
}
public String getCandidate() {
return value;
}
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
version 0.1.J - 2007 67
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Classe Candidatenfo
package concours;
public final class CandidateInfo {
private String name = null;
public void setName(String value) {
name = value;
}
public String getName() {
return name;
}
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
version 0.1.J - 2007 68
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Bean CandidatesList
package concours;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
public final class CandidatesList {
private Map<String, CandidateInfo> candidates =
new HashMap<String, CandidateInfo>();
public CandidatesList() {
CandidateInfo info;
for (int id=1; id<10; id++) {
info = new CandidateInfo();
info.setName("Candidat " + id);
candidates.put("cand" + id, info);
}
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
1/2
version 0.1.J - 2007 69
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Bean CandidatesList
public boolean isCandidate(String id) {
return (id != null) && candidates.containsKey(id);
}
public Set<String> getCandidatesIds() {
return candidates.keySet();
}
public CandidateInfo getCandidateInfo(String id) {
return (id != null) && candidates.containsKey(id)
? candidates.get(id)
: null;
}
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
2/2
version 0.1.J - 2007 70
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Classe Votenfo
package concours;
public final class VoteInfo {
private int nbVotes = 0;
public void addVote() {
nbVotes++;
}
public int getVotes() {
return nbVotes;
}
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
version 0.1.J - 2007 71
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Bean VotesList
package concours;
import java.util.HashMap;
import java.util.Map;
public final class VotesList {
private Map<String, VoteInfo> votes = new HashMap<String, VoteInfo>();
private int totalVotes = 0;
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
1/3
version 0.1.J - 2007 72
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Bean VotesList
public synchronized boolean addVote(String id, CandidatesList cands) {
if ((cands == null) || !cands.isCandidate(id)) {
return false;
}
VoteInfo info;
if (votes.containsKey(id)) {
info = votes.get(id);
}
else {
info = new VoteInfo();
}
info.addVote();
votes.put(id, info);
totalVotes++;
return true;
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
2/3
version 0.1.J - 2007 7J
N
a
t
h
a
n
a
I

C
D
T
T
I
N
Bean VotesList
public synchronized VoteInfo getVoteInfo(String id) {
if (id == null) {
return null;
}
return votes.containsKey(id)
? votes.get(id)
: new VoteInfo();
}
public synchronized int getTotalVotes() {
return totalVotes;
}
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
3/3
version 0.1.J - 2007 74
N
a
t
h
a
n
a
I

C
D
T
T
I
N
CSS employ : default.css
body {
margin: 0;
padding: 0 4em 0 4em; /* top right bottom left */
color: black;
font: 90% "Trebuchet MS", helvetica, sans-serif;
}
div#title {
padding: 2em 0 2em 0;
clear: both;
}
div#title > h1 {
font-size: 1.5em;
text-align: center;
font-weight: bold;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
margin-top: .7em;
}
Fichiers inclus
JavaBeans
Feuille de style
Conception dtaille
Annexes
1/7
version 0.1.J - 2007 75
N
a
t
h
a
n
a
I

C
D
T
T
I
N
h1 {
font-size: 1.3em;
font-weight: bold;
}
h1.error {
color: Red;
}
div#info {
float: right;
top: 7em;
border: 1px solid #CCCCCC;
background: #F5F5F5;
padding: 1em;
width: 35%;
}
Fichiers inclus
JavaBeans
Feuille de style
2/7
Conception dtaille
Annexes
version 0.1.J - 2007 76
N
a
t
h
a
n
a
I

C
D
T
T
I
N
div#info p.caution {
color: Red;
font-variant: small-caps;
}
div#data {
width: 60%;
}
div#navig {
clear: both;
margin-top: 4em;
border-top: 1px solid #CCCCCC;
}
Fichiers inclus
JavaBeans
Feuille de style
3/7
Conception dtaille
Annexes
version 0.1.J - 2007 77
N
a
t
h
a
n
a
I

C
D
T
T
I
N
div#navig ul {
padding-bottom: .5em;
padding-bottom: .5em;
float: right;
margin: 0;
list-style-type: none;
}
div#navig ul li {
float: left;
text-align: right;
padding-top: 0;
padding-bottom: 0;
padding-right: 2em;
}
Fichiers inclus
JavaBeans
Feuille de style
4/7
Conception dtaille
Annexes
version 0.1.J - 2007 78
N
a
t
h
a
n
a
I

C
D
T
T
I
N
div#navig a {
color: Blue;
text-decoration: none;
outline: none;
}
div#navig a:hover {
color: Green;
}
table td,
table td.vote {
padding: .2em;
}
Fichiers inclus
JavaBeans
Feuille de style
5/7
Conception dtaille
Annexes
version 0.1.J - 2007 79
N
a
t
h
a
n
a
I

C
D
T
T
I
N
span.vote,
table td.vote {
font-family: "Courier New";
font-weight: bold;
}
table td.vote {
text-align: right;
}
table tr.more td {
padding-top: 1em;
}
input {
margin-right: .5em;
}
Fichiers inclus
JavaBeans
Feuille de style
6/7
Conception dtaille
Annexes
version 0.1.J - 2007 80
N
a
t
h
a
n
a
I

C
D
T
T
I
N
p.selection {
margin: 0;
margin-top: .5em;
}
p.button input {
margin-left: 1em;
margin-right: 1em;
padding: .5em;
}
Fichiers inclus
JavaBeans
Feuille de style
7/7
Conception dtaille
Annexes

Conception Applications Web

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Conception Applications Web

Transféré par

Droits d'auteur :

Formats disponibles

Conception d'appIications web avec WAhh 1.

Conceton d'alcatons web

Diagrammes UML : cas d'utilisation, tats, classes, squences

Notions de CSS (annexes)

Iection d'un individu dans un ensembIe prdfini Iors d'un

II peut s'agir d'animaux, d'humains ou d'objets queIconques

L'appIication raIiser doit proposer :

La consultation du nombre de votes (statistiques) des candidats,

Avant de procder un vote (factultatif)

Ncessairement aprs avoir vot

Est dcIar gagnant Ie candidat ayant comptabiIis Ie pIus

Aucun gagnant si pIusieurs ex-quo I'issue de I'Iection

Utilisation du standard UVL 2 comme base de modlisation

Prsentation de diagrammes d'analyse

0finition de strotypes adapts la modlisation web

Diagramme de contexte statique

Cas d'utilisations de contexte

Charte graphique, images, etc.

Lister Ies mots-cIs

Donner une dfinition non ambigu

Les dfinitions peuvent faire rfrence d'autres mots-cIs

Internaute : personne physique prenant part au vote

Individu : cible de vote possible qu'un internaute peut choisir lors de

Candidat : syn. individu

Vote : processus de slection d'un individu par un internaute,

Vote bIanc : galement appel vote nul, permet un internaute

Statistique : ratio du nombre de votes pour un individu (ou votes

Vainqueur : individu dont la statistique est la plus leve la clture

Gagnant : syn. vainqueur

Pour chaque cas d'utiIisation identifi, prciser :

Date de mise jour

Propose l'internaute de choisir un individu dans une liste et de valider

Acteur humain : internaute

Consulter les statistiques

Affiche pour chaque individu le pourcentage de votes

Acteur humain : internaute

Pour chaque cas d'utiIisation non encore identifi, prciser :

Date de mise jour

Propose l'ensemble des donnes d'identit affrentes chaque individu

Aucun acteur (fragment)

Prconditions : la liste des individus est initialise (non vide)

EmpIoi de diagrammes d'activit

tabIir des reIations de prcdence entre cas d'utiIisation

Typiquement, une incIusion se traduit par une prcdence

La Iiste des individus doit tre disponibIe d'offrir Ia

Trs faible (TF)

Moyennement faible (MF)

Moyennement leve (ME)

Trs faible (TF)

Moyennement faible (MF)

Moyennement leve (ME)

Sous forme de diagrammes d'tats - transitions :

Etat : situation accessible au cours du cycle de vie d'un objet

Transition : passage d'un tat un autre en rponse un vnement

Etats finaux succs chec

StyIes, couIeurs et textes aIternatifs

Conformit aux standards (W3C notamment) : XHTML (Strict), CSS

Permet au cIient de vaIider :

Les informations des pages

Les enchanements de pages

Aucun traitement (coquiIIes vides)

Mise en page sommaire utiIisant ou non Ia charte graphique

0rive des diagrammes UVL de conception

Niveau de dtail permettant de gnrer du code source