Sie sind auf Seite 1von 52

dition de fvrier mars 2015

Numro 56
Magazine en ligne gratuit
Diffusion de copies conformes loriginal autorise
Ralisation : Alexandre Pottiez & Sbastien Lataix
Rdaction : la rdaction de Developpez
Contact : magazine@redaction-developpez.com

Sommaire
Article JavaScript
JavaScript Page 2
CSS Page 14
Delphi Page 16
Java Page 25 JavaScript pour les Jedis, pisode I : au
JavaWeb Page 27 cur des fonctions
Libres & Open Source Page 37
ALM Page 48 Cet article parle de la boucle dvnements, du callback, des
fonctions anonymes, en JavaScript
par Wassim Chegham
Page 2
ditorial
Le meilleur des magazines IT re-
Article Delphi
vient dans un nouveau numro
o vous retrouverez une slection
darticles de notre site. Profitez-en
bien ! Comment implmenter un Singleton
avec Delphi 7
Le patron de conception Singleton est un modle visant
limiter linstanciation dune classe un seul et unique objet.
Il est couramment utilis pour coordonner des oprations
dans un systme.
par Jrmy Laurent
La rdaction Page 16
JavaScript
Les derniers tutoriels et articles

JavaScript pour les Jedis, pisode I : au


cur des fonctions
Wassim Chegham est un fervent dfenseur des technologies Web front et suit de prs les versions EC-
MAScript. Aujourdhui, il nous propose un article sur les fonctions JavaScript et leurs aspects parfois
complexes. Cet article parle de la boucle dvnements, du callback, des fonctions anonymes, etc.

1 Introduction

Comme vous le savez tous, 2015 est lanne de sorte de haine contre JavaScript.
JavaScript. Cest pour cette raison que jai dcid
de me consacrer la rdaction dune srie darticles JavaScript, tu lapprends ou tu le
concernant les fondamentaux de JavaScript, un lan- quittes.
gage trs populaire, mais en mme temps encore m-
connu. Ces articles auront pour but de vous expli- Vous vous demandez srement pourquoi nous
quer en dtail le fonctionnement de ce langage afin commenons cette srie par les fonctions, et non pas
de faire de vous des JavaScript Jedis. par les objets. Eh bien ! tant donn la nature fonc-
En effet, grce cette srie darticles, nous allons tionnelle de JavaScript, pour moi, matriser cet as-
apprendre et comprendre JavaScript afin de tirer le pect du langage fera de vous des Jedis. En effet,
meilleur de ce langage. vrai dire, jen ai un peu la plupart des dveloppeurs via dautres langages
marre de voir beaucoup de dveloppeurs traiter ce orients objet essayent plus de reproduire des para-
langage de tous les noms, car ils narrivent pas faire digmes propres ces langages et font limpasse sur
ce quils ont lhabitude de produire avec leurs lan- les fonctions et les fermetures (closures). JavaScript
gages favoris. Mais en ralit, cela vient du fait que est compos de ces trois concepts : les objets, les
ces mmes personnes ne prennent mme pas la peine fonctions et les closures. Matriser JavaScript passe
dapprendre le langage, probablement cause de sa par lapprentissage de cet aspect fonctionnel du lan-
syntaxe trs ressemblante Java. Par consquent, gage ; et croyez-moi, le niveau de sophistication du
ces dveloppeurs finissent donc par dvelopper une code que vous crirez dpend de cet apprentissage.

2 JavaScript est un langage fonctionnel

Lune des raisons qui font que les fonctions et la des objets, elles peuvent donc tre :
nature fonctionnelle de JavaScript sont des concepts cres via des littrales ;
trs importants vient du fait que la fonction est
assignes des variables ou proprits dun ob-
le premier module dexcution en JavaScript. Cest-
jet ;
-dire que lorsque votre code est excut, il lest au
sein dune fonction ; lexception des scripts qui sont passes en paramtre ;
interprts lorsque le code HTML est en train dtre retournes comme rsultat.
valu par le navigateur. Je fais videmment allusion Ces fonctions peuvent aussi possder des objets
lemblmatique document.write() qui permet- ou mthodes.
tait de crer du DOM au runtime, obligeant le navi- En plus dtre traites comme des objets, les
gateur bloquer linterprtation du code HTML. fonctions ont galement une capacit spciale : elles
Revenons nos moutons, une chose trs impor- peuvent tre invoques (on en reparlera plus en d-
tante connatre sur les fonctions en JavaScript, ce tail dans la suite de cet article). Cette invocation
sont des objets de premier ordre (first-class objects). est souvent effectue de manire asynchrone. Voil
Cela veut dire que les fonctions sont traites comme pourquoi. . .

Developpez Magazine est une publication de Developpez.com page 2


Numro 56 fvriermars 2015
3 La boucle dvnements

Si vous avez dj cod une interface graphique vnements sont donc traits un par un, tour de
auparavant, vous avez srement procd comme rle. Voici un schma trs simplifi de ce processus :
ceci :
mettre en place linterface graphique ;
se mettre dans une boucle dvnements en at-
tendant quun vnement se produise ;
invoquer les actions excuter pour chaque
vnement.
La programmation en JavaScript dans un
navigateur suit quasiment ces tapes, sauf que
la gestion des vnements est totalement prise en
charge par le navigateur. Nous avons juste besoin de
spcifier les actions (listeners) pour les diffrents v-
nements qui peuvent tre dclenchs toujours au
sein du navigateur. Ces vnements sont placs dans
une file au fur et mesure quils se produisent, et
le navigateur traite ces vnements en invoquant les
actions associes. noter que ce principe reste iden- Un exemple typique du fonctionnement de cette
tique pour dautres environnements JavaScript, par boucle : lorsque vous bougez le curseur de votre sou-
exemple NodeJS. Puisque ces vnements peuvent ris dans votre page web, le navigateur dtecte ces
se produire nimporte quel moment et dans nim- dplacements de souris et place cette srie dvne-
porte quel ordre, la gestion de ces vnements, et ments (mousemove) dans la FIFO. Ensuite, la boucle
donc linvocation de leurs actions, se fait de manire dvnements soccupera du traitement de ces v-
asynchrone. Pourquoi me diriez-vous ? nements en excutant les actions associes.
Une chose savoir, la boucle dvnements du Ce principe dactions associer une fonction qui
navigateur est monothreade , ce qui veut dire sera excute plus tard, lorsque lvnement se pro-
que chaque vnement se trouvant dans la file dat- duira illustre un mcanisme que lon appelle les
tente est trait dans lordre darrive (FIFO). Les fonctions de callback.

4 Le principe de callback

Les fonctions de callback sont une partie trs es- 5 function bonjour () {
sentielle dans la bonne comprhension de JavaScript. 6 return " Bonjour , JavaScript ! " ;
7 }
Explorons ce point. . . 8
Dans la partie prcdente, nous avons dit que 9 function e x e c u t e r A u C h a r g e m e n t () {
lon pouvait associer des actions aux diffrents v- 10 return dire ( bonjour )
nements se produisant au sein du navigateur. Voici 11 }
12
un exemple dune action : 13 window . onload = e x e c u t e r A u C h a r g e m e n t ;
1 function e x e c u t e r A u C h a r g e m e n t () { / * ...
*/ }; Voil un exemple intressant ! Nous pouvons
2 aussi appeler les fonctions de callback dans nos
window . onload = e x e c u t e r A u C h a r g e m e n t ;

Ici, nous avons attach une action (listener) qui propres fonctions, pas besoin quelles soient associes
sera excute lorsque la page est compltement char- des vnements. Dans cet exemple, nous avons at-
ge par le navigateur. Parce que les fonctions sont tach une fonction de callback lvnement onload.
des first-class objects , nous pouvons affecter cette Lorsque la boucle dvnement excutera ce listener,
fonction la proprit onload de lobjet window (re- son tour il excutera la fonction dire laquelle
prsentant le navigateur). nous avons pass la rfrence vers la fonction bon-
Aussi, nous avons dit que les fonctions peuvent jour . Une fois excute, la fonction dire in-
tre passes en paramtre. Ce qui veut dire que lon voquera la fonction bonjour , ce qui provoquera
peut crire ceci : laffichage du message Bonjour, JavaScript ! .
Mieux encore ? La nature fonctionnelle de Ja-
1 function dire ( callback ) {
2 alert ( callback () ) ;
vaScript nous permet de crer des fonctions en
3 } tant quentit part entire, comme nimporte quel
4 autre type, et les passer directement en paramtres.

Developpez Magazine est une publication de Developpez.com page 3


Numro 56 fvriermars 2015
Voyons un exemple : 8
9 window . onload = e x e c u t e r A u C h a r g e m e n t ;
1 function dire ( callback ) {
2 alert ( callback () ) ; Nous avons modifi lexemple prcdent en sup-
3 } primant la dclaration de la fonction bonjour .
4 Nous lavons remplace par la dclaration dune
5
6
function e x e c u t e r A u C h a r g e m e n t () {
return dire ( function () { return "
fonction sans nom, directement dans les paramtres
Bonjour , JavaScript ! " ; } ) ; de la fonction dire . En JavaScript, nous appelons
7 } ce genre de fonctions, les fonctions anonymes.

5 Les fonctions anonymes

tant donn la nature fonctionnelle du langage, il Pourquoi donner un nom un


est possible de crer des fonctions nimporte o dans chat qui ne ragit pas lorsquon lap-
le code l o une expression est attendue. Cela pelle ?
a pour avantage de rendre le code plus clair, plus
compact et en plus, cela permet dviter de polluer
lespace de noms global avec des noms de fonctions Gnralement, en JavaScript, lorsque nous esti-
inutiles. mons quune fonction va tre rfrence dans plu-
En effet, une fonction anonyme est une fonction sieurs endroits du code, nous lui donnons un nom.
comme les autres dclare en inline et Sinon, si elle est destine servir juste un seul
qui na pas de nom pour la rfrencer. Ces fonctions endroit, alors pas besoin quelle ait un nom. Ce qui
anonymes sont gnralement dclares au moment nous amne aux dclarations et invocations des fonc-
o elles sont rfrences. tions.

6 Dclaration de fonctions

En JavaScript, les fonctions sont dclares Toutes les fonctions dclares ont une proprit
name qui contient le nom de la fonction (de type
laide du mot-cl function qui cre une valeur de
type fonction. Rappelez-vous que les fonctions sont String). Pour les fonctions anonymes, cette proprit
est prsente, mais elle est vide.
des objets de premier ordre, elles peuvent tre mani-
pules dans le langage comme nimporte quel autre Lorsquune fonction a t dclare avec un nom,
type. De ce fait, il nous est possible dcrire ceci (en
ce dernier reste valide dans tout le contexte dans
reprenant lexemple prcdent) : lequel cette fonction a t dclare. Aussi, si cette
1 var dire = function ( callback ) { fonction a t dclare dans le contexte global, une
2 alert ( callback () ) ; nouvelle proprit portant le nom de la fonction est
3 }; ajoute dans le window ; cela est galement vrai
La valeur de la variable dire est une fonc- pour les variables ; ce qui nous amne donc la suite
tion ! Nous avons donc dclar et cr une fonction de cet pisode concernant le contexte et la porte des
anonyme rfrence par la variable dire . fonctions.

7 Porte et contexte(s) dune fonction

Lorsque nous dclarons une fonction, nous de- En JavaScript, les portes sont cres par les
vons avoir lesprit, non seulement le contexte dans fonctions, et non pas par les blocs.
lequel cette fonction existe, mais galement quelles La porte dune variable cre au sein dun
sont les portes que cette fonction cre. Nous devons bloc continue dexister en dehors de ce dernier. Par
galement faire trs attention aux dclarations faites exemple :
au sein de ces portes.
1 if ( true ) {
2
La gestion des portes en JavaScript est trs dif- var foo = bar ;
3 }
frente de la plupart des autres langages dont la syn- 4 console . log ( foo ) ; // = > bar
taxe a t influence par le langage C. Plus prci-
sment, ceux utilisant les accolades pour dlimiter Ce simple exemple prouve bien que la porte de
la porte des variables dans les blocs. Dans ces lan- la variable foo est globale, car elle a t dclare
gages, chaque bloc cre son propre contexte. Ce nest dans le contexte global qui est window . Elle nest
pas le cas de JavaScript. pas lie au bloc if . Regardons un exemple un peu

Developpez Magazine est une publication de Developpez.com page 4


Numro 56 fvriermars 2015
plus intressant : Ce schma rsume les rgles suivantes :
1 function fonction 1 () { la porte dune variable existe depuis sa d-
2 var a = 1 ;
3 claration, et ce jusqu la fin de la fonction
4 function fonction 2 () { dans laquelle elle a t dclare, peu importe
5 var b = 2 ; limbrication des blocs (variables declaration
6 }
hoisting) ;
7
8 if ( a = = = 1 ) { la porte dune fonction (ne pas confondre avec
9 var c = 3 ; une expression de fonction) est globale toute
10 }
11 }
la fonction dans laquelle elle a t dclare
12 (functions declaration hoisting).
13 fonction 1 () ;
Cette deuxime rgle nous montre que, contrai-
Dans cet exemple, nous avons dclar deux fonc- rement aux variables, les fonctions peuvent tre r-
tions, fonction1 et fonction2 , et nous avons frences avant leur dclaration ! Oui, exactement,
dfini trois variables, a, b et c. Pour complter cet vous pouvez invoquer function1 avant de la d-
exemple, voici un schma plus parlant qui explique clarer. Par contre, ce nest pas une bonne pra-
les diffrents contextes crs : tique. Ce nest pas parce que cest autoris
par le langage quil faut le faire.
Maintenant que nous avons vu comment les fonc-
tions sont dclares, essayons de voir comment elles
peuvent tre invoques. Cela risque dtre trs amu-
sant. . .

8 Invocation des fonctions

Nous avons tous invoqu des fonctions en JavaS- Avant dexpliquer chaque type dinvocation, pre-
cript. Mais avez-vous dj essay de comprendre ce nons quelques minutes et essayons de comprendre ce
qui se passe lorsque vous invoquez une fonction ? Il qui se passe lors dune invocation de fonction (cela
existe quatre faons dinvoquer une fonction en Ja- est vrai pour les cas 1, 2, et 3).
vaScript. Chaque type dinvocation a un effet direct
sur le contexte dexcution de cette fonction. Plus 8.1 Arguments et paramtres
prcisment, le type dinvocation agit sur le para-
mtre this pass la fonction lors de son in- Lorsquune liste darguments est fournie lors
vocation. crire du code digne dun Jedi repose sur dune invocation de fonction, ces arguments sont af-
la comprhension et la bonne matrise de ces mca- fects aux paramtres (spcifis lors de la dclara-
nismes dinvocations. tion) de la fonction, dans le mme ordre. Jusque-l
Voici les diffrents types dinvocations en JavaS- rien de bien sorcier.
cript : Maintenant, si le nombre darguments est diff-
rent de celui des paramtres, aucune erreur nest d-
1. En tant que fonction (cest le cas le plus r- clenche : JavaScript sait comment traiter ce cas :
pandu) ;
sil y a plus darguments que de paramtres,
2. En tant que mthode, ce qui permet de lier alors lexcdent est ignor ;
linvocation un objet (POO) ; sil y a moins darguments que de paramtres,
3. En tant que constructeur, ce qui permet de alors les paramtres qui nont pas dargument
crer un objet (instance) ; seront mis undefined .
4. Via apply et call (voir explication plus De plus, au moment de linvocation, deux pa-
loin). ramtres additionnels sont passs implicitement :

Developpez Magazine est une publication de Developpez.com page 5


Numro 56 fvriermars 2015
this et arguments . Autrement dit, ces deux 8.4 Les types dinvocations
paramtres sont passs la fonction qui est invo-
que, mme sils ne sont pas spcifis en tant que Maintenant que nous avons bien compris ce que
paramtres dans la dclaration. Ils sont par la suite cest this et ce quil reprsente. Passons aux dif-
disponibles dans le corps de la fonction et peuvent frents types dinvocations.
tre rfrencs comme nimporte quels autres vrais
paramtres. 8.4.a Invocation en tant que fonction
Ce type dinvocation est srement le plus utilis.
8.2 Largument arguments En effet, si une fonction nest pas invoque en tant
que mthode, constructeur ou via apply ou
Cet objet est une sorte de collection de tous les call , alors nous sommes en prsence dinvocation
arguments passs la fonction. dune fonction.
Cette invocation se produit lorsque la fonction
1 function foo () { est invoque en utilisant les parenthses et lorsque
2 console . log ( arguments . length ) ; // = > 3
3 console . log ( arguments ) ; // = > [ 1 ,2 , bar
cette fonction nest pas une proprit dun objet.
] Voici un exemple plus parlant :
4 console . log ( arguments [ 2 ]) ; // = > bar
1 function foo () { } ;
5 console . log ( arguments . filter ) ; // = >
2 foo () ; // = > this = = = window
undefined
3 var bar = function () { } ;
6 }
4 bar () ; // = > this = = = window
7
8 foo ( 1 ,2 , bar ) ;
Lorsquil est invoqu de cette manire, le
contexte dinvocation de ces fonctions est window
Mais attention, mme si cet objet possde un
, le contexte global en JavaScript.
attribut length , et permet daccder aux argu-
ments via une notation comme pour un tableau
arguments[i] , ce nest pas un tableau proprement 8.4.b Invocation en tant que mthode
parler. Vous ne pouvez pas utiliser les mthodes sp-
Lorsquune fonction est une proprit dun objet
cifiques aux tableaux comme map() ou filter() par
et que linvocation se fait en appelant cette fonction,
exemple ; autrement dit, il nest pas possible ditrer
alors la fonction est invoque en tant que mthode de
sur lobjet arguments . Cependant, il existe des
cet objet. Pour illustrer cela, tudions cet exemple :
astuces permettant de convertir ce type de collec-
tion en un tableau. Parmi ces astuces, nous pouvons 1 function foo () {
2 return this ;
citer : 3 }
4 // invocation en tant que fonction
1 // astuce # 1
5 foo () ; // = > this = = = window
2 var args = []. slice . call ( arguments , 0 ) ;
6 var bar = {
3
7 foo : foo
4 // astuce # 2
8 };
5 []. forEach . call ( arguments , function ( x ) {
9 // invocation en tant que m thode de
/ * expression * / } ) ;
bar
10 bar . foo () ; // = > this = = = bar

Nous avons dclar une fonction foo que nous


8.3 Largument this invoquons de deux manires : en tant que fonction,
puis en tant que mthode de lobjet bar . Nous
Cet argument est un peu particulier. Il repr- constatons quen effet, le contexte dinvocation re-
sente lobjet qui est associ de faon implicite tourn, reprsent par this , est diffrent dans
linvocation de la fonction. Il est aussi connu sous les deux cas. Quand invoque en tant que fonction,
le terme de contexte qui est bien connu des dve- this reprsente le contexte global window .
loppeurs habitus au dveloppement orient objet. Lorsque la fonction est invoque en tant que m-
Cependant, dans la majorit des cas, ces mmes per- thode, this reprsente lobjet hte de la mthode
sonnes pensent quen JavaScript, le mot-cl this au moment de linvocation. Cette particularit prend
reprsente linstance de la classe dans laquelle la m- tout son sens en programmation oriente objet en
thode est dfinie. Ce nest pas vrai ! JavaScript.
En JavaScript, il se trouve que le contexte repr-
sent par le paramtre this est conditionn par 8.4.c Invocation en tant que constructeur
la faon dont la fonction a t invoque, et non par
la faon dont elle a t dfinie. Cest pour cela que Un constructeur est une simple fonction, il na
ce paramtre est appel le contexte dinvocation vraiment rien de spcial. La seule diffrence rside
. dans la faon dont il va tre invoqu. Pour invoquer

Developpez Magazine est une publication de Developpez.com page 6


Numro 56 fvriermars 2015
une fonction en tant que constructeur, nous le pr- Maintenant, comment pouvons-nous faire si nous
cdons par le mot-cl new . voulons forcer un contexte dinvocation particulier ?
Invoquer une fonction en tant que constructeur Cest bien grce apply et call .
est un aspect trs intressant de JavaScript, car lors-
quun constructeur est invoqu, plusieurs choses se
8.4.d Invocation via apply() ou call()
produisent :
un nouvel objet vide est cr, le fameux para- JavaScript offre une mthode simple pour invo-
mtre this ; quer une fonction et lui spcifier explicitement un
contexte dinvocation. Nous pouvons raliser cela
cet objet est pass au constructeur. Il devient
grce deux mthodes proposes par toutes les fonc-
donc le contexte dinvocation.
tions : apply et call .
En labsence dune instruction return expli- Pourquoi voudrions-nous faire cela ? Prenons
cite dans le constructeur, cet objet est retourn par lexemple dune situation que nous rencontrons r-
le constructeur. Prenons cet exemple : gulirement en JavaScript : les actions ou call-
1 function Foo () { backs des vnements dj abords prcdem-
2 this . bar = function () { ment. Lorsque nous dclarons une fonction de call-
3 return this ; back sur un vnement, celle-ci est invoque lorsque
4 }
5 }
lvnement en question est trait par le naviga-
6 // exemple 1 teur. Cette fonction de callback est invoque avec
7 var foo = new Foo () ; le contexte de lvnement, cest un comportement
8 console . log ( foo ) ; // = > Foo par dfaut du navigateur.
9 console . log ( foo . bar () instanceof Foo ) ;
// = > true 1 function foo () {
10 2 console . log ( this ) ; // = > this = = = window
11 // exemple 2 3 console . log ( arguments ) ; // = > a , b ,
12 var foo 1 = Foo () ; c
13 console . log ( typeof foo 1 ) ; // = > undefined 4 }
14 console . log ( typeof window . bar ) ; // = > 5 var element = document . querySelector ( #
function foo ) ;
6 element . a d d E v e n t L i s t e n e r ( click ,
Nous avons dclar un constructeur Foo (no- function ( e ) {
tez la premire lettre en majuscule), celui-ci dclare 7 console . log ( this ) ; // = > element
une proprit bar , qui est une mthode retour- 8 console . log ( arguments ) ; // = > e = = =
Event
nant le contexte this (pour lexemple). 9 foo ( a , b , c ) ;
Dans un premier temps, nous invoquons ce 10 });
constructeur avec le mot-cl new et nous avons
bien un objet de type Foo qui a t cr et qui Comme lillustre le code ci-dessus, le contexte
possde bien une mthode bar . Un petit test sur dinvocation de la fonction de callback reprsente
le contexte this dans bar , nous prouve que par this est celui de window ; la callback
cest bien une instance de Foo . foo est une fonction dclare dans le contexte
Dans lexemple 2, nous avons essay de dmon- global. Elle a t invoque en tant que fonction.
trer quinvoquer un constructeur en tant que fonc- Voyons maintenant le mme code, mais cette fois-
tion, sans le mot-cl new , ne donne pas du tout le ci en utilisant la mthode call .
rsultat attendu. En effet, invoquer Foo en tant 1 function foo () {
que fonction, excute simplement le code de cette 2 console . log ( this ) ; // = > this = = =
fonction, ce qui provoque la cration de la proprit element
3
bar dans lobjet hte dans lequel Foo a console . log ( arguments ) ; // = > a , b ,
c
t invoque. Cet objet reprsent par this dans 4 }
Foo est bien videmment window , puisque 5 var element = document . querySelector ( #
la fonction Foo a t dclare dans le contexte foo ) ;
6 element . a d d E v e n t L i s t e n e r ( click ,
global de JavaScript. Invoquer un constructeur en function ( e ) {
omettant le mot-cl new est donc risqu, car peut 7 console . log ( this ) ; // = > element
potentiellement modifier dautres objets que ceux 8 console . log ( arguments ) ; // = > e = = =
dsirs. Event
9 foo . call ( element , a , b , c ) ;
Jusque-l, nous avons vu que le type dinvoca- 10 });
tion dune fonction agit directement sur le contexte
dinvocation reprsent par le paramtre implicite En invoquant une fonction ou mthode
this . Pour les mthodes, cest lobjet hte ; pour les avec call , nous passons un premier paramtre
fonctions dclares dans le contexte global, cest le qui reprsente le contexte dinvocation. Dans notre
window ; et pour les constructeurs cest linstance exemple, ce contexte est llment DOM qui nous
du nouvel objet cr. intresse. En plus du contexte dinvocation, nous

