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

1 Remerciements

Je tiens dabord a` remercier lequipe des ressources humaines de la societe Proservia ainsi que Jean-Noel Gadreauqui mont permis dintegrer la societe WizTiVi.

Je remercie tout particulie`rement lequipe des anciens du master Alma (Manuel, Morgan, Vincent) ainsi que TudorTeusan qui mont beaucoup appris durant ces cinq mois de stage.

Enfin, je tiens a` remercier mes differents autres colle`ges (Guillaume, Julien, Manuel, Mathieu) ainsi que tous lesautres stagiaires qui ont participe a` la bonne ambiance qui a regne durant tout mon stage.


Hurault Guillaume Compte rendu de stage

Table des matie`res

1 Remerciements 2

2 Introduction 5

3 Presentation 63.1 Proservia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63.2 WizTiVi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.2.1 Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103.3 Les telesites et la television interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.3.1 Le principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.3.2 Les differences entre box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.3.3 Les acteurs du marche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.3.4 Exemple de telesites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.3.5 Exemple de television interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4 Environnement technique 164.1 Les technologies utilisees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.1.1 Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.1.2 Maven . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.1.3 Struts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.1.4 Spring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.1.5 Subversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194.1.6 Tiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194.1.7 Les plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.2 Le SDK WizTiVi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204.2.1 Gestion de la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204.2.2 Les librairies de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.2.3 Les the`mes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.2.4 Les pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

5 Cadre du stage 225.1 Sujet de stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

5.1.1 Developpement dun composant carte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225.1.2 Realisation dune application dencodage de fichiers video . . . . . . . . . . . . . . . . . . . . 235.1.3 Realisation de la presentation de lapplication dailymotion . . . . . . . . . . . . . . . . . . . . 235.1.4 Realisation dun composant diaporama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5.2 Gestion de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235.2.1 Jira . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235.2.2 Deroulement dun projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235.2.3 Deroulement du stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

6 Travail realise 256.1 Adaptation de lapplication Tutoriel de WizTiVi . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256.2 Recherche sur les moyens de micro-paiements pour la television . . . . . . . . . . . . . . . . . . . . . 26

6.2.1 Free-HA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266.2.2 Internet plus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266.2.3 Paypal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266.2.4 Bilan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

6.3 Integration dun composant carte au sdk WizTiVi . . . . . . . . . . . . . . . . . . . . . . . . . . . 276.3.1 Motivations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276.3.2 Principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28



6.3.3 Le projet coeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296.3.4 Le projet support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336.3.5 Le projet tutoriel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346.3.6 Integration du composant dans un telesite en developpement . . . . . . . . . . . . . . . . . . 37

6.4 Developpement dune application de conversion de videos . . . . . . . . . . . . . . . . . . . . . . . . 396.4.1 Motivations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396.4.2 Realisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

6.5 Developpement de la couche presentation de lapplication Dailymotion . . . . . . . . . . . . . . . . . 426.5.1 Contraintes de la Thomson box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426.5.2 Realisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

6.6 Integration dun composant diaporama au sdk WizTiVi . . . . . . . . . . . . . . . . . . . . . . . . 476.6.1 Analyse globale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476.6.2 La partie diaporama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496.6.3 La partie player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516.6.4 La partie vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536.6.5 La partie rendu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556.6.6 Les actions struts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566.6.7 Cheminement dune requete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586.6.8 Application utilisant le composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

7 Conclusion 61

8 Bibliographie 62



2 Introduction

Dans le cadre du master Alma, jai effectue mon stage de fin detudes au sein de la societe WizTiVi. Ce stagedevait avoir pour but de concretiser et de mettre en pratique les connaissances et competences que nous avonsapprises lors de notre master.

Le projet WizTiVi est simple : Associer Internet a` 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 ou` lonpeut naviguer grace a` sa telecommande. Le second permet de rajouter de linteractivite sur une chane de televisionpour par exemple obtenir des informations sur le programme en cours.

Le premie`re rencontre avec la societe a eu lieu lors du salon du stage au parc des expositions de la beaujoire ennovembre 2007. Proservia (dont WizTiVi est une filiale) exposait le projet de la societe que sont les telesites et latelevision interactive.

Je souhaitais pour mon stage me tourner vers une societe developpant des applications Java/J2ee liees au web. Jaidonc de`s le debut ete attire par le projet de la societe.

Par la suite, apre`s nos diverses rencontres, linteret que je portais au projet ainsi que la tre`s bonne ambiance ausein de la societe mont convaincu deffectuer mon stage chez WizTiVi. Trois autres etudiants de la formation ontainsi ete seduits pour les memes raisons. Nous etions de plus en contact avec danciens etudiants du master Almaqui travaillaient chez WizTiVi.

Jai donc developpe pendant ce stage plusieurs applications liees a` la television interactive ainsi quaux telesitescomme nous le verrons par la suite.

Dans ce rapport, nous nous interesserons dabord a` la presentation des deux societes que sont Proservia et WizTiViainsi qua` la presentation des telesites et de la television interactive. Nous continuerons par un descriptif destechnologies utilisees durant le stage avant de presenter le travail que jai realise.

Universite de Nantes 5 Annee 2007 - 2008


3 Presentation

3.1 Proservia

Proservia est une Societe de Services en Ingenierie Informatique (SSII) creee en 1994 au chiffre daffaires de 36,8Me en 2007. Son fondateur, Thierry Congard est un autodidacte de 43 ans qui a, a` force de volonte, acquis delexperience 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 janvier2007, la societe comptait 533 collaborateurs et en compte aujourdhui pre`s de 750. Elle est ainsi dans le top 100 duclassement des entreprises les plus performantes en France, depuis 2002.

Figure 2 Evolution des effectifs



La societe est presente dans 14 grandes villes francaises dont Paris, Lille, Lyon, Toulouse, Bordeaux et sa maisonme`re est basee a` Nantes.

Figure 3 Les agences du groupe Proservia

La societe posse`de 5 poles de competences pour couvrir tous les besoins en matie`re dinformatique.

Le pole Etude et developpement :

Recherche et developpement sur les technologies MPEG 4, accompagnement pour des choix strategiques, concep-tion et realisation dapplications et maintien en conditions operationnelles des logiciels.

Figure 4 Pole etude et developpement



Le pole Conseil / Projet :

Analyse des besoins (Audits), expertise, assistance a` matrise doeuvre et douvrage, mise en oeuvre de solutionspersonnalisees (integration, deploiement et migration).

Figure 5 Pole Conseil / Projet

Le pole Teleservice :

Assurer la continuite de service des syste`mes informatiques (tele exploitation), aide a` distance, organisation desressources, installation de nouveaux outils dans les environnements de production...

Figure 6 Pole Teleservice



Le pole Infogerance :

Administration, gestion des configurations, homologation, mise en production...

Figure 7 Pole Infogerance

Le pole Formation :

