Hurault Wiztivi

Hurault Guillaume
Compte rendu de stage
Realisation dapplications liees

a` la television interactive
Rapport confidentiel
Encadrant :
WizTiVi : Manuel Dujardin
Faculte : Christophe Jermann
Universite de Nantes
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Remerciements
Je tiens dabord `
a remercier lequipe des ressources humaines de la societe Proservia ainsi que Jean-Noel Gadreau
qui mont permis dintegrer la societe WizTiVi.
Je remercie tout particulièrement lequipe des anciens du master Alma (Manuel, Morgan, Vincent) ainsi que Tudor
Teusan qui mont beaucoup appris durant ces cinq mois de stage.
Enfin, je tiens `
a remercier mes differents autres collèges (Guillaume, Julien, Manuel, Mathieu) ainsi que tous les
autres stagiaires qui ont participe `
a la bonne ambiance qui a regne durant tout mon stage.
Annee 2007 - 2008
Hurault Guillaume
Compte rendu de stage
Table des mati`

eres
1 Remerciements
2 Introduction
3 Pr
esentation
3.1 Proservia . . . . . . . . . . . . . . . . .
3.2 WizTiVi . . . . . . . . . . . . . . . . . .
3.2.1 Historique . . . . . . . . . . . . .
3.3 Les telesites et la television interactive .
3.3.1 Le principe . . . . . . . . . . . .
3.3.2 Les differences entre box . . . . .
3.3.3 Les acteurs du marche . . . . . .
3.3.4 Exemple de telesites . . . . . . .
3.3.5 Exemple de television interactive
4 Environnement technique
4.1 Les technologies utilisees . . . .
4.1.1 Eclipse . . . . . . . . . .
4.1.2 Maven . . . . . . . . . .
4.1.3 Struts . . . . . . . . . .
4.1.4 Spring . . . . . . . . . .
4.1.5 Subversion . . . . . . .
4.1.6 Tiles . . . . . . . . . . .
4.1.7 Les plugins . . . . . . .
4.2 Le SDK WizTiVi . . . . . . . .
4.2.1 Gestion de la navigation
4.2.2 Les librairies de tags . .
4.2.3 Les thèmes . . . . . . .
4.2.4 Les pages . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
6
6
10
10
13
13
13
13
14
15
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
16
16
16
16
17
18
19
19
19
20
20
21
21
21
5 Cadre du stage
5.1 Sujet de stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.1 Developpement dun composant carte . . . . . . . . . .
5.1.2 Realisation dune application dencodage de fichiers video
5.1.3 Realisation de la presentation de lapplication dailymotion
5.1.4 Realisation dun composant diaporama . . . . . . . . . .
5.2 Gestion de projet . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.1 Jira . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.2 Deroulement dun projet . . . . . . . . . . . . . . . . . . .
5.2.3 Deroulement du stage . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
22
22
22
23
23
23
23
23
23
24
.
.
.
.
.
.
.
.
.
25
25
26
26
26
26
26
27
27
28
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
6 Travail r
ealis
e
6.1 Adaptation de lapplication Tutoriel de WizTiVi .
6.2 Recherche sur les moyens de micro-paiements pour la
6.2.1 Free-HA . . . . . . . . . . . . . . . . . . . . .
6.2.2 Internet plus . . . . . . . . . . . . . . . . . .
6.2.3 Paypal . . . . . . . . . . . . . . . . . . . . . .
6.2.4 Bilan . . . . . . . . . . . . . . . . . . . . . . .
6.3 Integration dun composant carte au sdk WizTiVi
6.3.1 Motivations . . . . . . . . . . . . . . . . . . .
6.3.2 Principes de base . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. . . . . .
television
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Annee 2007 - 2008
Hurault Guillaume
6.4
6.5
6.6
Rapport de stage
6.3.3 Le projet coeur . . . . . . . . . . . . . . . . . . . . . . . . . . .

6.3.4 Le projet support . . . . . . . . . . . . . . . . . . . . . . . . . .
6.3.5 Le projet tutoriel . . . . . . . . . . . . . . . . . . . . . . . . . .
6.3.6 Integration du composant dans un telesite en developpement .
Developpement dune application de conversion de videos . . . . . . .
6.4.1 Motivations . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4.2 Realisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Developpement de la couche presentation de lapplication Dailymotion
6.5.1 Contraintes de la Thomson box . . . . . . . . . . . . . . . . . .
6.5.2 Realisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Integration dun composant diaporama au sdk WizTiVi . . . . . . .
6.6.1 Analyse globale . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.2 La partie diaporama . . . . . . . . . . . . . . . . . . . . . . . .
6.6.3 La partie player . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.4 La partie vue . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.5 La partie rendu . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.6 Les actions struts . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.7 Cheminement dune requete . . . . . . . . . . . . . . . . . . . .
6.6.8 Application utilisant le composant . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
29
33
34
37
39
39
40
42
42
43
47
47
49
51
53
55
56
58
60
7 Conclusion
61
8 Bibliographie
62
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Introduction
Dans le cadre du master Alma, jai effectue mon stage de fin detudes au sein de la societe WizTiVi. Ce stage
devait avoir pour but de concretiser et de mettre en pratique les connaissances et competences que nous avons
apprises lors de notre master.
Le projet WizTiVi est simple : Associer Internet à la television. Pour cela, la societe developpe deux types de projet.
Le premier est la transformation dun site internet en un telesite visible directement depuis sa television o`
u lon
peut naviguer gr
ace `
a sa telecommande. Le second permet de rajouter de linteractivite sur une chane de television
pour par exemple obtenir des informations sur le programme en cours.
Le première rencontre avec la societe a eu lieu lors du salon du stage au parc des expositions de la beaujoire en
novembre 2007. Proservia (dont WizTiVi est une filiale) exposait le projet de la societe que sont les telesites et la
television interactive.
Je souhaitais pour mon stage me tourner vers une societe developpant des applications Java/J2ee liees au web. Jai
donc dès le debut ete attire par le projet de la societe.
Par la suite, après nos diverses rencontres, linteret que je portais au projet ainsi que la très bonne ambiance au
sein de la societe mont convaincu deffectuer mon stage chez WizTiVi. Trois autres etudiants de la formation ont
ainsi ete seduits pour les memes raisons. Nous etions de plus en contact avec danciens etudiants du master Alma
qui travaillaient chez WizTiVi.
Jai donc developpe pendant ce stage plusieurs applications liees à la television interactive ainsi quaux telesites
comme nous le verrons par la suite.
Dans ce rapport, nous nous interesserons dabord à la presentation des deux societes que sont Proservia et WizTiVi
ainsi qu`
a la presentation des telesites et de la television interactive. Nous continuerons par un descriptif des
technologies utilisees durant le stage avant de presenter le travail que jai realise.
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Pr
esentation
3.1
Proservia
Proservia est une Societe de Services en Ingenierie Informatique (SSII) creee en 1994 au chiffre daffaires de 36,8
Me en 2007. Son fondateur, Thierry Congard est un autodidacte de 43 ans qui a, à force de volonte, acquis de
lexperience pour arriver `
a son statut actuel.
La societe connait depuis sa creation une forte progression. Celle-ci sexplique par les deux points forts du groupe :
Son expertise metier
Sa culture dentreprise
Figure 1 Evolution du CA
La societe a donc evolue de facon rapide et saine. Il en est de meme pour ses effectifs. En effet, au premier janvier
2007, la societe comptait 533 collaborateurs et en compte aujourdhui près de 750. Elle est ainsi dans le top 100 du
classement des entreprises les plus performantes en France, depuis 2002.
Figure 2 Evolution des effectifs
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
La societe est presente dans 14 grandes villes francaises dont Paris, Lille, Lyon, Toulouse, Bordeaux et sa maison
mère est basee `
a Nantes.
Figure 3 Les agences du groupe Proservia

La societe possède 5 p
oles de competences pour couvrir tous les besoins en matière dinformatique.
Le p
ole Etude et d
eveloppement :
Recherche et developpement sur les technologies MPEG 4, accompagnement pour des choix strategiques, conception et realisation dapplications et maintien en conditions operationnelles des logiciels.
Figure 4 Pole etude et developpement
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Le p
ole Conseil / Projet :
Analyse des besoins (Audits), expertise, assistance à matrise doeuvre et douvrage, mise en oeuvre de solutions
personnalisees (integration, deploiement et migration).
Figure 5 Pole Conseil / Projet
Le p
ole T
el
eservice :
Assurer la continuite de service des systèmes informatiques (tele exploitation), aide à distance, organisation des
ressources, installation de nouveaux outils dans les environnements de production...
Figure 6 Pole Teleservice
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Le p
ole Infog
erance :
Administration, gestion des configurations, homologation, mise en production...
Figure 7 Pole Infogerance
Le p
ole Formation :
Des formateurs experts ainsi que des outils concrets de mesure et de suivi.
Gr
ace `
a cette etendue de services, le groupe est aujourdhui au contact de nombreux clients comme la Societe
Generale, Le Credit Mutuel, La Poste ou encore Gaz de France, Air France etc. Une des concretisations de sa
croissance est son introduction en bourse sur le marche Alternext Euronext Paris en 2006.
Annee 2007 - 2008
Hurault Guillaume
3.2
Rapport de stage
WizTiVi
WizTiVi est donc une societe nantaise fondee en 2007 par Thierry Congard et Jean-Noel Gadreau. Elle est
la filiale de Proservia dediee `
a la television interactive. Elle tire son nom de langlais wizard magicien et de tv
television pour donner WizTiVi, les magiciens de la television.
Comme nous lavons vu, le premier objectif de la societe est de refaire le design de sites web pour les adapter `
a
lergonomie du televiseur. Le but est de plus de pouvoir se deplacer sur ces sites grace à la telecommande des box.
Ainsi, lutilisateur peut en branchant une box sur sa television naviguer sur les sites adaptes grace à la telecommande
comme sil naviguait sur son ordinateur.
Le second objectif de WizTiVi est de rajouter du contenu interactif aux chanes de television. De cette facon, un
utilisateur ne regarde plus seulement une chane, il peut en plus toujours grace à sa telecommande obtenir du
contenu linformant par exemple sur ce quil est entrain de regarder.
Debut fevrier, les effectifs etaient de onze personnes et la societe prevoyait datteindre trente personnes à la fin de
lannee. Le 18 decembre 2007, lOseo recompense le caractère innovant de la technologie developpee par WizTiVi
et accorde une aide `
a linnovation dun montant total de 800 000 e.
3.2.1
Historique
Le Freeplayer :
Lidee de ce projet est apparue avec le developpement des nouvelles Freebox du fournisseur Free. En effet, depuis
la troisième version de cette box, il est possible de connecter directement la box à un televiseur. Grace à un logiciel
de Free, le Freeplayer (sorti en ao
ut 2005) il est possible de diffuser sur une television le contenu de son ordinateur
en passant par la Freebox.
Voici un schema de larchitecture du Freeplayer :
Figure 8 Architecture du Freeplayer
10
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Home JukeBox :
Jean-Noel Gadreau a sur son temps personnel developpe un mod au Freeplayer (Home Jukebox sorti en
decembre 2005). Celui-ci ajoute un certain nombre de fonctionnalites non disponibles dans le Freeplayer et en
ameliore linterface.
Lidee etait : Puisque lordinateur est relie `
a internet pourquoi se contenter de diffuser seulement le contenu de son
ordinateur sur sa tele alors quil est egalement possible de diffuser des contenus pris sur internet.
Gr
ace `
a ce mod, lutilisateur peut donc, en reliant la Freebox à son televiseur et à un ordinateur, naviguer plus
aisement sur son ordinateur depuis sa television et peut de plus regarder des chanes de web-tele ou ecouter des
stations de web-radio.
Voici un schema de larchitecture de home jukebox :
Figure 9 Architecture de Home Jukebox
11
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Home JukeBox 0.7 :

Cest de ce projet quest nee lidee des telesites puis de WizTiVi. Avec Home Jukebox 0.7 sorti en Avril 2007,
larchitecture restait la meme mais certains sites etaient restyles pour la tele. En revanche, il etait toujours obligatoire
de relier la Freebox `
a un ordinateur avec Home JukeBox installe dessus.
Voici un schema de larchitecture de Home Jukebox 0.7 :
Figure 10 Architecture de Home Jukebox 0.7

WizTiVi :
Lidee finale etait donc de supprimer lobligation davoir un ordinateur relie à la box pour arriver `
a cette
architecture :
Figure 11 Architecture de WizTiVi

