Web.java

Selon une étude Forrester mentionnée sur Silicon.fr, le logiciel Java (JRE) est présent sur 99.9 % des PC en entreprise, devant le logiciel Flash (99%).

• http://www.silicon.fr/fr/news/2008/04/13/forrester___i_e___windows_xp__flash_et_java_restent_champions_en_entreprise

J’ai développé un framework Swing que j’ai appelé Swinger et qui permet de décrire une application de bureau avec un simple fichier XML :

<j:frame width="600" height="400" addWindowListener="actions.ActionQuitter" x="50" y="50">
	<j:menubar>
		<j:menu text="Fichier">
			<j:menuitem text="Quitter" addActionListener="actions.ActionQuitter"/>
		</j:menu>
	</j:menubar>
	<j:panel width="600" height="400">
		<j:textarea text="Hello !" width="300" height="200"/>
	</j:panel>
</j:frame>

Je dois avouer que je suis plutôt fier de mon bébé. Il est encore très incomplet car cela ne fait que trois jours que je travaille dessus, mais j’espère qu’il est promit à un bel avenir. J’ai écrit un KickStart sur le wiki du projet. Si vous avez des questions, n’hésitez pas à les poser dans l’onglet “Issues”.

• http://code.google.com/p/swinger/downloads/list

Je vous propose un tutoriel pour créer votre première application Facebook. Il existe deux APIs standards, l’une en PHP, l’autre en Java. Nous allons étudier la seconde. Notre application s’appellera yafba (Yet Another Facebook Application).

Nota : Certaines lignes de code sont trop longues et ne s’affichent pas entièrement. Dans ce cas, faites un copier-coller dans un éditeur de texte.

Prérequis

Vous devez posséder un compte sur Facebook et ajouter l’application developers. Cette application va vous permettre d’obtenir une clé d’API pour votre application et vous permettre d’accéder à la documentation en ligne.

Vous devez également avoir un hébergement Java. En effet, bien que les utilisateurs accédent à votre application par l’intermédiaire de Facebook, vous hébergez vous-même l’application et les données que vous recueillez. Ce qui est important, c’est que le serveur qui héberge votre application doit être accessible publiquement par une URL. Il n’est pas nécessaire d’acquérir un nom de domaine, vous pouvez utiliser l’URL fournie par votre hébergeur.

L’environnement de développement

Vous devez télécharger l’API Facebook. Celle-ci est disponible via l’application developers :

• http://developers.facebook.com/clientlibs/facebook_java_client.zip

L’archive contient le code source de la librairie à partir duquel vous pourrez générer la javadoc. Vous trouverez également la librairie compilée sous la forme d’une archive facebook.jar que vous devez importer dans votre projet.

Notez qu’il n’est pas possible de tester une application Facebook en localhost. Pour être testée, l’application doit être déployée sur le serveur que vous avez déclaré dans l’adresse de callback. Il existe néanmoins un émulateur accessible en ligne qui permet de tester son code FBML ou de tester l’API Facebook.

L’architecture

Nous n’aborderons pas la structure d’une application Facebook en détail, celle-ci est constituée de plusieurs composants dont la plupart sont générés automatiquement par les serveurs de Facebook. Nous nous intéresserons uniquement à la génération de la page d’accueil.

Pour faire fonctionner notre application, nous utiliserons un simple conteneur de Servlet, par exemple Tomcat. L’application reposera sur les Servlets et les JSPs. Les Servlets auront la responsabilité d’extraire les informations de l’API Facebook, et les JSPs serviront à générer la couche présentation au format FBML (FaceBook Markup Langage). Nous utiliserons accessoirement la librairie JSTL.

Référencement de l’application sur Facebook

Avant de développer notre application, nous allons commencer par la référencer sur Facebook. Pour cela, vous devez demander une clé d’API par le biais de l’application developers.

Les informations importantes à fournir sont le nom de votre application et l’URL de callback. Cette dernière doit correspondre à l’URL de votre serveur suivi du répertoire dans lequel vous avez l’intention de placer votre application. Elle est de la forme http://serveur.com/yafba/.

Vous pouvez également définir une URL pour le canvas qui correspond au cadre de votre application. Celle-ci est de la forme http://apps.facebook.com/yafba/. Ainsi, lorsque votre serveur contient un fichier http://serveur.com/yafba/index.jsp, celui-ci est accessible à travers Facebook par l’url http://apps.facebook.com/yafba/index.jsp.