Des formateurs experts ainsi que des outils concrets de mesure et de suivi.

Grace a` cette etendue de services, le groupe est aujourdhui au contact de nombreux clients comme la SocieteGenerale, Le Credit Mutuel, La Poste ou encore Gaz de France, Air France etc. Une des concretisations de sacroissance est son introduction en bourse sur le marche Alternext Euronext Paris en 2006.



3.2 WizTiVi

WizTiVi est donc une societe nantaise fondee en 2007 par Thierry Congard et Jean-Noel Gadreau. Elle estla filiale de Proservia dediee a` la television interactive. Elle tire son nom de langlais wizard magicien et de tvtelevision 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 a` la telecommande des box.Ainsi, lutilisateur peut en branchant une box sur sa television naviguer sur les sites adaptes grace a` la telecommandecomme sil naviguait sur son ordinateur.

Le second objectif de WizTiVi est de rajouter du contenu interactif aux chanes de television. De cette facon, unutilisateur ne regarde plus seulement une chane, il peut en plus toujours grace a` sa telecommande obtenir ducontenu 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 a` la fin delannee. Le 18 decembre 2007, lOseo recompense le caracte`re innovant de la technologie developpee par WizTiViet 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, depuisla troisie`me version de cette box, il est possible de connecter directement la box a` un televiseur. Grace a` un logicielde Free, le Freeplayer (sorti en aout 2005) il est possible de diffuser sur une television le contenu de son ordinateuren passant par la Freebox.

Voici un schema de larchitecture du Freeplayer :

Figure 8 Architecture du Freeplayer



Home JukeBox :

Jean-Noel Gadreau a sur son temps personnel developpe un mod au Freeplayer (Home Jukebox sorti endecembre 2005). Celui-ci ajoute un certain nombre de fonctionnalites non disponibles dans le Freeplayer et enameliore linterface.

Lidee etait : Puisque lordinateur est relie a` internet pourquoi se contenter de diffuser seulement le contenu de sonordinateur sur sa tele alors quil est egalement possible de diffuser des contenus pris sur internet.

Grace a` ce mod, lutilisateur peut donc, en reliant la Freebox a` son televiseur et a` un ordinateur, naviguer plusaisement sur son ordinateur depuis sa television et peut de plus regarder des chanes de web-tele ou ecouter desstations de web-radio.

Voici un schema de larchitecture de home jukebox :

Figure 9 Architecture de Home Jukebox



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 obligatoirede 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 a` la box pour arriver a` cettearchitecture :

Figure 11 Architecture de WizTiVi

Jean-Noel Gadreau a donc dabord prepare son projet avant de le presenter a` Thierry Congard, PDG de la societeProservia ou` il travaillait, pour ensuite fonder WizTiVi.



3.3 Les telesites et la television interactive

3.3.1 Le principe

Bien que de rendu different, les telesites et la television interactive fonctionnent sur un meme principe. Leclient (la box) emet une requete vers un serveur hebergeant une application web. Lapplication effectue alors sontraitement et renvoie du code html a` la box. Celle-ci interpre`te elle-meme ce code avec son navigateur et affiche leflux 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 labox. 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 differences entre box

Les box posse`dent plusieurs points communs mais ont aussi beaucoup de differences. En effet, certaines boxpeuvent utiliser du javascript, dautres pas. Certaines acceptent le css, on peut alors faire la mise en page enutilisant 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 marche

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 lesfournisseurs dacce`s a` internet. Ces acteurs peuvent etre resumes par ce schema :

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



3.3.4 Exemple de telesites

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 a` lergonomiede la television. Lutilisateur peut donc grace a` la telecommande de sa box naviguer sur le telesite comme silnaviguait sur le site avec sa souris.

Le telesite de leuro :

Figure 14 Le telesite de leuro



3.3.5 Exemple de television interactive

La television interactive nest donc quun telesite avec comme fond video la chane que lon est entrain deregarder.

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 ilsouhaite avoir des informations sur letape qui est entrain de se derouler. Plutot que daller sur internet, il peutalors en appuyant sur un bouton de la telecommande de la box acceder au telesite lie a` la chane du tour deFrance. Il a alors, tout en gardant la video dans un coin de la tele, acce`s a` 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 lavideo avec a` linterieur des informations sur les clips que lon est entrain de visionner.



4 Environnement technique

Nous allons maintenant voir plus precisement le contexte dans lequel jai evolue pendant ce stage. Nous verronsdabord une presentation des technologies que nous avons utilisees pendant ce stage. Nous avons en effet decouvertplusieurs frameworks J2EE que nous ne connaissions pas. Comme nous le verrons dans la partie gestion de projet,jai avec mes colle`gues stagiaires passe deux semaines a` 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 du apprendre a`nous en servir.

4.1 Les technologies utilisees

4.1.1 Eclipse

Eclipse est un environnement de developpement integre libre dont toute larchitecture est developpee autour dela notion de plugin. Tous les projets menes pendant ce stage ont ete developpes avec cet IDE. Nous avions la chancede bien connatre cet environnement puisque cela fait maintenant deux ans que nous lutilisons a` la faculte.

Lequipe WizTiVi utilise plusieurs plugins declipse que nous ne connaissions pas. Plusieurs dentre eux comme leplugin WTP sont lies au fait que la societe developpe des projets orientes web. Dautres permettent comme nous leverrons plus tard de faire de la couverture de code pour par exemple verifier que le developpeur respecte bien lesconventions de nommage.

4.1.2 Maven

Maven est un outil logiciel libre de la fondation Apache utilise pour la gestion et lautomatisation de developpementde logiciels Java. Cest un outil extremement puissant et interessant qui peut etre compare au syste`me Make sousunix ou a` loutil Ant.

Un des elements cles de maven est la structuration des projets quil impose. Il en decoule une uniformite qui rendplus aisee la comprehension des projets pour les developpeurs. En effet, quelquun connaissant maven et qui arrivesur un projet en cours de developpement peut tre`s facilement repere ou` se situent les packages java, ou` sont lesressources, les tests, la configuration, les pages web etc.

Maven impose donc une arborescence bien particulie`re des projets avec dans le dossier source un fichier de configu-ration connu sous le nom de Project Object Model (POM) decrivant le projet. On retrouve dans ce meme dossierun sous dossier source et un target. Ainsi chaque element dun projet se retrouve dans un dossier specifique et ilen est de meme pour tous les projets construits avec maven. On comprend donc bien la standardisation que loutilapporte.

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 gene`re dans le packaging prevu dans le fichier pom (war, jar etc.) site : Cree automatiquement un site web entie`rement dedie au projet.

Un autre point fort de maven est la gestion des dependances du projet. En effet, un projet utilise generalementplusieurs dependances specifiques comme par exemple Junit pour les tests, Spring, Struts etc. Il faut alors telechargerla dependance, linstaller dans eclipse etc. Avec maven la gestion des dependances est extremement simplifiee. Ilsuffit 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 directementdans les dependances du projet.



Maven a de plus une tre`s bonne gestion des depots pour ne pas avoir a` retelecharger chaque dependance a` chaquebuild de projet. Il existe en effet un depot central ouvert ou` lon retrouve toutes les dependances connues aumonde. A linterieur dune entreprise, il peut aussi exister un depot global a` la societe. Il permet de regrouper lesdependances les plus utilisees par lentreprise. Enfin, sur la machine de chaque developpeur, il existe un depot localpermettant daccelerer le processus de build.