Jean-Noel Gadreau a donc dabord prepare son projet avant de le presenter à Thierry Congard, PDG de la societe
Proservia o`
u il travaillait, pour ensuite fonder WizTiVi.
12
Annee 2007 - 2008
Hurault Guillaume
3.3
3.3.1
Rapport de stage
Les t
el
esites et la t
el
evision interactive
Le principe
Bien que de rendu different, les telesites et la television interactive fonctionnent sur un meme principe. Le
client (la box) emet une requete vers un serveur hebergeant une application web. Lapplication effectue alors son
traitement et renvoie du code html `
a la box. Celle-ci interprète elle-meme ce code avec son navigateur et affiche le
flux resultat sur la television.
Un telesite est donc ladaptation dun site web pour la television et est affiche sur celle-ci grace au navigateur de la
box. Une chane de television interactive est la meme chose mais avec comme fond au telesite, la video de la chane.
On ajoute donc la page html par dessus la video.
3.3.2
Les diff
erences entre box
Les box possèdent plusieurs points communs mais ont aussi beaucoup de differences. En effet, certaines box
peuvent utiliser du javascript, dautres pas. Certaines acceptent le css, on peut alors faire la mise en page en
utilisant les elements div. Pour les autres, on est alors oblige de mettre en forme la page avec des tableaux html
(table, tr,td...)
3.3.3
Les acteurs du march

e
WizTiVi regroupe donc plusieurs acteurs du marche du web. On trouve dabord les fournisseurs de contenu,
cest `
a dire les sites internet qui fournissent linformation. On retrouve egalement les fabricants de box ainsi que les
fournisseurs daccès `
a internet. Ces acteurs peuvent etre resumes par ce schema :
Figure 12 WizTiVi au coeur des acteurs de la television par ADSL
13
Annee 2007 - 2008
Hurault Guillaume
3.3.4
Rapport de stage
Exemple de t
el
esites
Voici quelques exemples de telesites realises par la societe WizTiVi :

Dailymotion :
Figure 13 Transformation dun site en telesite

Dailymotion est le telesite le plus important de la societe. On voit ici quil a graphiquement ete adapte à lergonomie
de la television. Lutilisateur peut donc gr
ace à la telecommande de sa box naviguer sur le telesite comme sil
naviguait sur le site avec sa souris.
Le t
el
esite de leuro :
Figure 14 Le telesite de leuro
14
Annee 2007 - 2008
Hurault Guillaume
3.3.5
Rapport de stage
Exemple de t
el
evision interactive
La television interactive nest donc quun telesite avec comme fond video la chane que lon est entrain de
regarder.
Exemple du tour de France
Figure 15 Exemple de television interactive : le tour de France

On peut voir sur cet exemple le principe de la television interactive. Un utilisateur regarde le tour de France et il
souhaite avoir des informations sur letape qui est entrain de se derouler. Plutot que daller sur internet, il peut
alors en appuyant sur un bouton de la telecommande de la box acceder au telesite lie à la chane du tour de
France. Il a alors, tout en gardant la video dans un coin de la tele, accès à des informations sur letape en cours.
Exemple de nrj hits
Figure 16 Exemple de television interactive : nrj

De meme, on est ici sur la chane nrj hits et on peut activer le telesite. On obtient alors un cadre par dessus la
video avec `
a linterieur des informations sur les clips que lon est entrain de visionner.
15
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Environnement technique
Nous allons maintenant voir plus precisement le contexte dans lequel jai evolue pendant ce stage. Nous verrons
dabord une presentation des technologies que nous avons utilisees pendant ce stage. Nous avons en effet decouvert
plusieurs frameworks J2EE que nous ne connaissions pas. Comme nous le verrons dans la partie gestion de projet,
jai avec mes collègues stagiaires passe deux semaines à me documenter sur les technologies utilisees par la societe.
De plus, tous les projets de la societe utilisent un socle commun appele SDK. Nous avons donc d
u apprendre `
a
nous en servir.
4.1
4.1.1
Les technologies utilis

ees
Eclipse
Eclipse est un environnement de developpement integre libre dont toute larchitecture est developpee autour de
la notion de plugin. Tous les projets menes pendant ce stage ont ete developpes avec cet IDE. Nous avions la chance
de bien connatre cet environnement puisque cela fait maintenant deux ans que nous lutilisons à la faculte.
Lequipe WizTiVi utilise plusieurs plugins declipse que nous ne connaissions pas. Plusieurs dentre eux comme le
plugin WTP sont lies au fait que la societe developpe des projets orientes web. Dautres permettent comme nous le
verrons plus tard de faire de la couverture de code pour par exemple verifier que le developpeur respecte bien les
conventions de nommage.
4.1.2
Maven
Maven est un outil logiciel libre de la fondation Apache utilise pour la gestion et lautomatisation de developpement
de logiciels Java. Cest un outil extremement puissant et interessant qui peut etre compare au système Make sous
unix ou `
a loutil Ant.
Un des elements cles de maven est la structuration des projets quil impose. Il en decoule une uniformite qui rend
plus aisee la comprehension des projets pour les developpeurs. En effet, quelquun connaissant maven et qui arrive
sur un projet en cours de developpement peut très facilement repere o`
u se situent les packages java, o`
u sont les
ressources, les tests, la configuration, les pages web etc.
Maven impose donc une arborescence bien particulière des projets avec dans le dossier source un fichier de configuration connu sous le nom de Project Object Model (POM) decrivant le projet. On retrouve dans ce meme dossier
un sous dossier source et un target. Ainsi chaque element dun projet se retrouve dans un dossier specifique et il
en est de meme pour tous les projets construits avec maven. On comprend donc bien la standardisation que loutil
apporte.
Voici quelques commandes maven qui permettent deffectuer des traitements separes :
compile : Pour compiler le code source et le generer dans le repertoire target

test : Pour executer les tests unitaires
package : Compile les sources et les genère dans le packaging prevu dans le fichier pom (war, jar etc.)
site : Cree automatiquement un site web entièrement dedie au projet.
Un autre point fort de maven est la gestion des dependances du projet. En effet, un projet utilise generalement
plusieurs dependances specifiques comme par exemple Junit pour les tests, Spring, Struts etc. Il faut alors telecharger
la dependance, linstaller dans eclipse etc. Avec maven la gestion des dependances est extremement simplifiee. Il
suffit en effet dindiquer dans le fichier pom.xml que lon souhaite utilise par exemple Junit et de rebuilder le projet.
Maven se charge alors de telecharger la version de Junit que lon a indiquee et le package apparat alors directement
dans les dependances du projet.
16
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Maven a de plus une très bonne gestion des depots pour ne pas avoir à retelecharger chaque dependance `
a chaque
build de projet. Il existe en effet un dep
ot central ouvert o`
u lon retrouve toutes les dependances connues au
monde. A linterieur dune entreprise, il peut aussi exister un depot global à la societe. Il permet de regrouper les
dependances les plus utilisees par lentreprise. Enfin, sur la machine de chaque developpeur, il existe un dep
ot local
permettant daccelerer le processus de build.
Maven possède bien s
ur son plugin eclipse pour par exemple generer le .project automatiquement etc. La societe
a de plus realiser son propre plugin pour par exemple generer automatiquement la structure de base dun telesite.
4.1.3
Struts
Struts est un framework pour applications web developpe par le projet Jakarta de la fondation Apache. Cest le
plus populaire des frameworks pour le developpement dapplications web avec Java. Struts met en oeuvre le modèle
MVC 2. Il permet donc de voir les applications complexes comme une suite de composants de base : Vues, Actions
et Modèles.
Avant de presenter les trois composants du modèle MVC, nous allons voir le cheminement dune requete Http dans
struts pour mieux comprendre la relation entre ce modèle et struts.
Figure 17 Cycle de vie dune requete http
1.
2.
3.
4.
5.
Le client envoie une requete `

a lapplication
Le contr
oleur la recoit. Un moteur de règles decide quelle action executer
Les composants modèles agissent sur le stockage de donnees persistant
Gr
ace aux donnees du modèle, le controleur determine la vue à afficher
Le composant vue genère la reponse puis la renvoie au client
17
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Voyons maintenant en detail chacun des trois composants :

Le composant Contr
oleur est le coeur du système. Comme son nom lindique cest lui qui se charge de traiter
toutes les demandes du client. Voici quelques exemples des traitements effectues par un controleur :
Decider quelle action executer lors de la reception dune requete

Traiter les cas derreur
Decider de la vue `
a afficher
etc.
Le contr
oleur est implemente en deux parties : Un fichier xml pour la configuration et des classes daction. Les
actions se chargent donc de beaucoup de choses. Ce sont par exemple elles qui coordonnent laccès au stockage
persistant ou qui mettent en oeuvre la logique metier.
Un composant Mod`
ele represente generalement un objet metier. Il peut par exemple representer un utilisateur
dans un système de gestion connexion deconnexion dun forum. Il fournit donc des methodes permettant dacceder
aux informations liees `
a lobjet. Les composants modèles doivent etre construits de facon à masquer les details
dimplementation de laccès `
a linformation (utilisation dinterface).
Le composant Vue se concentre sur une seule chose : La creation de la couche presentation que voit lutilisateur. Ce
composant ne doit donc en theorie ne contenir aucune information sur la logique metier de lapplication. Dans le cas
de struts, les composants vues sont des JSP. Ces fichiers genèrent le html qui est envoye au client. De nombreuses
taglibs sont utilisees dans ces jsps pour ne pas se servir de java.
4.1.4
Spring
Spring est un framework open source qui facilite le developpement des applications J2EE. Il sappuie principalement sur lintegration de trois concepts cles : Linversion de controle, la programmation orientee aspect et la couche
dabstraction. Nous verrons ici la partie inversion de controle (IOC) ou injection de dependances que WizTiVi
utilise.
Dans le modèle objet, une des premières proprietes est que les objets peuvent collaborer entre eux. Un objet peut
donc connatre un autre objet. Si un objet A a besoin dun objet B il doit le connatre. Il y a donc une dependance
entre lobjet A et lobjet B. Cette dependance est marquee par lajout dun attribut de type B dans A.
Cet ajout peut etre fait de deux facons. Le developpeur peut utiliser un constructeur ou une factory. Lutilisation
dune factory permet dutiliser le concept des interfaces. Cela permet de manipuler un objet sans se soucier de la
classe reelle de lobjet manipule si lon connat linterface quil implemente.
Spring et particulièrement son mecanisme dinjection de dependances utilise dans le cadre de WizTiVi offre un
nouveau moyen dinitialiser les dependances entre classes. Le principe est simple. Au lieu dutiliser une factory qui
contient la règle dinstanciation, spring apporte une factory generique totalement parametrable à laide dun fichier
de configuration au format xml.
Ce fichier permet donc de decrire quel objet a besoin de quel autre objet. Par exemple si un objet A a besoin dun
objet dinterface B, lobjet A declare un objet dinterface B dans ses attributs avec un setter et getter associe et cest
tout. Il declare ensuite dans le fichier xml de quelle implementation de B lobjet A a besoin et lors de linstanciation
de A lobjet B sera cree et mis dans les attributs de A.
18
Annee 2007 - 2008
Hurault Guillaume
4.1.5
Rapport de stage
Subversion
La societe utilise le logiciel subversion (svn) pour la gestion des versions des projets. Cest un système distribue
sous licence Apache et BSD et base sur les concepts de CVS que nous avons utilise à la faculte. Le premier principe
partage par les deux logiciels est le dep
ot centralise et unique pour sauvegarder les projets. Lutilisation de ce logiciel
se fait sous eclipse via le plugin Subclipse. Il na pas ete très difficile de sy adapter car il est très proche dutilisation
de cvs.
4.1.6
Tiles
Le framework Tiles fournit un mecanisme de template qui permet detablir une structure commune pour plusieurs
pages web. Il permet donc de b
atir le squelette dun document. Une fois ce squelette bati, on peut lutiliser pour
creer de vraies pages en rajoutant du contenu au squelette.
Lors de la conception de nimporte quelle application graphique, une phase importante est la phase de zoning de
linterface. Celle-ci permet de definir les differentes regions de linterface. Pour un site web, on definit donc par
exemple o`
u se situe le menu des pages o`
u se trouve le contenu etc.
Avec tiles on commence donc par definir les squelettes (ou layout). Cela consiste donc à batir les regions des pages
utilisant le layout et on precise par un code particulier le ou les endroits qui seront redefinis pour rajouter du
contenu. On definit ensuite via un fichier xml les differents layouts disponibles. On precise donc o`
u se trouvent les
layouts, on leur associe un id et on peut aussi definir un contenu par defaut des parties à redefinir. Il existe aussi
un système de fragments qui lui ne fait que recopier du code. Ce système evite de faire de multiples copier coller.
Enfin, une fois les layouts et le fichier de configuration rempli, on peut alors commencer à creer des pages. On
precise donc pour chaque page quel layout on souhaite utiliser et on redefinit ensuite les parties de contenus du
layout. Pour un site web classique, on peut donc par exemple definir dans le layout o`
u se trouve le menu de la page
et o`
u se trouve le contenu. Puis, dans toutes les pages du site, dire que lon utilise ce layout, dire que le menu utilise
tel fragment et se contenter de rentrer uniquement le contenu des pages sans avoir à reecrire le squelette du site
dans chaque page.
4.1.7
Les plugins
WizTiVi utilise plusieurs outils possedant un plugin eclipse ou maven comme nous allons brièvement le voir ici.
Un des premiers plugin utilise est Checkstyle. Ce plugin permet de verifier que le developpeur respecte bien les
normes de codage. On assure ainsi une certaine clarte et homogeneite du code produit par divers developpeurs. Il
permet de plus de verifier que la javadoc est bien faite.
Dans le meme genre, le plugin de loutil PMD permet danalyser de facon plus semantique le code. Il permet
notamment de reperer le code duplique dans un projet ou le code inutile par exemple. Il permet aussi de verifier les
noms de variables trop ambigus, trop longs etc.
Le plugin Corbertura permet de calculer le pourcentage du code couvert par des tests unitaires. Il permet donc
de verifier quel endroit du code na pas ete assez teste etc.
Enfin, le plugin Junit permet deffectuer des tests unitaires sur chaque classe.
Comme nous pouvons le voir, la plupart de ces plugins ont un but commun : la qualite de code.
19
Annee 2007 - 2008
Hurault Guillaume
4.2
Rapport de stage
Le SDK WizTiVi
Nous avons vu quil existe de nombreuses differences entre les navigateurs des differentes box. Celles-ci obligent
donc `
a faire beaucoup de code different en fonction des box. Le sdk WizTiVi permet donc de reduire ces differences.
Il permet entre autres de reconnatre et modeliser la box, de gerer la navigation à la telecommande, de gerer les
contenus multimedias ou de generer du html.
4.2.1
Gestion de la navigation
La navigation dun telesite `

a la telecommande est une partie importante. Cest en effet par elle que se fait le lien
entre la tele et lutilisateur. Les telesites sont bases sur le confort de surfer sur internet avec sa tele. Il faut donc
que la navigation sur le telesite soit extremement intuitive et facile pour lutilisateur.
Il faut de plus prendre en compte les differences entre les box qui sont nombreuses en matière de navigation. Pour
cela, le sdk apporte un certain confort gr
ace aux concepts. En effet, un concept quelque soit la box sera toujours le
meme. On definit donc par exemple un concept homePage. Celui-ci est mappe dans un fichier xml à un bouton
de la telecommande et on travaille dans lapplication uniquement avec le concept. On a donc plus à soccuper des
differences entre box pour cela.
On peut donc relier un concept `
a une action struts par exemple, pour que lorsque lon appuie sur un bouton de la
telecommande une action soit lancee. On peut aussi le relier à un bouton dans la barre de navigation :
Figure 18 Barre de navigation