Developpez Magazine est une publication de Developpez.com page 7


Numro 56 fvriermars 2015
avons aussi pass une liste de paramtres la fonc- 8.4.e Quelle mthode utiliser ?
tion foo .
Cela dpend de votre cas dusage, et plus prcis-
1 function foo () { ment de comment vous devez grer vos paramtres.
2 console . log ( this ) ; // = > this = = = Si vous avez un ensemble de variables que vous devez
element
3 console . log ( arguments ) ; // = > a , b , c
passer en tant que paramtres, call serait idale.
4 } Mais si vous avez dj votre liste de variables sous
5 forme de tableau (par exemple, arguments), apply
6 var element = document . querySelector ( # est plus approprie. Prenons par exemple la m-
foo ) ;
7 element . a d d E v e n t L i s t e n e r ( click , thode Math.max(n1, n2, n3. . . ) de JavaScript : cette
function ( e ) { mthode calcule le maximum dune liste de valeurs
8 quelle prend en paramtres.
9 console . log ( this ) ; // = > element
10 console . log ( arguments ) ; // = > e = = = 1 Math . max ( 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ) ;
Event // = > 9
11
12 foo . apply ( element , [ a , b , c ]) ; Supposons que vous vouliez calculer le maximum
13 }); (ou le minimum) dune suite de valeurs dont vous ne
connaissez pas la longueur :
Avec apply , cest quasiment la mme chose :
1 function max () {
nous passons galement le contexte dinvocation en 2 return ( arguments . length = = = 0 ) ? 0 :
premier paramtre. Mais contrairement call , la Math . max . apply ( Math , arguments ) ;
mthode apply prend en second paramtre un 3 }
4 max ( 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ) ; // = >
tableau reprsentant la liste des arguments. 9
Voici un autre exemple plus intressant : 5 max ( 3 , 8 , 3 2 , 2 , 9 8 ) ; // = > 9 8
6 max ( 4 2 , 0 ) ; // = > 4 2
1 function forevery ( list , callback ) { 7 max () ; // = > 0
2 for ( var i = 0 ; i < list . length ; i + =
1) { Dans cet exemple, je viens de dclarer une fonc-
3 callback . call ( list , i ) ; tion nomme max qui calcule le maximum dune
4 };
5 } suite de nombres passs en paramtres. Sil ny a
6 forevery ([ a , 4 2 , false , { } ] , function ( aucun paramtre, le rsultat est zro. Je me repose
index ) { donc sur le paramtre implicite arguments pour
7 console . log ( " index = " , index ) ; raliser cette vrification. Vous comprenez tout de
8 console . log ( " this = " , this ) ;
9 console . log ( " this [ index ] = " , this [ suite quutiliser apply a tout son sens dans cet
index ] ) ; exemple. Veuillez noter galement que jai pass
10 console . log ( " this [ index + 1 ] = " , Math en tant que contexte dinvocation la m-
this [ index + 1 ] ) ;
thode Math.max() : je ntais pas oblig den
11 console . log ( " this [ index - 1 ] = " ,
this [ index - 1 ] ) ; spcifier un, mais cest plus sr comme cela !
12
13 /*
8.5 Un mot sur bind()
14 * index = 0
15 * this = [" a " , 4 2 , false , Object ] En JavaScript, il existe une autre faon de
16 * this [ index ] = a
17 * this [ index + 1 ] = 42 contrler le contexte dinvocation dune fonction.
18 * this [ index - 1 ] = undefined Contrairement call et apply , ce contrle
19 * est fait au moment de la dclaration de la fonction,
20 * index = 1
et non linvocation.
21 * this = [" a " , 4 2 , false , Object ]
22 * this [ index ] = 42 Ce contrle est rendu possible grce la m-
23 * this [ index + 1 ] = false thode bind(arg) permettant de transformer le
24 * this [ index - 1 ] = a contexte dinvocation dune fonction. Jetons un oeil
25 *
26 * etc .
lexemple suivant :
27 */ 1 var Foo = function () {
28 }); 2 this . counter = 0 ;
3 this . inc = function () {
Dans cet exemple, nous avons dclar une fonc- 4 this . counter + = 1 ;
tion forevery qui permet ditrer sur une liste 5 console . log ( this ) ;
6 };
dlments. Cette fonction prend en second para- 7 };
mtre une fonction de callback qui sera invoque 8
pour chaque lment parcouru, avec le contexte de 9 var foo = new Foo () ;
10
la liste (nous aurions pu spcifier un autre contexte), var element = document . querySelector ( #
foo ) ;
et nous donne en paramtre lindex de llment cou- 11
rant. 12 // cas # 1

Developpez Magazine est une publication de Developpez.com page 8