Maven posse`de bien sur son plugin eclipse pour par exemple generer le .project automatiquement etc. La societea 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 leplus populaire des frameworks pour le developpement dapplications web avec Java. Struts met en oeuvre le mode`leMVC 2. Il permet donc de voir les applications complexes comme une suite de composants de base : Vues, Actionset Mode`les.

Avant de presenter les trois composants du mode`le MVC, nous allons voir le cheminement dune requete Http dansstruts pour mieux comprendre la relation entre ce mode`le et struts.

Figure 17 Cycle de vie dune requete http

1. Le client envoie une requete a` lapplication 2. Le controleur la recoit. Un moteur de re`gles decide quelle action executer 3. Les composants mode`les agissent sur le stockage de donnees persistant 4. Grace aux donnees du mode`le, le controleur determine la vue a` afficher 5. Le composant vue gene`re la reponse puis la renvoie au client



Voyons maintenant en detail chacun des trois composants :

Le composant Controleur est le coeur du syste`me. Comme son nom lindique cest lui qui se charge de traitertoutes 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 controleur est implemente en deux parties : Un fichier xml pour la configuration et des classes daction. Lesactions se chargent donc de beaucoup de choses. Ce sont par exemple elles qui coordonnent lacce`s au stockagepersistant ou qui mettent en oeuvre la logique metier.

Un composant Mode`le represente generalement un objet metier. Il peut par exemple representer un utilisateurdans un syste`me de gestion connexion deconnexion dun forum. Il fournit donc des methodes permettant daccederaux informations liees a` lobjet. Les composants mode`les doivent etre construits de facon a` masquer les detailsdimplementation de lacce`s a` linformation (utilisation dinterface).

Le composant Vue se concentre sur une seule chose : La creation de la couche presentation que voit lutilisateur. Cecomposant ne doit donc en theorie ne contenir aucune information sur la logique metier de lapplication. Dans le casde struts, les composants vues sont des JSP. Ces fichiers gene`rent le html qui est envoye au client. De nombreusestaglibs 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 principale-ment sur lintegration de trois concepts cles : Linversion de controle, la programmation orientee aspect et la couchedabstraction. Nous verrons ici la partie inversion de controle (IOC) ou injection de dependances que WizTiViutilise.

Dans le mode`le objet, une des premie`res proprietes est que les objets peuvent collaborer entre eux. Un objet peutdonc connatre un autre objet. Si un objet A a besoin dun objet B il doit le connatre. Il y a donc une dependanceentre 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. Lutilisationdune factory permet dutiliser le concept des interfaces. Cela permet de manipuler un objet sans se soucier de laclasse reelle de lobjet manipule si lon connat linterface quil implemente.

Spring et particulie`rement son mecanisme dinjection de dependances utilise dans le cadre de WizTiVi offre unnouveau moyen dinitialiser les dependances entre classes. Le principe est simple. Au lieu dutiliser une factory quicontient la re`gle dinstanciation, spring apporte une factory generique totalement parametrable a` laide dun fichierde 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 dunobjet dinterface B, lobjet A declare un objet dinterface B dans ses attributs avec un setter et getter associe et cesttout. Il declare ensuite dans le fichier xml de quelle implementation de B lobjet A a besoin et lors de linstanciationde A lobjet B sera cree et mis dans les attributs de A.



4.1.5 Subversion

La societe utilise le logiciel subversion (svn) pour la gestion des versions des projets. Cest un syste`me distribuesous licence Apache et BSD et base sur les concepts de CVS que nous avons utilise a` la faculte. Le premier principepartage par les deux logiciels est le depot centralise et unique pour sauvegarder les projets. Lutilisation de ce logicielse fait sous eclipse via le plugin Subclipse. Il na pas ete tre`s difficile de sy adapter car il est tre`s proche dutilisationde cvs.

4.1.6 Tiles

Le framework Tiles fournit un mecanisme de template qui permet detablir une structure commune pour plusieurspages web. Il permet donc de batir le squelette dun document. Une fois ce squelette bati, on peut lutiliser pourcreer 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 delinterface. Celle-ci permet de definir les differentes regions de linterface. Pour un site web, on definit donc parexemple ou` se situe le menu des pages ou` se trouve le contenu etc.

Avec tiles on commence donc par definir les squelettes (ou layout). Cela consiste donc a` batir les regions des pagesutilisant le layout et on precise par un code particulier le ou les endroits qui seront redefinis pour rajouter ducontenu. On definit ensuite via un fichier xml les differents layouts disponibles. On precise donc ou` se trouvent leslayouts, on leur associe un id et on peut aussi definir un contenu par defaut des parties a` redefinir. Il existe aussiun syste`me de fragments qui lui ne fait que recopier du code. Ce syste`me evite de faire de multiples copier coller.

Enfin, une fois les layouts et le fichier de configuration rempli, on peut alors commencer a` creer des pages. Onprecise donc pour chaque page quel layout on souhaite utiliser et on redefinit ensuite les parties de contenus dulayout. Pour un site web classique, on peut donc par exemple definir dans le layout ou` se trouve le menu de la pageet ou` se trouve le contenu. Puis, dans toutes les pages du site, dire que lon utilise ce layout, dire que le menu utilisetel fragment et se contenter de rentrer uniquement le contenu des pages sans avoir a` reecrire le squelette du sitedans chaque page.

4.1.7 Les plugins

WizTiVi utilise plusieurs outils possedant un plugin eclipse ou maven comme nous allons brie`vement le voir ici.

Un des premiers plugin utilise est Checkstyle. Ce plugin permet de verifier que le developpeur respecte bien lesnormes de codage. On assure ainsi une certaine clarte et homogeneite du code produit par divers developpeurs. Ilpermet 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 permetnotamment de reperer le code duplique dans un projet ou le code inutile par exemple. Il permet aussi de verifier lesnoms de variables trop ambigus, trop longs etc.

Le plugin Corbertura permet de calculer le pourcentage du code couvert par des tests unitaires. Il permet doncde 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.



4.2 Le SDK WizTiVi