On voit ici quil y a trois boutons. Ils sont donc relies à trois concepts au niveau de lapplication.
20
Annee 2007 - 2008
Hurault Guillaume
4.2.2
Rapport de stage
Les librairies de tags
Afin de simplifier le developpement de la couche presentation, le sdk fourni de nombreuses taglibs. Celle-ci
permettent par exemple de modifier le fond de la page, dinserer des elements multimedias, etc. Chaque box possède
egalement sa propre librairie de tags permettant de gerer les elements graphiques specifiques à la box comme les
boutons, les tableaux, etc.
4.2.3
Les th`
emes
Les thèmes permettent de centraliser differentes definitions comme les couleurs ou les fonds par exemple. Ils
permettent aussi de definir quelle jsp doit traiter quel type de pages. (voir ci-dessous)
4.2.4
Les pages
Le sdk permet dassocier `

a chaque page de presentation, donc à chaque jsp un objet page. Cet objet contient
un certain nombre dinformations destinees `
a la presentation. De cette facon on peut afficher simplement le fond
de la page, les boutons de la navigation etc. En effet, il suffit juste de recuperer lobjet page associe à la jsp et de
recuperer lattribut de cet objet dont on a besoin.
Il existe plusieurs types de page comme par exemple la BasePage pour les pages les plus simples. Il existe egalement
un type listPage pour les pages presentant une liste dinformations. Par exemple une liste de videos, dutilisateurs
etc. Enfin, on trouve les ItemListPage pour presenter une liste dobjets plus complexes.
Figure 19 Exemple de listPage

Sur cet exemple, on se rend bien compte de ce quest une listPage. Grace au sdk, la presentation de cette page est
très simple. On definit juste dans laction la page comme etant une listPage à laquelle on lui passe les objets. La
dernière chose `
a faire est de specifier dans laction lid du thème (vu ci-dessus) qui va traiter la page de presentation.
21
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Cadre du stage
5.1
Sujet de stage
Au debut de mon stage, je devais travailler en collaboration avec Jeremie Boulais egalement en master Alma sur
des services de micro-paiements via la television. Notre travail devait donc permettre lachat de produits en ligne
depuis son televiseur. Il etait notamment prevu de realiser :
Facturation sur la facture du FAI
Gestion de la publicite
Geolocalisation des utilisateurs (pour differents FAI)
Comme nous le verrons plus tard, mon sujet de stage a evolue en raison de contraintes techniques dues à lutilisation
des box.
Mon nouveau sujet etait donc la realisation dapplications liees à la television interactive. Lobjectif etait plus
precisement de fournir des composants au sdk de WizTiVi afin de pouvoir developper des telesites plus evolues.
Jai donc effectue deux projets relativement importants qui etaient deux composants au sdk. Lun devait permettre
de fournir un système de carte aux telesites et lautre un système de diaporama. Entre ces deux projets, jai travaille
sur deux autres projets plus petits mais qui mont permis daborder dautres phases du developpement des telesites.
5.1.1
D
eveloppement dun composant carte
Ce composant devait donc permettre lutilisation dun système de carte dans un telesite. Il devait repondre `
a
plusieurs besoins :
Possibilite
Possibilite
Possibilite
Possibilite
de se deplacer sur la carte

de selectionner une region
de zoomer et dezoomer
dafficher les donnees liees `
a la region selectionnee
Ce projet devait comporter trois parties :

Realisation de la partie coeur (metier,...)
Realisation de la partie support (carte, fichier xml permettant de lier une region aux donnees)
Realisation dun telesite de presentation du composant
Une fois ces differentes parties realisees, nous verrons quune integration à un premier telesite de recherche doffres
demploi a ete developpee.
22
Annee 2007 - 2008
Hurault Guillaume
5.1.2
Rapport de stage
R
ealisation dune application dencodage de fichiers vid
eo
Le deuxième projet que jai realise etait une petite application dencodage de fichier video. Celle-ci devait permettre `
a un utilisateur duploader une image sur un serveur et lapplication lui renvoyait le fichier video correctement
encode.
Lencodage de fichier video est une partie importante car la Freebox se sert de ces fichiers comme fond aux differentes
pages web. Jai donc realise une partie coeur chargee dencoder ces fichiers et une partie application web pour lenvoi
de fichiers sur ce serveur.
5.1.3
R
ealisation de la pr
esentation de lapplication dailymotion
Mon deuxième projet avant la realisation de mon second composant a ete de realiser la presentation de lapplication dailymotion pour une box differente de celle de lorigine. Dailymotion est en effet disponible sur Neufbox
depuis un certain temps dej`
a et WizTiVi souhaite realiser cette application pour une nouvelle box.
Jai donc dans le cadre de ce projet realise toute la presentation de lapplication en utilisant la technologie JSP. Ce
developpement a ete interessant car je navais pas encore enormement utilise cette technologie.
5.1.4
R
ealisation dun composant diaporama
Ce dernier projet est aussi le plus technique du fait de lutilisation des box. Ce composant doit permettre aux
differents telesites dintegrer facilement un diaporama. Ce projet avait beaucoup de contraintes.
Il devait entre autres permettre de :
Gerer plusieurs sources de donnees (Picasa, Flicker, etc.)
Avoir plusieurs modes daffichage (Plein ecran, etc.)
etre multi-box
5.2
5.2.1
Gestion de projet
Jira
Jira est loutil que lequipe a choisi dutiliser pour gerer les differentes taches et projets des developpeurs. Cest
un logiciel qui permet entre autres de :
declarer et suivre la correction des bugs
definir, assigner `
a un developpeur et estimer le temps de developpement des taches
generer des rapports detailles
Chaque projet en developpement est donc declare dans le jira. Celui-ci est divise en plusieurs taches et chaque t
ache
est assignee `
a un ou plusieurs developpeurs. Lorsquune tache nous est assignee, nous devons estime le temps que
nous pensons mettre pour la realiser. Cela nous permet de nous entraner à lestimation des charges qui est un
exercice delicat. Cette gestion du temps permet à nos encadrants et au chef de projet de suivre lavancement de nos
projets.
5.2.2
D
eroulement dun projet
La plupart des projets auxquels jai participe suivait un developpement traditionnel. En effet, je commencais par
une phase danalyse suivie du developpement. Comme la societe a aussi un metier de recherche, jai pour certains
projets, notamment ceux lies `
a lutilisation des codecs video, precede ma phase danalyse dune phase de recherche.
Cette dernière devait definir ce qui etait realisable ou pas.
Comme nous lavons vu dans la partie precedente, la gestion de projet au quotidien etait faite via Jira. Nous
rentrions donc regulièrement le temps que nous passions sur telle ou telle tache. De plus, nous avions une reunion
avec notre encadrant toutes les semaines. Cette reunion devait permettre de faire un point sur ce qui avait ete fait
depuis la dernière reunion et devait permettre de programmer le travail à faire pour la semaine à venir.
23
Annee 2007 - 2008
Hurault Guillaume
5.2.3
Rapport de stage
D
eroulement du stage
Voici donc le planning que jai suivi durant mon stage.
Figure 20 Planning du mois davril et mai
Figure 21 Planning du mois de juin et juillet
Figure 22 Planning du mois dao

ut
24
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Travail r
ealis
e
6.1
Adaptation de lapplication Tutoriel de WizTiVi
Comme nous pouvons le voir sur le planning, la deuxième semaine du stage a en partie ete consacree à lapprentissage du sdk de WizTivi. Pour cela, la societe dispose dune application tutoriel. Il sagit dun telesite destine `
a
montrer lutilisation du sdk. Il est constitue de plusieurs pages montrant etape par etape la realisation dun telesite.
On apprend entre autres gr
ace `
a ces etapes `
a:
Utiliser les taglibs specifiques au sdk

Utiliser les thèmes
Utiliser la navigation
etc.
Chaque etape montre donc lutilisation dune fonctionnalite du sdk. En regardant le code de la page, nous
pouvions donc apprendre `
a nous en servir.
Lapplication tutoriel netait disponible que pour une seule box. Le premier travail qui nous a ete confie `
a moi
et `
a mes collègues stagiaires a donc ete de migrer cette application pour une autre box. Nous avons donc vu de
facon minimaliste la realisation dun telesite. Nous avons donc grace à ce premier telesite appris à creer un nouveau
projet utilisant le sdk, `
a se servir des technologies comme maven spring ou struts et à commiter ce projet sur svn.
Voici une capture decran de lapplication que nous avons realise montrant ce que lon peut apprendre gr
ace au
tutoriel.
Figure 23 application hj-helloworld
25
Annee 2007 - 2008
Hurault Guillaume
6.2
Rapport de stage
Recherche sur les moyens de micro-paiements pour la t

el
evision
Ce projet devait etre `

a la base notre principal sujet de stage. Comme nous lavons vu, nous y avons travaille que
durant quelques jours car nous nous sommes rendus compte assez vite que ce qui avait ete initialement prevu par
nos superieurs nallait pas etre possible `
a cause des trop grandes contraintes dues aux box.
Pour rappel, le but de ce sujet etait de fournir à WizTiVi des moyens de paiement pour la television. Le but
recherche etait de pouvoir fournir `
a des telesites le moyen de vendre facilement du contenu. Nos recherches ont dès
le debut ete orientees vers trois plateformes de paiement par internet.
6.2.1
Free-HA
Free-HA est une solution permettant `