Numro 56 fvriermars 2015
13 element . a d d E v e n t L i s t e n e r ( click , foo . Dans un premier temps (cas #1), nous atta-
inc ) ; // = > this = = = element chons la mthode foo.inc en tant quaction sur
14
15 // cas # 2
le clic. Mais l, problme ! En effet, lattribut
16 element . a d d E v e n t L i s t e n e r ( click , counter nest pas rsolu ; tout simplement puisque
function () { foo . inc () ; } ) ; // = > this le contexte dinvocation de foo.inc nest pas
= = = element linstance foo , mais element (rappelez-vous
17
18 // cas # 3 lexemple cit plus haut avec l apply ).
19 element . a d d E v e n t L i s t e n e r ( click , foo . Pour rsoudre ce problme, nous aurions pu pas-
inc . bind ( foo ) ) ; // = > this = = = foo ser par une fonction anonyme (cas #2) dans la-
quelle nous aurions invoqu la mthode foo.inc()
Nous avons dclar un constructeur Foo . Ce . Mais pourquoi dclarer une fonction juste pour in-
dernier possde une mthode inc , qui permet voquer une autre ? Il y a plus simple, nous utilisons
dincrmenter un compteur counter . Ensuite, la mthode bind en prcisant foo comme
nous attachons un vnement sur un lment DOM contexte dinvocation (cas #3). Mais rappelez-vous
(disons, un bouton par exemple). chaque clic, nous que bind ninvoque pas la fonction en question,
souhaitons incrmenter le compteur de Foo . elle modifie simplement son contexte dinvocation.

9 Rsum

Dans ce premier pisode, nous avons tudi en que vous tes.


dtail un des aspects fascinants de JavaScript : Ja-
Voil, nous avons atteint la fin de ce premier pi-
vaScript en tant que langage fonctionnel. Jespre
sode ; rendez-vous pour le second pisode dans lequel
quen comprenant comment les fonctions sont trai-
nous allons tenter de percer le mystre des ferme-
tes en interne par JavaScript, cela vous permettra
tures en JavaScript, connu sous le nom de closures
de changer votre faon dcrire du code JavaScript,
.
en passant dun banal code qui fonctionne un
code qui fonctionne, certes, mais digne dun vrai Jedi Que la force soit avec vous. . .

Retrouvez larticle de Wassim Chegham en ligne : lien 1

Developpez Magazine est une publication de Developpez.com page 9


Numro 56 fvriermars 2015
Tutoriel La Poste IDentit Numrique -
Intgration dune API dauthentification
avec Node.js
LInternet tant aujourdhui accessible par tous et offrant de plus en plus de services, se pose le problme
de la scurit de linformation et plus particulirement des donnes personnelles mais galement de la
ralit des internautes avec qui nous pouvons changer. La gestion de lidentit numrique devient un
enjeu majeur. La Poste propose une solution scurise pour les internautes avec son systme de compte
vrifi en face face : LIDentit Numrique de La Poste.
Dans ce tutoriel, nous allons voir ce quest cette API, quoi elle va servir, pour quoi sen servir, et
comment lintgrer dans votre application pour doper vos ventes et rassurer vos interlocuteurs.

1 Introduction de La Poste et du langage utilis

1.1 Histoire de La Poste 1.2 Quest-ce que lIDentit Numrique ?


LIDentit Numrique peut tre dfinie comme
Socit anonyme capitaux publics depuis le un lien technologique entre une entit relle (per-
1er mars 2010, La Poste est un modle original de sonne, organisme ou entreprise) et une entit vir-
groupe structur autour de cinq branches : Services- tuelle (sa ou ses reprsentations numriques).
Courrier-Colis, La Banque Postale, Rseau La Poste, Le dveloppement et lvolution des moyens de
GeoPost, Numrique. communication, au travers notamment de la multi-
Le Groupe est prsent dans plus de 40 pays sur plication des blogs et des rseaux sociaux, changent
4 continents. le rapport de lindividu autrui. Ainsi, lIDentit
Numrique permet lidentification de lindividu en
Chaque jour, les 17 000 points de contact de La ligne et la mise en relation de celui-ci avec cet en-
Poste, soit le 1er rseau commercial de proximit de semble de communauts virtuelles quest Internet.
France, accueillent 1,7 million de clients. Ds lors, lIDentit Numrique peut tre divise
La Poste distribue 25 milliards dobjets par an en trois catgories :
dans le monde (lettres, imprims publicitaires et co-
lidentit dclarative, qui se rfre aux don-
lis), 6 jours par semaine.
nes saisies par lutilisateur comme son nom,
En 2013, le Groupe La Poste a ralis un chiffre sa date de naissance, ou autres informations
daffaires de 22,08 milliards deuros, dont 17 % personnelles directement renseignes par lin-
linternational, et emploie plus de 266 000 collabo- dividu ;
rateurs. lidentit agissante, qui est indirectement ren-
Le Groupe La Poste, dans son plan stratgique seigne par les activits de lutilisateur sur la
La Poste 2020 : Conqurir lavenir sest donn toile ;
pour objectif dacclrer le dveloppement de ses lidentit calcule, qui rsulte dune analyse de
cinq branches et de conqurir de nouveaux terri- lidentit agissante par le systme, comme le
toires. nombre de communauts virtuelles dans les-
La Poste met le facteur humain et la confiance quelles lindividu volue ou bien son nombre
au cur de la relation avec ses clients. Grce la damis sur les rseaux sociaux.
convergence de ses rseaux, prsente pour tous, par-
Le dcalage ou du moins les divergences qui
tout et tous les jours, elle accompagne ses clients
peuvent subsister entre lidentit dclarative et
pour leur simplifier lavenir.
lidentit agissante soulvent une question majeure.
La Poste est ainsi prestataire de services nu- Qui est vraiment lindividu auquel nous avons affaire
mriques via ses offres en ligne (MonTimbren- sur la toile ?
ligne, Lettre recommande lectronique. . . ) dispo- Enfin, Internet tant accessible par tous et of-
nibles sur laposte.fr, ses applications mobiles, les r- frant de plus en plus de services, se pose le problme
seaux sociaux, mais aussi son webmail laposte.net, de la scurit de linformation et plus particulire-
son coffre-fort lectronique Digiposte et ses filiales ment des donnes personnelles. La gestion de liden-
BtoB : Mediapost Communication et Docapost. tit numrique devient alors un enjeu majeur.

Developpez Magazine est une publication de Developpez.com page 10


Numro 56 fvriermars 2015
Voil le principe du lIDentit Numrique, pour sur ses donnes, La Poste les scurise et ne trace pas
plus dinformations, voici le lien Wikipdia : lien 2. ses actions.
Ainsi, La Poste propose une solution scurise Grce ce service, La Poste donne linternaute
pour les internautes avec son systme de compte v- la possibilit daccder plus de services scuriss
rifi en face face. Pour obtenir une IDentit Num- comme la rception des lettres recommandes en
rique de La Poste, linternaute doit crer un compte ligne en toute lgalit.
(lien 3) et faire vrifier son identit par un postier
afin dactiver ce compte (un postier est un agent 1.3 Rappel du langage
asserment). En utilisant son IDentit Numrique
pour sauthentifier sur un site partenaire, il choisit Le langage utilis durant ce tutoriel est Node.js.
de partager ses donnes vrifies avec ce site et at- Vous pourrez rviser vos bases sur la section Dve-
teste ainsi que sa relle identit et que son adresse loppez (lien 4) prvue cet effet : Cours et tutoriels
postale ont t vrifies. Linternaute garde la main Node.js (lien 5)

2 Dcouverte de lAPI et de ses intrts

2.1 Description de lAPI Aujourdhui, lIDentit Numrique permet de ga-


gner du temps puisque son dtenteur peut :
LIDentit Numrique de La Poste : une identit
vrifie en face face par le facteur au domicile des
recevoir des lettres recommandes en ligne
internautes.
(sous rserve quelles aient t expdies de-
Cest un service permettant son dtenteur de
puis le site boutiqueducourrier.laposte.fr) ;
prouver qui il est grce lidentifiant et au mot de
passe quil a choisis lors de son inscription, sans d- crer et activer des contrats de procurations
voiler son identit aux autres internautes. en trois clics pour permettre un tiers de r-
ceptionner des courriers ou des colis sa place
2.1.a Comment a marche ? (monespaceclient.laposte.fr).
Il suffit dutiliser le bouton de connexion La afficher un badge IDentit vrifie par La
Poste Connect intgr par les applications parte- Poste sur son profil sur site collaboratif pour
naires. donner encore plus de confiance aux inter-
nautes qui souhaitent changer avec lui.
2.2 Usages
Le dtenteur dun compte peut galement do-
Lutilit de ce service est donc de fournir un iden-
per ses ventes sur des sites dchanges et de loca-
tifiant numrique qui permet dattester de son iden-
tion entre particuliers (prtachanger.fr et buzzcar)
tit sur le web !
en rassurant ses interlocuteurs. Un badge saffiche
sur son profil attestant que son identit a t vri-
2.2.a Quels sont les usages actuels ? fie par La Poste.
Le produit tant encore en bta-test, les usages Pour plus dexplications, nous vous invitons vi-
sont encore peu dvelopps. sionner la vido : lien 6

3 Intgration de lAPI
3.1 Cls de dveloppement
Pour crer une application cliente, il vous faudra les cls de dveloppement qui vous seront donnes
aprs votre inscription et qui ressembleront par exemple a :
CONSUMER_KEY : _kdvsazaaphmytp4gzoi8jdbal02pfgfh5l0w12iud
CONSUMER_SECRET : _vofna5navs92smal88obo2c2s4mah1k99i5r1xls
*cls factices

3.2 Utilisation dune bibliothque cliente OAuth2

Il y a de nombreux clients OAuth2 disponibles ponible sur GitHub ( lien 7 ).


pour la plupart des langages de programmation. La bibliothque simple-oauth2 fournit un en-
Afin de ne pas rinventer la roue, nous allons uti- semble de fonctionnalits utiles la communication
liser une bibliothque Node.js, simple-oauth2, dis- avec les serveurs didentifications pour accder aux

Developpez Magazine est une publication de Developpez.com page 11


Numro 56 fvriermars 2015
services de lAPI Anywhere. Il sagit notamment de 3
rendre transparente lutilisation du protocole dau- 4 var oauth 2 = require ( simple - oauth 2 ) ( {
5 clientID : " VOTRE CONSUMER_KEY ICI " ,
torisation OAuth2, et de se concentrer sur la logique 6 clientSecret : " VOTRE C O NS UM E R_ SE C RE T
du service fournir aux utilisateurs finaux. ICI " ,
En supprimant la ncessit de grer les je- 7 site : { { base_url } } ,
tons daccs manuellement, simple-oauth2 simpli- 8 a u t h o r i z a t i o n P a t h : / oauth / v 2 /
authorize ,
fie normment le processus dauthentification et 9 tokenPath : / oauth / v 2
dautorisation des utilisateurs de notre application 10 });
cliente. 11
simple-oauth2 est dvelopp en Node.js et peut 12 // Authorization uri definition
13 var a u t h o r i z a t i o n _ u r i = oauth 2 . authCode .
tre intgr aux framework Node.js les plus courants. authorizeURL ( {
Notre projet de dmonstration utilisera aussi le 14 redirect_uri : http :// localhost : 3 0 0 0 /
framework javascript Express pour faciliter la ges- callback ,
15
tion des routes : lien 8. scope : openid email phone profile ,
16 state : 6 ( ef #) !
Toute la documentation pour son installation et 17 });
son utilisation est disponible, en anglais : lien 9. 18
Afin de ne pas se focaliser sur une plateforme d- 19 // Initial page redirecting to La Poste
20 app . get ( / auth , function ( req , res ) {
die, ce document utilise la notation base_url pour 21 res . redirect ( a u t h o r i z a t i o n _ u r i ) ;
rfrencer le serveur IDN cible. Par exemple, pour 22 });
cibler la plateforme de recette, base_url est gal 23
ladresse qui vous sera envoye par e-mail ds votre 24 // Callback service parsing the
authorization token and asking for
demande dadhsion au service IDN soumise, dans the access token
notre cas : lien 10. 25 app . get ( / callback , function ( req , res )
{
26 var code = req . query . code ;
3.3 Installation et initialisation 27 console . log ( / callback ) ;
28 oauth 2 . authCode . getToken ( {
Vous pouvez installer facilement les dpendances 29 code : code ,
via NPM : 30 redirect_uri : http :// localhost : 3 0 0 0
Bibliothque cliente OAuth2 : npm install / callback
simple-oauth2 31 } , saveToken ) ;
32
Framework javascript : npm install express 33 function saveToken ( error , result ) {
34 if ( error ) { console . log ( Access
Token Error , error . message ) ; }
3.4 Authentification et autorisation 35 token = oauth 2 . accessToken . create (
On peut alors utiliser simple-oauth2 avec pour result ) ;
36 console . log ( " token : " + token . token
configuration minimum, la cl et le secret de lappli- . access_token ) ;
cation partenaire (CONSUMER_KEY et CONSU- 37 oauth 2 . api ( GET , / me , {
MER_SECRET). access_token : token . token .
access_token } , function ( err ,
Pour ce qui concerne lauthentification et lauto- data ) {
risation, IDN possde la fonctionnalit SSO OAuth2. 38 if ( err ) { console . log ( err ) ; res .
Il est alors possible de dlguer lauthentification de send ( err ) ; return ; }
lutilisateur au serveur IDN, puis dutiliser la session 39 console . log ( data ) ;
40 res . send ( data ) ;
tablie. 41 });
Concernant notre application nous allons donc 42 }
commencer par crer un fichier app.js contenant le 43 });
code ncessaire lidentification. Sa mission est de 44
45 app . get ( / , function ( req , res ) {
rediriger lutilisateur vers le formulaire didentifica- 46 res . send ( <a href = "/ auth " >
tion La Poste, le serveur dautorisation, puis, pour la Iden tifica tion </ a > ) ;
dmonstration, dafficher les donnes de type : nom, 47 } ) ;
prnom, tlphone. . . 48
49 app . listen ( 3 0 0 0 ) ;
Il sagit donc de lapplication cliente. Si La Poste 50
autorise laccs, le serveur dautorisation envoie un 51 console . log ( Express server started on
code dautorisation notre application cliente. Le port 3 0 0 0 ) ;
code est ensuite chang par un jeton daccs. En-
fin, notre application utilise ce jeton daccs pour Pour cette dmonstration, le jeton daccs est af-
accder aux donnes du profil de lutilisateur par le fich lutilisateur. Dans une application en pro-
serveur de ressources. duction, lutilisateur ne doit pas avoir accs ce
1 var express = require ( express ) , jeton, vous de le stocker. La Poste envoie gale-
2 app = express () ; ment dautres informations en dehors du jeton dac-

Developpez Magazine est une publication de Developpez.com page 12


Numro 56 fvriermars 2015
cs comme la dure de validit du jeton daccs. navigateur avec le port 3000 (exemple : http ://lo-
Pour lancer lapplication : node app.js calhost :3000). Un simple clic vous redirigera vers
Si vous avez correctement configur les variables le site didentification de La Poste. Une fois iden-
redirect_uri, clientID, clientSecret et site, vous de- tifi, vous serez redirig vers votre application qui
vez voir le lien identification si vous ouvrez votre affichera simplement les donnes de votre compte.

4 Liens utiles

Le site de la Poste pour trouver toutes les infos cation sur le compte Github de BeMyApp
utiles sur comment intgrer votre API : Dve- France : lien 13 ; .
loppeurs IDN La Poste (lien 11) ;
Utilisez le hashtag #LaPostedev sur Twitter
Le site Developpez.com pour les tutos pour changer avec La Poste sur ce service.
Node.js : lien 12 ;
Retrouvez le code source de lintgration de Vous pouvez contacter La Poste pour toutes vos
lAPI IDentit Numrique dans une appli- questions techniques via Contact : lien 14

Retrouvez larticle de Jrmie Robert en ligne : lien 15

Developpez Magazine est une publication de Developpez.com page 13


Numro 56 fvriermars 2015
CSS
Les derniers tutoriels et articles

CSS - Icne de tlchargement anime


Voici une nouvelle astuce utilise en CSS pour crer une icne de tlchargement anime. Dans ce tutoriel,
vous mettrez en uvre des techniques CSS plutt simples dans lesquelles vos visiteurs pourront profiter
dune icne de tlchargement anime.

1 Traduction

Ce tutoriel est la traduction la plus fidle pos- a animated download icon in CSS : lien 16.
sible du tutoriel original de Paul Underwood, Create

2 Introduction

Lorsque vous faites un appel une action sur une


page Web, vous voulez normalement que les visiteurs
se dirigent vers le bas pour sinscrire votre newslet-
ter ou tlcharger une partie de votre contenu. Cest
lappel ces actions que vous devriez essayer de faire
ressortir afin que les gens puissent se concentrer sur
les endroits de votre site Internet.
Dans ce tutoriel, nous allons crer une icne de Visitez la page de dmo pour voir lanimation :
tlchargement CSS anime : lien 17

3 Le code HTML

Dabord, nous crons le code HTML pour licne 1 <a href = " http :// www . example . com / download
de tlchargement. Nous allons avoir besoin dun - content . html " class = " download - icon "
>
lien, et lintrieur de cet espace, dune zone pour 2 < span > </ span >
licne de tlchargement. 3 Download
4 </ a >

4 Modliser licne de tlchargement

Pour commencer, nous adapterons le texte au bas gulaire utilisant les proprits width et height
de licne. Ce texte est utilis pour expliquer ce que , puis nous ajoutons une bordure cet lment.
cet appel action sera. En plaant un border-top transparent, cela va
1 a . download - icon
masquer la bordure suprieure de la vue, crant le
2 { style visuel de la bote de tlchargement.
3 color : # 3 3 3 ; 1 . download - icon span
4 font - size : 1 . 3 rem ; 2 {
5 font - weight : bold ; 3 display : block ;
6 text - decoration : none ; 4 cursor : pointer ;
7 } 5 position : relative ;
6 width : 6 0 px ;
Ensuite, nous pouvons styliser licne en modi- 7 height : 3 0 px ;
fiant la balise span pour crer une bote rectan- 8 margin : auto ;

Developpez Magazine est une publication de Developpez.com page 14


Numro 56 fvriermars 2015
9 border : 1 0 px solid # 3 3 3 ; licne et crez la ligne en utilisant les proprits
10 border - top : transparent ; width et height suivies dune couleur de fond.
11 }
Sur llment after , nous pouvons alors crer
Pour crer la flche sur licne de tlcharge- un triangle en utilisant une astuce en CSS en crant
ment, nous devons utiliser les slecteurs CSS(Note une bordure et en rglant celle de gauche et de droite
du traducteur : vous pouvez galement faire une re- transparent .
cherche sur Internet dans le document de W3C, par 1 a . download - icon : hover span : before ,
exemple.) (lien 18) pour crer un nouvel lment 2 a . download - icon : hover span : after
3 {
laide de :before et :after . Ceux-ci devront 4 animation : bounce . 5 s infinite
tre positionns en absolu afin que nous puissions alternate ;
rgler la position exacte de la flche. 5 - webkit - animation : bounce . 5 s
infinite alternate ;
1 . download - icon span : before , 6 }
2 . download - icon span : after 7
3 { 8 a . download - icon : hover span : before {
4 content : ; 9 left : 1 5 px ;
5 display : block ; 10 top : -9 px ;
6 position : absolute ; 11 width : 1 0 px ;
7 } 12 height : 1 0 px ;
13 background : # 3 3 3 ;
Sur lvnement survol de download-icon , 14 }
nous allons crer la flche et ajouter une animation 15 a . download - icon : hover span : after
16 {
dun effet de rebond. Utilisez la proprit anima- 17 left : 1 0 px ;
tion pour dfinir lanimation de rebond, ajoutez la 18 border - left : 1 0 px solid transparent ;
dure de lanimation souhaite et dfinissez lanima- 19 border - right : 1 0 px solid transparent
tion en boucle infinie. ;
20 border - top : 1 0 px solid # 3 3 3 ;
Sur llment before , nous allons crer la ligne 21 }
de la flche ; commencez par vous positionner sur

5 Lanimation de rebond

Enfin, nous crons lanimation de rebond. Pour 7 transform : translateY ( 0 ) ;


ce faire, nous avons juste besoin de changer la posi- 8 }
9 }
tion de llment de quelques pixels. Pour cela, nous 10
utilisons la proprit transform pour modifier 11 @ - webkit - keyframes bounce {
la position translateY -10px. Cela va dplacer 12 from {
llment de 10 pixels vers le haut ; la fin de lani- 13 - webkit - transform : translateY ( -1 0 px )
;
mation, nous devrons changer le positionnement 0 14 }
pixel. 15
1 @keyframes bounce { 16 to {
2 from { 17 - webkit - transform : translateY ( 0 ) ;
3 transform : translateY ( -1 0 px ) ; 18 }
4 } 19 }
5
6 to { Dmo : lien 19

6 Conclusion

Nous avons vu, dans ce tutoriel, comment crer Nhsitez pas faire dautres icnes animes et
simplement une icne de tlchargement anime. les partager !

7 Liens

Vous pouvez consulter la dmonstration pour Nhsitez pas consulter nos autres
avoir un aperu du rendu dans un navigateur : Nhsitez pas consulter nos autres tutoriels CSS
lien 20 pour amliorer le visuel de vos sites : lien 21.

Retrouvez larticle de Paul Underwood traduit par Danick Ct-Martel en ligne : lien 22

Developpez Magazine est une publication de Developpez.com page 15


Numro 56 fvriermars 2015
Delphi
Les derniers tutoriels et articles

Comment implmenter un Singleton avec


Delphi 7
Le patron de conception Singleton est un modle visant limiter linstanciation dune classe un
seul et unique objet. Il est couramment utilis pour coordonner des oprations dans un systme.

1 Implmentation standard du Singleton

Limplmentation standard du Singleton consiste 5 type


en une classe grant elle-mme son unique instance. 6 TMyObject = class
7 class var Instance : TMyObject ;
Cela est ralis au moyen dun champ priv statique 8 class function GetInstance :
contenant linstance et dune mthode publique sta- TMyObject ;
tique qui cre linstance prive si elle nexiste pas 9 end ;
puis la retourne. 10
11 imp lement ation
En voici la reprsentation UML. 12
13 function TMyObject . GetInstance :
TMyObject ;
14 begin
15 if Instance = nil then
16 Instance : = TMyObject . Create ;
17 Result : = Instance ;
18 end ;

Sauf quavec les versions plus anciennes de Del-


phi, les champs statiques ne sont pas autoriss et
Cela ne pose aucun problme sur les dernires provoquent une erreur de compilation.
versions de Delphi.
Il existe dailleurs plusieurs discussions sur le su-
jet.
En voici une en particulier :
Variables globales section implmentation et ob-
jet singleton : lien 23.
Et voici, le code suggr par Paul TOTH dans
cette discussion :
1 unit MonUnit ;
2
3 interface
4 Il va donc falloir stocker linstance ailleurs.

2 Utilisation dune variable globale

Puisque linstance ne peut pas tre stocke dans ter une aide en ligne.
la classe. La seule option qui reste consiste la pla- 1 unit G l o b a l V a r i a b l e S i n g l e t o n ;
cer ailleurs dans lunit. Il faut juste savoir o. 2
Le choix le plus simple rside dans lutilisation 3 interface
4
dune variable globale accessible de nimporte o. 5 type
Voici par exemple un singleton cens contenir des 6
informations sur une configuration pour se connec- 7 T O n l i n e H e l p C o n f i g u r a t i o n = class

Developpez Magazine est une publication de Developpez.com page 16


Numro 56 fvriermars 2015
8 private T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
9 FUri : String ; 28
10 FOffer : String ; 29 finalization
11 FVersion : String ; 30 FreeAndNil ( O n l i n e H e l p C o n f i g u r a t i o n ) ;
12 public 31
13 property Uri : String read FUri 32 end .
write FUri ;
14 property Offer : String read FOffer Lavantage de cette mthode est quelle est vrai-
write FOffer ;
ment trs simple mettre en uvre. Elle sac-
15 property Version : String read
FVersion write FVersion ; compagne malheureusement de dfauts non ngli-
16 end ; geables :
17
18 var lobjet est public et peut donc potentiellement
19 OnlineHelpConfiguration : tre libr provoquant une violation daccs
TOnlineHelpConfiguration ;
20 lors de sa prochaine utilisation ;
21 imp lement ation
le type est accessible directement, ce qui im-
22 uses
23 SysUtils // FreeAndNil plique que rien nempche la cration dune
24 ; autre instance ;
25
26 ini tializ ation lobjet est cr mme si on nen a jamais be-
27 OnlineHelpConfiguration := soin.

3 Utilisation dune fonction globale

Afin de rgler le problme daccessibilit et de 31 HiddenOnlineHelpConfiguration :=


chargement inutile, on peut confier la cration de TOnlineHelpConfiguration .
Create ;
lobjet une fonction qui vrifiera si lobjet est ins- 32
tanci avant de le crer et qui fournira linstance en 33 Result : =
retour. HiddenOnlineHelpConfiguration ;
34 end ;
1 unit G l o b a l F u n c t i o n S i n g l e t o n ; 35
2 36
3 interface 37 ini tializ ation
4 38
5 type 39 finalization
6 40 FreeAndNil (
7 T O n l i n e H e l p C o n f i g u r a t i o n = class HiddenOnlineHelpConfiguration );
8 private 41
9 FUri : String ; 42 end .
10 FOffer : String ;
11 FVersion : String ; Cest mieux, la fonction permet dinstancier lob-
12 public
13 property Uri : String read FUri jet uniquement lorsque cest ncessaire bien que cela
write FUri ; nempche en rien linstanciation via le constructeur
14 property Offer : String read FOffer de la classe directement.
write FOffer ;
premire vue, lobjet dclar dans la partie im-
15 property Version : String read
FVersion write FVersion ; plmentation ne semble pas accessible, mais cest
16 end ; une fausse impression, car la fonction renvoie un
17 pointeur sur cet objet partir duquel sa libration
18 function O n l i n e H e l p C o n f i g u r a t i o n :
TOnlineHelpConfiguration ;
est toujours possible. En voyant la manire dont
19 est cre linstance dobjet, on est tent de penser
20 imp lement ation que sa libration ne pose pas de problme, car il
21 uses sera recr au prochain appel. Le problme cest que
22 SysUtils // FreeAndNil
23 ;
lobjet pointe toujours sur une adresse en mmoire
24 bien quelle ne soit plus accessible et il est toujours
25 var considr comme assign alors quil ne lest plus. La
26 HiddenOnlineHelpConfiguration : violation daccs est invitable. Cette mthode pose
TOnlineHelpConfiguration ;
27 encore problme.
28 function O n l i n e H e l p C o n f i g u r a t i o n : Notez que lon peut remplacer la fonction globale
TOnlineHelpConfiguration ; par une approche un peu plus oriente objet via une
29
30
begin
if not ( Assigned (
mthode statique. Le rsultat sera rigoureusement
HiddenOnlineHelpConfiguration )) identique. Le code ci-dessous prsente uniquement
then les changements apports (le reste ne bouge pas).

Developpez Magazine est une publication de Developpez.com page 17


Numro 56 fvriermars 2015
1 // Dans la partie interface 14
2 T O n l i n e H e l p C o n f i g u r a t i o n = class 15 // Dans la partie impl mentation
3 private 16 class function T O n l i n e H e l p C o n f i g u r a t i o n .
4 FUri : String ; GetInstance :
5 FOffer : String ; TOnlineHelpConfiguration ;
6 FVersion : String ; 17 begin
7 public 18 if not ( Assigned (
8 class function GetInstance : HiddenOnlineHelpConfiguration ))
TOnlineHelpConfiguration ; then
9 19 HiddenOnlineHelpConfiguration :=
10 property Uri : String read FUri write TOnlineHelpConfiguration .
FUri ; Create ;
11 property Offer : String read FOffer 20
write FOffer ; 21 Result : =
12 property Version : String read HiddenOnlineHelpConfiguration ;
FVersion write FVersion ; 22 end ;
13 end ;

4 Utilisation de lhritage

Toute classe dans Delphi hrite obligatoirement 24 SysUtils // FreeAndNil


de la classe anctre TObject. Cette classe an- 25 ;
26
ctre possde deux mthodes virtuelles en particu- 27 var
lier que lon peut surcharger pour crer ou librer 28 HiddenOnlineHelpConfiguration :
une instance. Il sagit des mthodes NewInstance et TObject ;
FreeInstance. Montrer le code source de TObject ne 29 M u s t F r e e I n s t a n c e : Boolean ;
30
ferait que compliquer inutilement ce tutoriel. Nan- 31
moins, sa lecture est intressante, car elle permet de 32 { TOnlineHelpConfiguration }
constater que NewInstance fait appel InitInstance 33
pour rechercher son pointeur interne dans le gestion- 34 class function T O n l i n e H e l p C o n f i g u r a t i o n .
NewInstance : TObject ;
naire de mmoire, crer une instance si la recherche 35 begin
est infructueuse ou bien retourner ce pointeur sil a 36 if not ( Assigned (
t trouv. Elle fait donc exactement ce que nous HiddenOnlineHelpConfiguration ))
voulons. En plus elle est statique, ce qui nous rap- then
37 HiddenOnlineHelpConfiguration :=
proche un peu plus de limplmentation standard du inherited NewInstance ;
singleton. FreeInstance libre la mmoire alloue, ce 38
qui implique que si nous voulons garder toujours la 39 Result : =
mme instance, il faudra appeler cette mthode uni- HiddenOnlineHelpConfiguration ;
40 end ;
quement lorsque cela sera rellement ncessaire. 41
42 procedure T O n l i n e H e l p C o n f i g u r a t i o n .
1 unit M a n a g e d B y C l a s s S i n g l e t o n ; FreeInstance ;
2 43 begin
3 interface 44 if ( M u s t F r e e I n s t a n c e ) then
4 45 inherited FreeInstance ;
5 type 46 end ;
6 47
7 T O n l i n e H e l p C o n f i g u r a t i o n = class 48 ini tializ ation
8 private 49 M u s t F r e e I n s t a n c e : = False ;
9 FUri : String ; 50
10 FOffer : String ; 51 finalization
11 FVersion : String ; 52 M u s t F r e e I n s t a n c e : = True ;
12 public 53 FreeAndNil (
13 class function NewInstance : TObject HiddenOnlineHelpConfiguration );
; override ; 54
14 procedure FreeInstance ; override ; 55 end .
15
16 property Uri : String read FUri
write FUri ; Ici, nous constatons que la classe peut toujours
17 property Offer : String read FOffer tre instancie directement, la diffrence rside dans
write FOffer ;
18 property Version : String read le fait que la construction de lobjet va faire ap-
FVersion write FVersion ; pel la mthode NewInstance et donc rechercher en
19 mmoire sil ny a pas dj un pointeur sur lobjet
20
21
end ;
et cela si notre propre objet cach nest pas initia-
22 imp lement ation lis. Sa libration va faire de mme avec la mthode
23 uses FreeInstance. Sauf que la vritable libration nest

Developpez Magazine est une publication de Developpez.com page 18


Numro 56 fvriermars 2015
effectue que lorsque le boolen (inaccessible de lex- donc un objet qui est cr uniquement lorsque nous
trieur, car dans la partie implmentation) passera en avons besoin et qui ne sera pas libr avant la
Vrai , cest--dire lorsque lunit sera dchar- fermeture du programme. Mission accomplie.
ge (lorsque le programme sarrtera). Nous avons

5 Singleton avanc

Pour des raisons de praticit, on peut choisir de 42 function GetUri : String ;


publier un contrat la place dune classe. En effet, en 43 function GetOffer : String ;
44 function GetVersion : String ;
fournissant une interface, on libre le consommateur 45
du singleton dune contrainte : celui-ci peut ignorer 46 procedure SetUri ( Const Value :
quil sagit dun singleton et lutiliser comme nim- String ) ;
porte quel objet (avec un Create, un try. . . finally et 47 procedure SetOffer ( Const Value :
String ) ;
un Free). On na pas se soucier de la libration 48 procedure SetVersion ( Const Value :
dune interface. String ) ;
49
1 unit A d v a n c e d S i n g l e t o n ; 50 property Uri : String read GetUri
2 write SetUri ;
3 interface 51 property Offer : String read
4 GetOffer write SetOffer ;
5 type 52 property Version : String read
6 GetVersion write SetVersion ;
7 ISingleton = interface 53 end ;
8 [ { 3 6 7 7 1 1 0 0 -7 CB 3 -4 5 5 0 -A 4 4 4 - BFC 2 7 A 6 4 3 DF 54
6 } ] 55 TOnlineHelpConfigurationProvider =
9 end ; class
10 56 private
11 I O n l i n e H e l p C o n f i g u r a t i o n = interface ( 57 FCriticalSection : TCriticalSection ;
ISingleton ) 58 FOnlineHelpConfiguration :
12 [ { 8 7 0 E 1 B 2 9 -0 8 D 3 -4 3 9 5 - BE 4 1 -B 1 9 0 0 7 2 2 6 4 E IOnlineHelpConfiguration ;
5 } ] 59 public
13 function GetUri : String ; 60 constructor Create ;
14 function GetOffer : String ; 61 destructor Destroy ; override ;
15 function GetVersion : String ; 62
16 63 function GetInstance :
17 procedure SetUri ( Const Value : IOnlineHelpConfiguration ;
String ) ; 64 end ;
18 procedure SetOffer ( Const Value : 65
String ) ; 66 var
19 procedure SetVersion ( Const Value : 67 Provider :
String ) ; TOnlineHelpConfigurationProvider ;
20 68
21 property Uri : String read GetUri 69 function O n l i n e H e l p C o n f i g u r a t i o n :
write SetUri ; IOnlineHelpConfiguration ;
22 property Offer : String read 70 begin
GetOffer write SetOffer ; 71 if not ( Assigned ( Provider ) ) then
23 property Version : String read 72 Provider : =
GetVersion write SetVersion ; TOnlineHelpConfigurationProvider
24 end ; . Create ;
25 73
26 function O n l i n e H e l p C o n f i g u r a t i o n : 74 Result : = Provider . GetInstance ;
IOnlineHelpConfiguration ; 75 end ;
27 76
28 imp lement ation 77 { TOnlineHelpConfiguration }
29 uses 78
30 SyncObjs // T C r i t i c a l S e c t i o n 79 function T O n l i n e H e l p C o n f i g u r a t i o n . GetUri
31 , SysUtils // FreeAndNil : String ;
32 ; 80 begin
33 81 Result : = FUri ;
34 type 82 end ;
35 83
36 T O n l i n e H e l p C o n f i g u r a t i o n = class ( 84 function T O n l i n e H e l p C o n f i g u r a t i o n .
TInterfacedObject , GetOffer : String ;
IOnlineHelpConfiguration ) 85 begin
37 private 86 Result : = FOffer ;
38 FUri : String ; 87 end ;
39 FOffer : String ; 88
40 FVersion : String ;
41 public

Developpez Magazine est une publication de Developpez.com page 19


Numro 56 fvriermars 2015
89 function T O n l i n e H e l p C o n f i g u r a t i o n . 131 // attendu lors de l instanciation
GetVersion : String ; initiale et entrerait ensuite
90 begin 132 if not ( Assigned (
91 Result : = FVersion ; FOnlineHelpConfiguration ))
92 end ; then
93 133 FOnlineHelpConfiguration :=
94 procedure T O n l i n e H e l p C o n f i g u r a t i o n . TOnlineHelpConfiguration .
SetUri ( const Value : String ) ; Create ;
95 begin 134 finally
96 FUri : = Value ; 135 F C r i t i c a l S e c t i o n . Leave ;
97 end ; 136 end ;
98 137 end ;
99 procedure T O n l i n e H e l p C o n f i g u r a t i o n . 138
SetOffer ( const Value : String ) ; 139 Result : = F O n l i n e H e l p C o n f i g u r a t i o n ;
100 begin 140 end ;
101 FOffer : = Value ; 141
102 end ; 142 ini tializ ation
103 143
104 procedure T O n l i n e H e l p C o n f i g u r a t i o n . 144 finalization
SetVersion ( const Value : String ) ; 145 FreeAndNil ( Provider ) ;
105 begin 146
106 FVersion : = Value ; 147 end .
107 end ;
108 Linterface nous assure que le singleton ne sera
109 { TOnlineHelpConfigurationProvider } jamais libr par erreur, lobjet Provider soccupe de
110
crer linstance uniquement au moment o on la sol-
111 constructor
TOnlineHelpConfigurationProvider . licite et le singleton sera libr lors du dchargement
Create ; de lunit.
112 begin Toujours dans loptique de simplifier la consom-
113
114
F O n l i n e H e l p C o n f i g u r a t i o n : = nil ;
FCriticalSection := TCriticalSection .
mation du singleton, la fonction globale daccs est
Create ; ici prfre une mthode statique. Elle demeure ce-
115 end ; pendant ralisable pour ceux qui voudraient se rap-
116 procher du modle objet.
117 destructor
TOnlineHelpConfigurationProvider .
Lobjet Provider possde une section critique afin
Destroy ; de sassurer dune unique instanciation, y compris
118 begin dans un contexte multithread.
119 FreeAndNil ( F C r i t i c a l S e c t i o n ) ; Linterface ISingleton napporte rien fonctionnel-
120 F O n l i n e H e l p C o n f i g u r a t i o n : = nil ;
121 inherited ; lement. Elle est cependant importante pour signifier
122 end ; au consommateur que linterface IOnlineHelpCon-
123 figuration rpond au patron du singleton. Limage
124 function ci-dessous montre linfobulle gnre par Delphi au
TOnlineHelpConfigurationProvider .
GetInstance : survol de la souris sur le type dans la dclaration des
IOnlineHelpConfiguration ; variables.
125 begin
126 if not ( Assigned (
F O n l i n e H e l p C o n f i g u r a t i o n ) ) then
127 begin
128 F C r i t i c a l S e c t i o n . Enter ; Cette implmentation du singleton est, certes,
129 try la complique parmi celles prsentes dans ce do-
130 // Nouvelle v rification pour g
rer le cas o un thread aurait cument, mais elle est (ce nest que mon avis) la plus
robuste et la plus simple consommer.

6 Consommation des diffrents singletons

Afin de voir fonctionnellement les diffrences type dimplmentation tester et de trois boutons
entre les diverses implmentations du singleton, le pour vrifier si les implmentations rpondent aux
plus simple consiste crer une petite application caractristiques dun singleton. Ce nest quune pr-
de test. sentation parmi tant dautres et je maccorderai vo-
lontiers avec ceux qui estimeront que ces donnes ne
Limage ci-dessous reprsente linterface que jai
devraient pas tre saisies par lutilisateur. Cela reste
choisie. Elle se prsente sous la forme dun groupe
cependant plus simple comprendre sans la probl-
permettant la saisie des donnes du singleton (mais
matique du chargement des donnes.
non ditable pour ne pas perturber les tests), dun
groupe de boutons radio permettant de choisir quel

Developpez Magazine est une publication de Developpez.com page 20


Numro 56 fvriermars 2015
12 FDataExistInGlobalVariableSingleton
: = True ;
13 end ;
14
15 Msg : = Format ( MESSAGE_FORMAT ,
Explications complmentaires : 16 [ Instance . Uri ,
17 Instance . Offer ,
Afin que les tests soient assez explicites, jai vo- 18 Instance . Version ]) ;
lontairement dclar un boolen pour stocker le fait 19
que des donnes ont dj t stockes dans le single- 20 MessageBox ( Handle , PChar ( Msg ) , PChar (
ton et ne pas le faire une deuxime fois (le but de la Singleton Variable globale ) ,0 ) ;
21 end ;
manoeuvre sera expliqu en temps voulu).
1 { D clarations priv es } Le code ci-dessous montre laffichage des donnes
2 FDataExistInGlobalVariableSingleton : du singleton implment avec une fonction globale.
Boolean ; Le boolen sassure que les donnes sont affectes
3 FDataExistInGlobalFunctionSingleton : une seule fois.
Boolean ;
4 FDataExistInManagedByClassSingleton : 1 procedure TMainForm .
Boolean ; GlobalFunctionSingletonShowData ;
5 F D a t a E x i s t I n A d v a n c e d S i n g l e t o n : Boolean ; 2 var Msg : String ;
6 3 Instance : G l o b a l F u n c t i o n S i n g l e t o n .
7 procedure TOnlineHelpConfiguration ;
GlobalVariableSingletonShowData ; 4 begin
8 procedure 5 Instance : = G l o b a l F u n c t i o n S i n g l e t o n .
GlobalFunctionSingletonShowData ; OnlineHelpConfiguration ;
9 procedure 6 if not (
ManagedByClassSingletonShowData ; FDataExistInGlobalFunctionSingleton
10 procedure A d v a n c e d S i n g l e t o n S h o w D a t a ; ) then
11 7 begin
12 procedure GlobalVariableSingletonFree ; 8 Instance . Uri : = Uri . Text ;
13 procedure GlobalFunctionSingletonFree ; 9 Instance . Offer : = Offer . Text ;
14 procedure ManagedByClassSingletonFree ; 10 Instance . Version : = Version . Text ;
15 procedure AdvancedSingletonFree ; 11
16 12 FDataExistInGlobalFunctionSingleton
17 procedure : = True ;
GlobalVariableSingletonGetTwoInstances 13 end ;
; 14
18 procedure 15 Msg : = Format ( MESSAGE_FORMAT ,
GlobalFunctionSingletonGetTwoInstances 16 [ Instance . Uri ,
; 17 Instance . Offer ,
19 procedure 18 Instance . Version ]) ;
ManagedByClassSingletonGetTwoInstances 19
; 20 MessageBox ( Handle , PChar ( Msg ) , PChar (
20 procedure Singleton Fonction globale ) ,0 ) ;
AdvancedSingletonGetTwoInstances ; 21 end ;

Ces boolens sont privs, de mme que les pro- Le code ci-dessous montre laffichage des don-
cdures appeler pour les tests, car ces lments nes du singleton implment laide de lhritage.
ne sont pas censs tre appels ailleurs que dans la Le boolen sassure que les donnes sont affectes
fentre. une seule fois.
Le code ci-dessous montre laffichage des donnes 1 procedure TMainForm .
du singleton implment avec une variable globale. ManagedByClassSingletonShowData ;
Le boolen sassure que les donnes sont affectes 2 var Msg : String ;
une seule fois. 3 Instance : M a n a g e d B y C l a s s S i n g l e t o n .
TOnlineHelpConfiguration ;
1 procedure TMainForm . 4 begin
GlobalVariableSingletonShowData ; 5 Instance : = M a n a g e d B y C l a s s S i n g l e t o n .
2 var Msg : String ; T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
3 Instance : G l o b a l V a r i a b l e S i n g l e t o n . 6 try
TOnlineHelpConfiguration ; 7 if not (
4 begin FDataExistInManagedByClassSingleton
5 Instance : = G l o b a l V a r i a b l e S i n g l e t o n . ) then
OnlineHelpConfiguration ; 8 begin
6 if not ( 9 Instance . Uri : = Uri . Text ;
FDataExistInGlobalVariableSingleton 10 Instance . Offer : = Offer . Text ;
) then 11 Instance . Version : = Version . Text ;
7 begin 12
8 Instance . Uri : = Uri . Text ; 13 FDataExistInManagedByClassSingleton
9 Instance . Offer : = Offer . Text ; : = True ;
10 Instance . Version : = Version . Text ; 14 end ;
11 15

Developpez Magazine est une publication de Developpez.com page 21


Numro 56 fvriermars 2015
16 Msg : = Format ( MESSAGE_FORMAT ,
17 [ Instance . Uri ,
18 Instance . Offer ,
19 Instance . Version ]) ;
20 finally
21 FreeAndNil ( Instance ) ;
22 end ;
23
24 MessageBox ( Handle , PChar ( Msg ) , PChar (
Singleton g r par la classe ) ,0 ) ;
25 end ;

Le code ci-dessous montre laffichage des donnes


du singleton avanc. Le boolen sassure que les don-
Que se passe-t-il si on essaie de librer tous ces
nes sont affectes une seule fois.
singletons ?
Le code ci-dessous tente de librer le singleton
1 procedure TMainForm . implment avec une variable globale.
AdvancedSingletonShowData ;
1 procedure TMainForm .
2 var Msg : String ;
GlobalVariableSingletonFree ;
3 Instance : A d v a n c e d S i n g l e t o n .
2 begin
IOnlineHelpConfiguration ;
3 GlobalVariableSingleton .
4 begin
O n l i n e H e l p C o n f i g u r a t i o n . Free ;
5 Instance : = A d v a n c e d S i n g l e t o n .
4 end ;
OnlineHelpConfiguration ;
6 if not ( F D a t a E x i s t I n A d v a n c e d S i n g l e t o n ) Le code ci-dessous tente de librer le singleton
then
7 begin implment avec une fonction globale.
8 Instance . Uri : = Uri . Text ; 1 procedure TMainForm .
9 Instance . Offer : = Offer . Text ; GlobalFunctionSingletonFree ;
10 Instance . Version : = Version . Text ; 2 begin
11 3 GlobalFunctionSingleton .
12 FDataExistInAdvancedSingleton := O n l i n e H e l p C o n f i g u r a t i o n . Free ;
True ; 4 end ;
13 end ;
14 Le code ci-dessous tente de librer le singleton
15 Msg : = Format ( MESSAGE_FORMAT , gr par la classe via lhritage.
16 [ Instance . Uri ,
17 Instance . Offer , 1 procedure TMainForm .
18 Instance . Version ]) ; ManagedByClassSingletonFree ;
19 2 var Instance : M a n a g e d B y C l a s s S i n g l e t o n .
20 MessageBox ( Handle , PChar ( Msg ) , PChar ( TOnlineHelpConfiguration ;
Singleton avanc ) ,0 ) ; 3 begin
21 end ; 4 Instance : = M a n a g e d B y C l a s s S i n g l e t o n .
T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
5 try
6 finally
Le code ci-dessous montre le code derrire le pre- 7 FreeAndNil ( Instance ) ;
8 end ;
mier bouton. 9 end ;

Le code ci-dessous tente de librer le singleton


1 procedure TMainForm . avanc.
TryToShowSingletonDataButtonClick (
Sender : TObject ) ; 1 procedure TMainForm .
2 begin AdvancedSingletonFree ;
3 case ( I m p l e m e n t a t i o n C h o i c e . ItemIndex ) 2 var Instance : A d v a n c e d S i n g l e t o n .
of IOnlineHelpConfiguration ;
4 0 : GlobalVariableSingletonShowData ; 3 begin
5 1 : GlobalFunctionSingletonShowData ; 4 Instance : = A d v a n c e d S i n g l e t o n .
6 2 : ManagedByClassSingletonShowData ; OnlineHelpConfiguration ;
7 3 : AdvancedSingletonShowData ; 5 try
8 end ; 6 finally
9 end ; 7 { On ne lib re pas une interface . On
peut la passer nil si on veut
8 mais cela sera fait
a ut om a ti q ue me n t lors de la
Ces quelques lignes permettent dj de vrifier 9
sortie de la proc dure }
Instance : = nil ;
que les donnes saffichent bien. Jusque-l, il ny a 10 end ;
aucun problme. 11 end ;

Developpez Magazine est une publication de Developpez.com page 22


Numro 56 fvriermars 2015
Le code ci-dessous montre le code derrire le se- 1 procedure TMainForm .
cond bouton. GlobalFunctionSingletonGetTwoInstances
;
1 procedure TMainForm . 2 var Instance 1 , Instance 2 :
T r y T o F r e e S i n g l e t o n B u t t o n C l i c k ( Sender GlobalFunctionSingleton .
: TObject ) ; TOnlineHelpConfiguration ;
2 begin 3 Msg : String ;
3 case ( I m p l e m e n t a t i o n C h o i c e . ItemIndex ) 4 begin
of 5 Instance 1 : = G l o b a l F u n c t i o n S i n g l e t o n .
4 0 : GlobalVariableSingletonFree ; T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
5 1 : GlobalFunctionSingletonFree ; 6 Instance 2 : = G l o b a l F u n c t i o n S i n g l e t o n .
6 2 : ManagedByClassSingletonFree ; T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
7 3 : AdvancedSingletonFree ; 7 try
8 end ; 8 if ( Instance 1 = Instance 2 ) then Msg
9 end ; : = C est la m me instance .
9 else Msg : = Ce sont deux instances
On remarque, aprs la libration des deux pre- diff rentes . ;
miers singletons, que le programme devient instable. 10 finally
Pour les deux autres, laffichage des donnes se fait 11 FreeAndNil ( Instance 1 ) ;
12 FreeAndNil ( Instance 2 ) ;
bien malgr la prsence des boolens empchant le 13 end ;
renseignement des proprits et dont on peut, pr- 14
sent, constater limportance puisquelle prouve luni- 15 MessageBox ( Handle , PChar ( Msg ) , PChar (
cit de linstance. Singleton Fonction globale ) ,0 ) ;
16 end ;

Le code ci-dessous tente de crer deux instances


du singleton gr par la classe.
1 procedure TMainForm .
ManagedByClassSingletonGetTwoInstances
;
2 var Instance 1 , Instance 2 :
ManagedByClassSingleton .
TOnlineHelpConfiguration ;
Comme vrifi prcdemment, les deux dernires 3 Msg : String ;
4 begin
implmentations rpondent lunicit du singleton. 5 Instance 1 : = M a n a g e d B y C l a s s S i n g l e t o n .
Les violations daccs dclenches par les deux pre- T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
mires suggrent que ce nest pas leur cas. 6 Instance 2 : = M a n a g e d B y C l a s s S i n g l e t o n .
Le code ci-dessous tente de crer deux instances T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
7 try
du singleton implment laide dune variable glo- 8 if ( Instance 1 = Instance 2 ) then Msg
bale. : = C est la m me instance .
9 else Msg : = Ce sont deux instances
1 procedure TMainForm .
diff rentes . ;
GlobalVariableSingletonGetTwoInstances
10 finally
;
11 FreeAndNil ( Instance 1 ) ;
2 var Instance 1 , Instance 2 :
12 FreeAndNil ( Instance 2 ) ;
GlobalVariableSingleton .
13 end ;
TOnlineHelpConfiguration ;
14
3 Msg : String ;
15 MessageBox ( Handle , PChar ( Msg ) , PChar (
4 begin
Singleton g r par la classe ) ,0 ) ;
5 Instance 1 : = G l o b a l V a r i a b l e S i n g l e t o n .
16 end ;
T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
6 Instance 2 : = G l o b a l V a r i a b l e S i n g l e t o n .
Le code ci-dessous tente de crer deux instances
T O n l i n e H e l p C o n f i g u r a t i o n . Create ;
7 try du singleton avanc.
8 if ( Instance 1 = Instance 2 ) then Msg 1 procedure TMainForm .
: = C est la m me instance . AdvancedSingletonGetTwoInstances ;
9 else Msg : = Ce sont deux instances 2 var Instance 1 , Instance 2 :
diff rentes . ; IOnlineHelpConfiguration ;
10 finally 3 Msg : String ;
11 FreeAndNil ( Instance 1 ) ; 4 begin
12 FreeAndNil ( Instance 2 ) ; 5 Instance 1 : = A d v a n c e d S i n g l e t o n .
13 end ; OnlineHelpConfiguration ;
14 6 Instance 2 : = A d v a n c e d S i n g l e t o n .
15 MessageBox ( Handle , PChar ( Msg ) , PChar ( OnlineHelpConfiguration ;
Singleton Variable globale ) ,0 ) ; 7
16 end ; 8 if ( Instance 1 = Instance 2 ) then Msg : =
Le code ci-dessous tente de crer deux instances 9
C est la m me instance .
else Msg : = Ce sont deux instances
du singleton implment laide dune fonction glo- diff rentes . ;
bale. 10

Developpez Magazine est une publication de Developpez.com page 23


Numro 56 fvriermars 2015
11 MessageBox ( Handle , PChar ( Msg ) , PChar ( 8 end ;
Singleton avanc ) ,0 ) ; 9 end ;
12 end ;

Le code ci-dessous montre le code derrire le troi-


sime bouton.
1 procedure TMainForm .
T r y G e t T w o I n s t a n c e s B u t t o n C l i c k ( Sender
: TObject ) ;
2 begin
3 case ( I m p l e m e n t a t i o n C h o i c e . ItemIndex )
of
4 0 :
GlobalVariableSingletonGetTwoInstances
;
5 1 :
GlobalFunctionSingletonGetTwoInstances
; Comme prvu, limplmentation avec une va-
6 2 : riable globale et celle avec une fonction globale ne
ManagedByClassSingletonGetTwoInstances
;
respectent pas lunicit alors que limplmentation
7 3 : A d v a n c e d S i n g l e t o n G e t T w o I n s t a n c e s gre par la classe et limplmentation avance le
; font.

7 Exemples connus dans la RTL/VCL

Lorsquon dveloppe dans un IDE, un nombre 21 N e w S t y l e C o n t r o l s : = Lo ( GetVersion ) >=


important de routines et de classes sont fournies na- 4;
tivement. Delphi ne fait pas exception et propose 22 23
InitControls ;

quelques singletons. 24 ...


Cest le cas par exemple des classes TApplica-
tion, TScreen ou encore TMouse implmentes au On constate que les variables Application et
moyen de variables globales. Screen sont dclares dans lunit Forms et initia-
Extrait de lunit Forms : lises dans lunit Controls. La variable Mouse est
dclare et initialise dans lunit Controls.
1 { Global objects }
2 Une implmentation passant par une fonction
3 var globale est utilise, entre autres, pour la classe
4 Application : TApplication ; TPrinter.
5 Screen : TScreen ;
6 Extrait de lunit Printers :
7 ... 1 function Printer : TPrinter ;
8 imp lement ation 2
3 ...
Extrait de lunit Controls : 4 imp lement ation
1 var 5
2 Mouse : TMouse ; 6 uses Consts ;
3 7
4 ... 8 var
5 imp lement ation 9 FPrinter : TPrinter = nil ;
6 10
7 ... 11 ...
8 procedure InitControls ; 12
9 var 13 function Printer : TPrinter ;
10 UserHandle : HMODULE ; 14 begin
11 begin 15 if FPrinter = nil then FPrinter : =
12 ... TPrinter . Create ;
13 Mouse : = TMouse . Create ; 16 Result : = FPrinter ;
14 Screen : = TScreen . Create ( nil ) ; 17 end ;
15 Application : = TApplication . Create ( nil 18
); 19 ...
16 ... 20 ini tializ ation
17 end ; 21
18 22 finalization
19 ... 23 FPrinter . Free ;
20 ini tializ ation

Retrouvez larticle de Jrmy Laurent en ligne : lien 24

Developpez Magazine est une publication de Developpez.com page 24


Numro 56 fvriermars 2015
Java
Les dernires news Java

Java : une piste intressante pour am-


liorer les types gnriques - un proto-
type de la generic specialization en
cours de dveloppement
Mme si Java 9 nest pas encore prt, une quipe compromis avec les gnriques en Java est que ces va-
de dveloppeurs est charge de prparer les nouvelles riables ne peuvent tre instancies quavec les types
fonctionnalits de la version 10. Annonc en juillet de rfrence, et non pas les types primitifs [. . . ] Nous
dernier, le projet Valhalla, dirig par Brian Goetz, a voulons permettre aux classes gnriques existantes
pour but dtudier et tester ces nouvelles fonction- dtre amliores, sans avoir les jeter et les rem-
nalits dont la publication est prvue pour 2016. placer par de nouvelles. Et en mme temps ne pas
Il y a quelques jours, Goetz publia un document forcer les programmes existants tre recompils ou
o il prsente ltat davancement concernant la ges- modifis simplement pour continuer travailler .
tion des types gnriques, lune des caractristiques
Pour cela, plusieurs techniques potentielles sont
les plus critiques du Java puisquil nest pas pos-
en train dtre tudies. Lune des pistes les plus
sible, actuellement, dappliquer des gnriques aux
prometteuses, appele generic specialization ,
types primitifs.
consiste continuer reprsenter les types du genre
tant donn quOracle accorde une importance
List<Integer> et List<String> par List.class dans
primordiale la compatibilit avec les versions pr-
le runtime, tandis que les nouvelles dclarations du
cdentes, le problme soulev de par lintroduction
genre List<int> seront reprsentes par un autre
dun tel systme de gnriques amliors doit
type.
tre approch avec prudence. En effet, la difficult
est que le systme de types du langage Java na Lquipe du projet Valhalla est en train de pr-
pas de racine unifie , il ny a pas de type en Java parer un prototype pour tester cette technique. Ce-
qui est la fois un super-type d Object et de pendant, il est encore tt pour savoir si elle permet
int . de rsoudre efficacement tous les problmes actuels
Comme lexplique Goetz, lun des premiers du typage gnrique de Java.

Commentez la news dAmine Horseman en ligne : lien 25

Developpez Magazine est une publication de Developpez.com page 25


Numro 56 fvriermars 2015
Java : De nouvelles mises jour pour
corriger 19 vulnrabilits et dsactiver
SSL 3.0 - il ny aura plus de mises jour
de scurit publiques pour la version 7
Oracle a publi de nouvelles mises jour de s- cations Java, via e-mail.
curit pour Java afin de corriger 19 vulnrabilits et Une des mises jour de scurit dans Java est la
dsactiver le support par dfaut pour SSL 3.0, une dsactivation du protocole SSL 3.0 par dfaut en r-
version obsolte du protocole de communication s- ponse la vulnrabilit de POODLE dcouverte en
curis qui est vulnrable aux attaques. octobre : lien 26. La faille permet, par des attaques
Mme si le nombre dattaques qui exploitent les de lhomme du milieu, de dchiffrer des informations
vulnrabilits de Java a t rgulirement en baisse sensibles comme les cookies dauthentification par-
au cours de la dernire anne, les exploits Java res- tir dune connexion chiffre avec SSL 3.0.
tent parmi les principaux vecteurs dattaque contre POODLE a aussi affect le protocole TLS cause
les utilisateurs du Web, selon le dernier rapport de de la possibilit de forcer le passage SSL 3.0 lorsque
scurit de Cisco : lien 26. Ces correctifs pourront le client et le serveur supportent le protocole vieillis-
donc limiter les attaques via les exploits Java. sant.
Quatorze des 19 vulnrabilits corriges dans Toutefois, si SSLv3 est absolument ncessaire,
Java affectent les dploiements des clients et peuvent Oracle a indiqu dans les nouvelles de version de
tre exploites partir de pages Web grce des Java la possibilit de le ractiver.
applets Java malveillantes ou des applications Java Les versions nouvellement patches de Java sont
Web Start. Quatre dentre elles ont le score de s- 5.0u81, 6u91, 7u75/7u76 et 8u31, mais les mises
vrit maximale (10) dans le systme de score de jour de Java 5 et 6 ne sont disponibles que pour les
vulnrabilit commune (CVSS) et deux autres pou- clients dOracle avec des contrats de support long
vant conduire un compromis total du systme sont terme.
de svrit 9,3. Par ailleurs, cest aussi la dernire mise jour pu-
Les nouvelles mises jour de scurit permettent blique de scurit pour Java 7. Les utilisateurs qui
de corriger des vulnrabilits qui vont de la lecture ont la mise jour automatique active seront mi-
et lcriture de donnes locales la prise de contrle grs vers Java 8 ; et seuls les utilisateurs disposant
totale du systme dexploitation, y compris lexcu- de contrats de support long terme seront en mesure
tion de code arbitraire , a dclar John Matthew de tlcharger les prochains correctifs de scurit de
Holt, CTO de Waratek, la firme de scurit dappli- Java 7.

Commentez la news de Michael Guilloux en ligne : lien 27

Developpez Magazine est une publication de Developpez.com page 26


Numro 56 fvriermars 2015
JavaWeb
Les derniers tutoriels et articles

Tutoriel sur une introduction au frame-


work Web WebMotion
Lobjectif du tutoriel est de vous faire dcouvrir le framework Java Web WebMotion. Le tutoriel vous
permet de parcourir les notions suivantes :
la cration et le lancement dun projet avec WebMotion ;
les concepts (configuration, fichier de routes et les contrleurs) ;
la gestion des paramtres ;
la gestion des erreurs.
Pour mettre en avant ces notions, une application de type Hello world est dveloppe durant ce
tutoriel.

1 Introduction

WebMotion est un framework Java Web : lien 28. ncessaire pour dcrire les vues ;
Il soccupe des interactions entre le client (naviga- des excs dannotations qui polluent le code
teur en gnral) et des services Java. Il repose sur Java, par exemple pour Spring MVC vous pou-
JEE, en particulier sur lAPI des servlets. WebMo- vez vous retrouver avec 5-6 annotations sur les
tion va vous permettre de simplifier la mise en place mthodes de vos classes.
dun serveur, cest--dire : la conversion des para-
mtres, la gestion des URL. . . en proposant une ap- WebMotion sinpire des bons concepts des dif-
proche KISS (Keep it Simple, Stupid ). frents frameworks en utilisant une syntaxe proche
Dautres frameworks Java Web existent comme de Play ! pour la configuration, en tant compatible
Struts, Spring MVC, Play ! ils comportent des fai- sur diffrents serveurs dapplications (Tomcat, Jetty
blesses comme : et Glassfish), en nimposant pas de contraintes au
niveau des vues et en utilisant bon escient les an-
des fichiers de configuration volumineux, par notations.
exemple pour Struts avec les fichiers de confi- De plus, WebMotion sinscrit dans une architec-
guration en XML qui deviennent vite verbeux ; ture oriente outils. Il nimpose pas de persistance,
une architecture contraignante fixe par le fra- dinjection de dpendances. . . bien quil existe des
mework, par exemple pour Play ! il impose intgrations sous forme dextras vers Spring, Hi-
lutilisation dun serveur dapplications parti- bernate. . . Il est aussi compatible avec divers IDE
culier ; (Eclipse, Netbeans. . . ).
une forte dpendance au niveau des vues, par Ce tutoriel va vous permettre de lancer une pre-
exemple pour Struts un ensemble de tags est mire application base sur WebMotion.

2 Prrequis

Le tutoriel se base en partie sur Maven et il est liser compltement.


ncessaire davoir une version dinstalle pour le ra-

3 Cration du projet

WebMotion utilise Maven pour vous permettre possible dutiliser un autre systme de build.
de gnrer un squelette de votre projet. Mais il est 1 $ mvn archetype : generate \

Developpez Magazine est une publication de Developpez.com page 27


Numro 56 fvriermars 2015
2 - D a r c h e t y p e G r o u p I d = org . debux . 8 - Dversion = 1 . 0 - SNAPSHOT \
webmotion \ 9 - DusesExtras = N
3 - D a r c h e t y p e A r t i f a c t I d = webmotion -
archetype \
4 - DarchetypeVersion =2.4 \
5 - DgroupId = org . example \ Pensez regarder la dernire version
6 - DartifactId = myapp \ disponible.
7 - Dpackage = org . example . myapp \

4 Lancer le projet

Vous pouvez ds prsent lancer le projet sur un dans votre navigateur prfr. Vous allez voir ap-
serveur dapplications type Tomcat, Jetty ou Glass- paratre Hello myapp ! lcran. Le nom de la
fish. Dans le cas du tutoriel, nous allons le lancer webapp correspond au nom de lartefact id.
grce Maven et au plugin Jetty. Pour cela, rien de
plus simple, il suffit de taper :
1 $ mvn jetty : run

Aprs le dmarrage du serveur, vous pouvez ou-


vrir lURL suivante http ://localhost :8080/myapp/

5 Principe de fonctionnement

Le schma suivant vous prsente comment fonc- 1. Rception de la requte du client.


tionne WebMotion.
2. Recherche de laction dans le fichier de route
(fichier de mapping).

3. Excution de laction Java (contrleur).

4. Retourne la rponse au client renvoye par


laction Java (render).

Nous allons passer en revue les diffrents compo-


sants de WebMotion.

6 Configuration

Le premier composant concerne la configuration 2 xmlns = " http :// java . sun . com / xml / ns /
pour le serveur dapplications. WebMotion repose javaee "
3 xmlns : xsi = " http :// www . w 3 . org / 2 0 0 1 /
sur les fragments des servlets 3, ce qui lui per- XMLSchema - instance "
met de navoir aucune configuration dans le fichier 4 xsi : schema Locati on = " http :// java . sun .
web.xml : com / xml / ns / javaee
5 http :// java . sun . com / xml / ns / javaee / web -
app_ 3 _ 0 . xsd " / >
1 < web - app version = " 3 . 0 "

7 Le fichier de routes

Le point central du serveur avec WebMotion est Le fichier de routes peut contenir les rubriques
le fichier de routes (nomm mapping). Il se trouve suivantes :
dans le rpertoire des ressources de votre applica-
config : contient la configuration (les chemins
tion. Ce fichier vous permet de centraliser lensemble
par dfaut des fichiers. . . ) ;
des interactions sur le serveur. Remarque impor-
tante, la recherche se fait en fonction de lordre dap- actions : contient les actions lies des URL ;
parition des rgles. errors : contient les actions lies en cas der-

Developpez Magazine est une publication de Developpez.com page 28


Numro 56 fvriermars 2015
reur ; 1. La mthode HTTP de lURL (GET,
POST. . . ) ici cest * pour toutes les m-
filters : contient les filtres sur les actions ;
thodes ;
extensions : inclut dautres fichiers de routes. 2. Le path de lURL ;
Revenons sur notre fichier de routes actuel et re- 3. Laction Java excuter, ici la mthode in-
gardons de plus prs la rgle suivante : dex de la classe Base .
Un autre lment de syntaxe, les commentaires
1 [ actions ]
2 * / Base . index dans le fichier de routes se font par un croisillon au
dbut :
La syntaxe du fichier de routes est la suivante 1 # Mon commentaire
pour une ligne dans la rubrique dactions :

8 Les contrleurs

Les actions Java associes dans le fichier de Le scope par dfaut des contrleurs est de type
routes sont appeles contrleurs. La classe Java doit singleton, cest--dire le mme contrleur est utilis
hriter de WebMotionController pour tre consid- pour toutes les requtes. Vous pouvez modifier le
re comme un contrleur. la fin de votre mthode, cycle de vie des contrleurs dans la section config
vous spcifiez la rponse pour le client, ici vers une dans le fichier de routes, pour quun contrleur soit
page JSP. cr pour chaque requte ou quune mme instance
soit utilise pour toutes les requtes dun utilisateur.
1 public class Base extends En hritant de la classe WebMotionController,
WebMotionController {
2 public Render index () {
vous disposez de lensemble des Renders dis-
3 return renderView ( " index . jsp " ) ; ponibles dans WebMotion. Un Render reprsente le
4 } retour effectuer vers le client. Il existe plusieurs
5 } types de retours, redirections, JSON, XML, conte-
nus, tlchargements. . .

9 Gestion des paramtres

Nous allons modifier le fichier de routes pour g- 5 }


rer le cas dun paramtre dans lURL. Il est possible
Vous pouvez remarquer que le paramtre est
de le faire passer directement dans lURL :
pass la page JSP sous la forme de cl-
1 [ actions ] valeur. La page est disponible dans le rper-
2 * / { who } Base . index
toire package.views dfini dans la section
ou de le faire passer en tant que paramtre : config du fichier de routes (ici WEB-
1 [ actions ] INF/org/example/myapp). Modifiez votre page JSP
2 * /? who = { } Base . index pour afficher le name :
La conversion des types des paramtres est au- 1 < html >
2 < head >
tomatique et est gre par WebMotion. Vous pou- 3 < title > myapp </ title >
vez tout de mme agir sur la conversion des para- 4 </ head >
mtres en enregistrant vos propres convertisseurs. 5 < body >
La conversion repose sur lAPI BeanUtils dApache. 6 <h 1 > Hello $ { name } ! </ h 1 >
7 </ body >
Vous avez aussi la possibilit dinjecter des valeurs 8 </ html >
autres que celles de requtes bases sur le type ou le
nom du paramtre de la mthode. Relancez votre serveur et tapez http ://-
La prochaine tape consiste modifier laction localhost :8080/myapp/you ou http ://local-
Java. Le paramtre est directement disponible dans host :8080/myapp/ ?who=you. Vous devez main-
la signature de la mthode ainsi : tenant voir safficher lcran Hello you ! .
1 public class Base extends
WebMotionController {
2 public Render index ( String who ) {
3 return renderView ( " index . jsp " , "
name " , who ) ; // couple cl =
valeur
4 }

Developpez Magazine est une publication de Developpez.com page 29


Numro 56 fvriermars 2015
10 Cration dun formulaire

Finissons par ajouter un formulaire pour pouvoir


saisir la valeur de notre hello . Pour cela, crez
un fichier form.jsp dans le mme rpertoire que le
fichier index.jsp ainsi :
1 < html >
2 < head >
3 < title > myapp </ title >
4 </ head > Pour prvenir lutilisateur correctement en cas
5 < body >
derreur, nous allons rajouter une rgle dans le fi-
6 < form action = " / myapp / hello "
method = " get " > chier de mapping. Il est possible, pour attraper ler-
7 Name : < input type = " text " reur, avec une action associe, soit de prciser le code
name = " who " > HTTP de lerreur :
8 < button type = " submit " > submit
</ button > 1 [ errors ]
9 </ form > 2 code : 5 0 0
10 </ body >
11 </ html > view : error . jsp

soit la classe de lexception :


1 [ errors ]
2 javax . validation .
ConstraintViolationException

view : error . jsp


Ensuite, modifiez le fichier de mapping pour
mettre le formulaire en premire page et dplacer Ici, une page est simplement affiche. Il serait
laction Java sur lURL /myapp/hello. Le mot cl possible de renvoyer lensemble des lments au
view est un raccourci pour renvoyer lutilisateur formulaire pour quil affiche lerreur, mais il est
sur une page donne sans passer par une action Java. conseill dutiliser une validation JavaScript avant
1 [ actions ]
denvoyer le formulaire et de garder une validation
2 * / view : ct serveur pour se prmunir des appels errons
form . jsp avec une gestion derreurs globale.
3 * / hello ? who = { } Base .
index 1 < html >
2 < head >
Relancez le serveur et testez votre application. 3 < title > myapp </ title >
Vous pouvez saisir le nom qui vous plat maintenant. 4 </ head >
Pour ajouter une validation ct serveur, Web- 5 < body >
6 <h 1 style = " color : red " > Le champ
Motion sappuie sur le standard de validation de est vide . </ h 1 >
Java (JSR 303). Vous pouvez modifier votre contr- 7 </ body >
leur pour interdire la saisie dun nom vide : 8 </ html >
1 public Render index ( @NotEmpty String who
) {
2 return renderView ( " index . jsp " , " name
" , who ) ;
3 }

Si vous essayez de valider votre formulaire avec


un champ vide maintenant, une page derreur saf-
fiche :

11 Conclusion

Nous avons vu lapproche classique de site de ne citer que celui-l.


page en page. En ne soccupant que de la partie WebMotion propose un ensemble dextras pour
serveur, WebMotion permet dtre polyvalent. Il est dvelopper rapidement vos applications avec :
possible de sintgrer dans une architecture REST SiteMesh pour la dcoration de page ;
en renvoyant les donnes sous le format JSON. Vous
Hibernate pour laccs la base de donnes ;
pouvez par exemple lutiliser avec AngularJS pour
Spring pour linjection de dpendances ;

Developpez Magazine est une publication de Developpez.com page 30


Numro 56 fvriermars 2015
Shiro pour la scurit. tions sur le site suivant : lien 29. Je vous invite
regarder la partie dmonstration qui illustre len-
Vous pouvez retrouver de nombreuses informa- semble des fonctionnalits.

Retrouvez larticle de Julien Ruchaud en ligne : lien 30

Tutorial Grails : Raliser une applica-


tion avec un framework de haute pro-
ductivit
Framework Open Source dit de haute productivit dans lcosystme Java, Grails a derrire lui une
solide communaut et fait partie des projets SpringSource. Mais, que vaut-il par rapport Groovy ?
Est-ce simplement un autre framework Java de plus ?
Au travers de la ralisation dune application simple, it-resto, nous pourrons entrevoir les avantages et
inconvnients de cet environnement.
Cet article, en deux parties, prsente dans la premire la mise en place du modle et les tests associs.
Dans la seconde partie, nous verrons comment raliser une application autour de ce modle de donnes.

1 Prsentation de Grails

fiter de la puissance de Java. Il sappuie sur


son cosystme en utilisant Spring, Hibernate,
etc. ;

Logo Grails convention over configuration : systme de


configuration tendant simplifier la vie du d-
Projet initi en 2005 par Graeme Rocher, il avait veloppeur (et limiter le code crire/mainte-
pour but dapporter un quivalent de Ruby on Rails nir). Par exemple, les objets du modle auront
au monde Java. Le nom Grails est dailleurs une le mme nom que les tables auxquelles ils sont
contraction de Groovy, langage sur lequel il est bas associs. Le mapping devient automatique ;
et de Rails, lensemble formant Grails (Les Graals
DRY : viter la redondance de code ;
anglais, ce qui explique le logo).
Aujourdhui, nous en sommes la version 2.4.4 MDA : une portion du code est cre par-
(sortie en octobre 2014). tir du modle, on obtient ainsi une partie du
Mais, du coup, Grails, cest quoi exactement ? squelette de lapplication. Il est donc conseill
Il sagit dun framework Open Source se basant de dbuter par la gnration du modle ;
sur une architecture MVC qui fonctionne sur une prototypage : grce au scaffolding, il est trs fa-
JVM. Sa philosophie tourne autour des points sui- cile de gnrer un premier prototype (mme in-
vants : complet) de lapplication. Il devient ais de g-
java-like dynamic language : les scripts Groovy nrer des interfaces fonctionnelles directement
sont compils en byte-code, permettant de pro- issues du modle de donnes.

2 Dfinition du projet

Pour les besoins pdagogiques de larticle, lap- une liste prcise. Lensemble des votes permet de d-
plication nomme it-resto, va tre dveloppe. finir le restaurant qui accueillera lvnement.
Mais, dans tout projet, il faut un cahier des Un cas dutilisation simple serait, au sein dun
charges. Alors, dcrivons rapidement ce que nous groupe de collgues, de permettre de slectionner le
souhaitons. lieu o ils choisissent de manger durant leurs pauses
de midi.
It-resto permet aux utilisateurs de participer
Lutilisateur pourra :
un vnement. Pour chaque vnement, il est pos-
sible de voter pour un ou plusieurs restaurants parmi sauthentifier ;

Developpez Magazine est une publication de Developpez.com page 31


Numro 56 fvriermars 2015
crer un vnement ; Ladministrateur pourra grer (Create, Update,
Read et Delete) les utilisateurs, les restaurants, les
participer un vnement (sans limitation de vnements et les votes.
droits), en votant (une seule fois) pour un ou Les vnements passs et leurs votes associs se-
plusieurs restaurants dans un vnement. ront automatiquement supprims toutes les nuits.

3 Premier pas avec Grails

Avant daller plus loin, il est conseill Arborescence de projet Grails


davoir install et configur lenviron-
nement Grails. Le rpertoire grails-app est le plus important.
Cest ici que vont se trouver les principales res-
Le projet est dfini. . . nous savons o aller. sources du projet :
Alors, allons-y !
conf : ensemble des fichiers de configuration
Pour crer le projet it-retso, il faut lancer la
pour Spring, Hibernate et le projet en cours ;
commande depuis un shell (ou sous Windows, une
invite de commande DOS, Babun, ConEmu, etc.) : controllers : pas de surprise, ce sont les classes
contleurs ;
1 grails create - app it - resto
views : il sagit des vues du projet, au format
Un squelette darborescence du projet est cr gsp ;
dans le rpertoire it-resto.
le rpertoire lib stockera les diffrentes biblio-
thques du projet, quelles soient ajoutes via
maven, ivy ou manuellement ;
src : les sources java et/ou groovy ;
pour finir, test. . . comme son nom lindique,
on y retrouve les tests unitaires, mais aussi les
tests dintgration.
Pour tester que tout sest bien droul, il est pos-
sible de lancer le projet (grails run-app) et daccder
au projet (lien 31).
Pour information, Grails est nativement propuls
par Tomcat.

4 Mise en place du modle

Lun des principes de base de Grails est dtre


orient modle. La premire tape est donc de gn-
rer le modle de donnes (pour aller plus loin : MDA
(lien 32)).
Notre modle possde quatre lments distincts :

Restaurant : modlisation des restaurants s-


lectionner par les utilisateurs dans un vne-
ment ;

User : utilisateur enregistr ;

Event : vnement de base, qui englobera les


votes des utilisateurs ;
Modle de donnes
Vote : sur chaque vnement, un utilisateur
pourra slectionner un ou plusieurs restaurants Pour aller plus vite, passons en mode interactif.
sil souhaite y participer. Ce mode permet de travailler directement dans la
console Grails, sans avoir relancer le framework
Afin de simplifier la comprhension de tous, un chaque commande. De plus, les changements sont
petit schma : pris en compte dynamiquement.

Developpez Magazine est une publication de Developpez.com page 32


Numro 56 fvriermars 2015
Lancez Grails, avec la commande suivante : 19 email email : true
20 }
1 grails 21 }
Vous tes prsent dans la console Grails. Il faut Cette fois, les contraintes sont plus importantes.
gnrer les quatre lments du modle de donnes (le On notera surtout que la taille du login et du pass-
domain). word doivent tre comprises entre 5 et 15 caractres
1 create - domain - class it . resto . restaurant (size : 5..15 ). Le champ email, quant lui, doit r-
2 create - domain - class it . resto . user pondre aux contraintes dun email (email : true).
3 create - domain - class it . resto . event
4 create - domain - class it . resto . vote Maintenant, passons la classe it.resto.Event,
qui devra tre lie avec plusieurs votes.
chaque fois, deux fichiers sont crs :
1 class Event {
le premier, dans grails-app/domain/it/resto/*.groovy,
2
pour la dfinition du domain ; 3 String name
4 Date eventDate
le second, dans test/unit/it/resto/*Spec.groovy 5 User owner
pour les tests unitaires ; 6 static hasMany = [ votes : Vote ]
7
En fonction du besoin du projet, les diffrents 8 String toString () {
domain doivent tre complts. Pour le domain Res- 9 return this . name ;
10 }
taurant, on aura : 11
1 class Restaurant { 12 static constraints = {
2 String name 13 name blank : false
3 14 eventDate nullable : true
4 static constraints = { 15 }
5 name blank : false , unique : true 16 }
6 }
7 } En regardant lensemble des contraintes, on se
rend compte que tous les champs sont obligatoires.
Le code Groovy a une syntaxe assez La relation de type 1 N entre lEvent et les
proche de Java, mais un peu plus pu- Vote est dfini avec le mot clef hasMany, qui d-
re. Pour en savoir un peu plus, vous clare une liste de type it.resto.Vote, accessible par le
pouvez consulter cette introduction champ votes.
Groovy : lien 33. Pour chaque Event, on garde galement une trace
de lutilisateur qui cre lEvent, dans le champ ow-
Lobjet it.resto.Restaurant nest dfini que par ner, qui permet de faire une relation de type 1 1
son nom (name). Ensuite, dans le bloc constraints, entre un Event et un User.
on peut dfinir toutes les contraintes sur les diff- Terminons avec le Vote qui va relier un Event,
rents champs. un User et la liste des Restaurant que le participant
Dans notre cas, le nom du restaurant sera non aura slectionns.
null (par dfaut dans les domain Grails), non vide 1 class Vote {
(blank :false) et unique (unique :true). 2
Bien que plus complte, la dclaration dun User 3 User user
4
est assez similaire. 5 static hasMany = [ restaurants :
1 class User { Restaurant ]
2 6
3 String name 7 static belongsTo = [ event : Event ]
4 String lastName 8
5 String login 9 String toString () {
6 String password 10 def listRe stauta nt
7 String email 11 for ( restaurant in restaurants )
8 boolean admin = false {
9 12 lis tResta utant + = restaurant
10 String toString () { . name + -
11 return this . lastName + + 13 }
this . name 14 return this . user . login + : +
12 } lis tResta utant
13 15 }
14 static constraints = { 16
15 name blank : false 17 static constraints = {
16 lastName blank : false 18 }
17 login size : 5 .. 1 5 , blank : false , 19 }
unique : true
18 password size : 5 .. 1 5 , blank : La classe it.resto.User dfinie dans le Vote re-
false prsente la relation lien direct de type 1 1, ce qui

Developpez Magazine est une publication de Developpez.com page 33


Numro 56 fvriermars 2015
signifie quun vote est attach un seul et unique findBy. . .
User. Dans une liste de va-
InList
Les rfrences vers les restaurants slectionns leurs donnes
par lutilisateur sont dclares avec le mot clef has- Infrieur une valeur
LessThan
Many. Un Vote est reli un ou plusieurs Restau- donne
rant. Infrieur ou gal
LessThanEquals
une valeur donne
LEvent est dclar avec belongsTo, indiquant Suprieur une va-
que le Vote lui appartient. On retrouve son qui- GreaterThan
leur donne
valent en hasMany dans la classe it.resto.Event. Suprieur ou gal
En supprimant un Event, les Vote associs seront GreaterThanEquals
une valeur donne
galement supprims. Recherche dun pat-
Like
Dans tous les cas, lidentifiant technique id est tern dans une chane
implicite. Similaire au Like,
Ilike mais insensible la
Voil, nous sommes prts, GORM va faire le
casse
reste. Il sagit dune surcouche au framework hiber-
Diffrent de la valeur
nate qui gnre automatiquement toute une srie de NotEqual
donne
mthodes telles que load, save, exist. . . mais gale-
Se situant entre deux
ment une partie plus magique ; des mthodes InRange
valeurs ordonnes
de recherches comme findBy* qui sont dfinies en
Similaire au Like,
fonction de la classe. Celles-ci sont utilisables direc-
mais avec la possibi-
tement dans la suite du projet (implmentation im- Rlike
lit de raliser des ex-
plicite), ce qui rduit le code de lapplication et les
pressions rgulires
tests raliser.
Se situant entre deux
Par exemple, pour la classe it.resto.Restaurant, Between
valeurs
on retrouvera la findByName ou findByNameLike. Contenu nest pas
IsNotNull
Dans le tableau ci-dessous, quelques exemples de null
suffixe pour le findBy. IsNull Contenu est null

5 Mise en place des premiers tests

En parallle de la cration des diffrentes classes le nom du restaurant sont bien respectes (ni null,
de domain (quatre fichiers dans it-resto/grails- ni blank).
app/domain/it/resto), Grails a galement g-
1 void test constraint Restaurant () {
nr des classes de test (dans it-resto/grails- 2 given :
app/test/unit/it/resto). Elles se prsentent toutes 3 mockForConstraintsTests
de la mme manire avec une mthode setup, qui Restaurant
4
sera excute avant chaque mthode de test, ainsi 5 when : the restaurant name is
quune mthode cleanup excute aprs le test. null
Il ne reste plus qu crire les mthodes de test 6 def restaurant = new Restaurant
pour valider le bon fonctionnement des classes du ()
7 restaurant . name = null
domain. 8
Ces mthodes doivent tre crites en plusieurs 9 then : validation should fail
sections, connues sous le nom de given-when-then : 10 ! restaurant . validate ()
11 restaurant . hasErrors ()
la section given dcrit ltat du systme avant 12 print restaurant . errors [ name ]
13
de dbuter le scnario. Ce sont les conditions
14 when : the restaurant name is
pralables ; blank
la section when est le droulement du scnario 15 restaurant . name =
16
spcifier ; 17 then : validation should fail
la section then va dcrire et tester les change- 18 ! restaurant . validate ()
19 restaurant . hasErrors ()
ments attendus suite au scnario ralis dans 20 print restaurant . errors [ name ]
la section when. 21
22 }
Un test sur la cration et la validation du domain
Restaurant ressemblera ce qui suit. Dans ce pre- Dans la section given, la seule chose dfinie est
mier test, nous allons vrifier que les contraintes sur le mockForConstraintsTests qui mocke la classe

Developpez Magazine est une publication de Developpez.com page 34


Numro 56 fvriermars 2015
it.resto.Restaurant (toute la machine Grails nest du scnario. La mthode valide() va dterminer si
pas lance durant les tests). Ce mock ajoute toutes les contraintes sont respectes.
la mthode valide() la classe, mais permet aussi Toutes les instructions de la section then doivent
de dtecter plus simplement des erreurs avec la pro- tre vraies, le contraire indiquant une erreur du test.
prit errors. De plus, les messages sont allgs Pour simplifier un peu plus la dtection des erreurs,
et plus simples analyser. la mthode hasErrors() indique si des erreurs ont t
Par contre, il y a une limitation. Il ne faut pas rencontres, puis le message est disponible en fonc-
oublier que le contexte dexcution est un test uni- tion du champ en erreur. Dans cet exemple, ce sera
taire et non pas dintgration. Il ny a pas dajout restaurant.errors[name].
de mthodes au runtime par GORM par exemple
(findBy*, etc). Pour dmarrer le test, lancez la commande test-
Dans la section when, cest la zone dex- app (ou grails test-app si vous avez quitt le mode
cution du scnario de test. Ici, cest un objet interactif). la fin, un rapport est disponible dans
it.resto.Restaurant qui est cr, mais le nom (name) \target\test-reports\.
est null (explicitement dclar). Il est recommand de raliser cette tape au fur
Dans la section then, on valide ltat de sortie et mesure de la cration des classes du domain.

6 Peuplement de la base

Le squelette de lapplication a t ralis et le Attention ! Si vous utilisez cette base pour votre
modle de donnes est prt (dfinition des objets do- application de production, noubliez pas de changer
main ainsi que les tests unitaires sur les contraintes). le mot de passe admin et de bloquer laccs la
Avant de raliser les premiers crans et pour avoir console, sinon cela revient exposer tout le contenu
des lments y afficher, il faut peupler la base de de la base sur Internet.
donnes. La configuration de la base se fait dans le fichier
Cela se fait simplement, depuis le fichier grails- grails-app/conf/DataSource.groovy, au niveau de la
app/conf/BootStrap.groovy qui contient la mthode proprit environments.development.datasource :
init excute au lancement de lapplication et la m- 1 dataSource {
thode destroy quand lapplication est arrte. 2 dbCreate = " create - drop "
Il suffit de mettre en place le code suivant dans 3 url = " jdbc : h 2 : mem : devDb ; MVCC = TRUE ;
la mthode init : LOCK_TIMEOUT = 1 0 0 0 0 "
4 }
1 if (! Restaurant . count () ) {
2 print Create Initialement, la proprit dbCreate est create-
3 new Restaurant ( name : King Croissant
) . save ( failOnError : true ) drop, mais elle peut prendre dautres valeurs, selon
4 new Restaurant ( name : Les trois mi - le besoin :
temps ) . save ( failOnError : true )
5 } create : supprime les tables, les index, etc.
avant de recrer le schma au dmarrage ;
Restaurant.count() dnombre les restaurants en
base. Cette condition vite de crer systmatique- create-drop : semblable create, mais en sup-
ment les mmes lments chaque lancement de primant les tables larrt de lapplication ;
lapplication (ce qui arrive rgulirement en phase update : met jour la table en crant les tables
de dveloppement). et les index manquants, sans perdre les don-
Pour crer un nouveau Restaurant et le stocker nes existantes ;
en base, on le fera de cette faon :
validate : ne fait aucun changement dans la
1 new Restaurant ( name : King Croissant ) .
save ( failOnError : true ) base de donnes, mais compare le schma exis-
tant avec le schma configur dans lapplica-
La mme chose doit tre faite pour les autres l- tion (objet domain) et gnre un rapport.
ments du modle : User, Event et Vote.
Pour la base de donnes sous-jacente, Grails pro- Attention : create-drop et create sont manier
pose une connexion la base H2 en natif, en mode avec prcaution en dehors dun environnement de
stockage en mmoire et une console dadministra- dveloppement.
tion accessible via lien 34. Lidentifiant par dfaut On retrouve des configurations quivalentes pour
est admin et il ny a pas de mot de passe. les environnements de test et de production.

7 Conclusion

Voil, nous venons de voir comment : crer une application Grails partir de zro ;

Developpez Magazine est une publication de Developpez.com page 35


Numro 56 fvriermars 2015
mettre en place le modle de donnes et poser dploiement complet de lapplication it-resto.
des contraintes sur celui-ci ; Pour aller plus loin, toutes les sources de larticle
raliser des tests de validation du modle ; sont sur GitHub : lien 35
La documentation de Grails, trs complte, est
peupler la base en vue des premiers dvelop-
disponible ici : lien 36
pements.
Enfin, pour ceux qui sont allergiques aux lignes
Dans la suite de cet article, nous raliserons les de commandes, il existe le GTS qui permet de sim-
diffrents crans de lapplication et irons jusquau plifier lapproche de lenvironnement Grails.

Retrouvez larticle de Rmi Masson en ligne : lien 37

Developpez Magazine est une publication de Developpez.com page 36


Numro 56 fvriermars 2015
Libres & Open Source
Les derniers tutoriels et articles

Savoir crer un bon mot de passe avec


un niveau de scurit suffisant - Facile
retenir mais difficile deviner
Les divers faits dactualit dmontrent quil est ncessaire de bien dfinir son mot de passe.
Avec lre de la diversit des paramtres de connexion des rseaux sociaux, des forums, des blogs, etc.,
il est souvent facile de prendre le mme mot de passe pour tous. . . Mais est-ce la bonne solution ! ! !

1 Dfinition

La dfinition dun mot de passe est une squence Si vous tes intresss la scurit de
de caractres, de mots, de chiffres ou dun mlange vos donnes, la suite de ce tutoriel va
de tout, vous permettant ainsi de vous identifier vous servir.
pour accder un service. Je ne vous donnerai pas la recette
miracle , mais juste des pistes pour
amliorer la robustesse de vos mots de
passe.

2 Comment choisir un bon mot de passe ?

Les tudes que vous pouvez voir sur Internet d- abc123 ;


montrent que bien souvent les mots de passe sont 111111 ;
vulnrables, pour preuve, ceux qui ressortent rgu-
lirement dans des sondages sont : etc.

123456 ;
2.1 Le nombre de caractres
000000 ;
password ; Cest un mot qui doit contenir un certain nombre
de caractres et de diffrents types : lettres minus-
12345678 ; cules et majuscules, chiffres et caractres spciaux.
qwerty ; Un bon mot de passe doit contenir au moins huit
azerty ; caractres. Comme le dmontre cette synthse :

Developpez Magazine est une publication de Developpez.com page 37


Numro 56 fvriermars 2015
Mot de passe Possibilits Temps de dcouverte

Uniquement des minuscules


6 caractres 308 915 776 0 sec
9 caractres 5 429 503 678 976 9 min
Avec des minuscules et des majuscules
6 caractres 19 770 609 664 1 sec
9 caractres 2 779 905 883 635 712 3 jours
Avec des minuscules, des majuscules et des chiffres
6 caractres 56 800 235 584 5 sec
9 caractres 13 537 086 546 263 552 15 jours
Avec des minuscules, des majuscules, des chiffres et des caractres spciaux
6 caractres 2 699 554 153 024 4 min
9 caractres 4 435 453 859 151 328 768 14 annes

Certains diront, il suffit de mettre un prnom et une anne de naissance , et ces


mot de passe de 15 ou 20 caractres programmes le savent !
et vous serez tranquille !
2.2 Lutilisation
Le problme est autre, les programmes qui Il est recommand et vivement conseill de nuti-
servent trouver les mots passe fonctionnent diff- liser un mot de passe quune fois. Car si lun de vos
remment. Car il vous est souvent demand de mettre comptes est pirat, cela nen rendra que plus facile
des lettres et des chiffres. Il est si facile de saisir un de pirater les autres.

3 Dfinir un mot de passe sr

Pour que le mot de passe soit sr, il va falloir 3.2.a Voici quelques cas possibles
passer par diffrentes tapes.
3.2.a.a Cas 1
Vous pouvez crer un code, en dfinissant cer-
3.1 tape 1
tains caractres par dautres, par exemple :
La premire va consister dfinir une trame pour c par ;
le mot de passe. d par 1 ;
Il existe pour cela diffrentes faons de faire, les
v par Z ;
plus connues sont :
etc.
la mthode phontique qui consiste trouver Inutile de faire tout lalphabet, quelques carac-
une phrase facile retenir et de se servir des tres suffiront. Vous pourrez ainsi introduire des
sons des syllabes pour faire le mot de passe : chiffres et des caractres spciaux.
Jai achet 8 CD pour 100 euros cet aprs-midi Par exemple, si vous prenez les paroles dune
scrit ght8cd ?am ; chanson et avec les caractres cits ci-dessus :
la mthode des premires lettres qui consiste Je vous parle dun temps Que les moins de
trouver une phrase facile retenir et de vingt ans Ne peuvent pas connatre scrit
prendre la premire lettre de chaque mot pour jZp1utqlm1Zanpp .
faire le mot de passe : un tiens vaut mieux
que deux tu lauras scrit 1tvmq2tla . 3.2.a.b Cas 2
Vous pouvez dfinir une frquence sur les majus-
3.2 tape 2 cules, par exemple tous les trois caractres.
Et en faire de mme avec les chiffres, o vous
ce niveau, nous obtenons un mot constitu de choisissez un nombre dau moins quatre chiffres. En-
lettres minuscules. Il va donc falloir rajouter des ma- suite, il vous suffit de linclure tous les deux carac-
juscules, des chiffres et des caractres spciaux. tres ou den mettre un au dbut, un la fin et deux
Cette tape est la plus complexe, car elle va d- au milieu.
pendre de votre personnalit, et cest ce qui va en Par exemple, si vous prenez les paroles dune
faire votre mot de passe, et il sera ainsi unique. chanson : Je vous parle dun temps Que les moins

Developpez Magazine est une publication de Developpez.com page 38


Numro 56 fvriermars 2015
de vingt ans Ne peuvent pas connatre , en prenant 3.3 Lunicit
les tous les trois caractres pour la majuscule et lan-
Il existe des mthodes pour crer des mots de
ne 2014, cela donne : 2jvpDutq0L1mdvAnppC4
passe uniques partir du mot de passe dfini dans

ltape prcdente.
Pour cela, il vous suffit de rajouter des infor-
mations la fin, au dbut ou au milieu de votre
3.2.a.c Cas 3 mot de passe, en prenant lexemple du cas 1
jZp1utqlm1Zanpp , cela donne :
Vous pouvez aussi dcaler les lettres de lalpha-
bet dun nombre de caractres ou en faire de mme de prendre la premire et la dernire lettre
avec les touches du clavier. du systme (Facebook en fk , Orange
en oe , etc.) : ce qui peut donner
Par exemple, si vous prenez les paroles dune
jZp1utqlm1Zanpp_fk ;
chanson : Je vous parle dun temps Que les moins
de vingt ans Ne peuvent pas connatre avec le cla- de prendre deux derniers caractres du sys-
vier en dcalant dune case scrit kb^(iysmfbz,^^ tme (Facebook en ok , Orange en
ge , etc.) : ce qui peut donner
jZp1utqlm1Zanpp_ok ;
de prendre certains caractres et de les insrer
3.2.b Conclusion la suite dun caractre spcial : ce qui peut
donner jZp1fk utqlm1Zanpp ;
Il existe beaucoup dautres mthodes, et vous etc.
pouvez crer la vtre. Le but est quune fois que
vous tes arriv cette tape vous obteniez Vous pouvez aussi rajouter des carac-
un mot de passe personnalis et dont vous tres spciaux pour introduire le sys-
pouvez vous souvenir facilement. tme.

4 Gnrateur de mots de passe

Il existe une autre faon de crer des mots de site 3 : lien 40 ;


passe qui est de passer par des gnrateurs de mots etc.
de passe.
En voici quelques-uns en ligne : Linconvnient est que si vous passez par ces
sites, il vous faudra trouver une mthode pour re-
site 1 : lien 38 ; trouver votre mot de passe ou sinon, il ne vous reste
site 2 : lien 39 ; plus qu lapprendre par cur.

5 Conclusion

Nous venons de voir comment vous pouvez dfi- ramtres sur un ordinateur public, de ne pas
nir un mot de passe. Mais un mot de passe ne sera oublier de vous dconnecter la fin.
jamais sr, cest pourquoi il est important de le mo- Maintenant vous pouvez trouver sur Internet des
difier rgulirement. sites qui vous permettront den tester la robustesse.
La frquence du changement dpend prin- Le rsultat peut varier dun site lautre, en voici
cipalement des donnes contenues, mais il est quelques-uns :
prconis de le faire tous les trois mois, et
pour les systmes contenant des informations site 1 : lien 41 ;
bancaires, il est conseill de le faire plus sou- site 2 : lien 42 ;
vent. site 3 : lien 43 ;
Il est aussi bien important de ne pas le no-
ter sur un bout de papier qui pourrait finir Vous avez maintenant en main certains lments
dans de mauvaises mains . . . qui vous permettront de crer des mots de passe cor-
Il en est de mme, si vous utilisez vos pa- rects.

Retrouvez larticle de Vincent Viale en ligne : lien 44

Developpez Magazine est une publication de Developpez.com page 39


Numro 56 fvriermars 2015
Emmabunts - Premiers pas sur la voie
Libre ;)
Le but de ce manuel est de fournir les lments de base tout nouvel acqureur dune machine sous
Emmabunts pour lui permettre de bien dbuter.

1 Le but de ce manuel

Le but de ce manuel est de fournir les lments Emmabunts pour lui permettre de bien dbuter.
de base tout nouvel acqureur dune machine sous

2 Distribution : Emmabunts

Les distributions GNU (lien 45)/Linux (lien 46) premires (pour de plus amples informations, voir
Emmabunts ont t conues pour faciliter le re- info.emmabuntus.org : lien 50).
conditionnement des ordinateurs donns aux asso-
Page principale : lien 51 ;
ciations humanitaires, en particulier aux commu-
nauts Emmas (do son nom) (lien 47), et favo- Forum : lien 52 ;
riser la dcouverte de GNU ()/Linux (lien 49) par Wikipdia : lien 53 ;
les dbutants. Un troisime objectif est de prolon- Articles sur Emmabunts dans la blogosphre :
ger la dure de vie du matriel pour limiter le gas- lien 54 ;
pillage entran par la surconsommation de matires
Revues de presse : lien 55.

3 Partie matrielle

3.1 Se connecter par cble Ethernet (rseau


filaire)

Branchez simplement votre cble Ethernet


votre machine : la connexion stablit de faon au-
tomatique, et vous devez voir sactiver licne des
connexions (deux flches haut/bas) dans la zone de
notification en haut droite de votre cran.
Connexion inactive

Puis slectionnez votre rseau Wi-Fi qui doit ap-


paratre, sinon cliquez sur la ligne Plus de rseaux
.
Renseignez le code de scurit de votre rseau
Connexion active Wi-Fi, et, pour ne pas faire derreur, pensez co-
cher la case Afficher le mot de passe .

3.2 Se connecter en Wi-Fi (rseau sans fil)

Cliquez sur licne des connexions (deux flches).


Voir images ci-dessus dans la zone de notification en
haut droite de votre cran.

Developpez Magazine est une publication de Developpez.com page 40


Numro 56 fvriermars 2015
3.3 Cl Wi-Fi reconnue automatiquement

Si votre PC na pas de carte Wi-Fi incorpore,


nous vous conseillons dutiliser lAdaptateur USB
Wireless-N 150 WNA1100 de chez Netgear (lien 56),

Cet utilitaire est disponible unique-


ment en anglais, et pour plus de ren-
seignements voir le Wiki dUbuntu-fr
(doc.ubuntu-fr.org/hplip : lien 60).

Si limprimante est dune autre marque, voir


ne pas confondre avec le modle USB Wire-
le tableau de compatibilit sur la page ddie du
less N150 Nano WNA1000M non compatible avec
Wiki dUbuntu-fr : (doc.ubuntu-fr.org/imprimante :
Emmabunts (lien 57).
lien 61).

3.5 Ajout dun scanner


Branchez le scanner et lancez loutil SimpleScan
(lien 62) dans le menu Photo. Lancez la numrisa-
tion et enregistrez sous le format souhait (format
choisir en bas gauche) .pdf est le plus utilis pour
les documents, .jpg pour les images. Si vous avez
des soucis de fonctionnement, nous vous conseillons
de lire cette page ddie aux scanners sur le Wiki
Certaines cls Wi-Fi ne sont pas dUbuntu-fr : (doc.ubuntu-fr.org/scanner : lien 63).
reconnues automatiquement, cest
la raison pour laquelle nous vous 3.6 Ajout dune cl 3G
conseillons la cl WNA1100 toujours
en vente environ 15 . Mais il La configuration dune cl 3G est une opration
est possible de faire fonctionner des assez complique, voir la liste des cls 3G sur le Wiki
cls non reconnues automatiquement, dUbuntu (lien 64), ou sur les pages ddies aux cls
comme la WNA1000M, et dautres : 3G Sfr (lien 65), et Orange (lien 66).
voir le chapitre cls Wi-Fi sur le Wiki Pour contourner ce problme, nous vous
dUbuntu-fr (doc.ubuntu-fr.org/Wi- conseillons de vous servir de votre tlphone por-
Fi : lien 58). table 3G comme routeur, en faisant une connexion
avec votre ordinateur en Wi-Fi ou par cble USB.
Voir comment connecter votre tlphone un ordi-
nateur ou faire un pont sur votre tlphone en fai-
sant une recherche par exemple avec Android ver-
3.4 Ajout dune imprimante sion_Android Ubuntu.

Tous les modles dimprimantes ne sont pas com-


patibles avec Linux et il faudra peut-tre installer 3.7 Rglage audio
des pilotes additionnels non libres (par exemple Ep- Les lecteurs Clementine (lien 67) et Rhythmbox
son). La procdure consiste brancher limprimante (lien 68) contiennent des morceaux de musique, afin
et la faire dtecter par le systme qui proposera les de pouvoir tester directement le son sur lordinateur.
drivers adapts. Lancez par exemple le lecteur Clementine. Pour
Si limprimante nest pas dtecte automatique- cela, cliquez dans la catgorie Audio , puis sur
ment par lordinateur et que votre imprimante est de Clementine . Ensuite, double-cliquez sur un mor-
marque HP, lancez lutilitaire HPLip (lien 59) inclus ceau de musique, et si vous nentendez pas de
dans Emmabunts sous Utilitaire , cliquez sur musique, cliquez sur licne reprsentant un haut-
licne HPLIP Toolbox , puis sur Setup Device parleur en haut droite de lcran, puis sur R-
, et renseignez les champs de cette interface. glages du son. . . :

Developpez Magazine est une publication de Developpez.com page 41


Numro 56 fvriermars 2015
3.8 Test de votre webcam
Lancez le logiciel Cheese (lien 69) afin de vri-
fier que votre webcam est bien fonctionnelle, pour
cela cliquez sur la catgorie Vido , puis sur
Puis sous la fentre de gestion du contrle de vo- Cheese , et vous devriez voir limage produite par
lume, allez sous longlet Priphriques de sortie , votre webcam (votre bobine gnralement !). Si cela
et dans le menu droulant essayez les diffrents ports ne fonctionne pas voir sur le Wiki dUbuntu-fr :
de sortie pour le son. doc.ubuntu-fr.org/webcam (lien 70)

4 Partie logicielle

4.1 Mot de passe jusqu lapparition du menu de lancement du sys-


tme sur fond noir. Ensuite, slectionnez la 2e ligne
Le mot de passe par dfaut est renseign sur du menu de lancement contenant le texte suivant :
votre fiche de vente, si ce nest pas le cas veuillez Linux (mode de dpannage) , puis tapez sur la
prendre contact avec votre point de vente. touche Entre pour valider cette ligne. Le systme va
Ce mot de passe vous sera ncessaire pour ef- se lancer et vous allez arriver dans un nouveau menu
fectuer les mises jour logicielles de votre machine, sur fond bleu, alors veuillez slectionner la ligne
ou pour installer de nouveaux programmes (toutes Passage en mode Root , puis dans cette nouvelle
tches dadministration). fentre de console sur fond noir, veuillez taper la
ligne suivante : mount -rw -o remount /
4.2 Changer son mot de passe Puis validez, et ensuite tapez cette ligne : passwd
<votre identifiant>, par exemple sur les machines
Cliquez sur la catgorie Utilitaire , puis sur
vendues dans nos points de vente, il faut taper :
licne Users and Groups . Dans cette nouvelle
passwd emmabuntus, puis validez. Vous devez en-
fentre, cliquez sur le bouton Modifier. . . , puis
suite renseigner deux fois le nouveau mot de passe.
renseignez lancien mot de passe et saisissez deux
Si tout se passe correctement le message suivant
fois le nouveau mot de passe.
devrait apparatre :
passwd : password updated successfully .
Puis tapez cette commande pour redmarrer la
machine : reboot.

4.4 Dock
Le Dock ou lanceur dapplications est la pierre
angulaire dEmmabunts, et lui apporte indpen-
dance et originalit par rapport aux distribu-
tions Ubuntu dont elle est issue. Cest Cairo-Dock
(lien 71) qui est utilis depuis la premire version
dEmmabunts.
4.3 Rinitialiser son mot de passe
La rinitialisation du mot de passe est ncessaire
si vous lavez oubli. Pour cela, lors du dmarrage
de la machine, maintenez enfonce la touche Shift Pour changer de niveau dutilisateur du Dock,
droite du clavier (Touche majuscule droite) cliquez sur Aide , puis Changer le type du dock

Developpez Magazine est une publication de Developpez.com page 42


Numro 56 fvriermars 2015
, et slectionnez le niveau dsir, voir limage ci- Le lancement du Dock nest pas obli-
dessous : gatoire. Pour larrter, il faut mo-
difier les lignes ci-dessous contenues
dans le fichier /.profile en lanant
par exemple la commande : geany
/.profile
1 # Config pour le projet
Emmabuntus
2 # Set Dock_xx to 1 to
activate the Cairo - Dock
on XFCE or LXDE or
OpenBox
3
4 export Dock_XFCE = 1
5 export Dock_LXDE = 0
6 export Dock_OpenBox = 0

4.5 Blocage de certains sites Internet


Ce Dock se dcline en trois niveaux dutilisation : Emmabunts contient deux navigateurs Inter-
All, Simple, et Kids. Il est escamotable ou pas en net Firefox (lien 72) et Chromium (lien 73) qui in-
fonction du format de lcran. Exemple des trois ni- cluent des extensions pour la protection des mineurs
veaux de Dock pour la catgorie bureautique : (Block.si), mais aussi contre la publicit (lien 74) et
les tentatives de Phishing (ou Fishing) (lien 75).
Lextension de protection des mineurs peut aussi
bloquer laccs certains sites, voir limage ci-
dessous du blocage dun site sans catgorie :

Niveau expert

Pour ne plus avoir ce blocage avec les sites sans


catgorie, il faut demander la rvaluation du site,
simplement en renseignant la catgorie, et en com-
muniquant son adresse mail :

Niveau dbutant

Niveau enfant

Developpez Magazine est une publication de Developpez.com page 43


Numro 56 fvriermars 2015
Il est galement possible de dsactiver cette pro- Sous longlet Extensions , cliquez sur dsacti-
tection. ver Block.si.
Pour Firefox : cliquez sur Outils de dvelop-
pement , puis sur Modules complmentaires , et
sous longlet Extensions , cliquez sur le bouton
Dsactiver de lextension Block.si.

Plus dinformations sur la configuration du


contrle parental sous Emmabunts 2 sur le site de
Comment a Marche : lien 76.

4.6 Compatibilit avec la suite Microsoft


Office

La catgorie bureautique a particulirement t


tudie afin de fournir des outils adapts chaque
public avec trois suites bureautiques : LibreOffice
pour les utilisateurs avancs (lien 77) ; AbiWord
(lien 78)/Gnumeric (lien 79) pour les dbutants,
ou pour les machines ayant peu de ressources ; et
OOo4Kids (lien 80) pour les enfants.
Il est galement possible de dsac- Emmabunts est prvue pour installer facile-
tiver certains paramtres de filtrage ment les polices de caractres non libres de la famille
du contrle parental, pour cela cli- Arial (Microsoft Office 2003) (lien 81), et de la fa-
quez sur le bouton Prfrences mille Calibri (Microsoft Office 2007/2010) (lien 82).
de lextension Block.si, puis slection- Pour vrifier que ces polices de caractres sont pr-
nez longlet Advance Filter , puis sentes dans votre ordinateur, ouvrez lapplication
choisissez les types de sites que vous Writer de LibreOffice (lien 83), et dans le slecteur
voulez autoriser (Allow) ou bloquer de polices tapez la lettre A pour vrifier que la po-
(Block). Le filtre Unrated est celui lice Arial est prsente. De la mme faon, rouvrez le
qui pose le plus de problmes, car il slecteur et tapez la lettre C afin de vrifier que la
englobe les sites nappartenant au- police Calibri est prsente.
cune catgorie, et de ce fait permet
une protection maximale, cest pour
cette raison que nous lavons activ,
mais vous tes libre de le dsactiver.

Pour Chromium : cliquez sur le symbole carr


avec trois barres horizontales droite du navigateur,
puis sur Paramtres .

Si lune ou lautre des polices nest pas prsente,


cliquez sur Maintenance , puis Logiciels Non
libres , et cliquez sur lune des icnes contenant
une lettre T pour installer la police non prsente sur
votre machine. Renseignez le mot de passe quand il
est demand.

Developpez Magazine est une publication de Developpez.com page 44


Numro 56 fvriermars 2015
4.8 Voir des vidos sur Internet
Pour pouvoir installer ces polices de
caractres, votre ordinateur doit tre Afin de pouvoir regarder des vidos sur Internet,
raccord Internet. par exemple sur YouTube (lien 90), nous avons t
obligs dintgrer le lecteur Adobe Flash (lien 91),
qui est un lecteur non libre (qui peut donc conte-
nir des espions logiciels) (lien 92), et dont le format
Par dfaut LibreOffice enregistre les nest pas document, ce qui empche llaboration
documents dans un format ouvert ap- dune version libre, prservant la vie prive des uti-
pel ODT (Open Document Text) lisateurs.
(lien 84), ce format ntant pas li-
sible par dfaut dans les anciennes 4.9 Visioconfrence sur Internet
versions de la suite bureautique Mi-
crosoft Office (lien 85), il est judicieux Afin de pouvoir effectuer des vidoconfrences
de faire aussi une copie au format sur Internet facilement, nous avons t obligs din-
.doc version Microsoft Word (lien 86) tgrer lapplication Skype (lien 93), qui est non
97/2000/XP/2003 de votre document libre (qui peut donc contenir des espions logiciels)
original pour lchanger avec des per- (lien 94). Dautres solutions libres sont disponibles
sonnes qui nutilisent pas LibreOffice, dans Emmabunts comme Empathy (lien 95) ou
et aussi de joindre la version PDF. Ekiga (lien 96), par contre vous serez oblig de crer
un nouveau compte et vos amis seront aussi obli-
gs dutiliser une application compatible autre que
Skype, car ce dernier ntant pas libre, il est impos-
sible de pouvoir dvelopper un logiciel libre compa-
4.7 Lire un CD/DVD tible.

Il suffit de mettre un CD ou un DVD dans le 4.10 Ajout de logiciels fonctionnant sur Li-
lecteur, et au bout de quelques secondes le lecteur nux
Audacious (lien 87) souvre pour la lecture des CD
Audio, ou Kaffeine (lien 88) pour les DVD. Le systme Emmabunts (comme tout systme
Linux) fonctionne avec des paquets . Un paquet
(lien 97) contient tous les fichiers ncessaires au fonc-
Par dfaut nous avons configur Em- tionnement dun programme. Pour installer un pa-
mabunts pour lancer les mdias avec quet, il existe plusieurs mthodes :
les logiciels ci-dessus, mais si vous
la logithque Ubuntu (pour les dbutants) :
prfrez utiliser par exemple VLC
lien 98 ;
(lien 89) la place de Kaffeine, voici
la marche suivre. Linterface graphique de gestion de paquets Sy-
Cliquez sur licne Paramtrage naptic (pour les utilisateurs avancs) : lien 99 ;
sous Utilitaires dans le dock, puis La ligne de commande apt-get de gestion de
dans la nouvelle fentre sur Disques paquets (pour les experts) : lien 100.
amovibles et mdias , et sur longlet
Pour les dbutants linstallation de nouveaux lo-
Multimdia .
giciels a t simplifie grce lutilisation de la lo-
Remplacez la ligne concernant le lec-
githque incluse dans le systme. Pour cela, cliquez
teur Kaffeine par la ligne suivante :
sur Maintenance , puis Logithque (icne re-
/usr/bin/vlc playlist-autostart
prsentant un sac). Ensuite, faire une recherche avec
dvd ://
le nom du programme, ou en utilisant la navigation
par catgories.

Developpez Magazine est une publication de Developpez.com page 45


Numro 56 fvriermars 2015
Si le logiciel nest pas prsent, il faut faire une Pour utiliser cette application, cliquez dans la
recherche sur Internet en utilisant : le nom de catgorie loisirs , puis sur PlayOnLinux , et
votre programme associ au mot Ubuntu, si- suivre le guide pour installer votre application.
non voir la documentation sur le Wiki dUbuntu-fr
Noubliez pas que certains jeux nces-
(doc.ubuntu-fr.org : lien 101).
sitent des ordinateurs plus puissants
que celui que vous possdez, veuillez
regarder les prrequis de votre jeu.

4.11 Ajout de logiciels fonctionnant sur


Windows
Afin de permettre une plus grande compatibilit Toujours afin de permettre une transition entre
avec des programmes ne fonctionnant que sur les les plates-formes Windows, et Linux, VirtualBox
plates-formes Windows, WINE (lien 102) est intgr (lien 106) est disponible pour ventuellement faire
de base dans Emmabunts. Il permet par exemple fonctionner son ancien systme Windows sous Em-
de faire fonctionner lexcellent diteur de texte No- mabunts, et continuer utiliser des logiciels ne
tepad++ : lien 103. pouvant pas fonctionner sous Linux, et nayant pas
dquivalence complte. Voir cette liste dquiva-
Tous les programmes Windows ne lences Windows Linux (lien 107).
peuvent pas fonctionner sous Linux
mme en utilisant WINE, voir la
liste des applications compatibles :
lien 104.

Nous vous invitons plutt rechercher un logiciel


Libre Linux vous permettant dobtenir un rsultat
quivalent et peut-tre mme denrichir les auteurs
de ce logiciel de vos amliorations.
Pour installer une application Windows, tl-
chargez le programme excutable (.exe), puis faites
un clic droit sur cet excutable, et slectionnez
Ouvrir avec : Wine - Chargeur de programmes Win-
dows :
Virtualbox est une machine virtuelle
et ne peut en aucun cas rempla-
cer votre ancien systme en ce qui
concerne les interfaces physiques qui
sont des interfaces simules dans
la machine virtuelle. En dautres
termes, il est fort peu probable darri-
ver faire fonctionner votre ancienne
imprimante ou scanner travers Vir-
tualBox.

Emmabunts contient aussi PlayOnLinux La mise en uvre de VirtualBox n-


(lien 105), application permettant de faire fonction- cessite davoir des connaissances en
ner certains logiciels dvelopps pour la plate-forme informatique, et de possder les ver-
Windows, et en particulier dans le domaine du jeu sions des CD ou DVD dinstallation
vido, mais pour cela il faut possder les CD ou de ces autres systmes dexploitation.
DVD originaux de ces jeux.

Developpez Magazine est une publication de Developpez.com page 46


Numro 56 fvriermars 2015
4.12 Aide distance linterface. Si le bon code est saisi, lapplication de-
mande de renseigner le mot de passe du partenaire,
TeamViewer est un logiciel gratuit, mais non
code compos de six lettres et chiffres, situ sous le
libre permettant le contrle distance entre deux
code ID du partenaire. La connexion stablit alors
machines, afin de pouvoir aider et former les nou-
entre la machine matre et la machine du partenaire.
veaux utilisateurs. Cette fonctionnalit nest pos-
sible que dans un contexte non commercial : lien 108.
Pour lancer TeamViewer, cliquez sur licne
Maintenance , puis sur TeamViewer (icne bleue
avec une flche double sens). Cette opration doit
se faire sur les deux machines que lon souhaite
connecter ensemble avec la mme version de lap-
plication. La personne qui veut prendre le contrle
de la machine distante demande son interlocuteur
(partenaire) de lui fournir le Code ID (Code
neuf chiffres en haut gauche de linterface de
connexion) et le saisit dans la partie de droite de

5 Aide

Emmabunts intgre laide hors ligne directe- Si vous ne trouvez pas de solution votre pro-
ment partir du Dock, mais aussi lensemble des blme, voir :
tutoriels directement accessible partir du bureau,
F.A.Q : lien 109 ;
cliquez sur licne Emmabunts Information.
Forum : lien 110.

Retrouvez larticle du Collectif emmabunts en ligne : lien 111

Developpez Magazine est une publication de Developpez.com page 47


Numro 56 fvriermars 2015
ALM
Les derniers tutoriels et articles

Guide de Lean Management lusage


des quipes Agiles
Ce guide gratuit, rdig par des praticiens expriments, vous aidera dmarrer la mise en uvre de
trois techniques lean fondamentales pour amliorer vos pratiques agiles :
identifier plus finement les dveloppements ncessaires pour rsoudre vraiment le problme de vos
clients ;
crer un environnement visuel qui emmne toute votre quipe dans lamlioration continue ;
trouver les amliorations qui font la diffrence, par une dmarche structure de rsolution des
problmes.
Chaque pratique est illustre dexemples concrets, et accompagne dune checklist pour dmarrer du bon
pied.
Alors quattendez-vous ?

1 Avant-propos

indissociable du travail, et le qui doit


faire quoi pour russir devient qui
doit apprendre faire quoi pour russir
.
Cette transformation radicale se
construit jour aprs jour, personne par
personne, en allant sur le terrain pour
aider chaque collaborateur russir sa
journe. Cela amne chacun crer plus
de valeur pour ses clients, son entreprise
et la socit, et trouver ainsi un sens
son travail.
Les pratiques prsentes dans ce guide ouvrent
Le chemin vers cet idal a t trac par nos pr-
la voie vers une vision diffrente de lorganisation.
dcesseurs pendant plusieurs dcennies, et consign
Une vision base sur une conviction.
sous la forme de principes et de pratiques qui ont
Le changement vers une organisation pris le nom de lean .
la fois plus efficace et plus respectueuse Ce savoir-faire prcieux nous a t transmis par
des personnes est possible. Ce change- Marie-Pia Ignace et Michael Ball. Nous vous le
ment nat de la somme des apprentis- transmettons notre tour, en esprant quil vous
sages individuels. apportera les mmes moments de satisfaction, les in-
Lamlioration continue, en dfini- croyables dclics qui vous feront prendre de la hau-
tive, est celle des comptences de chaque teur.
collaborateur. Lapprentissage devient Rgis Medina

2 Inauguration du pont

Depuis plusieurs annes, lesprit et les pratiques professionnelle et la performance de vos quipes.
agiles vous ont permis damliorer votre satisfaction Mais voil : il reste encore des sources de frustra-

Developpez Magazine est une publication de Developpez.com page 48


Numro 56 fvriermars 2015
tion. Les autres quipes rsistent, les managers ne vitaux au sein des organisations.
sponsorisent pas vos initiatives de changement, les Ce livre se structure autour de trois apprentis-
clients se plaignent. Il doit bien exister des moyens sages fondamentaux. Pour chacun dentre eux, des
damliorer les choses, mais comment les trouver ? praticiens agiles vous racontent comment, en appli-
En vous entranant aux pratiques lean slection- quant dautres pratiques, en adoptant dautres pos-
nes dans ce livre, vous apprendrez : tures, en sentranant fonctionner diffremment, ils
trouver les leviers de lamlioration qui am- ont trouv des solutions simples des problmes qui
neront vos quipes un autre niveau de per- paraissaient complexes.
formance ; Puis des experts dcrivent les principes lean mis
en uvre dans les histoires prsentes.
rsoudre les difficults que vous rencontrez
Enfin, des prconisations de premiers pas vous
dans vos relations avec dautres quipes ou le
guident vers la mise en pratique.
management ;
Enfin, des prconisations de premiers pas vous
livrer des logiciels qui amliorent la vie de vos guident vers la mise en pratique.
utilisateurs et dont vous pouvez tre fiers. Nous souhaitons transmettre ce que nous avons
Ces nouvelles comptences vous apporteront le appris lors de notre voyage initiatique. Notre pro-
savoir-faire ncessaire pour insuffler les changements messe : a en vaut la peine !

3 Structure du livre

Ce guide comprend trois chapitres : Trois cas rels dquipes agiles ayant intgr
le management lean dans leurs pratiques. Ils
1. Comprendre lattente du client : lien 112 ; dcrivent leur contexte, les exercices quils ap-
2. Visualiser le challenge et les problmes : pliquent, et ce quils y gagnent. la fin de
lien 113 ; chaque cas, nous analysons et dveloppons les
principes lean mis en uvre.
3. Trouver les leviers de lamlioration : lien 114.
Une description des pratiques lean sur le thme
Chaque chapitre est organis de la faon sui- du chapitre.
vante. Les premiers pas que nous proposons de
Une description des pratiques agiles sur le mener pour se lancer.
thme abord. Des rfrences de lecture pour aller plus loin.

4 Conclusion

Le lean est une pratique. La valeur de ce guide venez partager vos dclics et vos questions avec les
rside dans les premiers pas , les exercices que autres praticiens pour que nous progressions tous
nous avons slectionns pour vous. Commencez les ensemble.
mettre en uvre ds maintenant, pas aprs pas, et

Retrouvez larticle de Philippe Blayo, Antoine Contal, Dominique De Premorel, Pierre Jan-
nez, Christophe Keromen, Rgis Medina, Sandrine Olivencia, Christophe Ordano, Raphal
Pierquin et Bruno Thomas en ligne : lien 115

Developpez Magazine est une publication de Developpez.com page 49


Numro 56 fvriermars 2015
Liste des liens
Page 9
lien 1 : . . . http://wassimchegham.developpez.com/tutoriels/javascript/javascript-pour-les-jedis-
episode-1-au-coeur-des-fonctions/
Page 11
lien 2 : ... http://www.developpez.com/redirect/1428
lien 3 : ... http://www.developpez.com/redirect/1429
lien 4 : ... http://javascript.developpez.com/
lien 5 : ... http://javascript.developpez.com/cours/?page=cote_serveur#node
lien 6 : ... https://www.youtube.com/watch?v=USsQRTsWIZo
lien 7 : ... https://github.com/andreareginato/simple-oauth2
Page 12
lien 8 : . . . http://expressjs.com/
lien 9 : . . . http://expressjs.com/starter/installing.html
lien 10 : . . . https://anywhere-sandbox.idn.laposte.fr/
Page 13
lien 11 : . . . http://www.developpez.com/redirect/1436
lien 12 : . . . http://javascript.developpez.com/cours/?page=cote_serveur#node
lien 13 : . . . https://github.com/BeMyApp-France
lien 14 : . . . mailto:equipe-idn.dsic@laposte.fr
lien 15 : . . . http://laposte.developpez.com/tutoriels/identite-numerique-la-poste/integration-
api-authentification-nodejs/
Page 14
lien 16 : . . . http://www.paulund.co.uk/create-download-icon-css
lien 17 : . . . http://www.paulund.co.uk/playground/demo/css-download-icon/
Page 15
lien 18 : ... http://www.paulund.co.uk/css3-buttons-with-pseudo-classes
lien 19 : ... http://www.paulund.co.uk/playground/demo/css-download-icon/
lien 20 : ... http://www.paulund.co.uk/playground/demo/css-download-icon/
lien 21 : ... http://www.paulund.co.uk/c/tutorials/css-tutorials
lien 22 : ... http://djibril.developpez.com/tutoriels/temp/css-test/
Page 16
lien 23 : . . . http://www.developpez.net/forums/d1420991/environnements-developpement/delphi/
langage/variables-globales-section-implementation-objet-singleton/
Page 24
lien 24 : . . . http://jeremy-laurent.developpez.com/tutoriels/delphi/patterns/singleton/
Page 25
lien 25 : . . . http://www.developpez.net/forums/d1454204-2/environnements-developpement/eclipse/
eclipse-java/projet-valhalla-incubateur-d-idees-fonctionnalites-preparer-terrain-java-10-
a/#post8080534
Page 26
lien 26 : . . . http://www.developpez.com/actu/80483/Un-pour-cent-des-bugs-signales-ont-ete-exploites-
Silverlight-et-Apache-de-plus-en-plus-vises-par-les-pirates-selon-le-rapport-de-securite-
de-Cisco/
lien 27 : . . . http://www.developpez.net/forums/d1494706/java/general-java/java-nouvelles-mises-
jour-corriger-19-vulnerabilites-desactiver-ssl-3-0-a/
Page 27
lien 28 : . . . http://www.webmotion-framework.org/
Page 31
lien 29 : . . . http://www.webmotion-framework.org/
lien 30 : . . . http://julien-ruchaud.developpez.com/tutoriels/introduction-framework-web-webmotion/

Developpez Magazine est une publication de Developpez.com page 50


Numro 56 fvriermars 2015
Page 32
lien 31 : . . . http://localhost:8080/it-resto/
lien 32 : . . . http://pparrend.developpez.com/tutoriel/mda-intro/
Page 33
lien 33 : . . . http://ericreboisson.developpez.com/tutoriel/java/groovy/
Page 35
lien 34 : . . . http://localhost:8080/nom_app/console
Page 36
lien 35 : . . . https://github.com/masson-r/it-resto
lien 36 : . . . http://grails.org/doc/2.4.4/guide/index.html
lien 37 : . . . http://remimasson.developpez.com/tutoriels/grails/developper_application_web/initialisation_
part1/
Page 39
lien 38 : ... http://www.generateurdemotdepasse.com/
lien 39 : ... http://www.libellules.ch/passwordgen.php
lien 40 : ... http://www.francelink.net/generateur-de-mot-de-passe
lien 41 : ... https://howsecureismypassword.net/
lien 42 : ... https://pwdtest.bee-secure.lu/
lien 43 : ... http://www.panoptinet.com/panoptipass/
lien 44 : ... http://vviale.developpez.com/tutoriels/definir-mot-passe/
Page 40
lien 45 : ... http://fr.wikipedia.org/wiki/GNU
lien 46 : ... http://fr.wikipedia.org/wiki/GNU/Linux
lien 47 : ... http://fr.wikipedia.org/wiki/Mouvement_Emmas
lien 48 : ... http://fr.wikipedia.org/wiki/GNU
lien 49 : ... http://fr.wikipedia.org/wiki/GNU/Linux
lien 50 : ... http://info.emmabuntus.org/
lien 51 : ... http://www.emmabuntus.org/
lien 52 : ... http://forum.emmabuntus.org/
lien 53 : ... http://fr.wikipedia.org/wiki/Emmabunts
lien 54 : ... http://emmabuntus.sourceforge.net/blog/category/reviews/
lien 55 : ... http://fr.newspapers.emmabuntus.org/
Page 41
lien 56 : . . . http://www.netgear.fr/home/products/wireless-adapters/simplesharing/WNA1100.aspx
lien 57 : . . . http://www.netgear.fr/home/products/wireless-adapters/simplesharing/WNA1000M.aspx
lien 58 : . . . http://doc.ubuntu-fr.org/wifi
lien 59 : . . . http://doc.ubuntu-fr.org/hplip
lien 60 : . . . http://doc.ubuntu-fr.org/hplip
lien 61 : . . . http://doc.ubuntu-fr.org/imprimante
lien 62 : . . . http://doc.ubuntu-fr.org/simple-scan
lien 63 : . . . http://doc.ubuntu-fr.org/scanner
lien 64 : . . . http://doc.ubuntu-fr.org/cles_3g
lien 65 : . . . http://doc.ubuntu-fr.org/sfr
lien 66 : . . . http://doc.ubuntu-fr.org/orange_3g
lien 67 : . . . http://fr.wikipedia.org/wiki/Clementine_(logiciel)
lien 68 : . . . http://fr.wikipedia.org/wiki/Rhythmbox
Page 42
lien 69 : . . . http://fr.wikipedia.org/wiki/Cheese_(logiciel)
lien 70 : . . . http://doc.ubuntu-fr.org/webcam
lien 71 : . . . http://fr.wikipedia.org/wiki/Cairo-Dock
Page 43
lien 72 : . . . http://fr.wikipedia.org/wiki/Firefox
lien 73 : . . . http://fr.wikipedia.org/wiki/Chromium_(navigateur_web)
lien 74 : . . . http://fr.wikipedia.org/wiki/Adblock_Plus

Developpez Magazine est une publication de Developpez.com page 51


Numro 56 fvriermars 2015
lien 75 : . . . http://fr.wikipedia.org/wiki/Ghostery
Page 44
lien 76 : . . . http://www.commentcamarche.net/faq/35490-emmabuntus-2-installation-et-controle-
parental
lien 77 : . . . http://fr.wikipedia.org/wiki/LibreOffice
lien 78 : . . . http://fr.wikipedia.org/wiki/AbiWord
lien 79 : . . . http://fr.wikipedia.org/wiki/Gnumeric
lien 80 : . . . http://fr.wikipedia.org/wiki/OOo4Kids
lien 81 : . . . http://fr.wikipedia.org/wiki/Arial
lien 82 : . . . http://fr.wikipedia.org/wiki/Calibri
lien 83 : . . . http://fr.wikipedia.org/wiki/Writer
Page 45
lien 84 : . . . http://fr.wikipedia.org/wiki/ODT
lien 85 : . . . http://fr.wikipedia.org/wiki/Microsoft_Office
lien 86 : . . . http://fr.wikipedia.org/wiki/Microsoft_Word
lien 87 : . . . http://fr.wikipedia.org/wiki/Audacious
lien 88 : . . . http://fr.wikipedia.org/wiki/Kaffeine
lien 89 : . . . http://fr.wikipedia.org/wiki/VLC_media_player
lien 90 : . . . http://fr.wikipedia.org/wiki/Youtube
lien 91 : . . . http://fr.wikipedia.org/wiki/Adobe_Flash
lien 92 : . . . http://fr.wikipedia.org/wiki/Adobe_Flash#Controverses
lien 93 : . . . http://fr.wikipedia.org/wiki/Skype
lien 94 : . . . http://fr.wikipedia.org/wiki/Skype#S.C3.A9curit.C3.A9_et_pol.C3.A9miques
lien 95 : . . . http://fr.wikipedia.org/wiki/Empathy
lien 96 : . . . http://fr.wikipedia.org/wiki/Ekiga
lien 97 : . . . http://fr.wikipedia.org/wiki/Paquet_(logiciel)
lien 98 : . . . http://doc.ubuntu-fr.org/software-center
lien 99 : . . . http://doc.ubuntu-fr.org/synaptic
lien 100 : . . . http://doc.ubuntu-fr.org/apt-get
Page 46
lien 101 : . . . http://doc.ubuntu-fr.org/
lien 102 : . . . http://fr.wikipedia.org/wiki/Wine
lien 103 : . . . http://fr.wikipedia.org/wiki/Notepad++
lien 104 : . . . http://appdb.winehq.org/objectManager.php?sClass=category&iId=&sAction=view&sTitle=
Browse+Applications
lien 105 : . . . http://fr.wikipedia.org/wiki/PlayOnLinux
lien 106 : . . . http://fr.wikipedia.org/wiki/VirtualBox
lien 107 : . . . http://fr.wikipedia.org/wiki/Correspondance_entre_logiciels_libres_et_logiciels_
propritaires
Page 47
lien 108 : ... http://fr.wikipedia.org/wiki/TeamViewer
lien 109 : ... http://fr.faq.emmabuntus.org/
lien 110 : ... http://forum.emmabuntus.org/
lien 111 : ... http://ideefixe.developpez.com/tutoriels/linux/premiers-pas-emmabuntus/
Page 49
lien 112 : . . . http://alm.developpez.com/tutoriels/methodes-agiles/guide-lean-management-usage-
equipes-agiles/satisfaire-client-comprendre-son-attente/
lien 113 : . . . http://alm.developpez.com/tutoriels/methodes-agiles/guide-lean-management-usage-
equipes-agiles/management-visuel-visualiser-challenge-problemes/
lien 114 : . . . http://alm.developpez.com/tutoriels/methodes-agiles/guide-lean-management-usage-
equipes-agiles/amelioration-continue-trouver-leviers-amelioration/
lien 115 : . . . http://alm.developpez.com/tutoriels/methodes-agiles/guide-lean-management-usage-
equipes-agiles/

Developpez Magazine est une publication de Developpez.com page 52


Numro 56 fvriermars 2015

Das könnte Ihnen auch gefallen