Nous avons vu quil existe de nombreuses differences entre les navigateurs des differentes box. Celles-ci obligentdonc 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 a` la telecommande, de gerer lescontenus 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 lienentre la tele et lutilisateur. Les telesites sont bases sur le confort de surfer sur internet avec sa tele. Il faut doncque 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 matie`re de navigation. Pourcela, le sdk apporte un certain confort grace aux concepts. En effet, un concept quelque soit la box sera toujours lememe. On definit donc par exemple un concept homePage. Celui-ci est mappe dans un fichier xml a` un boutonde la telecommande et on travaille dans lapplication uniquement avec le concept. On a donc plus a` soccuper desdifferences 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 latelecommande une action soit lancee. On peut aussi le relier a` un bouton dans la barre de navigation :

Figure 18 Barre de navigation

On voit ici quil y a trois boutons. Ils sont donc relies a` trois concepts au niveau de lapplication.



4.2.2 Les librairies de tags

Afin de simplifier le developpement de la couche presentation, le sdk fourni de nombreuses taglibs. Celle-cipermettent par exemple de modifier le fond de la page, dinserer des elements multimedias, etc. Chaque box posse`deegalement sa propre librairie de tags permettant de gerer les elements graphiques specifiques a` la box comme lesboutons, les tableaux, etc.

4.2.3 Les the`mes

Les the`mes permettent de centraliser differentes definitions comme les couleurs ou les fonds par exemple. Ilspermettent 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 a` chaque jsp un objet page. Cet objet contientun certain nombre dinformations destinees a` la presentation. De cette facon on peut afficher simplement le fondde la page, les boutons de la navigation etc. En effet, il suffit juste de recuperer lobjet page associe a` la jsp et derecuperer 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 egalementun type listPage pour les pages presentant une liste dinformations. Par exemple une liste de videos, dutilisateursetc. 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 esttre`s simple. On definit juste dans laction la page comme etant une listPage a` laquelle on lui passe les objets. Ladernie`re chose a` faire est de specifier dans laction lid du the`me (vu ci-dessus) qui va traiter la page de presentation.



5 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 surdes services de micro-paiements via la television. Notre travail devait donc permettre lachat de produits en lignedepuis 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 a` lutilisationdes box.

Mon nouveau sujet etait donc la realisation dapplications liees a` la television interactive. Lobjectif etait plusprecisement 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 permettrede fournir un syste`me de carte aux telesites et lautre un syste`me de diaporama. Entre ces deux projets, jai travaillesur deux autres projets plus petits mais qui mont permis daborder dautres phases du developpement des telesites.

5.1.1 Developpement dun composant carte

Ce composant devait donc permettre lutilisation dun syste`me de carte dans un telesite. Il devait repondre a`plusieurs besoins :

Possibilite de se deplacer sur la carte Possibilite de selectionner une region Possibilite de zoomer et dezoomer Possibilite 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 a` un premier telesite de recherche doffresdemploi a ete developpee.



5.1.2 Realisation dune application dencodage de fichiers video

Le deuxie`me projet que jai realise etait une petite application dencodage de fichier video. Celle-ci devait per-mettre a` un utilisateur duploader une image sur un serveur et lapplication lui renvoyait le fichier video correctementencode.

Lencodage de fichier video est une partie importante car la Freebox se sert de ces fichiers comme fond aux differentespages web. Jai donc realise une partie coeur chargee dencoder ces fichiers et une partie application web pour lenvoide fichiers sur ce serveur.

5.1.3 Realisation de la presentation de lapplication dailymotion

Mon deuxie`me projet avant la realisation de mon second composant a ete de realiser la presentation de lappli-cation dailymotion pour une box differente de celle de lorigine. Dailymotion est en effet disponible sur Neufboxdepuis un certain temps deja` 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. Cedeveloppement a ete interessant car je navais pas encore enormement utilise cette technologie.

5.1.4 Realisation dun composant diaporama

Ce dernier projet est aussi le plus technique du fait de lutilisation des box. Ce composant doit permettre auxdifferents 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 Gestion de projet

5.2.1 Jira

Jira est loutil que lequipe a choisi dutiliser pour gerer les differentes taches et projets des developpeurs. Cestun 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 tacheest assignee a` un ou plusieurs developpeurs. Lorsquune tache nous est assignee, nous devons estime le temps quenous pensons mettre pour la realiser. Cela nous permet de nous entraner a` lestimation des charges qui est unexercice delicat. Cette gestion du temps permet a` nos encadrants et au chef de projet de suivre lavancement de nosprojets.

5.2.2 Deroulement dun projet

La plupart des projets auxquels jai participe suivait un developpement traditionnel. En effet, je commencais parune phase danalyse suivie du developpement. Comme la societe a aussi un metier de recherche, jai pour certainsprojets, notamment ceux lies a` lutilisation des codecs video, precede ma phase danalyse dune phase de recherche.Cette dernie`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. Nousrentrions donc regulie`rement le temps que nous passions sur telle ou telle tache. De plus, nous avions une reunionavec notre encadrant toutes les semaines. Cette reunion devait permettre de faire un point sur ce qui avait ete faitdepuis la dernie`re reunion et devait permettre de programmer le travail a` faire pour la semaine a` venir.



5.2.3 Deroulement 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 daout



6 Travail realise

6.1 Adaptation de lapplication Tutoriel de WizTiVi

Comme nous pouvons le voir sur le planning, la deuxie`me semaine du stage a en partie ete consacree a` lappren-tissage 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 grace a` ces etapes a` :

Utiliser les taglibs specifiques au sdk Utiliser les the`mes Utiliser la navigation etc.

Chaque etape montre donc lutilisation dune fonctionnalite du sdk. En regardant le code de la page, nouspouvions donc apprendre a` nous en servir.