a des commercants de vendre du contenu aux abonnes Free facilement
et de facon securisee. Le principe est que chaque contenu achete par un abonne est ajoute sur la facture de son
abonnement. La grosse contrainte est que lachat ne peut etre effectue que depuis une ligne ADSL Freebox. La
procedure de paiement est alors la suivante :
Le site web du commercant contacte Free-HA pour enregistrer un pre-achat.
Il redirige ensuite le client vers la plateforme Free-HA pour que celui-ci sauthentifie
La plateforme recontacte ensuite le site commercant pour lui communiquer le resultat de la transaction
La deuxième etape de cette procedure rend impossible lutilisation depuis une Freebox. En effet, il est imperatif lors
de ce procede de sauthentifier sur la plateforme de Free. Le problème est que la page dauthentification ne peut
etre interpretee par la box. Lidee dutiliser Free-HA a alors ete abandonnee.
6.2.2
Internet plus
Internet plus fonctionne sur le meme principe que Free-HA mais il est multi fournisseurs. La procedure de
paiement est aussi sensiblement la meme. En effet, lors du paiement, une page est affichee chez le client pour que
celui-ci confirme son achat. L`
a encore, cette page ne peut etre comprise par les box. Lidee a donc egalement ete
abandonnee.
6.2.3
Paypal
Pour finir, nous avons tente dutiliser paypal. Nous avons ete jusquà developper une petite application de test.
En effet, paypal possède toute une plateforme de test permettant de simuler le vrai système. Cela est propose aux
developpeurs souhaitant utiliser paypal. Le problème que nous avons rencontre est le meme que pour les precedentes
plateformes. En effet, le client doit forcement à un moment donne senregistrer sur une page dauthentification
correspondant `
a paypal.
6.2.4
Bilan
Comme nous lavons vu, ces trois plateformes imposent une chose : Le client doit etre capable dafficher la reponse
envoyee par les plateformes. Nous avons dans les trois cas tente de lafficher sur les box mais cela etait impossible.
En effet, le code renvoye par les plateformes netant pas du code html de base, toutes les box ne pouvaient pas
lafficher.
Nous avons tente de contourner ce problème en affichant la reponse de la plateforme dans une iframe que nous
naurions pas affichee. Nous aurions alors pu via javascript recuperer les elements de cette iframe et les afficher
a notre facon pour les box mais le javascript netant pas disponible sur toutes les box, cette solution na pas ete
`
retenue. La dernière solution aurait ete de refaire entièrement une plateforme de paiement pour la television mais
cela semblait complique en terme de delai et de connaissance.
De plus, lequipe sest apercue durant nos recherches quelle netait pas encore assez m
ure sur ce quelle souhaitait.
Notamment dun point de vue juridique, le paiement par internet impose des choses qui netaient pas forcement
prevues. Toutes ces contraintes ont fait que pour un stage, la meilleure solution etait de mettre de cote ce projet et
de repartir sur quelque chose dautre.
26
Annee 2007 - 2008
Hurault Guillaume
6.3
6.3.1
Rapport de stage
Int
egration dun composant carte au sdk WizTiVi
Motivations
Comme nous lavons vu, ce projet devait permettre lintegration dune carte dans les telesites. Lidee etait de
pouvoir associer `
a une partie dune carte, de linformation.
La première motivation etait lintegration de ce composant dans un telesite de recherches doffres demploi. Ce telesite
permet de rechercher des offres demploi selon plusieurs critères. Lidee etait que lutilisateur puisse naviguer sur la
carte et voir directement le nombre dentreprises et demplois presents dans la region. Nous souhaitions quil puisse
egalement selectionner une region afin dacceder à une liste plus detaillee des emplois de cette region.
Meme si pour le moment, le composant carte nest utilise que pour un seul telesite, de multiples possibilites sont
offertes. On peut par exemple imaginer de se servir de ce composant pour un site dannonces immobilières ou pour
la meteo par exemple.
De ce fait, le projet devait etre le plus generique possible notamment entre la relation de la partie carte et de la
partie information.
Comme nous lavons vu, la base du projet etait la navigation sur la carte ainsi que la selection dune region de la
carte. Les actions disponibles pour lutilisateur peuvent donc etre resumees dans ce diagramme :
Figure 24 Possibilites offertes à lutilisateur
27
Annee 2007 - 2008
Hurault Guillaume
6.3.2
Rapport de stage
Principes de base
Nous allons maintenant voir la facon dutiliser le composant que nous souhaitions ainsi que les principes de base.
Lidee du composant carte est qu`
a chaque changement de region, une nouvelle image est affichee. Voici donc un
exemple de deplacement dun utilisateur de la region Ile de France qui en cliquant sur la flèche du bas de sa
telecommande arrive sur la carte de la region Centre.
Figure 25 Exemple de deplacement sur la carte

Sur cet exemple il y a donc deux images differentes, une quand la region Ile de France est selectionnee et une pour
la region Centre. Cela impose donc un grand nombre dimages. Cela permet en revanche de gerer simplement les
images de la carte. Il suffit en effet pour cela dassocier à chaque region, une image.
Cette solution permet de plus detre multi-box. En effet, en ayant des navigateurs plus evolues il aurait sans doute
ete possible dutiliser une image de base que nous aurions manipulee en fonction de la region selectionnee. Mais,
certaines box ne comprenant que le html, cette solution semblait la meilleure.
Sur cet exemple on peut de plus voir, `
a droite de limage de la carte, un resume des informations de la region
selectionnee. Si lon souhaite en savoir plus, il suffit de cliquer sur la region. On arrive alors sur une page decrivant
les differents emplois de la region.
Ce projet a donc ete divise en trois parties afin de pouvoir redefinir certaines parties sans avoir à toucher aux
autres. On trouve donc :
Un projet coeur contenant les objets metiers et la navigation sur la carte
Un projet support pour chaque type de carte. En effet un telesite utilisant la carte de France na pas besoin
de toutes les images de lAllemagne par exemple
Un projet tutoriel expliquant lintegration du composant carte dans un telesite
28
Annee 2007 - 2008
Hurault Guillaume
6.3.3
Rapport de stage
Le projet coeur
Le projet coeur definit donc la base de lapplication. Voici son diagramme de classes :
Figure 26 Diagramme de classes de la partie coeur

On peut donc voir que la partie metier est très reduite. Sur ce schema on ne voit pas en revanche la partie struts
et la partie spring. Les deux principaux objets metiers sont lobjet part et lobjet map.
Lobjet part
Lobjet part est un objet simple ne faisant que decrire une region de la carte. Une region de la carte nest pas
une region comme par exemple les pays de loire. Il sagit en fait dune partie de la carte. Ainsi la Loire-Atlantique
peut etre appelee region dans le sens partie de la carte. On trouve entre autres dans cet objet part :
Un id
Limage qui lui est associee
La liste de ses voisins
Une liste de datakeys permettant de lier cet objet part de la carte aux objets du telesite utilisant le
composant carte
29
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
La liste de datakeys est configuree par exemple dans un fichier xml du telesite utilisant le composant carte.
Prenons un exemple pour comprendre son utilite. Lorsque lon regarde la meteo, le temps est souvent associe `
a une
ville. Pour un site ou un telesite de meteo on aura donc certainement un objet metier decrivant le temps qui sera
associe `
a une ville. On pourra donc dans le composant carte associe la region Pays de la Loire à la ville de Nantes
ou dAngers par exemple.
En revanche pour le telesite de recherche doffres demploi, une offre nest pas associee à une ville mais `
a un
departement. Ainsi, dans la liaison au composant carte, on associerais dans cet exemple, la region Pays de la Loire
au departement Loire-Atlantique, Vendee etc. On voit donc bien que la liaison de lobjet part aux donnees depend
du telesite qui va utiliser ce composant.
Voici un extrait de fichier xml decrivant la liaison aux donnees :
Figure 27 Extrait de fichier de liaison aux donnees
Lobjet map
Lobjet map possède donc une liste dobjets part decrivant la carte. On lui associe egalement un objet
part particulier pour savoir quelle est la partie de la carte selectionnee par defaut (elle est notamment utilise lors
du demarrage de la carte). On trouve egalement dans le composant coeur un parseur ayant un fichier xml en
attribut qui decrit la carte et qui est charge dinitialiser lobjet map. On detaillera plus precisement la structure
de ce fichier dans la partie sur le composant support. Enfin, on trouve dans lobjet map une interface de type
MapResumeDataProvider ainsi quune interface de type MapDatasKeysProvider.
La première de ces interfaces possède une methode getResumeData prenant un objet part en entree. Cette
methode est appelee pour savoir quest ce qui va etre affiche à droite de la carte lors de la navigation. On comprend
donc bien que limplementation de cette interface doit se situer dans le telesite utilisant le composant.
Par exemple, pour le telesite de recherche doffres demploi, limplementation de cette classe possède une facade vers
la base de donnees. La methode getResumeData va donc chercher dans la base de donnees le nombre demplois et
le nombre dentreprises de la region Part passee en paramètre dentree de la methode. Elle va ensuite construire
un objet contenant le nombre demplois, le nombre dentreprises et le nom de la region.
De cette facon, lors de la gestion de la navigation de la carte par le composant coeur, celui-ci va faire appel `
a
cette implementation pour recuperer cet objet, et va le passer à la vue (une jsp) chargee dafficher la carte. (la
base de la navigation est une action struts). La vue recupère donc cet objet et peut donc facilement afficher les
informations liees `
a la region selectionnee.
Limplementation de la seconde interface (MapDatasKeysProvider) est un objet capable de construire les dataskeys de lobjet Part en entree. On a vu precedemment que la liaison des dataskeys pouvait etre faite par un
fichier xml. Dans ce cas, limplementation de lobjet de type MapDatasKeysProvider sera un parseur xml mais
on peut imaginer que la liaison entre le composant carte et les donnees du telesite ne soit pas un fichier xml mais
une base de donnees. Voil`
a pourquoi nous avons utilise une interface dans le composant coeur.
30
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
La navigation
En plus des objets metiers, il est necessaire de parler de la navigation à la telecommande qui est une partie
importante dans le composant map. Comme nous lavons vu dans la partie sur le sdk de WizTiVi, il existe un
certain nombre de concepts definis dans un fichier xml permettant dabstractiser les differentes telecommandes des
box. Le composant map utilise un certain nombre de ces concepts pour gerer les deplacements de lutilisateur sur
la carte.
On trouve ainsi un concept :
carteHaut : pour le deplacement vers la region du dessus

carteBas : pour le deplacement vers la region du dessous
carteGauche : pour le deplacement vers la region de gauche
carteDroite : pour le deplacement vers la region de droite
zoomin : pour zoomer sur la region courante
zoomout : pour dezoomer
Chaque concept, en plus detre relie `

a un bouton de la telecommande, est lie à une action struts. Une action est
une classe qui implemente la classe Action de Struts. Elle possède une methode execute. Cette methode prend
en paramètre la requete et la reponse ainsi que des elements lies à struts et elle est appelee par la servlet de struts
lorsque lutilisateur effectue une requete. Il existe une action struts par deplacement. Ainsi, lorsque lutilisateur
appuie sur un bouton, une action est alors declenchee. Toutes ces actions de deplacement sont reliees à une meme
classe MapAction definie dans le projet coeur. Il existe une instance de cette classe par action de deplacement
de struts. Chacune de ces instances est instanciee avec spring et possède une propriete event decrivant quel
deplacement est relie `
a lobjet. Lors du lancement de lapplication, un bean map est cree par spring et ce bean
est initialise par le parseur. Chaque objet de la classe MapAction possède de plus une association avec ce bean
map afin davoir accès aux informations de la carte.
D
eroulement dun d
eplacement sur la carte
Nous allons maintenant voir un exemple de navigation sur la carte :
Figure 28 Utilisation de la carte
31
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Comme nous venons de le voir, lorsque lutilisateur appuie sur une touche de deplacement de la telecommande, la
methode execute de la classe MapAction est declenchee. Laction recupère alors lid de la region courante dans
la requete (nous verrons plus tard comment cet id est mis en paramètre de la requete). Laction fait alors appel `
a
lobjet map pour recuperer lobjet part correspondant à lid. Elle fait ensuite appel à ce meme objet pour savoir
quel est le prochain objet part correspondant au deplacement souhaite par lutilisateur. Ce nouvel objet part est
alors mis dans la requete pour que la vue le recupère. Laction fait enfin appel à la methode getResumeData de
lobjet map pour recuperer un objet correspondant au resume des informations de la nouvelle region. Cet objet
est ensuite mis dans la requete.
Pour finir, laction redefinit les urls des actions des concepts que nous avons vu plus haut. Elle rajoute en fait après
lurl un paramètre correspondant `
a lid de la nouvelle region. Cest de cette facon que lors du prochain deplacement
de lutilisateur, laction pourra recuperer lid de la region courante.
Nous venons de voir comment etait gere le deplacement de lutilisateur sur la carte par laction MapAction. Nous
allons maintenant voir comment est gere la vue qui va etre affichee par lutilisateur. Afin de simplifier lintegration
du composant map dans un telesite, jai realise une taglib. De cette facon, il suffit dinserer cette taglib dans la
jsp souhaitant integrer la carte, pour afficher limage de la region selectionnee.
Comme nous lavons vu dans la partie precedente, laction met dans la requete lobjet part qui doit etre affiche. La
taglib recupère donc cet objet et recupère limage associee. Comme cette image est presente dans le classpath de
lapplication, jai realise une servlet chargee de recuperer cette image. Enfin, une fois recuperee, la taglib rajoute
donc du code html permettant dafficher cette image dans la jsp.
Pour finir, lutilisateur souhaitant integrer le composant map, definit dans la vue de la jsp de la carte, la facon
dont il souhaite afficher le resume des informations de la region selectionnee. Pour cela, nous avons vu que laction
mettait lobjet correspondant `
a ce resume dans la requete. Il suffit donc de le recuperer dans la jsp et dafficher ces
informations de la facon dont on le souhaite.
32
Annee 2007 - 2008
Hurault Guillaume
6.3.4
Rapport de stage
Le projet support
Afin de ne pas importer des images inutiles, il existe un projet support par carte. Pour le moment, il nexiste
que le projet pour la carte de la France. Nous allons voir de quoi est compose ce projet.
Ce projet est donc compose de deux choses :
Un fichier xml decrivant la carte
Les images de la carte
Comme nous lavons vu dans la partie coeur, il existe une image par partie de la carte. Ainsi pour la carte de
France, il existe environ 130 images. Cest pourquoi nous avons decide davoir un projet par carte. Le fichier xml
permet lui de decrire les differentes parties de la carte.
Voici le schema de ce fichier xml :
Figure 29 Description de la carte

Ce schema se comprend assez bien. Nous avons un element parts comprenant plusieurs elements part.
Chaque partie a donc, un id, une image et est lie à une ou plusieurs autres parties. Ces parties permettent de
representer les differents voisins quune partie peut avoir ainsi que la partie zoomee et la partie dezoomee.
Precisons que le parseur de la partie coeur sert dun fichier xml decrit par ce schema pour initialiser la carte.
33
Annee 2007 - 2008
Hurault Guillaume
6.3.5
Rapport de stage
Le projet tutoriel
Ce projet devait servir dexemple `

