<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog de GreenIvory</title>
	<atom:link href="http://blog.greenivory.fr/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.greenivory.fr</link>
	<description>Développement agile sur technologies web 2.0</description>
	<lastBuildDate>Fri, 03 Feb 2012 11:23:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Une cigogne a rendu visite à la GreenTeam !</title>
		<link>http://blog.greenivory.fr/2012/02/03/une-cigogne-a-rendu-visite-a-la-greenteam/</link>
		<comments>http://blog.greenivory.fr/2012/02/03/une-cigogne-a-rendu-visite-a-la-greenteam/#comments</comments>
		<pubDate>Fri, 03 Feb 2012 11:23:00 +0000</pubDate>
		<dc:creator>Benjamin de la Porte</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[Élise]]></category>
		<category><![CDATA[greenkid]]></category>
		<category><![CDATA[greenteam]]></category>
		<category><![CDATA[naissance]]></category>
		<category><![CDATA[Valérie]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=2088</guid>
		<description><![CDATA[Valérie Taesch, membre de l&#8217;équipe de GreenIvory (la GreenTeam), viens juste d&#8217;annoncer la naissance de sa fille Élise. Tous ses collègues se réjouissent de cette naissance et envoient leurs meilleurs voeux à ce nouveau GreenKid ! Bienvenue à Élise et félicitation à ses parents ! La GreenTeam]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="http://blog.greenivory.fr/wp-content/uploads/2012/02/daisy-Image-provided-by-Dreamstime.com_.jpg"><img src="http://blog.greenivory.fr/wp-content/uploads/2012/02/daisy-Image-provided-by-Dreamstime.com_.jpg" alt="Fleur" title="daisy -- Image provided by Dreamstime.com" width="300" height="195" class="alignright size-full wp-image-2089" /></a><br />
<strong>Valérie Taesch</strong>, membre de l&#8217;équipe de GreenIvory (la GreenTeam), viens juste d&#8217;annoncer <strong>la naissance de sa fille Élise</strong>.<br />
</br><br />
Tous ses collègues se réjouissent de cette naissance et envoient leurs <strong>meilleurs voeux à ce nouveau GreenKid !</strong><br />
</br><br />
Bienvenue à Élise et félicitation à ses parents !<br />
</br><br />
La GreenTeam</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2012/02/03/une-cigogne-a-rendu-visite-a-la-greenteam/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Présentation du centre de télétravail de Reichstett</title>
		<link>http://blog.greenivory.fr/2012/01/26/presentation-du-centre-de-teletravail-de-reichstett/</link>
		<comments>http://blog.greenivory.fr/2012/01/26/presentation-du-centre-de-teletravail-de-reichstett/#comments</comments>
		<pubDate>Thu, 26 Jan 2012 07:42:57 +0000</pubDate>
		<dc:creator>Benjamin de la Porte</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[Conférence]]></category>
		<category><![CDATA[business club]]></category>
		<category><![CDATA[Jean-Christophe Uhl]]></category>
		<category><![CDATA[Reichstett]]></category>
		<category><![CDATA[sandlach]]></category>
		<category><![CDATA[télétravail]]></category>
		<category><![CDATA[UBI]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=2082</guid>
		<description><![CDATA[Demain, le vendredi 27 janvier 2012, Jean-Christophe Uhl, secrétaire général de la société UBI (Uhl Bonnaventure Informatique), présentera le centre de télétravail de Reichstett. C&#8217;est ce lieu de travail convivial, idéalement situé entre Haguenau et Strasbourg, qui a été choisi par l&#8217;équipe de GreenIvory pour organiser la plupart de ses réunions. La présentation aura lieu [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="http://blog.greenivory.fr/wp-content/uploads/2012/01/IM-LISTENING-c-Qwasyx-Dreamstime.com-36535421.jpg"><img src="http://blog.greenivory.fr/wp-content/uploads/2012/01/IM-LISTENING-c-Qwasyx-Dreamstime.com-36535421.jpg" alt="Conférence" title="I&#039;M LISTENING -- (c) Qwasyx, Dreamstime.com -- 3653542" width="300" height="195" class="alignright size-full wp-image-2083" /></a><br />
Demain, le vendredi 27 janvier 2012, <strong>Jean-Christophe Uhl</strong>, secrétaire général de la société UBI (Uhl Bonnaventure Informatique), présentera le <strong>centre de télétravail de Reichstett</strong>. C&#8217;est ce lieu de travail convivial, idéalement situé entre Haguenau et Strasbourg, qui a été choisi par l&#8217;équipe de GreenIvory pour organiser la plupart de ses réunions.<br />
</br><br />
La présentation aura lieu à Haguenau dans le cadre d&#8217;un <strong>déjeuner débat</strong> organisé par le Business Club de la Sandlach. Rappelons que <strong>Jean-Georges Perrin</strong>, CEO de GreenIvory, participera aussi à cet évènement pour partager son <strong>expérience du Web</strong>.<br />
</br><br />
<strong>Déjeuner débat organisé par le BUSINESS CLUB de la SANDLACH</strong><br />
« Qu’est-ce qui fait bouger le Web ? » Jean-Georges Perrin<br />
&laquo;&nbsp;Visite du centre de télétravail de Reichstett&nbsp;&raquo; Jean-Christophe Uhl<br />
27/01/2012: 11h30<br />
Hôtel Ibis de Haguenau<br />
Route de Bitche<br />
67500 HAGUENAU<br />
Tél. + 33 (0)3 88 73 76 30</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2012/01/26/presentation-du-centre-de-teletravail-de-reichstett/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Suivez les actualités de GreenIvory sur Google+ !</title>
		<link>http://blog.greenivory.fr/2012/01/23/suivez-les-actualites-de-greenivory-sur-google-plus/</link>
		<comments>http://blog.greenivory.fr/2012/01/23/suivez-les-actualites-de-greenivory-sur-google-plus/#comments</comments>
		<pubDate>Mon, 23 Jan 2012 09:03:10 +0000</pubDate>
		<dc:creator>Benjamin de la Porte</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[GooglePlus]]></category>
		<category><![CDATA[réseau social]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=2061</guid>
		<description><![CDATA[Déjà présent sur Facebook et Twitter, GreenIvory vient de rejoindre Google+. Vous pouvez désormais suivre nos actualités sur ce réseau social. Voici le lien: GreenIvory sur Google+]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="http://blog.greenivory.fr/wp-content/uploads/2012/01/GooglePlus1.jpeg"><img src="http://blog.greenivory.fr/wp-content/uploads/2012/01/GooglePlus1.jpeg" alt="GooglePlus" title="GooglePlus" width="150" height="97" class="alignright size-full wp-image-2065" /></a><br />
Déjà présent sur Facebook et Twitter, <strong>GreenIvory vient de rejoindre Google+</strong>.<br />
Vous pouvez désormais suivre nos actualités sur ce réseau social.<br />
</br><br />
Voici le lien: <a href="https://plus.google.com/109368787777031556053" title="GreenIvory sur Google+" target="_blank">GreenIvory sur Google+</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2012/01/23/suivez-les-actualites-de-greenivory-sur-google-plus/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Jean-Georges Perrin partage son expérience du Web</title>
		<link>http://blog.greenivory.fr/2012/01/20/jean-georges-perrin-partage-son-experience-du-web/</link>
		<comments>http://blog.greenivory.fr/2012/01/20/jean-georges-perrin-partage-son-experience-du-web/#comments</comments>
		<pubDate>Fri, 20 Jan 2012 14:47:22 +0000</pubDate>
		<dc:creator>Benjamin de la Porte</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[Conférence]]></category>
		<category><![CDATA[ad'mission]]></category>
		<category><![CDATA[business club]]></category>
		<category><![CDATA[conférence]]></category>
		<category><![CDATA[dejeuner]]></category>
		<category><![CDATA[Jean-Georges Perrin]]></category>
		<category><![CDATA[petit-dejeuner]]></category>
		<category><![CDATA[sandlach]]></category>
		<category><![CDATA[veille]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=2045</guid>
		<description><![CDATA[Jean-Georges Perrin, CEO de GreenIvory, partagera son expérience du Web dans le cadre de deux évènements proposés le vendredi 27 janvier 2012. Petit-déjeuner thématique organisé par AD&#8217;MISSION &#171;&#160;La veille ou comment rester compétitif&#160;&#187; Dans notre économie rapide, la veille est devenue obligatoire pour rester compétitif. Malheureusement, le volume d&#8217;information et de sources productrices d&#8217;information ne [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="lightbox" href="http://blog.greenivory.fr/wp-content/uploads/2012/01/IM-LISTENING-c-Qwasyx-Dreamstime.com-3653542.jpg"><img src="http://blog.greenivory.fr/wp-content/uploads/2012/01/IM-LISTENING-c-Qwasyx-Dreamstime.com-3653542.jpg" alt="" title="I&#039;M LISTENING -- (c) Qwasyx, Dreamstime.com -- 3653542" width="300" height="195" class="alignright size-full wp-image-2047" /></a>Jean-Georges Perrin, CEO de GreenIvory, partagera son expérience du Web dans le cadre de deux évènements proposés le vendredi 27 janvier 2012.<br />
</br><br />
<strong>Petit-déjeuner thématique organisé par AD&#8217;MISSION</strong><br />
&laquo;&nbsp;La veille ou comment rester compétitif&nbsp;&raquo;<br />
Dans notre économie rapide, la veille est devenue obligatoire pour rester compétitif. Malheureusement, le volume d&#8217;information et de sources productrices d&#8217;information ne cessent de croître. Dans une première partie, Jean-Georges Perrin dressera un panorama des outils gratuits et payants qui permettent de rester alerte. Dans la seconde partie de la conférence, il proposera un échange ludique et dynamique autour des bonnes pratiques dans ce domaine.<br />
27/01/2012: 09h00-11h00<br />
AD&#8217;MISSION<br />
204, avenue de Colmar<br />
67100 Strasbourg<br />
Inscription par E-mail à <a href="mailto:strasbourg@admissions.fr" title="strasbourg@admissions.fr">strasbourg@admissions.fr</a> dans la limite des places disponibles et au plus tard le 23/01/2012.<br />
</br><br />
<strong>Déjeuner débat organisé par le BUSINESS CLUB de la SANDLACH</strong><br />
&laquo;&nbsp;Qu&#8217;est-ce qui fait bouger le Web ?&nbsp;&raquo;<br />
Jean-Georges Perrin travaille dans le Web depuis 1994. Il a fait l’essentiel de sa carrière dans l’ingénierie logicielle et spécifiquement dans les outils de développement pour le web. La société GreenIvory (qu&#8217;il dirige) est spécialisée dans l&#8217;extraction et la valorisation d&#8217;informations issues du Web, principalement pour les utiliser dans le domaine de l&#8217;e-marketing. Au delà de services dans son domaine d&#8217;expertise, GreenIvory propose plusieurs outils e-marketing en mode SaaS.<br />
27/01/2012: 11h30<br />
Hôtel Ibis de Haguenau<br />
Route de Bitche<br />
67500 HAGUENAU<br />
Tél. + 33 (0)3 88 73 76 30</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2012/01/20/jean-georges-perrin-partage-son-experience-du-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Bonne et heureuse année 2012 !</title>
		<link>http://blog.greenivory.fr/2012/01/12/bonne-et-heureuse-annee-2012/</link>
		<comments>http://blog.greenivory.fr/2012/01/12/bonne-et-heureuse-annee-2012/#comments</comments>
		<pubDate>Thu, 12 Jan 2012 15:14:46 +0000</pubDate>
		<dc:creator>Benjamin de la Porte</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[2012]]></category>
		<category><![CDATA[nouvelle année]]></category>
		<category><![CDATA[voeux]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=2038</guid>
		<description><![CDATA[Toute l&#8217;équipe de GreenIvory vous souhaite une bonne et heureuse année 2012 !]]></description>
			<content:encoded><![CDATA[<p>Toute l&#8217;équipe de GreenIvory vous souhaite une <strong>bonne et heureuse année 2012</strong> !<br />
</br></p>
<p><a rel="lightbox" href="http://blog.greenivory.fr/wp-content/uploads/2012/01/20120110Illustration_voeux_2012-XX-001.jpg"><img src="http://blog.greenivory.fr/wp-content/uploads/2012/01/20120110Illustration_voeux_2012-XX-001.jpg" alt="" title="Bonne et heureuse année 2012 !" width="640" height="196" class="aligncenter size-full wp-image-2039" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2012/01/12/bonne-et-heureuse-annee-2012/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mulhouse, Terre des Nouveaux Possibles</title>
		<link>http://blog.greenivory.fr/2011/12/05/mulhouse-terre-des-nouveaux-possibles/</link>
		<comments>http://blog.greenivory.fr/2011/12/05/mulhouse-terre-des-nouveaux-possibles/#comments</comments>
		<pubDate>Mon, 05 Dec 2011 13:17:45 +0000</pubDate>
		<dc:creator>Florian Meyer</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[Annonces]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=2024</guid>
		<description><![CDATA[Quand l&#8217;équipe de GreenIvory a été informé de ce projet, notre engouement a été immédiat et nous avons décidé de transformer les Ignite &#171;&#160;locaux&#160;&#187; en Ignite Alsace. Aujourd&#8217;hui nous allons encore plus loin dans cette fête du web, de l&#8217;innovation et de la technologie au service de tous. 6 mois d&#8217;abonnement VoiceObserver Business (valeur 162EHT) [...]]]></description>
			<content:encoded><![CDATA[<p>Quand l&#8217;équipe de GreenIvory a été informé de ce projet, notre engouement a été immédiat et nous avons décidé de transformer les Ignite &laquo;&nbsp;locaux&nbsp;&raquo; en <a title="Ignite Alsace" href="http://www.ignitealsace.com/" target="_blank">Ignite Alsace</a>. Aujourd&#8217;hui nous allons encore plus loin dans cette fête du web, de l&#8217;innovation et de la technologie au service de tous.</p>
<div style="font-size:9px;line-height:12px;margin-top:30px;">
<p style="text-align: center;"><span style="font-size: 32pt; font-weight: bold;">6 mois</span></p>
<p style="text-align: center;margin-top:10px;">d&#8217;abonnement <strong>VoiceObserver Business</strong> (valeur 162EHT)<br />
à <strong>tous les participants</strong> de cet événement.</p>
<p style="text-align: center;">Comment obtenir cette offre ? Allez sur VoiceObserver.com, créer votre analyse d&#8217;e-réputation pour<br />
surveiller vos marques et vos concurrents. Notez le nom de votre analyse et envoyez un mail à<br />
<a href="mailto:support@greenivory.com" title="support@greenivory.com">support@greenivory.com</a> avec comme sujet <strong>#mtdnp</strong>. Offre valable jusqu&#8217;au 31/12/2011.</p>
<p><br/></p>
<p style="text-align: center;"><span style="font-size: 32pt; font-weight: bold;">6 mois</span></p>
<p style="text-align: center;margin-top:10px;">d&#8217;abonnement <strong>OnliGence Premium</strong> (valeur 36EHT)<br />
à <strong>tous les fans de réseaux sociaux</strong>.</p>
<p style="text-align: center;">Comment obtenir cette offre ? Allez sur OnliGence.com et identifiez-vous. Mentionnez @OnliGence<br />
dans un tweet. Devenez fan de la page OnliGence sur Facebook (<a href="http://facebook.com/OnliGence" target="_blank">http://facebook.com/OnliGence</a>) et<br />
mentionnez notre produit dans un commentaire. Offre valable jusqu&#8217;au 31/12/2011.</p>
<p><br/></p>
<p style="text-align: center;"><span style="font-size: 32pt; font-weight: bold;">1 an</span></p>
<p style="text-align: center;margin-top:10px;">d&#8217;abonnement <strong>MashupXFeed Elite</strong> avec <strong>ProductBooster</strong> (valeur 5400EHT)<br />
à <strong>un participant d&#8217;Ignite Alsace</strong>.</p>
<p style="text-align: center;">Comment obtenir cette offre ? Venez à Ignite Alsace #1, laissez votre nom et e-mail sur une feuille simple<br />
ou laissez une carte de visite et nous tirerons au sort le gagnant à la fin de l&#8217;événement. Vous devez être<br />
présent pour gagner.</p>
<p><br/></p>
<p style="text-align: center;"><span style="font-size: 32pt; font-weight: bold;">1 an</span></p>
<p style="text-align: center;margin-top:10px;">d&#8217;abonnement <strong>VoiceObserver Elite</strong> (valeur 2340EHT)<br />
à <strong>un participant d&#8217;Ignite Alsace</strong>.</p>
<p style="text-align: center;">Comment obtenir cette offre ? Venez à Ignite Alsace #1, laissez votre nom et e-mail sur une feuille simple<br />
ou laissez une carte de visite et nous tirerons au sort le gagnant pendant l&#8217;événement. Vous devez être<br />
présent pour gagner.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2011/12/05/mulhouse-terre-des-nouveaux-possibles/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>GWT : utiliser l&#8217;API Activity/Place pour gérer la navigation dans vos applications web</title>
		<link>http://blog.greenivory.fr/2011/10/21/gwt-activity-place-navigation-applications-web/</link>
		<comments>http://blog.greenivory.fr/2011/10/21/gwt-activity-place-navigation-applications-web/#comments</comments>
		<pubDate>Fri, 21 Oct 2011 15:13:37 +0000</pubDate>
		<dc:creator>Frédéric</dc:creator>
				<category><![CDATA[Développement]]></category>
		<category><![CDATA[GWT]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=1972</guid>
		<description><![CDATA[Beaucoup d&#8217;applications web sont désormais basées sur AJAX, et offrent ainsi une interface plus réactive et plus dynamique, en minimisant (voire supprimant) les rechargements de page : les données à affichées sont chargées en arrière-plan puis insérées dans la page web, à coup de JavaScript (manipulation du DOM). Contrairement à une page web entièrement générée [...]]]></description>
			<content:encoded><![CDATA[<p>Beaucoup d&#8217;applications web sont désormais basées sur AJAX, et offrent ainsi une interface plus réactive et plus dynamique, en minimisant (voire supprimant) les rechargements de page : les données à affichées sont chargées en arrière-plan puis insérées dans la page web, à coup de JavaScript (manipulation du DOM).</p>
<p>Contrairement à une page web entièrement générée par le serveur, cette page doit alors faire preuve d&#8217;une <em>intelligence</em> supplémentaire afin de gérer l&#8217;état de l&#8217;application à chaque instant de son utilisation. Peu importe donc la technologie employée sur le serveur, on s&#8217;attarde donc à trouver une technologie évoluée coté client, forcément basée sur JavaScript, seul langage à être embarqué dans tous les navigateurs modernes. Ont alors vu le jour de multiples<strong> framework JavaScript</strong>, tels <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.prototypejs.org/">Prototype</a> ou encore <a href="http://script.aculo.us/">Scriptaculous</a>.</p>
<p>Google a tenté une approche différente en proposant un framework Java, couplé à un traducteur Java vers JavaScript. Une réelle prouesse technique, qui promet une abstraction quasi-totale du navigateur. L&#8217;avantage est que le codage se fait en Java, langage plus rigoureux que JavaScript, et ainsi plus simple à débugguer.</p>
<p>Avec GWT, l&#8217;application web, c&#8217;est une page web. S&#8217;il y a différentes vues (un formulaire de création, une liste, &#8230;), c&#8217;est via le DOM qu&#8217;on affiche les widgets qu&#8217;il faut. Mais pour le navigateur, l&#8217;URL reste la même, et si on recharge la page, la vue peut alors être perdue. De la même manière, l&#8217;utilisation du bouton Précédent dans le navigateur ne permet pas de naviguer, comme sur un site web classique. Sauf si&#8230; Si on réussit à faire croire au navigateur que l&#8217;URL a changé sans recharger la page, ça peut marcher.</p>
<h3>Les ancres dans les URL</h3>
<p>Dans une URL, on peut faire référence à un élément de la page (identifié de manière unique par un attribut <em>id</em>) en suffisant l&#8217;URL par #&lt;id de l&#8217;élément&gt;. La navigateur va alors défiler la page jusqu&#8217;à ce que l&#8217;élément concerné soit visible (s&#8217;il l&#8217;est). Cela permet de naviguer au sein d&#8217;une même page, et c&#8217;est très souvent utilisé pour une table des matières en début de page. L&#8217;avantage est que le navigateur considère tout changement derrière le caractère # d&#8217;une URL (l&#8217;ancre) comme étant une URL différente, ayant son entrée propre dans l&#8217;historique des pages visitées. En même temps, un changement d&#8217;ancre ne recharge pas la page.</p>
<h3>La classe <em>History</em> de GWT</h3>
<p>En GWT, on peut être notifié par un système d&#8217;événement d&#8217;un changement d&#8217;ancre (et donc sans que la page ne soit rechargée) et connaître le nom de l&#8217;ancre. Ainsi, on peut exécuter du code et afficher telle ou telle vue en fonction de l&#8217;ancre actuelle. La classe <em>History</em> dans GWT permet cela. Et GWT propose une technique très efficace pour gérer ces changements dans l&#8217;interface en fonction de l&#8217;URL</p>
<h3>Activity et Place</h3>
<p>GWT part du principe suivant  : à une URL correspond un affichage de l&#8217;application. Cet état (visuel) de l&#8217;application qui dépend de l&#8217;URL s&#8217;appelle une <strong>Place</strong>.</p>
<p>A cette Place, on associe généralement une <strong>Activity</strong>, c&#8217;est à dire une <strong>fonctionnalité de l&#8217;application</strong>.</p>
<p>Cette Activity va alors exécuter le code qu&#8217;il faut pour placer l&#8217;interface dans l&#8217;état voulue par l&#8217;URL.</p>
<p>Pour résumer :</p>
<ol>
<li>de l&#8217;URL (ancre, encore appelé <em>history token</em>), on déduit une <em>Place</em> via un <em>PlaceHistoryMapper</em>,</li>
<li>de cette <em>Place</em>, on déduit une <em>Activity</em> via un <em>ActivityMapper</em>.</li>
</ol>
<p style="text-align: center;"><img class="size-full wp-image-1981 aligncenter" title="GWTPlaceActivity" src="http://blog.greenivory.fr/wp-content/uploads/2011/10/GWTPlaceActivity.png" alt="" width="133" height="214" /></p>
<p><strong>Dans la pratique</strong>, cela se traduit se cette manière-là.</p>
<p style="text-align: center;"><img class="size-full wp-image-1987 aligncenter" title="GWTActivityPlaceProjectStructure" src="http://blog.greenivory.fr/wp-content/uploads/2011/10/GWTActivityPlaceProjectStructure.png" alt="" width="255" height="225" /></p>
<ul>
<li>une classe par Place (ici : <em>EditPlace</em> et <em>ListPlace</em>),</li>
<li>une classe par Activity (ici : <em>EditActivity</em> et <em>ListActivity</em>),</li>
<li>un ActivityMapper (ici <em>AppActivityMapper</em>),</li>
<li>un PlaceHistoryMapper (ici <em>AppPlaceHistoryMapper</em>),</li>
<li>un point d&#8217;entrée (ici <em>Index</em>),</li>
<li>une Factory (ici <em>ClientFactory</em>) pour quelques objets dont on a souvent besoin.</li>
</ul>
<h4>Dans notre point d&#8217;entrée (<em>Index.java</em>)</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Nous avons besoin d'un panneau dans lequel vont s'afficher les différentes</span>
<span style="color: #666666; font-style: italic;">// vues de l'application.</span>
<span style="color: #666666; font-style: italic;">// Ici, ce sera la page entière, mais on pourrait n'avoir qu'une partie</span>
<span style="color: #666666; font-style: italic;">// centrale par exemple, avec des menus globaux autour qui seraient toujours</span>
<span style="color: #666666; font-style: italic;">// là.</span>
SimplePanel rootPanel <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> SimplePanel<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
RootLayoutPanel.<span style="color: #006633;">get</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">add</span><span style="color: #009900;">&#40;</span>rootPanel<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Le bus où tous les événements &quot;métiers&quot; de l'application seront déclenchés.</span>
EventBus eventBus <span style="color: #339933;">=</span> ClientFactory.<span style="color: #006633;">INSTANCE</span>.<span style="color: #006633;">getEventBus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Un peu de plomberie...</span>
PlaceController placeController <span style="color: #339933;">=</span> ClientFactory.<span style="color: #006633;">INSTANCE</span>.<span style="color: #006633;">getPlaceController</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
ActivityManager activityManager <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> ActivityManager<span style="color: #009900;">&#40;</span>
   <span style="color: #000000; font-weight: bold;">new</span> AppActivityMapper<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, eventBus
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
activityManager.<span style="color: #006633;">setDisplay</span><span style="color: #009900;">&#40;</span>rootPanel<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
AppPlaceHistoryMapper historyMapper <span style="color: #339933;">=</span> GWT.<span style="color: #006633;">create</span><span style="color: #009900;">&#40;</span>AppPlaceHistoryMapper.<span style="color: #000000; font-weight: bold;">class</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
PlaceHistoryHandler historyHandler <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> PlaceHistoryHandler<span style="color: #009900;">&#40;</span>historyMapper<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">// Place par défaut si rien n'est spécifié dans l'URL.</span>
ListPlace defaultPlace <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> ListPlace<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
historyHandler.<span style="color: #006633;">register</span><span style="color: #009900;">&#40;</span>placeController, eventBus, defaultPlace<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// On déclenche tout ça !</span>
historyHandler.<span style="color: #006633;">handleCurrentHistory</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Ce qu&#8217;il est important de retenir ici :</p>
<ul>
<li>Il est obligatoire d&#8217;avoir <strong>un seul conteneur</strong> qui sera la destination des différentes vues de l&#8217;application.</li>
<li>Ces initialisations sont certes un peu fastidieuses, mais elles peuvent être copiées/collées d&#8217;un projet à un autre (ou mutualisées, pourquoi pas, dans la <em>ClientFactory</em>).</li>
<li>Le déclenchement réalisé sur la dernière ligne n&#8217;est pas automatique : ne l&#8217;oubliez pas !</li>
<li><em>AppPlaceHistoryMapper</em> est instancié via un <a href="http://code.google.com/webtoolkit/doc/1.6/FAQ_Client.html#Deferred_Binding">defered binding</a> (<em>GWT.create()</em>).</li>
</ul>
<h4>AppPlaceHistoryMapper :</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.greenivory.gwt.tutorial.client</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.PlaceHistoryMapper</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.WithTokenizers</span><span style="color: #339933;">;</span>
&nbsp;
@WithTokenizers<span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#123;</span>
	EditPlace.<span style="color: #006633;">Tokenizer</span>.<span style="color: #000000; font-weight: bold;">class</span>,
	ListPlace.<span style="color: #006633;">Tokenizer</span>.<span style="color: #000000; font-weight: bold;">class</span>,
<span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span>
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">interface</span> AppPlaceHistoryMapper <span style="color: #000000; font-weight: bold;">extends</span> PlaceHistoryMapper <span style="color: #009900;">&#123;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ce qu&#8217;il est important de retenir ici :</p>
<ul>
<li>Il suffit de lister les différentes Place (en fait, leur Tokenizer) dans l&#8217;annotation @WithTokenizers.</li>
</ul>
<h4>AppActivityMapper :</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.greenivory.gwt.tutorial.client</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.activity.shared.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.activity.shared.ActivityMapper</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.Place</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> AppActivityMapper <span style="color: #000000; font-weight: bold;">implements</span> ActivityMapper <span style="color: #009900;">&#123;</span>
&nbsp;
    @Override
    <span style="color: #000000; font-weight: bold;">public</span> Activity getActivity<span style="color: #009900;">&#40;</span>Place place<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>place <span style="color: #000000; font-weight: bold;">instanceof</span> ListPlace<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> ListActivity<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>ListPlace<span style="color: #009900;">&#41;</span> place<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>place <span style="color: #000000; font-weight: bold;">instanceof</span> EditPlace<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> EditActivity<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>EditPlace<span style="color: #009900;">&#41;</span> place<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">null</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ce qu&#8217;il est important de retenir ici :</p>
<ul>
<li>A chaque Place, son Activity !</li>
</ul>
<h4>ClientFactory :</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.greenivory.gwt.tutorial.client</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.event.shared.EventBus</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.event.shared.SimpleEventBus</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.PlaceController</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ClientFactory <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">private</span> EventBus eventBus<span style="color: #339933;">;</span>
	<span style="color: #000000; font-weight: bold;">private</span> PlaceController placeController<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> ClientFactory INSTANCE <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> ClientFactory<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">protected</span> ClientFactory<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		eventBus <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> SimpleEventBus<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		placeController <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> PlaceController<span style="color: #009900;">&#40;</span>eventBus<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> EventBus getEventBus<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">return</span> eventBus<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> PlaceController getPlaceController<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">return</span> placeController<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ce qu&#8217;il est important de retenir ici :</p>
<ul>
<li>Il est impératif d&#8217;utiliser toujours les mêmes instances du PlaceController et du EventBus dans toute l&#8217;application. La ClientFactory (qui est un <a href="http://fr.wikipedia.org/wiki/Singleton_(patron_de_conception)" target="_blank">singleton</a>) est donc une bonne pratique pour les contenir.</li>
</ul>
<h4>ListPlace :</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.greenivory.gwt.tutorial.client</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.Place</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.PlaceTokenizer</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.Prefix</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #008000; font-style: italic; font-weight: bold;">/**
 * Les URLs sont du type : http://server/index.html#ancre:token.
 * 'ancre' sert à déterminer la Place à utiliser.
 * 'token' sert à transmettre des paramètres à la Place.
 * Ce token peut être vide, mais le double-point est obligatoire.
 */</span>
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ListPlace <span style="color: #000000; font-weight: bold;">extends</span> Place <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> ListPlace<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">super</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    @Prefix<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;list&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;">// Ancre utilisée pour identifier cette Place.</span>
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">class</span> Tokenizer <span style="color: #000000; font-weight: bold;">implements</span> PlaceTokenizer <span style="color: #009900;">&#123;</span>
&nbsp;
        @Override
        <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> getToken<span style="color: #009900;">&#40;</span>ListPlace place<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        	<span style="color: #666666; font-style: italic;">// Retourner le token en fonction des paramètres de la place.</span>
        	<span style="color: #666666; font-style: italic;">// Ici, jamais de paramètre, donc toujours chaîne vide</span>
        	<span style="color: #666666; font-style: italic;">// (mais jamais null !).</span>
        	<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        @Override
        <span style="color: #000000; font-weight: bold;">public</span> ListPlace getPlace<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> token<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        	<span style="color: #666666; font-style: italic;">// En fonction du 'token' (derrière le double-point</span>
        	<span style="color: #666666; font-style: italic;">// après l'ancre), instancier la Place.</span>
        	<span style="color: #666666; font-style: italic;">// Ici, on ne gère pas de paramètres, donc on instancie</span>
        	<span style="color: #666666; font-style: italic;">// toujours une ListPlace tout simple.</span>
        	<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> ListPlace<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<h4>ListActivity :</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.greenivory.gwt.tutorial.client</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.activity.shared.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.event.shared.EventBus</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.Place</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.client.ui.AcceptsOneWidget</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.client.ui.HTML</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> ListActivity <span style="color: #000000; font-weight: bold;">implements</span> Activity <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #008000; font-style: italic; font-weight: bold;">/**
	 * @param place
	 */</span>
	<span style="color: #000000; font-weight: bold;">public</span> ListActivity<span style="color: #009900;">&#40;</span>Place place<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> mayStop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Retourner null pour autoriser l'arrêt de l'Activity.</span>
		<span style="color: #666666; font-style: italic;">// Retourner une chaîne non-nulle pour demander à</span>
		<span style="color: #666666; font-style: italic;">// l'utilisateur si l'Activity doit être stoppée ou non.</span>
		<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #666666; font-style: italic;">/* (non-Javadoc)
	 * @see com.google.gwt.activity.shared.Activity#onCancel()
	 */</span>
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onCancel<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Exécutée quand l'Activity n'est pas démarrée.</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #666666; font-style: italic;">/* (non-Javadoc)
	 * @see com.google.gwt.activity.shared.Activity#onStop()
	 */</span>
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onStop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Exécutée quand l'Activity est arrêtée.</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #666666; font-style: italic;">/* (non-Javadoc)
	 * @see com.google.gwt.activity.shared.Activity#start()
	 */</span>
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> start<span style="color: #009900;">&#40;</span>AcceptsOneWidget panel, EventBus eventBus<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Code de l'Activity.</span>
		panel.<span style="color: #006633;">setWidget</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">HTML</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">&quot;Liste d'éléments | &amp;lt;a href='#edit:1'&amp;gt;Editer id=1&amp;lt;/a&amp;gt; | &amp;lt;a href='#edit:3'&amp;gt;Editer id=3&amp;lt;/a&amp;gt;&quot;</span>
		<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ce qu&#8217;il est important de retenir ici :</p>
<ul>
<li>La méthode <em>start()</em> est indéniablement la plus importante, mais les autres sont très pratiques pour contrôler la navigation : l&#8217;utilisateur peut-il arrêter cette <strong>Activity</strong> (méthode <em>mayStop()</em>) ?</li>
</ul>
<h4>EditPlace :</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.greenivory.gwt.tutorial.client</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.Place</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.PlaceTokenizer</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.place.shared.Prefix</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #008000; font-style: italic; font-weight: bold;">/**
 * Les URLs sont du type : http://server/index.html#ancre:token.
 * 'ancre' sert à déterminer la Place à utiliser.
 * 'token' sert à transmettre des paramètres à la Place. Peut être vide, mais le double-point est obligatoire.
 */</span>
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> EditPlace <span style="color: #000000; font-weight: bold;">extends</span> Place <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000066; font-weight: bold;">int</span> id<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> EditPlace<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> id<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">super</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">id</span> <span style="color: #339933;">=</span> id<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #000066; font-weight: bold;">int</span> getId<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">return</span> id<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
    @Prefix<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;edit&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #666666; font-style: italic;">// Ancre utilisée pour identifier cette Place.</span>
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">class</span> Tokenizer <span style="color: #000000; font-weight: bold;">implements</span> PlaceTokenizer <span style="color: #009900;">&#123;</span>
&nbsp;
        @Override
        <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> getToken<span style="color: #009900;">&#40;</span>EditPlace place<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        	<span style="color: #666666; font-style: italic;">// Retourner le token en fonction des paramètres de la place.</span>
        	<span style="color: #666666; font-style: italic;">// Ici, on s'attend à avoir l'ID en paramètre, donc on retourne une chaîne contenant l'ID de la Place.</span>
        	<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #003399;">String</span>.<span style="color: #006633;">valueOf</span><span style="color: #009900;">&#40;</span>place.<span style="color: #006633;">getId</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        @Override
        <span style="color: #000000; font-weight: bold;">public</span> EditPlace getPlace<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> token<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        	<span style="color: #666666; font-style: italic;">// En fonction du 'token' (derrière le double-point après l'ancre), instancier la Place.</span>
        	<span style="color: #666666; font-style: italic;">// Ici, le token contient l'ID de l'élément à éditer : nous n'avons qu'à le transformer en entier...</span>
        	<span style="color: #000000; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
        		<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> EditPlace<span style="color: #009900;">&#40;</span><span style="color: #003399;">Integer</span>.<span style="color: #006633;">parseInt</span><span style="color: #009900;">&#40;</span>token<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        	<span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">catch</span> <span style="color: #009900;">&#40;</span><span style="color: #003399;">NumberFormatException</span> e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        		<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000000; font-weight: bold;">new</span> EditPlace<span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        	<span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ce qu&#8217;il est important de retenir ici :</p>
<ul>
<li>Il est possible de passer autant de paramètres qu&#8217;on le souhaite dans le token, pourvu qu&#8217;on le parse correctement.</li>
<li>Vous êtes libres de créer tous les paramètres nécessaires dans la Place.</li>
<li>Ne prenez pas à la légère la méthode <em>getToken()</em> : il est important qu&#8217;elle retourne le token qui permet de <strong>reconstruire une Place identique</strong> (avec les mêmes paramètres). <em>getToken()</em> doit être, en quelque sorte, le miroir de <em>getPlace()</em>.</li>
</ul>
<h4>EditActivity :</h4>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">com.greenivory.gwt.tutorial.client</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.activity.shared.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.event.shared.EventBus</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.client.ui.AcceptsOneWidget</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.client.ui.HTML</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> EditActivity <span style="color: #000000; font-weight: bold;">implements</span> Activity <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">private</span> EditPlace place<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #008000; font-style: italic; font-weight: bold;">/**
	 * @param place
	 */</span>
	<span style="color: #000000; font-weight: bold;">public</span> EditActivity<span style="color: #009900;">&#40;</span>EditPlace place<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">place</span> <span style="color: #339933;">=</span> place<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> mayStop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Retourner null pour autoriser l'arrêt de l'Activity.</span>
		<span style="color: #666666; font-style: italic;">// Retourner une chaîne non-nulle pour demander à l'utilisateur si l'Activity doit être stoppée ou non.</span>
		<span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #666666; font-style: italic;">/* (non-Javadoc)
	 * @see com.google.gwt.activity.shared.Activity#onCancel()
	 */</span>
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onCancel<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Exécutée quand l'Activity n'est pas démarrée.</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #666666; font-style: italic;">/* (non-Javadoc)
	 * @see com.google.gwt.activity.shared.Activity#onStop()
	 */</span>
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onStop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Exécutée quand l'Activity est arrêtée.</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #666666; font-style: italic;">/* (non-Javadoc)
	 * @see com.google.gwt.activity.shared.Activity#start(com.google.gwt.user.client.ui.AcceptsOneWidget, com.google.gwt.event.shared.EventBus)
	 */</span>
	@Override
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> start<span style="color: #009900;">&#40;</span>AcceptsOneWidget panel, EventBus eventBus<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #666666; font-style: italic;">// Code de l'Activity.</span>
		<span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>place.<span style="color: #006633;">getId</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			panel.<span style="color: #006633;">setWidget</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">HTML</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&lt;strong&gt;Paramètre incorrect dans l'URL.&lt;/strong&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			panel.<span style="color: #006633;">setWidget</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">HTML</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Edition de l'élement &quot;</span> <span style="color: #339933;">+</span> place.<span style="color: #006633;">getId</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ce qu&#8217;il est important de retenir ici :</p>
<ul>
<li>Il est intéressant d&#8217;avoir accès à la Place pour en récupérer des informations (paramètres issus du token dans l&#8217;URL).</li>
</ul>
<p>Une fois que tout est en place, <strong>changer de vue est un véritable jeu d&#8217;enfant</strong> ! Il y a deux possibilités :</p>
<ol>
<li><strong>Dans un lien hypertexte</strong>, mettre l&#8217;URL de la Place vers laquelle on souhaite aller (attention au double-point derrière l&#8217;ancre, obligatoire, et souvent source de perte de temps).<br />
Par exemple <em>#list:</em> pour se rendre sur la liste des éléments.<br />
Ou <em>#edit:3</em> pour se rendre sur la <em>EditPlace</em> pour éditer l&#8217;élément qui a l&#8217;ID 3.</li>
<li><strong>Dans du code GWT</strong> avec (par exemple) :<br />
<em>ClientFactory.INSTANCE.getPlaceController().goTo(new EditPlace(47));</em></li>
</ol>
<p>Dans un prochain article, nous étudierons comment utiliser le pattern <strong>MVP</strong> pour construire des UI propres et éviter de faire des vues à rallonge&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2011/10/21/gwt-activity-place-navigation-applications-web/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>GreenIvory a 4 ans, un petit mot du fondateur&#8230;</title>
		<link>http://blog.greenivory.fr/2011/09/27/greenivory-a-4-ans-un-petit-mot-du-fondateur/</link>
		<comments>http://blog.greenivory.fr/2011/09/27/greenivory-a-4-ans-un-petit-mot-du-fondateur/#comments</comments>
		<pubDate>Tue, 27 Sep 2011 16:51:20 +0000</pubDate>
		<dc:creator>Florian Meyer</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[Anniversaire]]></category>
		<category><![CDATA[Jean-Georges Perrin]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=1965</guid>
		<description><![CDATA[Jean Georges Perrin, fondateur de GreenIvory, envoie une lettre à ses clients, ses partenaires et amis. Vous pouvez le lire directement sur notre site web global. Quatre années de présence active en Alsace et en Europe, La société qui croit que « l&#8217;information doit être vécue » se porte bien et promet d&#8217;autres surprises en 2012&#8230; et [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_1966" class="wp-caption alignright" style="width: 310px"><a rel="lightbox" href="http://blog.greenivory.fr/wp-content/uploads/2011/09/GreenIvory-Perrin-JeanGeorges-zoom.jpg"><img class="size-medium wp-image-1966" title="Jean Georges Perrin, CEO de GreenIvory" src="http://blog.greenivory.fr/wp-content/uploads/2011/09/GreenIvory-Perrin-JeanGeorges-zoom-300x182.jpg" alt="" width="300" height="182" /></a><p class="wp-caption-text">Jean Georges Perrin, CEO de GreenIvory</p></div>
<p>Jean Georges Perrin, fondateur de GreenIvory, envoie une lettre à ses clients, ses partenaires et amis. Vous pouvez le lire directement sur notre site web global. Quatre années de présence active en Alsace et en Europe, La société qui croit que « l&#8217;information doit être vécue » se porte bien et promet d&#8217;autres surprises en 2012&#8230; et avant…</p>
<p>A lire sur le site de <a href="http://www.greenivory.fr/actualites/2270-greenivory-a-4-ans.html" target="_blank">GreenIvory</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2011/09/27/greenivory-a-4-ans-un-petit-mot-du-fondateur/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>L&#8217;Alsace se met au télétravail avec un premier centre à Reichstett</title>
		<link>http://blog.greenivory.fr/2011/09/16/l-alsace-se-met-au-teletravail-avec-un-premier-centre-a-reichstett/</link>
		<comments>http://blog.greenivory.fr/2011/09/16/l-alsace-se-met-au-teletravail-avec-un-premier-centre-a-reichstett/#comments</comments>
		<pubDate>Fri, 16 Sep 2011 08:05:44 +0000</pubDate>
		<dc:creator>Florian Meyer</dc:creator>
				<category><![CDATA[Actualités]]></category>
		<category><![CDATA[Reichstett]]></category>
		<category><![CDATA[Télécentre]]></category>
		<category><![CDATA[TEN]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=1953</guid>
		<description><![CDATA[Le 13 septembre 2011 a eu lieu l&#8217;inauguration du télécentre de Reichstett, au nord de Strasbourg. Il s&#8217;agit du premier télécentre expérimental du maillage Alsace ; il se situe 4 rue de l’Artisanat à Reichstett. Alsace20 vous propose de revenir sur cet événement au travers de la vidéo ci-dessous. Pour tous renseignements au sujet de [...]]]></description>
			<content:encoded><![CDATA[<p>Le 13 septembre 2011 a eu lieu l&#8217;inauguration du télécentre de Reichstett, au nord de Strasbourg. Il s&#8217;agit du premier télécentre expérimental du maillage Alsace ; il se situe 4 rue de l’Artisanat à Reichstett. <br/>Alsace20 vous propose de revenir sur cet événement au travers de la vidéo ci-dessous. <br/>Pour tous renseignements au sujet de ce télécentre et plus généralement du télétravail en Alsace, rendez-vous sur <a href="http://www.bureau-mobile.fr/" target="_blank">http://www.bureau-mobile.fr/</a>.</p>
<p><iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/xl3995"></iframe><br /><a href="http://www.dailymotion.com/video/xl3995_un-telecentre-pour-travailler-loin-de-chez-soi_news" target="_blank">Un t&eacute;l&eacute;centre pour travailler loin de chez soi!</a> <i>par <a href="http://www.dailymotion.com/Alsace20" target="_blank">Alsace20</a></i></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2011/09/16/l-alsace-se-met-au-teletravail-avec-un-premier-centre-a-reichstett/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Quelques nouvelles de GreenIvory&#8230;</title>
		<link>http://blog.greenivory.fr/2011/07/01/quelques-nouvelles-de-greenivory/</link>
		<comments>http://blog.greenivory.fr/2011/07/01/quelques-nouvelles-de-greenivory/#comments</comments>
		<pubDate>Fri, 01 Jul 2011 14:06:28 +0000</pubDate>
		<dc:creator>Florian Meyer</dc:creator>
				<category><![CDATA[Annonces]]></category>

		<guid isPermaLink="false">http://blog.greenivory.fr/?p=1921</guid>
		<description><![CDATA[VoiceObserver™ Ne laissez plus votre marque aux autres. VoiceObserver™ est désormais un produit mature et quitte son statut de bêta. Nous y avons ajouté une nouvelle option fantastique : VoiceObserver™ remonte désormais dans le temps pour analyser la réputation en ligne. Vous voulez savoir combien et à quelle distance? Découvrez tout cela sur notre blog. [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" title="VoiceObserver" src="http://www.greenivory.fr/images/stories/MailTemplate//photos/vo.png" alt="" /></p>
<h3>VoiceObserver™</h3>
<p><strong>Ne laissez plus votre marque aux autres.</strong><br />
VoiceObserver™ est désormais un produit mature et quitte son statut de bêta. Nous y avons ajouté une nouvelle option fantastique : VoiceObserver™ remonte désormais dans le temps pour analyser la réputation en ligne. Vous voulez savoir combien et à quelle distance? Découvrez tout cela sur notre <a href="http://blog-fr.voiceobserver.com">blog</a>.</p>
<p>N&#8217;oubliez pas que VoiceObserver™ est vraiment adapté pour le benchmarking des marques. Alors n&#8217;oubliez pas d&#8217;ajouter vos concurrents &laquo;&nbsp;favoris&nbsp;&raquo; lorsque vous démarrez (ou modifiez) une analyse.</p>
<p>Découvrez VoiceObserver™ : <a href="http://VoiceObserver.com">http://VoiceObserver.com</a>.</p>
<p><img class="alignleft" title="OnliGence" src="http://www.greenivory.fr/images/stories/MailTemplate//photos/on.png" alt="" /></p>
<h3>OnliGence™</h3>
<p><strong>L&#8217;info à votre mesure.</strong><br />
Imaginez&#8230; Un espace personnel, rien qu&#8217;à vous, qui vous présente uniquement l&#8217;actualité qui vous intéresse. Imaginez ce même espace vous faisant découvrir de nouvelles sources d&#8217;information&#8230; Eh bien, cet espace, ne l&#8217;imaginez plus : utilisez-le !</p>
<p>OnliGence™ est un excellent outil pour aider à lutter contre la surcharge d&#8217;information (l&#8217;infobésité) en classant automatiquement les nouvelles qui sont significatives pour vous. Aujourd&#8217;hui, OnliGence™ vous laisse découvrir plus de 280 thèmes et grâce à la version Premium, vous pouvez en afficher jusqu&#8217;à 20 en cinq colonnes à la une&#8230;</p>
<p>Découvrez OnliGence™ : <a href="http://OnliGence.com">http://OnliGence.com</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.greenivory.fr/2011/07/01/quelques-nouvelles-de-greenivory/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