Lapplication tutoriel netait disponible que pour une seule box. Le premier travail qui nous a ete confie a` moiet a` mes colle`gues stagiaires a donc ete de migrer cette application pour une autre box. Nous avons donc vu defacon minimaliste la realisation dun telesite. Nous avons donc grace a` ce premier telesite appris a` creer un nouveauprojet utilisant le sdk, a` se servir des technologies comme maven spring ou struts et a` commiter ce projet sur svn.

Voici une capture decran de lapplication que nous avons realise montrant ce que lon peut apprendre grace aututoriel.

Figure 23 application hj-helloworld



6.2 Recherche sur les moyens de micro-paiements pour la television

Ce projet devait etre a` la base notre principal sujet de stage. Comme nous lavons vu, nous y avons travaille quedurant quelques jours car nous nous sommes rendus compte assez vite que ce qui avait ete initialement prevu parnos superieurs nallait pas etre possible a` cause des trop grandes contraintes dues aux box.

Pour rappel, le but de ce sujet etait de fournir a` WizTiVi des moyens de paiement pour la television. Le butrecherche etait de pouvoir fournir a` des telesites le moyen de vendre facilement du contenu. Nos recherches ont de`sle 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 facilementet de facon securisee. Le principe est que chaque contenu achete par un abonne est ajoute sur la facture de sonabonnement. La grosse contrainte est que lachat ne peut etre effectue que depuis une ligne ADSL Freebox. Laprocedure 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 deuxie`me etape de cette procedure rend impossible lutilisation depuis une Freebox. En effet, il est imperatif lorsde ce procede de sauthentifier sur la plateforme de Free. Le proble`me est que la page dauthentification ne peutetre 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 depaiement est aussi sensiblement la meme. En effet, lors du paiement, une page est affichee chez le client pour quecelui-ci confirme son achat. La` encore, cette page ne peut etre comprise par les box. Lidee a donc egalement eteabandonnee.

6.2.3 Paypal

Pour finir, nous avons tente dutiliser paypal. Nous avons ete jusqua` developper une petite application de test.En effet, paypal posse`de toute une plateforme de test permettant de simuler le vrai syste`me. Cela est propose auxdeveloppeurs souhaitant utiliser paypal. Le proble`me que nous avons rencontre est le meme que pour les precedentesplateformes. En effet, le client doit forcement a` un moment donne senregistrer sur une page dauthentificationcorrespondant a` paypal.

6.2.4 Bilan

Comme nous lavons vu, ces trois plateformes imposent une chose : Le client doit etre capable dafficher la reponseenvoyee 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 paslafficher.

Nous avons tente de contourner ce proble`me en affichant la reponse de la plateforme dans une iframe que nousnaurions pas affichee. Nous aurions alors pu via javascript recuperer les elements de cette iframe et les affichera` notre facon pour les box mais le javascript netant pas disponible sur toutes les box, cette solution na pas eteretenue. La dernie`re solution aurait ete de refaire entie`rement une plateforme de paiement pour la television maiscela semblait complique en terme de delai et de connaissance.

De plus, lequipe sest apercue durant nos recherches quelle netait pas encore assez mure sur ce quelle souhaitait.Notamment dun point de vue juridique, le paiement par internet impose des choses qui netaient pas forcementprevues. Toutes ces contraintes ont fait que pour un stage, la meilleure solution etait de mettre de cote ce projet etde repartir sur quelque chose dautre.



6.3 Integration dun composant carte au sdk WizTiVi

6.3.1 Motivations

Comme nous lavons vu, ce projet devait permettre lintegration dune carte dans les telesites. Lidee etait depouvoir associer a` une partie dune carte, de linformation.

La premie`re motivation etait lintegration de ce composant dans un telesite de recherches doffres demploi. Ce telesitepermet de rechercher des offres demploi selon plusieurs crite`res. Lidee etait que lutilisateur puisse naviguer sur lacarte et voir directement le nombre dentreprises et demplois presents dans la region. Nous souhaitions quil puisseegalement selectionner une region afin dacceder a` 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 sontoffertes. On peut par exemple imaginer de se servir de ce composant pour un site dannonces immobilie`res ou pourla meteo par exemple.

De ce fait, le projet devait etre le plus generique possible notamment entre la relation de la partie carte et de lapartie information.

Comme nous lavons vu, la base du projet etait la navigation sur la carte ainsi que la selection dune region de lacarte. Les actions disponibles pour lutilisateur peuvent donc etre resumees dans ce diagramme :

Figure 24 Possibilites offertes a` lutilisateur



6.3.2 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 qua` chaque changement de region, une nouvelle image est affichee. Voici donc unexemple de deplacement dun utilisateur de la region Ile de France qui en cliquant sur la fle`che du bas de satelecommande 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 pourla region Centre. Cela impose donc un grand nombre dimages. Cela permet en revanche de gerer simplement lesimages de la carte. Il suffit en effet pour cela dassocier a` chaque region, une image.

Cette solution permet de plus detre multi-box. En effet, en ayant des navigateurs plus evolues il aurait sans douteete 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 regionselectionnee. Si lon souhaite en savoir plus, il suffit de cliquer sur la region. On arrive alors sur une page decrivantles differents emplois de la region.

Ce projet a donc ete divise en trois parties afin de pouvoir redefinir certaines parties sans avoir a` toucher auxautres. 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



6.3.3 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 tre`s reduite. Sur ce schema on ne voit pas en revanche la partie strutset 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 pasune region comme par exemple les pays de loire. Il sagit en fait dune partie de la carte. Ainsi la Loire-Atlantiquepeut 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



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` uneville. Pour un site ou un telesite de meteo on aura donc certainement un objet metier decrivant le temps qui seraassocie a` une ville. On pourra donc dans le composant carte associe la region Pays de la Loire a` la ville de Nantesou dAngers par exemple.

En revanche pour le telesite de recherche doffres demploi, une offre nest pas associee a` une ville mais a` undepartement. Ainsi, dans la liaison au composant carte, on associerais dans cet exemple, la region Pays de la Loireau departement Loire-Atlantique, Vendee etc. On voit donc bien que la liaison de lobjet part aux donnees dependdu 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 posse`de donc une liste dobjets part decrivant la carte. On lui associe egalement un objetpart particulier pour savoir quelle est la partie de la carte selectionnee par defaut (elle est notamment utilise lorsdu demarrage de la carte). On trouve egalement dans le composant coeur un parseur ayant un fichier xml enattribut qui decrit la carte et qui est charge dinitialiser lobjet map. On detaillera plus precisement la structurede ce fichier dans la partie sur le composant support. Enfin, on trouve dans lobjet map une interface de typeMapResumeDataProvider ainsi quune interface de type MapDatasKeysProvider.

La premie`re de ces interfaces posse`de une methode getResumeData prenant un objet part en entree. Cettemethode est appelee pour savoir quest ce qui va etre affiche a` droite de la carte lors de la navigation. On comprenddonc 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 posse`de une facade versla base de donnees. La methode getResumeData va donc chercher dans la base de donnees le nombre demplois etle nombre dentreprises de la region Part passee en parame`tre dentree de la methode. Elle va ensuite construireun 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 a` la vue (une jsp) chargee dafficher la carte. (labase de la navigation est une action struts). La vue recupe`re donc cet objet et peut donc facilement afficher lesinformations liees a` la region selectionnee.