Demandez enfin à ce que votre application puisse être intégrée à Facebook, cela permettra aux utilisateurs de l’ajouter à leur profil sous la forme d’un widget. Vous verrez alors apparaître des options supplémentaires. Parmi celles-ci, l’URL Post-Add correspond à l’URL “frontale” vers laquelle sont dirigés les utilisateurs qui cliquent sur le lien de votre application.

Toutes ces opérations se font à partir de l’application developers.

Connexion

Maintenant que notre application est référencée sur Facebook et que notre environnement de développement est correctement configuré, nous allons commencer à coder.

Nous allons écrire une Servlet “test” qui traitera les requêtes en provenance de Facebook :

<servlet>
	<servlet-name>test</servlet-name>
	<servlet-class>fr.hadf.yafba.servlets.Test</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>test</servlet-name>
	<url-pattern>/test</url-pattern>
</servlet-mapping>

La classe centrale de l’API est FacebookRestClient. Il s’agit d’une classe abstraite qui est héritée par deux sous-classes qu’on choisi selon le protocole qu’on veut utiliser, XML ou Jason. Nous allons utiliser le protocole XML.

La première chose que nous faisons est d’extraire le champ “fb_sig_session_key” de la requête entrante. Si ce champ est vide, nous redirigeons l’utilisateur vers la page de login dont l’URL est construite avec la clé d’API. Lorsque l’utilisateur aura été authentifié, il sera à nouveau redirigé vers notre Servlet, mais cette fois avec un champ “fb_sig_session_key” renseigné :