a lintegration du composant map de WizTiVi. Cest donc un telesite qui
utilise le composant map et qui explique en plusieurs etapes comment lintegrer. En plus des explications, on trouve
donc une partie exemple qui utilise la partie carte en simulant un telesite de recherche doffres demploi. Ce projet
tutoriel a ete realise pour plusieurs box montrant laspect multi-box du composant carte.
La première partie du telesite est donc composee de plusieurs pages montrant etape par etape comment integrer le
composant. La presentation montre donc comment :
Inclure les deux dependances du composant dans le fichier pom.xml

Modifier les fichiers de configuration de struts et de spring
Rajouter les concepts de navigation de la carte
Creer le fichier de liaison des donnees `
a la carte
Inserer la taglib de la carte dans une jsp
Creer une classe dimplementation de la classe MapResumeDataProvider
Comme nous lavons vu dans le projet coeur, un certain nombre daction struts et de beans sont à declarer pour
pouvoir utiliser le composant map. Ces elements sont le plus souvent declares dans des fichiers xml. Comme lapplication tutoriel utilise le composant map, quelquun souhaitant integrer ce composant dans son telesite na qu`
a
recopier les bons elements de spring et de struts dans ces propres fichiers. Jexplique donc dans la partie explication
du telesite quels sont les elements `
a recopier. Afin de faciliter lintegration, jai de plus rajoute des commentaires
montrant ce quil y a `
a recopier dans les fichiers de configuration xml de spring et de struts.
Jai procede de la meme facon pour les autres elements qui sont à ajouter dans son propre telesite pour integrer le
composant map comme par exemple les concepts qui sont aussi des elements dun fichier xml.
Jai decouvert par la suite que le sdk de WizTiVi permettait dimporter des elements de spring ou de struts provenant
dun composant dans une application web. Larchitecture du projet pourra donc etre legèrement modifiee pour que
les elements de spring et de struts soient presents dans la partie support du composant. (Nous verrons dans une
prochaine partie que cest ce qui a ete fait pour mon second composant). De cette manière, lutilisateur souhaitant
integrer le composant na qu`
a preciser dans la configuration de son application quels sont les elements de spring et
de struts `
a importer.
34
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Nous allons maintenant voir quelques captures decran de lapplication tutoriel qui utilise le composant map.
Figure 30 Accueil de lexemple de la carte

On voit bien sur cette première capture les differentes parties. Une est consacree à lexplication de lintegration
du composant et lautre `
a un exemple de la carte.
Figure 31 Exemple de deplacement

Sur ce second exemple on peut voir le deplacement de lutilisateur de la region Bretagne à la region Pays de
la Loire. On peut egalement remarquer que les emplois de la region selectionnee sont affiches à droite de la carte.
Enfin, on peut remarquer en bas de la page la representation des differents contextes de la page. On voit donc
quil est possible de zoomer, dezoomer, quitter la carte ou obtenir des informations detaillees sur les emplois de la
region selectionnee.
35
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Figure 32 Exemple de zoom

Sur cet exemple, lutilisateur se trouvait sur la region Pays de la Loire, il a zoome et est arrive sur la LoireAtlantique. De meme, on peut voir `
a droite de la carte le resume de ce departement.
Figure 33 Exemple de detail

Pour ce dernier exemple, lutilisateur se trouvait sur le departement Loire-Atlantique et à appuyer sur la touche
info. On voit donc quil arrive sur une page detaillant les emplois de la region selectionnee.
36
Annee 2007 - 2008
Hurault Guillaume
6.3.6
Rapport de stage
Int
egration du composant dans un t
el
esite en d
eveloppement
Comme nous lavons vu, une des motivations du projet de carte etait lintegration de ce composant à un telesite de
recherche doffres demploi en cours de developpement chez WizTiVi.
Ce telesite (NeedProfile) permet `
a un particulier dafficher sur sa television les diverses entreprises proposant des
emplois. Un site dadministration permet aux entreprises inscrites denregistrer les differents emplois.
Lidee etait donc de proposer `
a lutilisateur de pouvoir afficher les emplois et les entreprises en fonction dune region
selectionnee sur la carte.
Ce telesite etait donc le premier `
a integrer le composant carte. Il a ete loccasion de corriger plusieurs choses pour
avoir un composant le moins restrictif possible.
Jai notamment change laction struts qui permettait dappeler les objets metiers. En effet, dans la première version,
cette action etait presente dans la partie coeur du composant et il etait obligatoire de passer par elle pour afficher la
carte. Le problème etait que dans un vrai telesite, laction definit toute la page qui va etre affichee. Dans NeedProfile,
toutes les actions definissent par exemple quel est lelement du menu de la page qui doit etre mis en surbrillance.
Jai donc fait en sorte que laction puisse etre redefinie et que ce qui accedait à la carte soit dans une methode `
a
part `
a appeler dans laction redefinie.
En plus des quelques modifications que jai pu faire sur mon composant, jai egalement participe à quelques modifications sur le projet. En effet, le projet NeedProfile ayant demarre legèrement avant mon changement de sujet de
stage, il netait pas prevu lintegration du composant. Jai donc participe à la modification de la facade permettant
dacceder aux objets metier stockes en base. Jai donc ajoute les fonctions prenant un objet part en entree et retournant une liste de compagnies et demplois. La seule notion de lieu dans ce telesite est dans lobjet adresse o`
u
lon stocke un code postal. Un job et une entreprise ayant un objet adresse en attribut, mes methodes de la facade
se servaient donc de cela pour definir quel emploi ou entreprise etait present dans telle region.
Jai donc rajoute quelques fonctions pour par exemple :
Retourner
Retourner
Retourner
Retourner
la liste des entreprises dune region

la liste des emplois dune region
le nombre demplois disponibles dans une region
le nombre dentreprises dune region qui recrutent
Toutes les methodes de la facade ninterrogent pas directement la base de donnees car elles peuvent contenir des
traitements qui nont pas de rapport avec la base. La facade utilise donc un service qui lui est directement en rapport
avec la base de donnees et ne sert que dinterface avec elle. Jai donc aussi d
u modifier ce service pour permettre `
a
la facade de communiquer avec la base. Les fonctions que jai creees correspondent aux methodes citees ci-dessus
et nont principalement quun r
ole dinterrogation de la base.
Jai de plus cree une classe implementant linterface MapResumeDataProvider. Cette classe permet de construire
lobjet contenant un resume des informations que lon souhaite afficher en fonction de la region selectionnee. Enfin,
jai cree la jsp permettant dafficher la carte et le resume des informations de la region selectionnee.
37
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Voici quelques illustrations de la partie carte du telesite NeedProfile.
Figure 34 Accueil de la partie carte du telesite NeedProfile
Figure 35 Exemple dune region selectionnee
38
Annee 2007 - 2008
Hurault Guillaume
6.4
6.4.1
Rapport de stage
D
eveloppement dune application de conversion de vid
eos
Motivations
La principal point fort de la societe WizTiVi est de pouvoir developper les differents telesites pour plusieurs
box. Comme nous avons pu le voir, cela implique un certain nombre de contraintes. Cest une de ces contraintes
qui est `
a lorigine de ce projet. En effet, une version de la box du constructeur Free nest capable dafficher des
images quavec un très faible nombre de couleurs. Le fait de developper des sites web pour la tele implique davoir
un graphisme très travaille et agreable `
a loeil. Il est donc indispensable de pouvoir manipuler des images avec un
nombre de couleurs corrects. Pour pouvoir utiliser des images très travaillees sur toutes les versions de le Freebox,
il fallait donc corriger ce problème.
La solution `
a ce problème de couleur est lutilisation dune video comme fond de page. En effet, la Freebox accepte
davoir des fonds videos au format mp2v utilisant le codec Mpeg2. Ces videos contiennent un certain nombre doctets
supplementaires qui definissent le format mp2v. Lidee etait donc de convertir les images que nous souhaitions utiliser
en fond de page, en video mp2v pour que toutes les versions de la Freebox puissent avoir des fonds de page agreables
a loeil.
`
Avant le developpement de ce projet, il existait dejà deux solutions pour convertir une image en mp2v. La première
de ces solutions, est une application web qui permet de telecharger un fichier sur un serveur distant et qui nous
renvoie la video mp2v correspondante. Ce site etait très pratique mais pour des raisons evidentes de confidentialite,
nous ne pouvions continuer `
a lutiliser. Une autre solution qui elle permet de ne pas faire sortir nos images de la
societe, est la transformation des images en utilisant vlc. Comme nous le verrons, cette solution est à la base de ce
projet. La contrainte est que vlc doit etre utilise en ligne de commande et sous linux. La conversion dune image en
mp2v est donc très longue avec cette solution. En effet, il faut manuellement :
Envoyer limage sur le serveur linux

Se connecter sur ce serveur
Lancer la commande sur ce serveur
Telecharger le mp2v resultat
Le but de mon projet etait donc de permettre daccelerer cette procedure. Lidee etait de fournir une petite application web qui permettait gr
ace `
a un formulaire html duploader un fichier sur le serveur. Lapplication se chargerait
ensuite de transformer ce fichier et de renvoyer le mp2v à lutilisateur. Un complement de ce projet a ete developpe
pour permettre `
a lutilisateur dappeler lapplication de transformation en mp2v sans passer par linterface web
mais en le faisant directement en java.
39
Annee 2007 - 2008
Hurault Guillaume
6.4.2
Rapport de stage
R
ealisation
Lapplication a donc ete divisee en deux projets. Un projet core charge uniquement de convertir une image
en mp2v et un projet application web proposant un formulaire à lutilisateur et permettant duploader son image
sur le serveur.
La partie coeur
La partie coeur est composee dune interface contenant une seule methode. Cette methode convert prend en
paramètre un flux dentree contenant limage à convertir et un flux de sortie o`
u le mp2v resultat sera ecrit. On
trouve donc dans cette partie coeur une implementation capable de faire la conversion du flux dentree. Pour cela,
lapplication execute une commande externe qui fait appel à vlc pour transformer limage.
Ce projet ma permis dapprendre `
a correctement lancer un programme externe. En effet, la communication avec
lapplication externe est importante. Cette communication passe par trois flux. Parmi ces trois flux, on en trouve
un dentree permettant decrire sur lentree standard de lapplication et on trouve surtout deux flux de sortie. Un
etant la sortie erreur de lapplication et lautre la sortie standard. Ces deux derniers flux doivent absolument etre
consommes dans des threads differents. En effet, je me suis apercu que sans cela, lapplication bloquait.
La partie webapp
Lautre partie de ce projet etait donc le developpement de lapplication web. Celle-ci est donc composee dun
formulaire html pour permettre `
a lutilisateur de choisir le fichier à convertir et de deux servlets permettant dappeler
lapplication coeur. Comme nous lavons vu, la communication avec lapplication coeur peut se faire de deux
manières : En utilisant linterface web ou directement en java.
Pour la partie avec linterface web, jai utilise FileUpload de la fondation Apache. Jai donc cree une page web
contenant un formulaire html denvoi de fichier. Laction de ce formulaire est une servlet qui se charge duploader
le fichier sur le serveur. Une fois uploadee, elle envoie le flux de ce fichier à lapplication coeur qui ecrit le mp2v
resultat dans le flux de sortie de la servlet.
Lautre servlet permettant la communication avec lapplication coeur directement en java, doit etre appelee en
rajoutant un paramètre qui est lurl de limage à convertir. La servlet commence donc par recuperer cette url dans
la requete puis, elle telecharge cette image en utilisant HttpClient. Enfin, une fois limage recuperee elle appelle
lapplication coeur pour convertir limage et renvoie le resultat dans son flux de sortie.
Ces servlets mont fait decouvrir une nouvelle utilisation de spring. En effet, comme nous lavons vu, lapplication web
a une association avec lapplication coeur. Pour cela, nous devions utiliser spring mais il ne permet pas linstanciation
des servlets. Jai donc appris `
a recuperer dans une classe un bean cree avec spring. A la creation des servlets, une
methode init recupère le bean de lapplication coeur cree avec spring et le met en attribut de la servlet.
Bilan
Comme on peut le voir, cette petite application ma permis dapprendre les differentes facon de communiquer
avec une application sur un serveur distant. Jai notamment appris les differentes facons de travailler sur ce serveur
comme par exemple linstallation dun serveur dapplication à distance ou le deploiement dune application. Jai
egalement appris `
a mieux gerer lexecution dapplication externe en java. Enfin, jai decouvert la facon dutiliser des
servlets sans passer par struts et avec spring. Cette application a permis dautomatiser les operations que lutilisateur
effectuait manuellement avant. Elle a egalement rendu possible le developpement de lapplication diaporama comme
nous le verrons plus tard.
40
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Voici un exemple dutilisation des mp2v :
Figure 36 Image servant de base pour le Mp2v
Figure 37 Page se servant du Mp2v

Comme on peut le voir sur ce dernier exemple, on utilise comme fond de page un mp2v. Pour y arriver, nous sommes
partis dune image de base que nous avons converti en mp2v grace à lapplication encoder. Enfin, nous utilisons
ce mp2v dans une page dun telesite o`
u nous rajoutons ce que nous voulons dans la page.
41
Annee 2007 - 2008
Hurault Guillaume
6.5
Rapport de stage
D
eveloppement de la couche pr
esentation de lapplication Dailymotion
Dailymotion est un site de partage de videos très populaire. En effet, cest le principal concurrent de youtube
qui est le numero un des sites de partage de videos au monde. Dailymotion est aussi la plus grosse realisation de la
societe WizTiVi. En effet, cest en fevrier dernier que la societe a lance dailymotion disponible avec le fournisseur
daccès Neuf. La societe souhaitait ainsi se faire connatre et attirer de nouveaux clients.
Afin de mettre en avant laspect multi-box de la societe et souhaitant developper de nouvelles applications
pour un nouveau fabriquant de box, WizTiVi souhaitait realiser ladaptation de son telesite Dailymotion pour
une nouvelle box. Je suis donc intervenu dans ce projet afin de developper toute la partie presentation pour cette
nouvelle box. Le projet sappuyant sur la meme partie metier, je nai pas eu à la modifier.
6.5.1
Contraintes de la Thomson box
Avant de developper la partie presentation de dailymotion il a fallu sadapter à cette nouvelle box. Comme nous
lavons vu dans la partie presentation technique, pour developper la presentation dun telesite, lequipe sappuie sur
un sdk fournissant entre autres de nombreuses taglibs facilitant le developpement. Comme ce projet etait le premier
projet pour la Thomson box, lequipe a dabord ajouter de nouvelles fonctionnalites dans le sdk.
Les differentes contraintes techniques de cette box sont :
Gestion de la navigation non personnalisable
Javascript dom level 0
Peu de css
La gestion de la navigation est en fait le deplacement du curseur sur la page. Comme pour la Neufbox, il nest pas
possible de personnaliser la navigation de la Thomson box pour en creer une plus stylee par exemple. La navigation
sur Neufbox ou Thomson box est donc refaite grace au javascript. Chaque element selectionnable est en fait un
element javascript identifie par un id qui est ou non selectionne. Le principe est que lorsquun bouton est selectionne,
son image est differente de sil nest pas selectionne. Il ny a donc pas de reelle gestion dun curseur sur Neuf et
Thomson box. Gr
ace au javascript, `
a chaque reception dun evenement provenant la telecommande de la box, on
change limage dun bouton. On a donc limpression de naviguer sur la page.
Toute cette gestion de la navigation est faite par le sdk et je nai fait quutiliser ce qui etait disponible. Pour rendre
une page navigable, il suffit de rentrer dans la jsp associee, une taglib definissant si la suite va etre selectionnable
en colonne ou en ligne. Cela definit si lon va se deplacer de facon verticale ou horizontale. Une fois que lon a defini
la facon de se deplacer, il faut maintenant definir les elements selectionnables. De cette facon, chaque element est
associe `
a un autre element en fonction dune direction. Chaque bouton connat donc ses voisins.
42
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Voici un exemple de bouton que lon peut trouver sur Thomson box :
Figure 38 Exemple de bouton sous Thomson box