Limplementation de la seconde interface (MapDatasKeysProvider) est un objet capable de construire les datas-keys de lobjet Part en entree. On a vu precedemment que la liaison des dataskeys pouvait etre faite par unfichier xml. Dans ce cas, limplementation de lobjet de type MapDatasKeysProvider sera un parseur xml maison peut imaginer que la liaison entre le composant carte et les donnees du telesite ne soit pas un fichier xml maisune base de donnees. Voila` pourquoi nous avons utilise une interface dans le composant coeur.



La navigation

En plus des objets metiers, il est necessaire de parler de la navigation a` la telecommande qui est une partieimportante dans le composant map. Comme nous lavons vu dans la partie sur le sdk de WizTiVi, il existe uncertain nombre de concepts definis dans un fichier xml permettant dabstractiser les differentes telecommandes desbox. Le composant map utilise un certain nombre de ces concepts pour gerer les deplacements de lutilisateur surla 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 a` une action struts. Une action estune classe qui implemente la classe Action de Struts. Elle posse`de une methode execute. Cette methode prenden parame`tre la requete et la reponse ainsi que des elements lies a` struts et elle est appelee par la servlet de strutslorsque lutilisateur effectue une requete. Il existe une action struts par deplacement. Ainsi, lorsque lutilisateurappuie sur un bouton, une action est alors declenchee. Toutes ces actions de deplacement sont reliees a` une memeclasse MapAction definie dans le projet coeur. Il existe une instance de cette classe par action de deplacementde struts. Chacune de ces instances est instanciee avec spring et posse`de une propriete event decrivant queldeplacement est relie a` lobjet. Lors du lancement de lapplication, un bean map est cree par spring et ce beanest initialise par le parseur. Chaque objet de la classe MapAction posse`de de plus une association avec ce beanmap afin davoir acce`s aux informations de la carte.

Deroulement dun deplacement sur la carte

Nous allons maintenant voir un exemple de navigation sur la carte :

Figure 28 Utilisation de la carte



Comme nous venons de le voir, lorsque lutilisateur appuie sur une touche de deplacement de la telecommande, lamethode execute de la classe MapAction est declenchee. Laction recupe`re alors lid de la region courante dansla requete (nous verrons plus tard comment cet id est mis en parame`tre de la requete). Laction fait alors appel a`lobjet map pour recuperer lobjet part correspondant a` lid. Elle fait ensuite appel a` ce meme objet pour savoirquel est le prochain objet part correspondant au deplacement souhaite par lutilisateur. Ce nouvel objet part estalors mis dans la requete pour que la vue le recupe`re. Laction fait enfin appel a` la methode getResumeData delobjet map pour recuperer un objet correspondant au resume des informations de la nouvelle region. Cet objetest 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 apre`slurl un parame`tre correspondant a` lid de la nouvelle region. Cest de cette facon que lors du prochain deplacementde 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. Nousallons maintenant voir comment est gere la vue qui va etre affichee par lutilisateur. Afin de simplifier lintegrationdu composant map dans un telesite, jai realise une taglib. De cette facon, il suffit dinserer cette taglib dans lajsp 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. Lataglib recupe`re donc cet objet et recupe`re limage associee. Comme cette image est presente dans le classpath delapplication, jai realise une servlet chargee de recuperer cette image. Enfin, une fois recuperee, la taglib rajoutedonc 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 facondont il souhaite afficher le resume des informations de la region selectionnee. Pour cela, nous avons vu que lactionmettait lobjet correspondant a` ce resume dans la requete. Il suffit donc de le recuperer dans la jsp et dafficher cesinformations de la facon dont on le souhaite.



6.3.4 Le projet support

Afin de ne pas importer des images inutiles, il existe un projet support par carte. Pour le moment, il nexisteque 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 deFrance, il existe environ 130 images. Cest pourquoi nous avons decide davoir un projet par carte. Le fichier xmlpermet 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 a` une ou plusieurs autres parties. Ces parties permettent derepresenter 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.



6.3.5 Le projet tutoriel

Ce projet devait servir dexemple a` lintegration du composant map de WizTiVi. Cest donc un telesite quiutilise le composant map et qui explique en plusieurs etapes comment lintegrer. En plus des explications, on trouvedonc une partie exemple qui utilise la partie carte en simulant un telesite de recherche doffres demploi. Ce projettutoriel a ete realise pour plusieurs box montrant laspect multi-box du composant carte.

La premie`re partie du telesite est donc composee de plusieurs pages montrant etape par etape comment integrer lecomposant. 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 a` declarer pourpouvoir utiliser le composant map. Ces elements sont le plus souvent declares dans des fichiers xml. Comme lap-plication tutoriel utilise le composant map, quelquun souhaitant integrer ce composant dans son telesite na qua`recopier les bons elements de spring et de struts dans ces propres fichiers. Jexplique donc dans la partie explicationdu telesite quels sont les elements a` recopier. Afin de faciliter lintegration, jai de plus rajoute des commentairesmontrant 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 a` ajouter dans son propre telesite pour integrer lecomposant 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 provenantdun composant dans une application web. Larchitecture du projet pourra donc etre lege`rement modifiee pour queles elements de spring et de struts soient presents dans la partie support du composant. (Nous verrons dans uneprochaine partie que cest ce qui a ete fait pour mon second composant). De cette manie`re, lutilisateur souhaitantintegrer le composant na qua` preciser dans la configuration de son application quels sont les elements de spring etde struts a` importer.



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 premie`re capture les differentes parties. Une est consacree a` lexplication de lintegrationdu 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 a` la region Pays dela Loire. On peut egalement remarquer que les emplois de la region selectionnee sont affiches a` droite de la carte.Enfin, on peut remarquer en bas de la page la representation des differents contextes de la page. On voit doncquil est possible de zoomer, dezoomer, quitter la carte ou obtenir des informations detaillees sur les emplois de laregion selectionnee.



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 Loire-Atlantique. 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 a` appuyer sur la toucheinfo. On voit donc quil arrive sur une page detaillant les emplois de la region selectionnee.



6.3.6 Integration du composant dans un telesite en developpement

Comme nous lavons vu, une des motivations du projet de carte etait lintegration de ce composant a` un telesite derecherche doffres demploi en cours de developpement chez WizTiVi.

Ce telesite (NeedProfile) permet a` un particulier dafficher sur sa television les diverses entreprises proposant desemplois. 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 regionselectionnee sur la carte.

Ce telesite etait donc le premier a` integrer le composant carte. Il a ete loccasion de corriger plusieurs choses pouravoir un composant le moins restrictif possible.

Jai notamment change laction struts qui permettait dappeler les objets metiers. En effet, dans la premie`re version,cette action etait presente dans la partie coeur du composant et il etait obligatoire de passer par elle pour afficher lacarte. Le proble`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 a` 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 a` quelques modi-fications sur le projet. En effet, le projet NeedProfile ayant demarre lege`rement avant mon changement de sujet destage, il netait pas prevu lintegration du composant. Jai donc participe a` la modification de la facade permettantdacceder aux objets metier stockes en base. Jai donc ajoute les fonctions prenant un objet part en entree et re-tournant une liste de compagnies et demplois. La seule notion de lieu dans ce telesite est dans lobjet adresse ou`lon stocke un code postal. Un job et une entreprise ayant un objet adresse en attribut, mes methodes de la facadese servaient donc de cela pour definir quel emploi ou entreprise etait present dans telle region.

Jai donc rajoute quelques fonctions pour par exemple :

Retourner la liste des entreprises dune region Retourner la liste des emplois dune region Retourner le nombre demplois disponibles dans une region Retourner le nombre dentreprises dune region qui recrutent

Toutes les methodes de la facade ninterrogent pas directement la base de donnees car elles peuvent contenir destraitements qui nont pas de rapport avec la base. La facade utilise donc un service qui lui est directement en rapportavec la base de donnees et ne sert que dinterface avec elle. Jai donc aussi du modifier ce service pour permettre a`la facade de communiquer avec la base. Les fonctions que jai creees correspondent aux methodes citees ci-dessuset nont principalement quun role dinterrogation de la base.

Jai de plus cree une classe implementant linterface MapResumeDataProvider. Cette classe permet de construirelobjet 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.



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



6.4 Developpement dune application de conversion de videos

6.4.1 Motivations

La principal point fort de la societe WizTiVi est de pouvoir developper les differents telesites pour plusieursbox. Comme nous avons pu le voir, cela implique un certain nombre de contraintes. Cest une de ces contraintesqui est a` lorigine de ce projet. En effet, une version de la box du constructeur Free nest capable dafficher desimages quavec un tre`s faible nombre de couleurs. Le fait de developper des sites web pour la tele implique davoirun graphisme tre`s travaille et agreable a` loeil. Il est donc indispensable de pouvoir manipuler des images avec unnombre de couleurs corrects. Pour pouvoir utiliser des images tre`s travaillees sur toutes les versions de le Freebox,il fallait donc corriger ce proble`me.

La solution a` ce proble`me de couleur est lutilisation dune video comme fond de page. En effet, la Freebox acceptedavoir des fonds videos au format mp2v utilisant le codec Mpeg2. Ces videos contiennent un certain nombre doctetssupplementaires qui definissent le format mp2v. Lidee etait donc de convertir les images que nous souhaitions utiliseren fond de page, en video mp2v pour que toutes les versions de la Freebox puissent avoir des fonds de page agreablesa` loeil.

Avant le developpement de ce projet, il existait deja` deux solutions pour convertir une image en mp2v. La premie`rede ces solutions, est une application web qui permet de telecharger un fichier sur un serveur distant et qui nousrenvoie la video mp2v correspondante. Ce site etait tre`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 lasociete, est la transformation des images en utilisant vlc. Comme nous le verrons, cette solution est a` la base de ceprojet. La contrainte est que vlc doit etre utilise en ligne de commande et sous linux. La conversion dune image enmp2v est donc tre`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 applica-tion web qui permettait grace a` un formulaire html duploader un fichier sur le serveur. Lapplication se chargeraitensuite de transformer ce fichier et de renvoyer le mp2v a` lutilisateur. Un complement de ce projet a ete developpepour permettre a` lutilisateur dappeler lapplication de transformation en mp2v sans passer par linterface webmais en le faisant directement en java.



6.4.2 Realisation

Lapplication a donc ete divisee en deux projets. Un projet core charge uniquement de convertir une imageen mp2v et un projet application web proposant un formulaire a` lutilisateur et permettant duploader son imagesur le serveur.

La partie coeur

La partie coeur est composee dune interface contenant une seule methode. Cette methode convert prend enparame`tre un flux dentree contenant limage a` convertir et un flux de sortie ou` le mp2v resultat sera ecrit. Ontrouve 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 a` vlc pour transformer limage.

Ce projet ma permis dapprendre a` correctement lancer un programme externe. En effet, la communication aveclapplication externe est importante. Cette communication passe par trois flux. Parmi ces trois flux, on en trouveun dentree permettant decrire sur lentree standard de lapplication et on trouve surtout deux flux de sortie. Unetant la sortie erreur de lapplication et lautre la sortie standard. Ces deux derniers flux doivent absolument etreconsommes 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 dunformulaire html pour permettre a` lutilisateur de choisir le fichier a` convertir et de deux servlets permettant dappelerlapplication coeur. Comme nous lavons vu, la communication avec lapplication coeur peut se faire de deuxmanie`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 webcontenant un formulaire html denvoi de fichier. Laction de ce formulaire est une servlet qui se charge duploaderle fichier sur le serveur. Une fois uploadee, elle envoie le flux de ce fichier a` lapplication coeur qui ecrit le mp2vresultat dans le flux de sortie de la servlet.

Lautre servlet permettant la communication avec lapplication coeur directement en java, doit etre appelee enrajoutant un parame`tre qui est lurl de limage a` convertir. La servlet commence donc par recuperer cette url dansla requete puis, elle telecharge cette image en utilisant HttpClient. Enfin, une fois limage recuperee elle appellelapplication 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 weba une association avec lapplication coeur. Pour cela, nous devions utiliser spring mais il ne permet pas linstanciationdes servlets. Jai donc appris a` recuperer dans une classe un bean cree avec spring. A la creation des servlets, unemethode init recupe`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 communiqueravec une application sur un serveur distant. Jai notamment appris les differentes facons de travailler sur ce serveurcomme par exemple linstallation dun serveur dapplication a` distance ou le deploiement dune application. Jaiegalement appris a` mieux gerer lexecution dapplication externe en java. Enfin, jai decouvert la facon dutiliser desservlets sans passer par struts et avec spring. Cette application a permis dautomatiser les operations que lutilisateureffectuait manuellement avant. Elle a egalement rendu possible le developpement de lapplication diaporama commenous le verrons plus tard.



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 sommespartis dune image de base que nous avons converti en mp2v grace a` lapplication encoder. Enfin, nous utilisonsce mp2v dans une page dun telesite ou` nous rajoutons ce que nous voulons dans la page.



6.5 Developpement de la couche presentation de lapplication Dailymotion

Dailymotion est un site de partage de videos tre`s populaire. En effet, cest le principal concurrent de youtubequi est le numero un des sites de partage de videos au monde. Dailymotion est aussi la plus grosse realisation de lasociete WizTiVi. En effet, cest en fevrier dernier que la societe a lance dailymotion disponible avec le fournisseurdacce`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 applicationspour un nouveau fabriquant de box, WizTiVi souhaitait realiser ladaptation de son telesite Dailymotion pourune nouvelle box. Je suis donc intervenu dans ce projet afin de developper toute la partie presentation pour cettenouvelle box. Le projet sappuyant sur la meme partie metier, je nai pas eu a` la modifier.

6.5.1 Contraintes de la Thomson box

Avant de developper la partie presentation de dailymotion il a fallu sadapter a` cette nouvelle box. Comme nouslavons vu dans la partie presentation technique, pour developper la presentation dun telesite, lequipe sappuie surun sdk fournissant entre autres de nombreuses taglibs facilitant le developpement. Comme ce projet etait le premierprojet 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 paspossible de personnaliser la navigation de la Thomson box pour en creer une plus stylee par exemple. La navigationsur Neufbox ou Thomson box est donc refaite grace au javascript. Chaque element selectionnable est en fait unelement 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 etThomson box. Grace au javascript, a` chaque reception dun evenement provenant la telecommande de la box, onchange 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 rendreune page navigable, il suffit de rentrer dans la jsp associee, une taglib definissant si la suite va etre selectionnableen colonne ou en ligne. Cela definit si lon va se deplacer de facon verticale ou horizontale. Une fois que lon a definila facon de se deplacer, il faut maintenant definir les elements selectionnables. De cette facon, chaque element estassocie a` un autre element en fonction dune direction. Chaque bouton connat donc ses voisins.



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. Lorsquecelui-ci lest, on change dynamiquement grace au javascript la source de limage du bouton et on la remplace parladresse 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. Celasignifie que tous les elements de la page ne sont pas accessibles par le javascript. Les elements disponibles sont :

les images les formulaires les liens les ancres

Il nest donc pas possible dattribuer a` nimporte quel element de la page un id et de le selectionner en javascriptcomme cest habituellement le cas. Voila` pourquoi la societe a choisi de definir chaque element selectionnablecomme etant une image. De cette facon, comme les images sont accessibles en javascript level 0, lorsque lelementest selectionne, une fonction javascript est lancee et elle se charge de changer la source de limage de lelement. Cestde cette facon que lutilisateur voit quel element est selectionne.

Afin de creer un element selectionnable, le sdk fournit donc une taglib que lon inse`re dans la page. On passe a` cettetaglib plusieurs parame`tres comme limage quelle doit afficher lorsque le bouton est selectionne et quand le boutonnest pas selectionne. De la meme facon, il est possible de rajouter du texte sur le bouton qui peut etre change enfonction de la selection.

Enfin, une autre contrainte de cette box est la gestion speciale du css. En effet, on lutilise dhabitude pour placerles elements dans la page. Ici le css ne ge`re pas le positionnement des elements, la balise div nest donc pasdisponible. Le css ne sert en fait uniquement qua` donner un style a` un element represente par un id mais ne sertpas a` son positionnement. La mise en page de la page se fait donc grace a` la methode des tableaux.

6.5.2 Realisation

Apre`s metre habitue aux differentes contraintes de la box, jai donc travaille sur la presentation de lapplicationdailymotion pour cette box. Je me suis bien sur inspire de lapplication disponible sur la Neufbox car il etaitimperatif que la version finale de la Thomson box soit la copie la plus parfaite de la Neufbox. Je me suis doncbeaucoup 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.



Ce projet a egalement ete loccasion dapprendre a` utiliser la jstl. Cette bibliothe`que a pour but de simplifier ledeveloppement 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 partiepresentation technique, tiles est un framework qui permet de definir des squelettes de page a` la manie`re des templatesen 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 pagerepresente les chanes de dailymotion et une autre les videos.



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 stardu moment ainsi quune selection des chanes presentes sur le telesite. Une chane est en fait une categorie desvideos.

Figure 41 Exemple de video en lecture

Cette page est celle qui est affichee lorsquon lance une video.



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, unmembre ou un groupe.



6.6 Integration 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 partiediaporama dans un telesite. En effet, plusieurs clients nous ayant demande de realiser un telesite souhaitaient unepartie diaporama dans leur application. Cest pourquoi lequipe WizTiVi souhaitait disposer dun composant dece type dans leur sdk. Celui-ci devait donc pouvoir sintegrer facilement en ayant le moins de choses a` faire pourle developpeur. Ayant deja` realise un premier composant, ce dernier ma permis de mieux penser mon composantnotamment 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 cecahier 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, a` la volee) Differentes options comme la possibilite de reboucler au debut apre`s la dernie`re diapo