private void connection(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException, FacebookException {
	String sessionKey = req.getParameter("fb_sig_session_key");
	if(sessionKey == null) {//on redirige l'utilisateur vers la page de login
		String url = "http://www.facebook.com/login.php?api_key="+api_key+"&v=1.0&canvas&next=test";
		res.getWriter().println("<fb:redirect url='"+url+"' />");
		return;
	}
	else {//l'utilisateur est maintenant authentifié
		FacebookXmlRestClient client = new FacebookXmlRestClient(api_key, secret, sessionKey);
		loginSuccessfull(client, req, res);
	}
}

Utilisation de l’API Facebook

Nous allons maintenant utiliser l’API Facebook pour extraire la liste des amis de l’utilisateur courant :

protected void loginSuccessfull(FacebookRestClient client, HttpServletRequest req, HttpServletResponse res)
throws IOException, FacebookException, ServletException {
	Document root = (Document)client.friends_get();
	NodeList list = root.getElementsByTagName("uid");
	ArrayList friends = new ArrayList();
	for(int i=0; i<list.getLength(); ++i) {
		String uid = list.item(i).getTextContent();
		friends.add(uid);
	}

	req.setAttribute("friends", friends);
	getServletContext().getRequestDispatcher("/test.jsp").forward(req, res);
}

Nous utilisons simplement la fonction FacebookRestClient.friends_get(). Cette méthode retourne un objet diffèrent selon qu’on utilise le protocole XML ou Jason. Dans notre cas, nous récupérons un objet de type org.w3c.dom.Document. Pour connaître le format de la réponse, il suffit d’interroger la console de test disponible sur Facebook :

<?xml version="1.0" encoding="UTF-8"?>
<friends_get_response 	xmlns="http://api.facebook.com/1.0/"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd"
	list="true">

	<uid>1</uid>
	<uid>2</uid>
	<uid>3</uid>

</friends_get_response>

Nous extrayons alors le champ uid et utilisons l’objet request pour passer la liste des valeurs à la JSP.

Nous n’utilisons pas cette fonction, mais sachez que l’API permet également d’interroger la base d’utilisateur de Facebook grâce au langage FQL :

Document root = (Document)client.fql_query("SELECT name FROM user WHERE uid=" + uid;

Couche présentation

Nous commençons par écrire une page index.jsp qui nous servira d’URL “frontale”, celle déclarée en URL Post-Add. Elle sollicite l’utilisateur pour envoyer une série d’invitations à ses amis afin d’ajouter notre application à leur profil :

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<fb:fbml>
	<fb:request-form type="yafba"
		action="test"
		content="Je vous invite à ajouter l'application yafba">
		<fb:multi-friend-selector actiontext="Selectionnez les amis auxquels vous voulez adresser une invitation"/>
	</fb:request-form>
</fb:fbml>

Notre application est ensuite très simple, elle se contente d’afficher une liste d’amis (test.jsp). Rappelons que cette liste a été extraite à partir de la Servlet “test” qui est appelée après validation du formulaire d’invitation. Nous utilisons la librairie JSTL pour garder propre la couche présentation :

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<fb:fbml>
	<c:forEach items="${requestScope['friends']}" var="uid">
		<fb:name uid="${uid}"/><br>
	</c:forEach>
</fb:fbml>

Conclusion

Vous venez d’écrire votre première application Facebook. Elle est accessible à partir du cadre “My Application” dans l’application developers.

Il ne s’agit que d’une présentation très modeste de ce qu’il est possible de faire. Ce tutoriel vous a surtout permis de comprendre l’architecture d’une application Facebook. A vous maintenant d’explorer la documentation si vous voulez aller plus loin.

Bonne continuation

Remerciements

Je remercie Michael Bagur pour son aide précieuse, en particulier pour la phase de connexion à l’API, et pour sa relecture.

Le site developpez.com organise des sondages au titre de Java User Group en vue de récolter l’opinion des developpeurs Java sur les évolutions futures du langage. Je recommande à tous les developpeurs confirmés d’y participer et de partager leur opinon sur le forum.

Un billet qui date un peu, et en anglais, qui présente une petite rétrospective de Java.

http://www.readwriteweb.com/archives/java_a_retrospective.php

Swing est la librairie graphique de Java. C’est une librairie extrêmement bien écrite et son introduction dans le jdk 1.2 a été une véritable révolution. Mais cette librairie souffre l’inconvénient d’être conçue avant tout pour les développeurs, et le moins que l’on puisse dire est que ceux-là ne sont pas réputés pour leurs talents de graphiste.

Je ne crois pas que cet état des choses peut changer, mais un livre est là pour tenter de prouver le contraire. Ecrit en anglais, Filthy Rich Clients (Clients riches esthétiques) montre au développeur comment concevoir des effets graphiques de toute sorte et permettre de donner un peu de finesse à leurs applications graphiques. Les slides, qui sont visibles au format pdf sur le site dédié, sont très bien faits. Ils montrent des exemples progressifs de code pour obtenir des effets tels que des dégradés ou des effets de transparence.

Sans doute s’agit-il d’un pas en avant dans la perspective qu’ambitionne Sun de gratter des parts de marché au lecteur Flash. Mais le pas décisif ne sera véritablement franchit que lorsqu’un framework sera disponible avec les outils wysiwyg à destination des designers.

• http://filthyrichclients.org/
• http://filthyrichclients.dev.java.net/

Les frameworks de développement Web reposant sur JSP on l’inconvénient majeur de nécessiter une bonne connaissance de JavaScript pour pouvoir développer un site en Ajax. Pendant longtemps, ces frameworks ne prennaient pas en compte cette dimension du développement Web. Mais un nouveau type de frameworks spécialement conçu autour de la technologie Ajax a fait son apparition depuis environ un an. Leur particularité est de permettre à un développeur Java d’écrire une application Ajax sans aucune connaissance de JavaScript.

Il existe deux frameworks plus ou moins équivalents que sont GWT (Google Web Toolkit) et Echo2. L’un comme l’autre permet de concevoir une application Ajax sans écrire une seule ligne de code en JavaScript. Leur principe est de proposer une librairie Java et un compilateur qui converti le code de cette librairie en JavaScript. Mais bien que reposant sur le même principe général, ces deux frameworks sont en fait très différents.

GWT distingue de façon très nette les parties cliente et serveur. La première est intégralement compilée en JavaScript et peut être exportée vers n’importe quel serveur Web tel que Apache, tandis que la partie serveur est destinée à tourner sur un conteneur de Servlet tel Tomcat. Bien sûr, il est possible de faire tourner le tout sur Tomcat, mais seules les librairies pouvant être compilées en JavaScript peuvent être inclues dans le code de la partie cliente.

En revanche, Echo2 n’offre pas de cadre pour distinguer le côté serveur et le côté client, il appartient au développeur de s’en tenir au design pattern adéquate. Et à la différence de GWT, Echo2 génère une véritable application Java dont le code est intégralement délivré par des Servlets. Il n’est donc pas possible d’exporter une application Echo2 vers un simple serveur Web.

Quel que soit le choix de la technologie, les frameworks Ajax ont l’avantage, pour un développeur Java, de pouvoir se lancer dans l’écriture de Services Web complexes. On signalera enfin l’existence d’une librairie Ajax conçue spécifiquement pour le framework JSF et qui s’appelle Ajax4Jsf, nous aurons l’occasion d’y revenir.

Les frameworks ont été conçu pour faciliter le développement des applications Web. Le plus populaire d’entre eux a été Struts, un framework développé par la fondation Apache, mais dont la complexité relative ne rend pas son intérêt évident au premier abord. Il est alors apparu une deuxième génération de frameworks cherchant à simplifier la mise en relation des différentes couches d’une l’application Web. C’est à cette nouvelle approche que tente de répondre le framework JSF (JavaServer Faces).

Pour simplifier la conception d’un service Web, JSF met notamment en oeuvre un concept moderne qui est le binding html/objet. Il s’agit de modéliser l’arborescence d’une page html et permettre d’en modifier la structure avec du code Java. Cela se traduit en termes d’états et de transitions, concepts bien connu des développeurs en programmation orientée objet. Dans ce cadre, un état correspond à une vue de l’application, c’est-à-dire à une certaine disposition des composants graphiques, tandis que les transitions correspondent à des actions côté client entraînant le passage d’un état vers un autre. Cette représentation du problème correspond exactement à la façon de représenter la navigation à l’intérieur une application Web.

L’intérêt d’un framework comme JSF est donc d’offrir un cadre de développement proche de la façon de le modéliser. Par ailleurs, l’un des autres intérêts de JSF est d’être le framework officiel de Java puisqu’il a été intrégré à la librairie JavaEE et est dorénavant disponible sur tous les serveurs d’application Java. Nous n’entrerons pas dans ce billet dans les détails technique de JSF. Retenons simplement que c’est un framework encore un peu jeune mais qu’il implémente le pattern MVC de façon plus simple à l’usage que Struts.

• Le développement Web en Java
• Les frameworks de développement Web et le pattern MVC

Le langage Java s’est principalement imposé côté serveur, cela s’entend dans une architecture client/serveur. C’est pourtant dans les applications autonomes que Java a tout d’abord mis en oeuvre l’architecture qui allait faire sa popularité, à savoir le pattern MVC. La philosophie sous-jacente à MVC est de supprimer les couplages inutiles, c’est-à-dire de décomposer l’application en modules indépendants les uns des autres. C’est déjà ce que permet de faire la programmation orientée objet en théorie, mais la réalité est que les développeurs, cherchant la facilité au premier abord, établissent souvent à des redondances inutiles qui sont à l’origine d’enchevêtrements abscons. Les designs patterns sont là pour rappeler les bonnes pratiques en matière de programmation et, de ce fait, faciliter tant la collaboration des équipes que la mise à jour ultérieure du code. Cette approche de la programmation a été adoptée dans la librairie swing qui est la librairie graphique de Java pour les application autonomes.

Parallèlement à son succès auprès des développeurs, Java s’est progressivement imposé côté serveur jusqu’à devenir un acteur incontournable du Web au même titre que le langage PHP. Mais cette progression c’est faite laborieusement comme nous avons pu le voir dans un billet précédent. Face à la complexité croissante des applications Web, la nécessité d’en revenir aux meilleurs pratiques de développement s’est rapidement fait sentir. C’est pour répondre à la détresse des architectes logiciels que la fondation Apache a crée le framework Struts. Un framework dont l’objectif avoué est d’inviter les développeurs à de meilleures pratiques, et notamment à recourir au fameux pattern MVC qui consiste à séparer une application en trois couches que sont la couche de présentation, la couche métier et la couche de contrôle, celle qui fait le pont entre les deux premières.

La couche de présentation (Vue) est celle qui a la responsabilité de générer ce qui est affiché à l’écran, c’est-à-dire le positionnement des composants graphiques ainsi que les détails de leur aspect comme la couleur. La couche métier (Model) est celle qui met en oeuvre la logique de l’application, elle a pour responsabilité de représenter les données du problème et de les résoudre. Enfin, le controleur (Controler) établit la relation entre la Vue et le Model, elle gère la dynamique de l’application.

Comme nous l’avons écrit dans dans un billet précédent, les JSP reposent sur un langage de balises extensible. Cette propriété a été exploitée par les concepteurs de Struts pour créer une librairie de balises permettant de résoudre la majorité des problèmes posés par l’écriture de la couche présentation, cela sans avoir besoin de recourir aux Scriptlets. Cela permet finalement d’unifier le langage utilisé pour la couche présentation généralement écrite par les équipes de design. Le langage Java est ainsi réservé à l’écriture des couches métier et controleur.

C’est donc pour répondre à ce motif que le framework Struts a été développé. Il y est parvenu au prix d’une certaine complexité qui le réserve aux projets de grande envergure.

• Le développement Web en Java
• Les frameworks de deuxième génération

La conception de sites Web est possible en Java, elle est basée fondamentalement sur la technologie des Servlets et requière l’installation d’un conteneur comme le serveur Tomcat. C’est ce conteneur qui reçoit et oriente les requêtes http vers les Servlets idoines. En retour, la Servlet doit construire la réponse à la requête, en général au format html ou xml.

Le principe des Servlets est très puissant car il permet de répondre à n’importe quel type de requête http qui est le protocole standard des applications Web. Mais l’inconvénient est que les développeurs partent d’un fichier en langage Java pour produire un document en langage html. Ainsi, la rédaction d’une page Web est malaisée. Le handicap se fait particulièrement ressentir lors de la mise à jour du document. Voyez par vous-même :

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class ExempleDeServlet extends HttpServlet {

    protected void doGet(HttpServletRequest req, HttpServletResponse res)

    throws  ServletException, IOException {

        OutputStream out = res.getOutputStream();

	out.println("<?xml version="1.0" encoding="UTF-8" ?>") ;

        out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitionnal//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitionnal.dtd\">"

        out.println("<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /><title>Exemple de Servlet</title></head>");

        out.println("<body>Vous ne vous en rendez peut-être pas compte, mais ce n'est vraiment pas pratique</body></html>");

    }

    protected void doPost(HttpServletRequest req, HttpServletResponse res)

    throws  ServletException, IOException {

        doGet(res, req);

    }

}

Les fondements de la technologie n’ont jamais été remis en cause et ils ont maintes prouvé leur pertinence. En revanche, le langage Java a été enrichie d’une nouvelle spécification avec l’arrivé des JSP (Java Server Page) il y a bientôt dix ans. L’inconvénient des Servlets a ainsi été surmonté en inversant les pôles : les JSP sont des documents qui suivent la structure du langage html avec la possibilité d’ajouter du code Java.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Exemple de JSP</title>
</head>
<body>
C'est beaucoup plus pratique à écrire et à mettre à jour

</body>
</html>

Comme on le voit ci-dessus, une JSP ressemble à s’y méprendre à un document html, c’est le conteneur qui se charge de compiler la JSP en Servlet. En fait, une JSP permet de faire bien plus de choses que d’écrire des balises html. Comme nous l’avons dis, il est également possible d’y insérer du code Java grâce aux Scriplets mais aussi de faire référence à une variable avec les Expressions Langage. Enfin, et c’est le plus important, les JSP reposent sur un langage de balises extensible, c’est-à-dire que contrairement au langage html qui définit l’ensemble des balises autorisées, le développeur de JSP peut créer ses propres balises. Ce mécanisme est extrêmement puissant et offre un gain de temps considérable en permettant de créer des composants complexes qui pourront être utilisés par la simple apposition d’une balise.

Malgré tous ces avantages, les JSP ne sont pas pour autant la panacée. Elles ont l’inconvénient de leur avantage, leur souplesse est telle que les JSP deviennent rapidement illisibles si le développeur ne s’astreint pas à une certaine rigueur. C’est à ce niveau qu’intervient le framework. Le rôle qui lui est dévolu est de définir un cadre de travail qui doit permettre de conserver l’avantage premier des JSP, à savoir leur facilité de mise à jour.

Nous reviendrons sur les frameworks dans un prochain billet.

• Les frameworks de développement Web et le pattern MVC
• Les frameworks de deuxième génération