On voit donc bien ici le principe. Limage de gauche est limage dun bouton qui nest pas selectionne. Lorsque
celui-ci lest, on change dynamiquement gr
ace au javascript la source de limage du bouton et on la remplace par
ladresse de limage de droite. On a ainsi limpression de se deplacer sur le bouton.
Comme je lai dit, la Thomson box utilise un javascript limite. En effet, il sagit du javascript Dom level 0. Cela
signifie que tous les elements de la page ne sont pas accessibles par le javascript. Les elements disponibles sont :
les
les
les
les
images
formulaires
liens
ancres
Il nest donc pas possible dattribuer `

a nimporte quel element de la page un id et de le selectionner en javascript
comme cest habituellement le cas. Voil`
a pourquoi la societe a choisi de definir chaque element selectionnable
comme etant une image. De cette facon, comme les images sont accessibles en javascript level 0, lorsque lelement
est selectionne, une fonction javascript est lancee et elle se charge de changer la source de limage de lelement. Cest
de cette facon que lutilisateur voit quel element est selectionne.
Afin de creer un element selectionnable, le sdk fournit donc une taglib que lon insère dans la page. On passe `
a cette
taglib plusieurs paramètres comme limage quelle doit afficher lorsque le bouton est selectionne et quand le bouton
nest pas selectionne. De la meme facon, il est possible de rajouter du texte sur le bouton qui peut etre change en
fonction de la selection.
Enfin, une autre contrainte de cette box est la gestion speciale du css. En effet, on lutilise dhabitude pour placer
les elements dans la page. Ici le css ne gère pas le positionnement des elements, la balise div nest donc pas
disponible. Le css ne sert en fait uniquement quà donner un style à un element represente par un id mais ne sert
pas `
a son positionnement. La mise en page de la page se fait donc grace à la methode des tableaux.
6.5.2
R
ealisation
Après metre habitue aux differentes contraintes de la box, jai donc travaille sur la presentation de lapplication
dailymotion pour cette box. Je me suis bien s
ur inspire de lapplication disponible sur la Neufbox car il etait
imperatif que la version finale de la Thomson box soit la copie la plus parfaite de la Neufbox. Je me suis donc
beaucoup inspire du code de la precedente version mais celui-ci est bien different de celui pour la Thomson box `
a
cause des differentes contraintes que jai decrites precedemment.
43
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Ce projet a egalement ete loccasion dapprendre à utiliser la jstl. Cette bibliothèque a pour but de simplifier le
developpement des jsps. Celle-ci permet de concevoir des pages dynamiques sans connaissances du langage java.
La jstl permet entre autres de :
Definir des variables
Effectuer des si alors sinon
Effectuer des boucles
Une autre technologie que je navais pas beaucoup pratiquee avant est tiles. Comme je lai explique dans la partie
presentation technique, tiles est un framework qui permet de definir des squelettes de page à la manière des templates
en php. Lapplication Dailymotion comporte plusieurs pages ayant la meme structure. Avant de definir les pages,
jai donc defini ces differents templates.
Voici un exemple de pages utilisant le meme squelette :
Figure 39 Exemple de pages ayant le meme squelette

On voit bien ici que les pages ont le meme squelette et que seul le contenu des cadres change. En effet, une page
represente les chanes de dailymotion et une autre les videos.
44
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Nous allons maintenant voir le rendu de quelques pages que jai developpees :
Figure 40 Page daccueil

Cette image est limpression decran de la page daccueil du telesite dailymotion. On peut y voir la video star
du moment ainsi quune selection des chanes presentes sur le telesite. Une chane est en fait une categorie des
videos.
Figure 41 Exemple de video en lecture

Cette page est celle qui est affichee lorsquon lance une video.
45
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Figure 42 Aide sur la page video

Cette page est celle qui est affichee lorsquon affiche laide sur une video.
Figure 43 Page de recherche

Pour finir, cette page est la page de recherche. Cest un clavier virtuel qui permet de rechercher une video, un
membre ou un groupe.
46
Annee 2007 - 2008
Hurault Guillaume
6.6
Rapport de stage
Int
egration dun composant diaporama au sdk WizTiVi
Ce composant est le dernier projet auquel jai participe durant mon stage. Comme pour le projet sur les cartes,
il sagit aussi dun composant pour le sdk de WizTiVi. Celui-ci devait permettre dinserer facilement une partie
diaporama dans un telesite. En effet, plusieurs clients nous ayant demande de realiser un telesite souhaitaient une
partie diaporama dans leur application. Cest pourquoi lequipe WizTiVi souhaitait disposer dun composant de
ce type dans leur sdk. Celui-ci devait donc pouvoir sintegrer facilement en ayant le moins de choses à faire pour
le developpeur. Ayant dej`
a realise un premier composant, ce dernier ma permis de mieux penser mon composant
notamment en terme de decoupage du projet et de lintegration de la partie metier dans lapplication web.
Le cahier des charges definissait plusieurs possibilites que devait fournir le composant. On trouve donc dans ce
cahier des charges :
La gestion des differentes sources de photos (Picasa, Flicker, etc.)