En plus de ces differentes configurations du diaporama, le composant se devait detre multi-box. Cela imposaitdavoir une gestion tre`s differente pour les deux principales box de la societe a` savoir la Freebox et la Neufbox. Eneffet, la Neufbox integrant du javascript, il etait alors possible de gerer toute la navigation du diaporama directementsur le client.

Le projet etant relativement consequent si nous souhaitions tout faire pour toutes les box, nous avons choisi deproceder de facon iterative apre`s la phase danalyse. Cest pourquoi jai dabord realise une premie`re version simplepour la Freebox avant de complexifier les choses. La phase danalyse etait donc importante car le mode`le fournit de-vait etre dassez haut niveau pour pouvoir dabord avoir des implementations de base et ensuite des implementationsplus complexes fonctionnant sur le meme mode`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 rela-tivement difficile. En effet, apre`s quelques jours danalyse, nous nous sommes rendus compte que le developpementdu composant rejoignait dautres projets de la societe. Celle-ci souhaite en effet developper deux composants plusgeneraux :

Un composant Player Un composant Media

La television etant un support ou` lon peut jouer tout type de media, le but etait que le composant Player puissejouer tout type du composant Media que ce soit video, photo ou meme musique. Grace a` ces composants, un telesitepourrait donc tre`s facilement integrer un player video par exemple. Le composant diaporama ne serait donc quelutilisation du player generique avec comme type de media, des photos.

Nous avons donc fait un point apre`s quelques jours de conception pour bien recadrer le sujet. En effet, de ce faitnous etions partis sur une conception a` mi-chemin entre un projet tre`s haut niveau representant le media et leplayer et un projet plus bas niveau representant uniquement la lecture dun diaporama. Le projet player generiqueet multi-box etant un projet consequent et la fin du stage approchant, nous avons choisi de se concentrer sur ledeveloppement dun composant diaporama uniquement.



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 partie Diaporama La partie Player La partie Vue La partie Rendu

La partie diaporama definit ce quest un diaporama a` savoir un ensemble de slides et cest aussi la` quon decritla source des donnees. La partie player est une partie independante capable de jouer le diaporama. La partievue definit les differentes options du diaporama comme par exemple si lon souhaite un affichage plein ecran ouminiature. Enfin, la partie rendu est capable dafficher la partie vue. Elle est donc extremement liee a` la partie vue,le rendu dune vue en fond decran netant bien sur pas le meme que pour une vue miniature. De plus, le rendusur une Freebox nest pas le meme que sur une Neufbox. Nous avons fait le choix de reconstruire tout une partiedu mode`le pour chaque utilisateur. Seule la partie diaporama peut etre partagee par plusieurs utilisateurs commenous le verrons plus tard. Toute la partie player, vue et rendu est donc instanciee a` chaque nouvel utilisateur poureviter les proble`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 differentesimplementations. En effet, le nombre de possibilites offertes etant important, il etait dabord important de definirdes apis decrivant le fonctionnement global du composant et densuite decrire les implementations.

Larchitecture du projet est lege`rement differente de celle du composant carte car entre temps jai appris de nouvellesnotions sur maven, spring et struts. En effet, nous avions vu dans le composant carte que lutilisateur souhaitantintegrer le composant, devait recopier a` la main la configuration spring et struts necessaire. Je me suis apercu aucours 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 regroupera` linterieur dun seul projet, deux sous projets. Jai donc cree un projet java general contenant un fichier pomdecrivant la configuration du projet a` maven. Dans ce projet, on trouve deux dossiers qui sont en fait deux projets.Grace a` cela, plutot que de manipuler un projet core et un projet support comme ce

Date post:	07-Nov-2015
Category:	Documents
Upload:	kensaj
View:	6 times
Download:	0 times

hurault-wiztivi

Documents