La gestion des modes daffichage (Plein ecran, compose avec un fond...)
La gestion des effets daffichage (Transitions...)
La gestion des modes de calcul (Precalcule, à la volee)
Differentes options comme la possibilite de reboucler au debut après la dernière diapo
En plus de ces differentes configurations du diaporama, le composant se devait detre multi-box. Cela imposait
davoir une gestion très differente pour les deux principales box de la societe à savoir la Freebox et la Neufbox. En
effet, la Neufbox integrant du javascript, il etait alors possible de gerer toute la navigation du diaporama directement
sur le client.
Le projet etant relativement consequent si nous souhaitions tout faire pour toutes les box, nous avons choisi de
proceder de facon iterative après la phase danalyse. Cest pourquoi jai dabord realise une première version simple
pour la Freebox avant de complexifier les choses. La phase danalyse etait donc importante car le modèle fournit devait etre dassez haut niveau pour pouvoir dabord avoir des implementations de base et ensuite des implementations
plus complexes fonctionnant sur le meme modèle.
6.6.1
Analyse globale
La realisation de ce composant a commence par une longue phase de conception. Le debut de celle-ci a ete relativement difficile. En effet, après quelques jours danalyse, nous nous sommes rendus compte que le developpement
du composant rejoignait dautres projets de la societe. Celle-ci souhaite en effet developper deux composants plus
generaux :
Un composant Player
Un composant Media
La television etant un support o`
u lon peut jouer tout type de media, le but etait que le composant Player puisse
jouer tout type du composant Media que ce soit video, photo ou meme musique. Grace à ces composants, un telesite
pourrait donc très facilement integrer un player video par exemple. Le composant diaporama ne serait donc que
lutilisation du player generique avec comme type de media, des photos.
Nous avons donc fait un point après quelques jours de conception pour bien recadrer le sujet. En effet, de ce fait
nous etions partis sur une conception `
a mi-chemin entre un projet très haut niveau representant le media et le
player et un projet plus bas niveau representant uniquement la lecture dun diaporama. Le projet player generique
et multi-box etant un projet consequent et la fin du stage approchant, nous avons choisi de se concentrer sur le
developpement dun composant diaporama uniquement.
47
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Jai donc repris mon debut danalyse pour se focaliser sur la lecture dun diaporama. A partir du cahier des charges,
je suis arrive sur une conception `
a quatre parties :
La
La
La
La
partie
partie
partie
partie
Diaporama
Player
Vue
Rendu
La partie diaporama definit ce quest un diaporama à savoir un ensemble de slides et cest aussi là quon decrit
la source des donnees. La partie player est une partie independante capable de jouer le diaporama. La partie
vue definit les differentes options du diaporama comme par exemple si lon souhaite un affichage plein ecran ou
miniature. Enfin, la partie rendu est capable dafficher la partie vue. Elle est donc extremement liee à la partie vue,
le rendu dune vue en fond decran netant bien s
ur pas le meme que pour une vue miniature. De plus, le rendu
sur une Freebox nest pas le meme que sur une Neufbox. Nous avons fait le choix de reconstruire tout une partie
du modèle pour chaque utilisateur. Seule la partie diaporama peut etre partagee par plusieurs utilisateurs comme
nous le verrons plus tard. Toute la partie player, vue et rendu est donc instanciee à chaque nouvel utilisateur pour
eviter les problèmes de surcharge qui pourraient intervenir avec un player unique.
Comme nous le verrons plus tard, toutes ces parties ont fait lobjet dinterfaces pour pouvoir realiser differentes
implementations. En effet, le nombre de possibilites offertes etant important, il etait dabord important de definir
des apis decrivant le fonctionnement global du composant et densuite decrire les implementations.
Larchitecture du projet est legèrement differente de celle du composant carte car entre temps jai appris de nouvelles
notions sur maven, spring et struts. En effet, nous avions vu dans le composant carte que lutilisateur souhaitant
integrer le composant, devait recopier `
a la main la configuration spring et struts necessaire. Je me suis apercu au
cours de mon stage quil etait possible de faire des imports de ces configurations.
Jai utilise la notion de module disponible dans maven pour decouper mon projet. Cette notion permet de regrouper
a linterieur dun seul projet, deux sous projets. Jai donc cree un projet java general contenant un fichier pom
`
decrivant la configuration du projet `
a maven. Dans ce projet, on trouve deux dossiers qui sont en fait deux projets.
Gr
ace `
a cela, plut
ot que de manipuler un projet core et un projet support comme cetait le cas pour le projet carte,
on ne manipule ici quun seul projet. On retrouve en revanche à linterieur deux sous projets. Un premier, plugin,
decrivant les objets metiers et un second, support, decrivant la configuration struts et spring qui sera importee
dans lapplication utilisant le composant. En parallèle du developpement du composant, jai egalement realise une
application de base se servant du composant pour verifier la bonne integration de celui-ci.
48
Annee 2007 - 2008
Hurault Guillaume
6.6.2
Rapport de stage
La partie diaporama
Comme nous lavons dit, cette partie definit ce quest un diaporama. Cest donc la base de la partie metier. Un
diaporama est lie `
a plusieurs notions. On trouve ainsi la notion slide ainsi que la notion source. Cette dernière
est lobjet qui est capable de recuperer les images de base des differents slides. Cest donc la source qui est capable
de construire les slides.
Voici le diagramme de classes de la partie diaporama :
Figure 44 Diagramme de classes de la partie diaporama
49
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Les apis
On voit sur cette partie les trois premières apis du composant. La première api SlideShow definit differentes
methodes :
start
previousSlide
nextSlide
hasPreviousSlide
hasNextSlide
getCurrentSlideNumber
getNumberOfSlides
Ces operations seront appelees par le player pour construire le prochain slide demande par lutilisateur. On peut
remarquer dans cette partie quil ny a pas de notions de slide courant. En effet, nous avons fait le choix de stocker
le slide courant dans la partie player comme celle-ci nest liee quà un seul utilisateur. De cette facon, on peut
imaginer que plus tard un objet slideshow puisse etre partage pour plusieurs utilisateurs. Cela naurait pas ete
possible si nous avions stocke un objet current slide dans cette partie. Cest pourquoi toutes les methodes daccès
aux slides prennent un objet slide en paramètre. Ce dernier represente lobjet current slide. Nous avons defini
des methodes pour savoir si le slide courant est le premier et le dernier pour permettre au player deffectuer des
operations specifiques lorsque la fin du diaporama est atteinte par exemple.
Nous pouvons voir sur ce diagramme que lapi de la source est la meme. Celle-ci netait pas la meme au debut de
la conception mais elle a ete repensee en cours de developpement pour une simple raison. En effet, nous prevoyons
davoir des sources dimages comme google image qui peuvent contenir des milliers de photos. Avant, la classe
diaporama appelait `
a linitialisation la source qui construisait tous les slides et la source netait plus appelee ensuite.
Cela signifie que si la source contenait des milliers dimages, des milliers dobjets etaient crees à linitialisation. Nous
avons donc modifie cela pour que ce soit la source qui definisse la facon dacquerir limage precedente ou limage
suivante ou linitialisation par exemple. De cette facon cest la source qui contient une liste de slides. Cest donc la
source qui definit combien de slides creer `
a linitialisation par exemple. De cette facon on peut avoir un comportement
different en fonction des sources, chose qui netait pas possible avant.
Lapi dun slide est pour linstant très simple. Les deux methodes sont celles qui permettent de recuperer lid du
slide et lurl de son image.
Les impl
ementations
Pour le moment, une implementation du slideshow et une implementation du slide ont ete realisees. Ce sont des
implementations de base qui ne presentent pas de traitements particuliers. En revanche, nous avons realise trois
implementations de la source. La première, de base, est celle o`
u la source a une liste durls. Une seconde a ete
realisee o`
u la source est instanciee avec un fichier xml. A linitialisation, la source parse ce fichier contenant une liste
durls et cree la liste de slides resultante. Enfin, une dernière implementation utilisant picasa a ete realisee. Pour
cela, jutilise les apis fournies par google pour telecharger les urls des images dun album dun utilisateur. Cette
source est donc instanciee avec un nom dutilisateur et un nom dalbum et à linitalisation, la source se connecte
sur le service, telecharge les urls des images de lalbum et cree la liste de slides correspondante.
Nous allons maintenant voir comment la partie player communique avec la partie diaporama. Il est à noter que pour
le moment il ny a aucune notion daffichage ou de defilement du diaporama. Ces deux dernières napparatront que
dans les parties suivantes.
50
Annee 2007 - 2008
Hurault Guillaume
6.6.3
Rapport de stage
La partie player
Cette partie sert donc `

a jouer le diaporama. Cest aussi elle qui maintient letat courant. On trouve donc dans
cette partie la notion de slide courant definit precedemment. On trouve egalement letat du player pour savoir sil
est stoppe, sil est en pause etc. Enfin, on trouve une notion de logique. Cest elle qui permet de savoir quel slide
construire en fonction dun evènement et dun etat.
Voici le diagramme de classes de la partie player :
Figure 45 Diagramme de classes de la partie player

Le point dentree de cette partie est linterface SlideShowPlayer. Celle-ci ne contient quune seule methode :
doPlayerEvent. Cest donc par cette methode que lon joue le diaporama. Celle-ci renvoie donc en fonction
dun evènement et de letat du player une commande permettant dafficher la page contenant la bonne image
correctement rendue `
a lutilisateur. Cette commande sera decrite ulterieurement.
51
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Limplementation du player que jai realisee contient donc plusieurs elements :
Un id
Le slideshow `
a jouer
Letat du player
Letat du slideshow (le slide courant)
Une logique du player
Une liste de SlideShow Views correspondant aux differentes vues et options disponibles (plein ecran, defilement
automatique etc.)
Une commande `
a renvoyer lors de larret du player
La construction de la commande permettant dafficher limage à lutilisateur se fait en plusieurs etapes. Les deux
phases generales sont :
Lappel `
a la logique pour savoir quel slide afficher
Lappel a
` la vue pour construire le rendu que lon va afficher à lutilisateur
Pour afficher le bon rendu, la vue a besoin de beaucoup dinformations. Ces informations sont passees `
a la vue
par un objet heritant de la classe commande. Cest ces informations que la partie logique doit construire. Cest
pourquoi la logique renvoie un objet commande. Ce dernier contient donc les informations comme le slide `
a afficher
par exemple et cest cet objet qui est donc passe à la vue pour afficher le rendu.
La logique doit donc en fonction dun etat et dun evènement effectuer le bon appel sur le slideshow pour recuperer
le bon slide `
a afficher. Lapi contient une seule methode execute qui renvoie la commande precedemment decrite.
Plut
ot que de faire de multiples if imbriques en fonction de letat du player et de levènement recu, jai utilise
lintrospection. Cette notion permet dappeler une methode en fonction de son nom. De cette facon, si letat du
player est Stopped et levènement recu est Start, alors la methode appelee sera onStartEventStoppedState.
On trouve par exemple dans la logique les methodes :
onStartEventStoppedState
onNextEventRunnedState
onPreviousEventRunnedState
onStopEventRunnedState
etc.
Ces differentes methodes ont un fonctionnement presque identique. Elles commencent donc par changer letat du
player si besoin en fonction de levènement recu, elles appellent ensuite le slideshow pour recuperer le nouveau slide.
Puis, pour finir elles construisent lobjet command contenant les informations necessaires à la vue.
Lappel `
a la logique est le premier appel fait par la methode doPlayerEvent du player. Une fois lobjet commande
recu, le player doit alors choisir la bonne vue à appeler. Nous avons choisi de stocker plusieurs vues pour que le
player soit capable dafficher le rendu pour chaque box. Cest pourquoi le player maintient une map associant `
a un
client (la box), la vue `
a appeler. Cest le developpeur souhaitant integrer le composant diaporama qui choisi quelle
vue il souhaite rendre disponible au player. En plus du client, la vue definie egalement le mode daffichage. On peut
trouver comme mode daffichage le mode plein ecran par exemple ou le mode composition (avec une image de fond).
Gr
ace `
a la requete http que nous passons au player, celui-ci est capable de definir quel est le client. Il peut donc
ainsi choisir la bonne vue `
a appeler. Une fois cette dernière recuperee, le player na donc plus quà appeler la vue
en lui passant les informations recues de la logique contenues dans lobjet commande. La vue va alors renvoyer au
player de quoi afficher la bonne page `
a lutilisateur. Le player renverra donc à lobjet quil la appele (nous verrons
plus tard que pour lapplication de test utilisant le composant, cest une action struts qui appelle le player) ce que
lui renvoie la vue.
52
Annee 2007 - 2008
Hurault Guillaume
6.6.4
Rapport de stage
La partie vue
La partie vue definit donc la configuration du diaporama. Cest donc elle qui va definir si le diaporama est `
a
jouer en plein ecran, sil est `
a defiler de facon automatique etc. On trouve donc parmi les options definies par la
vue :
Les differents modes daffichage
Les modes de defilement
Les modes de calcul
Chacune de ces configurations doit etre de plus declinee dans toutes les differentes box possibles. Comme nous
lavons vu, cest le player qui decide quelle vue appeler en fonction du client. Il nexiste pas pour le moment de
notions permettant de choisir la vue en fonction de la configuration demandee. Cest le developpeur qui declare au
moment de linstanciation du player sil souhaite avoir une vue plein ecran ou miniature etc.
Voici le diagramme de classes de la partie vue. On trouve egalement sur ce schema la partie commande.
Figure 46 Diagramme de classes de la partie vue
53
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Lapi
Linterface SlideShowView (la vue) contient donc une seule methode execute qui prend en paramètre une
commande et qui renvoie une commande. Dans les implementations que nous avons effectuees, le commande passee
en paramètre `
a la methode execute est une BasicBuildViewCommand. Cet objet contient toutes les informations
necessaires `
a le vue pour construire la prochaine page. La commande que renvoie la vue est une commande totalement
differente. Cette dernière est une UrlCommand. Cet objet contient lurl de laction struts à appeler comme nous
allons le voir.
Les impl
ementations
La classe abstraite BasicSlideShowView decrit le schema global de la methode execute. Le deroulement de la
methode execute est :
Instanciation du rendu
Creation de la commande resultat
Appel de lexecution du rendu
Ajout des attributs specifiques dans la requete
Nous allons maintenant voir le detail de ce que fait chaque implementation de la vue que jai realisee. La première,
FreeboxBasicSlideShowView, est une vue o`
u laffichage est en plein ecran, o`
u le defilement est manuel et o`
u le
mode de calcul est `
a la volee (cest `
a dire quon genère un seul rendu par appel à la vue contrairement au mode
precalcule o`
u on les genère tous dès le debut). La vue commence donc par creer le rendu du slide quelle recupère
dans la commande. Elle construit ensuite lUrlCommand resultat. Cette url pointe vers une action struts qui va
rediriger lutilisateur vers une jsp affichant le rendu. Elle va ensuite appeler le rendu pour que celui-ci mette lurl de
limage du nouveau slide dans la requete (on met en realite lurl de la servlet ainsi que lid du rendu que la servlet
doit afficher). Pour finir, cette vue va ajouter dans la requete des attributs comme lid de la navigation (qui definit
les touches de la telecommande que lon souhaite utiliser). On ajoute aussi à ce niveau, le numero du slide courant,
le nombre de slides en tout, etc. Ces informations seront recuperees et affichees dans la jsp.
La vue FreeboxBasicSlideShowViewWithAutoScrollingPrecalculated a presque le meme traitement. La difference
est que cette vue doit generer tout le rendu dès le debut de facon à accelerer le temps de chargement lors du
defilement du diaporama. Cest pourquoi, lors du premier appel à la vue, celle-ci va creer tous les rendus de tous
les slides du slideshow. La deuxième difference avec la première vue est que le defilement du diaporama doit etre
automatique. Pour cela, la commande que va renvoyer cette vue ne pointera pas sur la meme action struts que la
première vue. Cette nouvelle action redirigera donc lutilisateur vers une jsp differente de la première vue. Cest
dans cette jsp quon definit quau bout de dix secondes par exemple la page doit etre rechargee en appelant de
nouveau le player. Ladresse du rechargement est definie comme attribut de la requete en plus des attributs comme
lid de la navigation comme vu plus haut. De cette facon, au bout de dix secondes sur la page, elle va effectuer
une requete http sur lapplication qui va appeler le composant diaporama et qui va recuperer le nouveau rendu
et retourner sur la meme jsp mais limage aura change. Le temps de rechargement nest pas en realite fixe `
a dix
secondes mais est egalement fixe comme attribut dans la requete au niveau de la vue.
R
esum
e du r
ole de la vue
On comprend donc mieux `
a travers ces deux implementations le role de la vue. Elle est chargee de rediriger
lutilisateur vers la bonne page. Comme cette redirection ne passe pas forcement par une action struts nous passons
par une interface commande mais dans les implementations que nous avons realise, cette commande nest en fait que
lurl de laction struts `
a appeler. Pour resumer, le role du rendu est de mettre dans la requete les elements necessaires
a afficher limage du slide et le r
`
ole de la vue de mettre dans la requete les elements de la page correspondant au
type de la vue et de rediriger vers la bonne action qui elle meme redirigera vers la bonne jsp.
54
Annee 2007 - 2008
Hurault Guillaume
6.6.5
Rapport de stage
La partie rendu
Nous venons de voir que le r

ole du rendu etait de construire ce quil fallait pour que limage du slide soit
affichable sur la box. Pour cela, nous passons par la requete http. Le rendu met donc les attributs quil faut dans la
requete pour afficher limage du slide. La partie rendu est donc très dependante de la partie vue. En effet, le rendu
comme la vue depend du client car on affiche pas les memes images pour une Freebox comme pour une Neufbox.
Comme nous lavons vu, pour les Freebox, nous utilisons un fond mp2v alors que pour une Neufbox nous utilisons
une image normale. Le rendu depend aussi de la vue au niveau de la requete. En effet, il ne suffit pas de rajouter les
elements lies `
a limage dans la requete, il faut que la jsp, vers laquelle la requete se redirige, recupère ces elements
et les affiche. Comme cest la vue qui decide vers quelle action et donc vers quelle jsp se rediriger, le rendu est aussi
lie `
a la vue `
a ce niveau.
Voici le diagramme de classes de la partie rendu qui contient pour le moment une seule implementation (pour la
Freebox).
Figure 47 Diagramme de classes de la partie rendu

Lapi du rendu ne contient donc quune seule methode builView prenant en entree la requete et la reponse http.
Un rendu est forcement lie `
a un slide et cette methode met donc en attribut de la requete ce quil faut pour afficher
limage de ce slide.
Pour le moment, une seule implementation dediee à la Freebox a ete realisee. Cette implementation est utilisee
pour les deux vues car les deux vues utilisent un affichage en plein ecran et sur le meme client (la Freebox). Elle
a en attribut lobjet slide, lid du rendu et un FileManager. Ce dernier est capable de creer le fichier mp2v
correspondant `
a limage du slide (Il utilise pour cela le proxy du projet Mp2vEncoder). Lors de linstanciation de
lobjet rendu, on passe donc un objet slide en paramètre et on enregistre limage de ce slide en mp2v via le file
manager.
Limplementation de la methode buildViews est elle très simple. Elle ajoute comme attribut de la requete lurl de
la servlet en rajoutant comme paramètre lid du rendu. De cette facon la jsp finale va recuperer cet attribut et
va mettre comme source de limage du background de la page la valeur de cet attribut. De cette facon, lors de
linterpretation de la jsp, la servlet sera appelee et elle renverra le flux contenant le mp2v. Cest de cette manière
que le fond mp2v est affiche dans la page.
Cette servlet est instanciee avec comme attribut le file manager. Lorsquelle est appelee, elle recupère donc lid du
rendu en paramètre puis recupère le chemin du mp2v grace au file manager. En effet, le file manager maintient pour
lid dun rendu, le chemin du mp2v correspondant. Pour finir, la servlet recupère le flux de ce fichier et le renvoie
dans la reponse.
55
Annee 2007 - 2008
Hurault Guillaume
6.6.6
Rapport de stage
Les actions struts
Avant de voir le cheminement dune requete http permettant dafficher un slide, nous allons voir les differentes
actions struts que jai creee. Il faut comprendre que meme si pour lapplication de base utilisant le composant,
jutilise struts, nous ne serons pas obliges de passer par ce dernier dans le futur grace aux objets commande decrit
precedemment.
Voici les differentes actions que jai creee :
Figure 48 Diagramme de classes de la partie action
56
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Lorsque lutilisateur appuie par exemple sur le bouton suivant pour changer de slide, laction qui est appelee
est laction SlideShowPlayerAction. Cette action effectue plusieurs traitements :
Recuperer le player
Appel du player avec levènement (start ou next ou previous, etc)
Construction de la reponse gr
ace `
a la commande resultant du player
Laction est instanciee via spring avec un manager de player. Ce manager maintient pour un id un player. Lorsque
laction est appelee, elle doit letre avec comme paramètre à la requete lid du player que lon souhaite jouer (nous
avons vu precedemment quil ny avait pas un player unique pour tous les utilisateurs mais quun player etait cree
a chaque lancement de lapplication). Le premier traitement queffectue laction est donc de recuperer ce paramètre
`
et de recuperer le player associe gr
ace au manager.
Lorsque laction du player est appelee, elle doit letre avec un second paramètre en plus de lid du player. Ce second
paramètre est levènement que souhaite effectuer lutilisateur. Cet evènement peut etre par exemple next. Le
second traitement de laction est donc la recuperation de ce paramètre.
Une fois le player et levènement recuperes, laction peut alors appeler la methode doPlayerEvent de ce player
en lui passant comme attribut levènement. Elle recoit en retour un objet Command. Comme nous lavons vu, cet
objet est de type UrlCommande. Ce dernier contient lurl de la prochaine action à appeler. Le dernier traitement
queffectue laction est donc de recuperer cette url, de construire lActionForward associe et de le retourner. De
cette facon, struts va appeler laction decrite dans lobjet UrlCommand.
Une nouvelle action dependant de la vue est alors appelee. Pour le moment, il nexiste que deux actions comme il
nexiste que deux vues. Ces actions ne font que rediriger lutilisateur vers la bonne jsp associee (Il existe une jsp
par action liee `
a la vue). Elles construisent egalement la navigation de la page.
Enfin, la jsp appelee recupère les elements mis dans la requete par le composant player et affiche la page.
57
Annee 2007 - 2008
Hurault Guillaume
6.6.7
Rapport de stage
Cheminement dune requ

ete
Maintenant que nous avons vu comment les objets metiers interagissaient entre eux et comment les actions struts
manipulaient les objets metiers, nous allons voir le cheminement globale dune requete http. Nous allons partir du
principe que lutilisateur se trouve dej`
a sur un slide (donc le diaporama est instancie et lance) et quil clique sur
suivant.
Voici le schema du cheminement de la requete au niveau de laction SlideShowPlayerAction :
Figure 49 Cheminement de la requete au niveau de laction du player

Sur ce schema, on peut voir les traitements qui sont faits au niveau de la SlideShowPlayerAction. On ne
voit pas en revanche le detail des differents traitements effectues au niveau du composant (Voir le schema daprès
pour cela). Ces traitements sont resumes par un appel à la methode doPlayerEvent du SlideShowPlayer. Cette
methode renvoie une commande. Celle-ci est une UrlCommande. Laction du player recupère donc lurl associee et
lappelle.
58
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Voici le schema du cheminement de la requete au niveau du composant slideshow :
Figure 50 Cheminement de la requete au niveau du composant

Sur ce schema on peut voir le cheminement de lappel au niveau du composant diaporama. Ce cheminement est
celui explique durant les differentes parties sur le composant. Le player appelle la logique puis la vue qui lui renvoie
une commande.
Enfin, voici le cheminement de la requete au niveau de la deuxième action appelee :
Figure 51 Cheminement de la requete au niveau de la seconde action

Ce schema presente ce que fait laction du player à partir du moment o`
u elle a recu la commande provenant de la
methode doPlayerEvent du player. Elle recupère donc lurl de la commande et appelle laction associee. Cette
dernière (FreeboxBasicSlideShowAction sur le schema) cree la navigation correspondante et redirige lutilisateur
vers la jsp associee `
a laction. Pour finir, cette jsp recupère les elements de la requete et affiche la page.
59
Annee 2007 - 2008
Hurault Guillaume
6.6.8
Rapport de stage
Application utilisant le composant
Pour finir, voici quelques screenshots dune application de test utilisant le composant :
Figure 52 Application utilisant le composant

On peut voir sur cette capture que le diaporama est un diaporama basique o`
u limage est affichee en plein
ecran et que le defilement est manuel. On voit ici que les differents paramètres donnes dans la requete par la vue
apparaissent ici comme par exemple le numero du slide courant ou le nombre total de slides.
Figure 53 Application utilisant le composant

On voit ici un deuxième exemple de vue. Celle-ci est en mode defilement automatique. Cest pour cela quon
voit sur la copie decran la possibilite de mettre en pause le defilement.
60
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Conclusion
Ce stage a ete très positif sur plusieurs points : dabord dun point de vue technique. Jai en effet pu decouvrir
un bon nombre de technologies J2EE comme spring ou struts. Nous avons, à la faculte, beaucoup travaille avec
le langage Java mais nous avions très peu etudie les differents frameworks J2EE. Nous avons donc eu un temps
dadaptation au debut de nos stages pour decouvrir ces technologies.
Les technologies utilisees et lenvironnement dans lequel jai evolue ont aussi ete très positifs dun point de vue
personnel. Nous avons en effet evolue dans un contexte bien particulier. La societe etant très recente, nous avons
decouvert petit `
a petit levolution dune petite structure. De plus, dun point de vue plus technique, jai pu decouvrir
ce dans quoi je souhaite evoluer dans un futur proche. Ayant très peu evolue dans le milieu du web à la faculte, je
connaissais donc très mal ce qui pouvait se faire dans ce domaine en entreprise.
Le fait devoluer dans un domaine touchant au web et à la television a ete pour moi très motivant. En effet, le fait
davoir un rendu très visuel et concret `
a son travail f
ut très entranant. De plus, la societe a beaucoup fait parler
delle sur les differents sites dactualite en debut de stage. Cela etait une source de motivation supplementaire.
Tout ceci ma donc permis de savoir très precisement ce dans quoi je souhaiterais evoluer prochainement. En effet,
pour les quelques annees `
a suivre, jaimerais travailler dans une petite structure liee au monde du web et utiliser
les technologies Java/J2EE.
Dun point de vue gestion de projet, jai pu voir les difficultes liees au lancement dune societe. En effet, jai durant
mon stage effectue plusieurs phases de recherche avant la phase danalyse afin de voir les possibilites offertes par les
differents supports. Comme nous avons pu le voir pour le projet initial de mon stage (les micro-paiements), cette
phase de recherche peut aller jusqu`
a entraner le report ou lannulation du projet. En effet, le developpement sur les
differentes box est très specifique et peu connu. Cest pourquoi le metier de WizTiVi nest pas que du developpement
mais plut
ot de la recherche et developpement. Enfin, etre une petite structure est une contrainte dun point de vue
organisation. En effet, nos matres de stage avaient beaucoup à faire du fait du nombre important de stagiaire.
Enfin, que ce soit dun point de vue technique ou dun point de vue gestion de projet, ce stage f
ut loccasion de
mettre en pratique ce que jai appris depuis cinq ans à la faculte et plus precisement durant cette annee de master
Alma.
Pour conclure, ce stage f
ut très positif puisquil ma permis de decouvrir le monde de lentreprise dans le domaine
informatique et de nouvelles technologies que je souhaite continuer à utiliser.
61
Annee 2007 - 2008
Hurault Guillaume
Rapport de stage
Bibliographie
Wikipedia : http ://fr.wikipedia.org

Proservia : http ://www.proservia.fr/
WizTiVi : http ://www.wiztivi.com/fr
Labo-sun : http ://www.labo-sun.com/
Developpez : http ://www.developpez.com/
Freebox html : http ://wiki.freeplayer.org/
Les illustrations de lhistorique de WizTiVi proviennent du diaporama de la presentation de WizTiVi faite `

a la
faculte.
62
Annee 2007 - 2008

Hurault Wiztivi

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Hurault Wiztivi

Încărcat de

Drepturi de autor:

Formate disponibile

Hurault Guillaume

Compte rendu de stage

Realisation dapplications liees

Annee 2007 - 2008

Annee 2007 - 2008

Compte rendu de stage

Table des mati`

Annee 2007 - 2008

6.3.3 Le projet coeur . . . . . . . . . . . . . . . . . . . . . . . . . . .

Annee 2007 - 2008

Annee 2007 - 2008

Figure 2 Evolution des effectifs

Annee 2007 - 2008

Figure 3 Les agences du groupe Proservia

Figure 4 Pole etude et developpement

Annee 2007 - 2008

Figure 5 Pole Conseil / Projet

Figure 6 Pole Teleservice

Annee 2007 - 2008

Figure 7 Pole Infogerance

Annee 2007 - 2008

Figure 8 Architecture du Freeplayer

Annee 2007 - 2008

Figure 9 Architecture de Home Jukebox

Annee 2007 - 2008

Home JukeBox 0.7 :

Figure 10 Architecture de Home Jukebox 0.7

Figure 11 Architecture de WizTiVi

Annee 2007 - 2008

Les acteurs du march

Figure 12 WizTiVi au coeur des acteurs de la television par ADSL

Annee 2007 - 2008

Voici quelques exemples de telesites realises par la societe WizTiVi :

Figure 13 Transformation dun site en telesite

Figure 14 Le telesite de leuro

Annee 2007 - 2008

Figure 15 Exemple de television interactive : le tour de France

Figure 16 Exemple de television interactive : nrj

Annee 2007 - 2008

Les technologies utilis

compile : Pour compiler le code source et le generer dans le repertoire target

Annee 2007 - 2008

Figure 17 Cycle de vie dune requete http

Le client envoie une requete `

Annee 2007 - 2008

Voyons maintenant en detail chacun des trois composants :

Decider quelle action executer lors de la reception dune requete

Annee 2007 - 2008

Annee 2007 - 2008

La navigation dun telesite `

Figure 18 Barre de navigation

Annee 2007 - 2008

Les librairies de tags

Le sdk permet dassocier `

Figure 19 Exemple de listPage

Annee 2007 - 2008

de se deplacer sur la carte

Ce projet devait comporter trois parties :

Annee 2007 - 2008

Annee 2007 - 2008

Voici donc le planning que jai suivi durant mon stage.

Figure 20 Planning du mois davril et mai

Figure 21 Planning du mois de juin et juillet