Dev Mag 201106

download Dev Mag 201106

of 60

Transcript of Dev Mag 201106

DeveloppezSommaireJava Android PHP Dveloppement Web Web smantique C/C++/Gtk+ Qt Visual Basic Liens Page 2 Page 6 Page 13 Page 22 Page 26 Page 35 Page 44 Page 52 Page 59

Le Mag

dition de Juin - Juillet 2011. Numro 34. Magazine en ligne gratuit. Diffusion de copies conformes loriginal autorise. Ralisation : Alexandre P ottiez Rdaction : la rdaction de Developpez Contact : [email protected]

Article Web smantique

Le tutoriel SPARQLCe tutoriel nous donne un cours rapide sur SPARQL. Il couvre toutes les fonctionnalits majeures du langage de requte travers des exemples.traduit par Thibaut Cuvelier et Julien Plu Page 26

Article Android

ditorialCe mois-ci, la rubrique Web smantique fait une entre fracassante dans le magazine, pour le plus grand plaisir de tous. Profitez-en bien ! La rdaction

Introduction la programmation sous AndroidCe tutoriel a pour but de vous prsenter succinctement Android, ainsi que les prmices de la programmation sous celui-ci.par Nazim Benbourahla Page 6

JavaLes dernires news Le Java Community Process approuve contrecur Java SE 7Des voix s'lvent contre la politique de licence impose par Oracle Le scrutin sur Java SE 7 par le Java Community Process vient d'avoir lieu et d'approuver la majorit crasante cette prochaine dition standard du langage, mais non sans de nombreux commentaires fustigeant notamment la politique de licence mene par Oracle. Google, bien que satisfait de l'avancement de la technologie sur cette version, mais visiblement dcid gcher la fte d'Oracle, a manifest le seul vote ngatif, contre 13 voix positives et 2 abstentions. IBM, Red Hat, SouJava, London Java Community, Goldman Sachs et Fujitsu ont tous vot oui tout en affirmant dans les commentaires du vote leur refus de la politique de licence de Java, leur scepticisme envers le groupe d'experts et la transparence de tout le processus. Sans mentionner le dsaccord ayant conduit la fondation Apache quitter le Process (Lien 01) ni le procs en cours (Lien 02), Google rappelle que le kit de validation TCK (Technology Compatibility Kit), partie intgrante du standard, ne doit pas tre utilis pour interdire les implmentations compatibles, notamment dans le domaine du mobile.

Java : la machine virtuelle JRockit d'Oracle devient gratuitePour le dveloppement et l'usage interne en production Oracle, propritaire d'une plthore de machines virtuelles la suite de son rachat de Sun, travaille depuis l'anne passe la fusion de JRockit et Hotspot en une seule machine virtuelle dans le cadre du projet OpenJDK (Lien 06). En ce sens, la machine virtuelle JRockit devient dsormais gratuite pour le dveloppement et l'utilisation interne en production d'aprs un billet de blog par Henrik Sthl, chef de produit JRockit Oracle. Tout en restant propritaire et son code source non accessible, Sthl fait savoir que des dveloppeurs d'Oracle portent progressivement des ides et fonctionnalits de JRockit la version libre de Java OpenJDK. JRockit est disponible gratuitement sous une nouvelle licence, drive de la Sun Binary Code Licence . Les fonctionnalits de hautes performances et disponibilit, y compris JRockit Mission Control, JRockit Real Time et JRockit Virtual Edition, ncessitent toujours une licence commerciale.

Ces composants, pralablement disponibles uniquement en compagnie des produits d'Oracle (comme le serveur L'diteur d'Android, numro 1 mondial des OS mobiles, WebLogic), peuvent tre achets indpendamment et juge que les licences qui contiennent de telles utiliss dsormais pour n'importe quel projet Java. restrictions sont incompatibles avec les exigences du JSPA, et violent les attentes de la communaut Java (sic) Pour mmoire, JRockit a t initialement dveloppe par que les spcifications du JCP puissent tre implmentes Appeal Virtual Machines, rachete ensuite par BEA ouvertement . Systems avant de faire partie d'Oracle Fusion Middleware depuis 2008. Werner Keil, expert en Java et membre part entire du JCP, justifie son abstention par le manque de JRockit est disponible en tlchargement pour transparence tant dans la gestion de l'ensemble Umbrella Windows, Solaris et Linux sur cette page : Lien 07. JSR (Java Specification Request) que pour d'autres composants essentiels, en particulier le projet Coin. Source : blog de Henrik Sthl (Lien 08) Pour rappel, Java SE 7 offrira notamment une meilleure Commentez cette news d'Idelways en ligne : Lien 09 compatibilit avec les processeurs multicoeurs, des possibilits de scriptage dynamique, une API unifie pour Sortie de Scala 2.9.0 accder aux systmes du fichier de l'OS tout en continuant Cette version permettra-t-elle au langage de se dautoriser les oprations spcifiques chaque plateforme. propulser dans le monde de l'entreprise ? Oracle, qui a naturellement vot oui sans commentaire, se L'quipe de dveloppement de Scala a annonc la sortie de heurte de vives critiques qui ne se sont pas tasses la version 2.9.0 du langage. malgr la volont que le gant a rcemment manifeste de rvolutionner le fonctionnement du Java Community Parmi les nouveauts et amliorations nous trouvons : Process vers plus de transparence, de ractivit et d'agilit les collections parallles : chaque collection a un (Lien 03). pendant parallle permettant d'effectuer les Source : Lien 04 Commentez cette news d'Idelways en ligne : Lien 05 oprations telles que map ou filter en parallle ; le trait App permettant de remplacer l'ancien traitNumro 34 Juin - Juillet 2011 Page 2

Developpez Magazine est une publication de developpez.com

(dprci) Application qui n'tait pas thread safe ; de nouvelles faons d'excuter des programmes Scala avec le lanceur : scala similaire java -jar ; scala excute la mthode main de l'objet ; scala excute le script. Si le contenu n'est pas un script, trouve un objet avec une mthode main et l'excute ; scala -save cre un jar avec les sources compiles. Ce jar peut ensuite tre excut via scala ; amliorations des performances.

cycle de releases du langage, qui a refondu son implmentation permettant de meilleures performances et une meilleure stabilit. Plus d'informations : Lien 11. Dernire nouvelle lie la sortie de cette version 2.9.0 de Scala : Martin Odersky, crateur du langage, a fond avec des membres actifs de la communaut la socit Typesafe (Lien 12) dans le but de fournir une suite complte open source de dveloppement Scala qui inclut pour le moment Scala 2.9.0 et Akka 1.1 (Lien 13) et devrait inclure la nouvelle version de scala-ide (Lien 14). La socit fournit aussi des formations et du support professionnels aux entreprises. Cette nouvelle version devrait permettre au langage de se propulser dans le monde de l'entreprise et de passer du ct des langages mainstream. Commentez cette news de George7 en ligne : Lien 15

Plus d'informations : Lien 10. noter aussi le plugin Eclipse qui suit plus ou moins le Les bundles en GWT

Les derniers tutoriels et articlesLes bundles en GWT

Cet article va prsenter le concept de client bundle GWT et montrer son utilisation. Prrequis : utilisation de GWT.1. Qu'est-ce qu'un bundle de donnes ? Une application web est accompagne d'un nombre plus ou moins important de ressources statiques : notamment les images et feuilles de style CSS. Chaque rfrence l'une de ces ressources va provoquer son chargement via une requte HTTP ddie. On peut facilement arriver plus de cinquante images (icnes ou lments de style graphique) pour une seule page. Dans les styles modernes il n'est pas rare de manipuler des 9-box : un conteneur graphique utilisant neuf images (les quatre coins, les quatre bords et le centre). Chaque type de 9-box ncessitera neuf requtes HTTP.

Les temps de chargement sont lgrement diminus dans le cas d'un bundle et le nombre de requtes HTTP d'images dans cet exemple est pass de 19 0 ! En effet sur mon navigateur de test, GWT a compil les images en base64 et elles sont directement incluses dans le code JavaScript gnr. Notons au passage qu'il aurait quand mme fallu L'optimisation d'un site web rside en partie dans sa une requte pour charger le bundle sur les navigateurs ne vitesse d'affichage et la minimisation des requtes HTTP supportant pas la dfinition des images en base64. est un axe de travail. Si on avait une seule grosse image concatnant toutes les petites images utilises par notre 2. Images thme graphique, il ne faudrait dj plus qu'une seule Le regroupement d'images est le plus intuitif. GWT va requte HTTP pour rcuprer tous les lments de style. Et agencer dans une nouvelle image PNG toutes les images on peut faire le mme raisonnement pour minimiser les qui lui sont donnes grer. Il y a cependant une inclusions de feuilles de style en les concatnant. C'est spcificit par rapport aux fichiers JPG puisque ceux-ci cette facilit de regroupement qui est amene par les seront mis dans des fichiers spars pour minimiser la bundles de donnes GWT. taille de l'image gnre. Dans votre projet GWT il vous suffit de dclarer toutes les images utiliser dans une Voici une comparaison du nombre de requtes HTTP du interface tendant ClientBundle. Crez un nouveau temps de chargement et pour une page utilisant un bundle package contenant cette interface et toutes vos images. de donnes et la mme page ne l'utilisant pas. Bien sr le temps de chargement dpend de la bande passante, de la disponibilit du serveur, de la vitesse du poste client... mais les graphiques suivants montrent l'ordre de grandeur.

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 3

Inscrivez chaque image grer dans l'interfaceImageResource icon();

public interface Resources extends ClientBundle{ public static Resources R = GWT.create(Resources.class); CssResource style(); }

Ajoutez le constructeur GWT du bundle :public static ImageBundle R = GWT.create(ImageBundle.class); public interface Resources extends ClientBundle{ public static Resources R = GWT.create(Resources.class); ImageResource ImageResource ImageResource ImageResource ImageResource ImageResource ImageResource ImageResource ImageResource ImageResource ImageResource ... } add(); edit(); email(); facebook(); login(); logout(); refresh(); remove(); rss(); twitter(); user_group();

La dclaration d'une mthode style() est associe au fichier style.css situ dans le package courant. L'inclusion de cette feuille de style se fait parResources.R.style().ensureInjected();

Les feuilles de style sont elles aussi optimises, les classes sont regroupes, les commentaires sont supprims. Les lments de style peuvent mme tre directement inscrits dans un attribut style des lments du DOM s'ils sont peu utiliss. L'utilisation classique peut s'illustrer avec cet exemple :@external .test; .test{ font-size: 9pt; color: #985; } monWidget.addStyleName("test");

La cration d'une signature de fonction "icon" correspondra une image icon.bmp, icon.png, icon.jpg ou icon.gif situe dans le mme package. Le plugin GWT de votre environnement vous avertira si vous rfrencez une image inexistante dans le package. Si vous souhaitez que la fonction "icon" soit en ralit associe une autre image, il va falloir le prciser avec une annotation @Source("monImage.png"). Voil le rsultat de la compilation des images :

Pour utiliser directement les classes CSS dans votre code HTML, il faut dclarer ces classes CSS avec l'annotation @external. De cette manire les slecteurs ne seront pas optimiss et ils resteront cohrents avec votre code HTML. 3.1. Utilisation des bundles d'images dans un bundle CSS GWT permet de rutiliser dans une feuille de style une image incluse dans un bundle d'images. C'est l tout l'intrt des sprites GWT. Rien ne vous empche de crer un mme bundle pour stocker la fois des images et des feuilles de style. La dclaration d'une rgle CSS utilisant un lment d'un bundle d'images se fait de la manire suivante :@external .info; @sprite .info{ gwt-image : "info"; }} public interface Resources extends ClientBundle{ public static Resources R = GWT.create(Resources.class); CssResource style(); ImageResource info();

Les images contenues dans le bundle s'utiliseront en indiquant la fonction de l'interface qui leur est associe. Voil par exemple comment instancier des objets GWT image lis au bundle. Et bien sr au final, notre page se charge trs rapidement ct client, nous avons au plus une seule requte HTTP pour charger toutes les images.RootPanel.get().add(new Image(Resources.R.add()));

3. Feuilles de style GWT amne une gestion des feuilles de style trs puissante : il amne des notions de variables CSS, de factorisation de rgles CSS, d'inclusions conditionnelles et bien sr il permet d'utiliser les ressources images dfinies en bundle.

De la mme manire que pour les bundles d'images, il }}} vous suffit d'inclure votre fichier CSS dans un package de votre projet et de dclarer une mthode du mme nom 4. Utilisation des bundles de donnes texte dans l'interface du bundle. Une mthode "style" sera Bien qu'ils soient moins utiles, les bundles de donnes associe au fichier "style.css". Exemple peuvent vous permettre d'optimiser encore un peu les transferts de donnes statiques de votre application. Si vous avez besoin de manipuler un fichier texte statique (fichier txt, xml, json...), les bundles de donnes texte sont pour vous.Developpez Magazine est une publication de developpez.comNumro 34 Juin - Juillet 2011 Page 4

{

La dfinition d'un bundle de donnes est similaire celle des bundles CSS et images : vous ajouter une mthode dans l'interface de votre bundle et GWT associera un fichier du package courant avec le nom de la mthode. Une mthode "methode" cherchera un fichier "methode.txt", moins que vous n'ajoutiez l'annotation @source, comme pour les bundles CSS et images.

rcupration }

// gestion de l'erreur de

Il y a cependant une nuance pour les bundles de texte : ceux-ci peuvent tre accds de manire synchrone ou asynchrone. La mthode synchrone chargera le contenu du fichier texte ds le chargement de la page alors que la ressource asynchrone ne sera accde et transfre que lors La rcupration du contenu d'un bundle texte renvoie un de son utilisation. objet String, vous ensuite de le parser s'il s'agit d'un public interface Resources extends ClientBundle { fichier XML, JSON ou autre.public static Resources R = GWT.create(Resources.class); ImageResource dvp(); CssResource style(); TextResource countries(); // une ressource synchrone -> countries.txt ExternalTextResource countriesAsync(); // une ressource asynchrone -> countriesAsync.txt } // synchrone String countries = Resources.R.countries().getText(); // asynchrone Resources.R.countriesAsync().getText(new ResourceCallback(){ @Override public void onError(ResourceException e)

@Override public void onSuccess(TextResource resource) { String countries = resource.getText(); // traitement des donnes, parsing ... } });

5. Risques de drive La notion de bundle peut paratre trs tentante, mais il faut bien faire attention ne pas en abuser, vous pourriez perdre en performance. Le bundle idal est celui dont toutes les ressources sont utilises sur une page web. Il est donc dconseill de stocker dans un mme bundle des lments graphiques utiliss sur des pages diffrentes ou visibles par des utilisateurs diffrents. Une solution pertinente sera de crer un bundle centralisant toutes les ressources communes tous les modules de votre application web et ensuite autant de bundles que de modules, pour y stocker les lments spcifiques chaque module. De cette manire vous maximisez vos chances d'utiliser tous les lments d'un bundle quand il aura t tlcharg par le navigateur. Retrouvez l'article de Pierre Schwartz en ligne : Lien 16

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 5

AndroidLes derniers tutoriels et articlesIntroduction la programmation sous Android Ce tutoriel a pour but de vous prsenter succinctement Android, ainsi que les prmices de la programmation sous celui-ci.1. Android, c'est quoi ? 2.4. Content providers Android est un OS mobile Open Source pour smartphone, Les content providers servent accder des donnes PDA, MP3 et tablette. Conu initialement par Android depuis votre application. Vous pouvez accder : Inc , il a t rachet par Google en 2005. aux contacts stocks dans le tlphone ; l'agenda ; Pour commencer la programmation Android, il faut aux photos ; d'abord installer le SDK Android et comprendre les bases ainsi qu' d'autres donnes depuis votre de la programmation sous Android. Puis nous allons faire application grce aux content providers. notre premier programme sous Android c'est--dire le bien connu Hello Word pour bien comprendre ces bases. 3. Cycle de vie d'une application Android 2. Composantes d'une application Android Une application Android est compose d'lments de base : 2.1. Activities (Activits en franais) Une activit est la composante principale pour une application Android. Elle reprsente l'implmentation mtier dans une application Android. Prenant l'exemple d'une application qui liste tous vos fichiers mp3 prsents dans votre tlphone, le projet pourrait se dcomposer comme ci-dessous : une vue pour afficher la liste des mp3 ; une activit pour grer le remplissage et l'affichage de la liste ; si l'on veut pouvoir rajouter, supprimer des mp3, on pourrait rajouter d'autres activits. 2.2. Services Un service, la diffrence d'une activit, ne possde pas de vue mais permet l'excution d'un algorithme sur un temps indfini. Il ne s'arrtera que lorsque la tche est finie 3.1. OnCreate ou que son excution est arrte. Cette mthode est appele la cration de votre activit (Activity). Elle sert initialiser votre activit ainsi que Il peut tre lanc diffrents moments : toutes les donnes ncessaires cette dernire. au dmarrage du tlphone ; au moment d'un vnement (arrive d'un appel, Quand la mthode OnCreate est appele, on lui passe un SMS, mail, etc.) ; Bundle en argument. Ce Bundle contient l'tat de lancement de votre application ; sauvegarde enregistr lors de la dernire excution de action particulire dans votre application. votre activit. 2.3. Broadcast and Intent Receivers Un Broadcast Receiver comme son nom l'indique permet d'couter ce qui se passe sur le systme ou sur votre application et dclencher une action que vous aurez prdfinie. C'est souvent par ce mcanisme que les services sont lancs. 3.2. onStart Cette mthode est appele dans le cas o votre application est en arrire-plan et qu'elle repasse en avant-plan. Si votre activit ne peut pas aller en avant-plan quelle que soit la raison, l'activit sera transfre OnStop. Introduction la programmation sous Android

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 6

3.3. onResume Cette mthode est appele aprs OnStart (au moment o votre application repasse en avant-plan). OnResume est aussi appele quand votre application passe en arrire-plan cause d'une autre application. 3.4. onPause Appele juste avant qu'une autre activit que la vtre passe en OnResume. ce stade, votre activit n'a plus accs l'cran, vous devez arrter de faire toute action en rapport avec l'interaction utilisateur. Vous pouvez par contre continuer excuter des algorithmes ncessaires mais qui ne consomment pas trop de CPU. 3.5. onStop Appele quand votre activit n'est plus visible quelle que soit la raison. 3.6. onDestroy

be fetched using http:// . 7. Cliquez sur Install . 8. Installez Eclipse : Lien 18 (tlchargez une version comprenant Java, soit la version pour les dveloppeurs Java ou la version pour les dveloppeurs J2EE) : version installe pour ce tutoriel : 3.6.1 Helios. 9. Il faut aussi installer JDK (Java Development Kit) et JRE (Java Runtime Environement) si ce n'est pas dj fait : Lien 19. 10. Lancez votre Eclipse, allez dans le menu Help and Install New Software 11. Dans la partie Available Software , cliquez sur Add . 12. Rajoutez le nom du site ( ADT plugin par exemple). Dans la location rajoutez : Lien 20, puis cliquez sur OK. 13. Revenez dans Available Software , vous devez voir Developer Tools . Slectionnez-le et appuyez sur Next . 14. Cliquez sur Next pour lire et accepter la licence et puis cliquez sur Finish . 15. Pour finir l'installation relancez Eclipse.

Appele quand votre application est totalement ferme Voil votre environnement de dveloppement est prt tre utilis. (Processus termin). 4. Installer votre environnement de dveloppement 4.1. Installation du SDK Android 4.2. Configuration de votre environnement de dveloppement

Vous avez d remarquer qu'un nouvel lment est apparu dans votre Eclipse dans le menu du haut (un petit Android 1. Pour commencer allez sur le lien suivant : Lien 17 et qui sort d'une bote) : tlchargez la version du SDK qui convient votre OS. Pour la suite on est sur un Windows 7. 2. Vous avez le choix entre la version Zip ou la version exe. Dans cet exemple on a pris la version Zip. 3. Une fois le SDK tlcharg, allez dans le dossier o se Cliquez sur l'icne en question, une nouvelle fentre va trouve le fichier Zip et l'extraire dans le dossier de votre apparatre. choix. 4. Lancez l'excutable SDK Setup qui se trouve la racine du dossier. 5. La fentre suivante apparait (la dernire version actuelle du SDK est 2.3) :

6. Choisissez ce que vous voulez installer. Par exemple : SDK Platform Android 2.x : correspond tout simplement au SDK Android basique en version 2.x ; Samples for SDK API 7 : correspond quelques exemples ; Android + Google APIs : correspond au SDK Android (1re option) + Google Api qui inclut diffrentes fonctions comme GoogleMap, etc. ; Galaxy Tab : c'est le SDK pour la tablette Samsung Galaxy Tab. En cas de problme d'installation, allez dans Settings et cochez Force https:// sources to

Cet cran vous permettra de : installer de nouveaux paquets (Available Packages) ; mettre jour vos paquets ; voir les paquets dj installs (Installed Packages) ; crer votre mulateur Android et cela grce l'onglet Virtual Devices . Cliquez sur le bouton New . Une nouvelle fentre pour la cration de votre mulateur apparatra.

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 7

Remplissez les champs : Project name : le nom du projet. Pour notre exemple on choisira Hello World. Build Target : cochez la SDK que vous souhaitez. On prendra Android 2.3. Properties : -------Application name : le nom de l'application. On choisira Hello World ; -------Package name : le nom du package principal de l'application. Il faut que ce dernier comporte au moins deux identifiants spars par des points. On prendra com.tuto.android ; -------Create Activity : si vous laissez coch, vous devez spcifier un nom pour l'activit de base de votre application. Nous choisirons HelloWorldActivity ; -------Min SDK Version : vous pouvez spcifier quelle version minimum du SDK est ncessaire pour le fonctionnement de votre application. Ce champ est facultatif. Puis cliquez sur Finish , le projet Hello World va apparatre dans l'arborescence d'Eclipse.

Name : le nom de votre mulateur (sans espace). Target : version du SDK Android de l'mulateur. 5.2. Explication de l'arborescence du projet SD Card (facultatif) : configuration de la SD Voici le rsultat de la cration de votre projet et Card (Taille, etc.). Skins : choisissez la taille, rsolution de votre l'arborescence de ce dernier mulateur. Des mulateurs prconfigurs se trouvent dans la partie Built-in. Hardware : cette partie permet de rajouter le matriel spcifique votre mulateur. Par exemple vous pouvez rajouter un GPS, configurer le clavier, l'acclromtre, etc.

L'mulateur apparatra maintenant dans la liste des mulateurs disponibles. Maintenant on va passer la partie la plus intressante. 5. Ma premire application sous Android 5.1. Cration du projet Hello World Dans Eclipse, cliquez sur File -> New -> Android Project . La fentre ci-dessous s'affichera : src : ce dossier contient les sources de votre application (code JAVA) et les packages. com.tuto.android : un package de votre application. Bien sr, vous pouvez avoir plusieurs packages dans votre application. HelloWorldActivity.java : notre principale activit. (je vous conseille d'avoir plusieurs activits pour les diffrentes parties de votre code). gen : dossier qui contiendra le fichier R.java (ce fichier est gnr automatiquement partir de vos vues et fichiers de ressource). R.java : ce fichier est automatiquement gnr par le SDK Android chaque prcompilation. assets : contient des donnes qui pourront tre utilises dans votre application (images, vidos, licence, etc.). res : c'est le dossier qui contiendra les ressources de votre application (images, vidos, styles). drawable-hpdi : contient toutes les images, bitmaps dont vous avez besoin pour votreNumro 34 Juin - Juillet 2011 Page 8

Developpez Magazine est une publication de developpez.com

application en haute rsolution. drawable-ldpi : contient toutes les images, bitmaps dont vous avez besoin pour votre application en basse rsolution. drawable-mdpi : contient toutes les images, bitmaps dont vous avez besoin pour votre application en moyenne rsolution. Icon.png : l'icne de votre application, cette icne sera affiche sur le bureau. layout : le SDK Android offre une technique de cration d'interfaces graphiques l'aide de fichiers XML. C'est dans ce dossier que vous inclurez l'ensemble des fichiers dcrivant vos interfaces. Vous pouvez crer d'autres dossiers pour les menus par exemple. Main.xml : le fichier principal de votre interface. values : ce dossier contient un ensemble de fichiers dcrivant les valeurs (pseudovariables) utilises par votre application. On peut, par exemple, y mettre des chanes de caractres (strings.xml), des tableaux (arrays.xml), des entiers, des couleurs, etc. Strings.xml : fichier qui contient vos dclarations de chanes de caractres. AndroidManifest.xml : dfinit le comportement de votre application au systme Android. Ce fichier dfinit par exemple le nom, l'icne, la version min du SDK, les activits, les services, etc.

AndroidManifest.xml

5.3. Hello, World! Le projet exemple cr de base par Eclipse reprsente un Hello World! . Vous pouvez le lancer en tant qu'une application Android. Pour cela, il vous suffit de cliquer droit sur le projet, puis slectionner l'option Run As -> Android Application et la l'mulateur devrait se lancer. L'mulateur prendra un peu de temps se lancer la premire fois (ne le fermez pas entre vos diffrentes modifications). Voil le deuxime cran qui devrait s'afficher si tout se passe bien (le premier est pareil mais avec juste crit Android )

La balise manifest la ligne deux contient plusieurs arguments, le plus important est package , qui donne le nom du package dans lequel se trouve votre activit principale. La balise application sert la dclaration de diffrentes proprits de votre application : -------android:icon : l'emplacement o se trouve l'icne de votre application ; -------android:label : le nom de votre application (il se trouve dans strings.xml). La balise activity permet de dclarer une activit, chaque nouvelle activit il faut remettre cette balise. -------android:name : le nom de la classe Java qui reprsente l'activit. Le nom doit commencer par un . et on ne met pas le .java la fin. -------android:label : le label de l'activit en question. -------intent-filter : c'est pour spcifier une action. --------------la sous-balise action est pour spcifier l'action excuter, dans notre cas c'est le main. --------------la sous-balise category est l pour spcifier la catgorie de l'action. --------------Voici un lien qui explique les diffrents types d'actions et de catgories : Lien 21. strings.xml

Notre Hello Word est bien fonctionnel mais reste encore le comprendre. Allons voir le code pour comprendre ce qui se passe.

Hello World, HelloWorldActivity! Hello World

dans les balises resources, on met une balise string chaque fois que l'on a besoin de dclarer une chane de caractres ; on dclare deux chanes :

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 9

-------la chane hello qui contiendra Hello World, HelloAndroActivity! qui est le message qui sera affich dans l'application ; -------la chane app_name qui contient Hello Andro qui reprsente le nom de l'application. main.xml ------- On dispose de deux modes de visualisation. --------------Onglet Layout : mode visualisation et dition d'interface ; --------------Onglet main.xml : mode code source. -------On commence par une balise qui dfinit le layout : ici LinearLayout. -------Voici un lien pour la liste des diffrents layouts : Lien 22. -------On dclare une composante TextView pour afficher du texte et on lui dit qu'elle doit afficher le contenu de @string/hello, donc de la variable hello qui est dclare dans strings.xml c'est--dire Hello World, HelloWorldActivity! . HelloAndroActivity.java

que l'on utilise du code qui a t gnr par les diffrents fichiers xml de ressources. R.layout : on va chercher la vue dclare dans le dossier layout et qui s'appelle main donc notre main.xml. R.java

/* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package com.mti.android; public final class R { public static final class } public static final class public static final int } public static final class public static final int } public static final class public static final int public static final int } }

attr { drawable { icon=0x7f020000; layout { main=0x7f030000; string { app_name=0x7f040001; hello=0x7f040000;

package com.mti.android; import android.app.Activity; import android.os.Bundle; public class HelloAndroActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }

Vous ne devez pas toucher ce fichier, il est gnr automatiquement partir de vos fichiers qui se trouvent dans le dossier des ressources (res). Vous remarquez que toutes les variables dclares dans strings.xml sont prsentes, que l'interface dclare dans main.xml aussi. Ce qui explique l'utilisation de la ligne R.layout.main dans le HelloWorldActivity.java ainsi que l'icne de l'application.

Notre main activit. Elle doit hriter de la classe Activity ou d'une sous-classe de cette dernire. Lien 23. La mthode OnCreate est quivalente au main, elle est appele la cration de votre vue. On appelle simplement le OnCreate de la classe mre puis on initialise la vue. Puis, on met dedans R.layout.main, c'est--dire la vue dclare dans le fichier main.xml. chaque fois que vous voyez R , c'est--dire

6. Conclusion Voil on s'arrte ici pour ce premier tutoriel, d'autres tutoriels vont suivre trs prochainement et aborderont des sujets plus approfondis. Retrouvez l'article de Nazim Benbourahla en ligne : Lien 24

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 10

Comprendre et corriger les erreurs dans votre application Ce tutoriel a pour but de vous aider bien comprendre les messages d'erreurs que vous pouvez rencontrer lors du dveloppement de votre application Android et les outils votre disposition pour rsoudre vos erreurs.1. Logcat 2. Console

Comprendre et corriger les erreurs dans votre application

Le LogCat trace l'excution de l'mulateur et donc, de La console vous permet entre autres de suivre : l'tat de compilation de votre application ; votre application pas pas. Vous allez voir tout ce que fait l'tat d'installation de votre application ; l'mulateur et tout ce qu'il affiche. les warnings ou erreurs lors de la cration de l'apk, le tlchargement sur l'mulateur, son Si vous ne disposez pas de l'onglet LogCat, il suffit d'aller installation et le lancement de ce dernier. dans le menu "Window -> Show View -> Other", puis choisissez LogCat. 3. Problems

L'onglet "problems" sert afficher les erreurs et warnings de programmation, en vous indiquant : l'intitul de l'erreur ; le fichier concern par l'erreur ; la ligne ; le type du problme. En cas d'erreur dans votre application, elle sera affiche dans le LogCat et le fichier depuis lequel l'exception est lance sera indiqu, ainsi que la nature de l'exception. Vous pouvez filtrer les logs via les diffrents niveaux par ordre croissant (debug, info, warning, error) quand vous tes en train de dboguer votre application. Par exemple si vous choisissez de filtrer les logs partir des warnings, vous n'aurez dans ceux-ci que les warnings et les errors. Lors de votre dboguage et si vous voulez afficher des messages dans votre LogCat, il suffit d'utiliser :Log.i("TAG", "message");

4. Debug Un des outils les plus utiles quand on programme est de pouvoir poser des breakpoints. Pour cela il faut lancer l'application en mode "Debug As". Clic droit sur le projet puis "Debug As -> Android Application". Tous vos breakpoints seront activs. Quand vous dboguez votre application, n'oubliez pas de passer dans la perspective Debug, pour cela deux solutions. En haut droite de votre IDE, cliquez sur ">>" puis sur "Debug".

La lettre qui vient aprs le Log dpend de l'importance de votre affichage, c'est--dire : i pour information, d pour display, v pour verbose, etc. ; le Tag correspond en gnral au nom de votre classe mais vous pouvez mettre n'importe quelle chane de caractres.

Et vous obtiendrez la vue suivante :

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 11

L'onglet "Debug" affiche des informations utiles votre dbogage, par exemple les Threads qui sont en cours d'excution.

Si la premire mthode d'accs au Debug ne donne rien, il suffit de cliquer sur "Window -> Open Perspective -> Other" puis slectionner "Debug". 5. Conclusion J'espre que ce tutoriel vous a aid. N'hsitez pas me contacter ou commenter l'article, si vous rencontrez un L'onglet "Variables" est trs utile, il affiche les problme ou une erreur lors de votre dveloppement. valeurs des diffrentes variables. L'onglet "Breakpoints" affiche la liste de vos Retrouvez l'article de Nazim Benbourahla en ligne : breakpoints. Lien 25

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 12

PHPLes derniers tutoriels et articlesWebMatrix : dcouverte et prise en main d'un outil de dveloppement Web gratuit, "tout-en-un" Vous dcouvrirez au travers de cet article le nouvel environnement de dveloppement Web gratuit et lger WebMatrix, partir d'exemples simples, nous allons progressivement prendre en main la plate-forme et explorer un ensemble riche d'outils qu'elle met notre disposition.1. Introduction WebMatrix est un environnement de dveloppement Web robuste, lger (15 Mo), efficace et surtout gratuit dvelopp par Microsoft. Il permet aux dveloppeurs Web de crer et grer des applications Web sur la plate-forme Windows, tout en restant compatible avec les produits Microsoft Visual Studio, SQL Server ou encore PHP sur Windows. WebMatrix est un outil de dveloppement unique : il vous donne la possibilit d'crire, modifier et publier des sites Web avec une facilit dconcertante et prend la fois en charge les langages ASP.NET et PHP, et intgre galement la coloration syntaxique et l'IntelliSence pour ces langages. publis directement partir de WebMatrix ; Web Deploy permet d'automatiser le dploiement et la mise jour des applications sur serveurs ou chez un hbergeur ; et enfin un diteur lger qui prend en charge les langages HTML, HTML5, CSS, ASP.NET et PHP. On note galement la prise en charge du Framework Web de Microsoft ASP.NET MVC ainsi que le support du nouveau moteur de vues Razor. WebMatrix : dcouverte et prise en main d'un outil de dveloppement Web gratuit, "tout-en-un"

3. Installation de WebMatrix Pour installer WebMatrix, vous pouvez utiliser le Web Platform Installer 3.0 (WPI) qui est tlchargeable gratuitement sur le site de Microsoft. Le lien est fourni en fin d'article.

L'outil est spcialement adapt pour les tudiants, les dbutants et les personnes cherchant une solution simple et Sur la page de tlchargement du WPI, cliquez sur facile permettant la cration d'un site Web sans toute fois Installer maintenant, ensuite sur Excuter et enfin sur avoir besoin de maitriser l'architecture complexe des Installer. technologies Web .NET. WebMatrix minimise le nombre de concepts qu'un dbutant en dveloppement a besoin de savoir pour mettre sur pied des sites Web simples. Vous dcouvrirez, tout au long de cet article, l'outil de dveloppement Web WebMatrix, ses richesses graphiques et fonctionnelles. Cet article permettra galement une prise en main de l'environnement pour crer un site ASP.NET simple pouvant consommer les donnes d'une base de donnes SQL Server Compact et pour crer et excuter un site Web PHP. 2. Description de WebMatrix Une fentre comportant la liste des applications, produits WebMatrix regroupe au sein d'un seul outil, les plates- et composants tierces requis s'affiche. Cliquez sur j'accepte formes et ressources dont les dveloppeurs ont besoin pour pour lancer l'installation de WebMatrix et des composants crer, excuter et publier rapidement un site Web savoir : lis. le serveur Web IIS 7 Express, qui est un serveur Web lger simple installer, pouvant fonctionner avec toutes les versions de Windows et totalement compatible avec IIS 7 ; SQL Server Compact Edition 4.0, qui est un gestionnaire de base de donnes lger, gratuit et simple d'utilisation pouvant tre embarqu dans vos applications ASP.NET et migr facilement vers SQL Server ; une galerie Web pouvant se connecter au Web Application Gallery de Microsoft pour proposer aux dveloppeurs une vaste collection de CMS et applications open source populaires comme WordPress, Dupral, Joomla ou encore DotNetNuke, pouvant tre installs, dits etDeveloppez Magazine est une publication de developpez.comNumro 34 Juin - Juillet 2011 Page 13

4. Dmarrage de WebMatrix

Aprs avoir install WebMatrix, vous pouvez lancer l'application partir du menu dmarrer -> Tous les Pour cet exemple introductif, nous allons donner comme programmes -> Microsoft WebMatrix -> Microsoft nom " MonSiteTest " notre premier site Web avec WebMatrix. WebMatrix. Ds que le chargement de l'application sera achev, Ensuite cliquez sur le bouton OK pour procder la WebMatrix vous proposera un ensemble d'options vous cration du site. permettant de crer ou accder rapidement un site Web. Le programme cre le nouveau site et l'affiche dans l'espace de travail de WebMatrix. 5.1. Description de l'espace de travail Avant de continuer, nous allons prsenter brivement l'interface utilisateur de WebMatrix qui - il faut le dire - est trs ergonomique. WebMatrix vous propose une interface riche mettant votre disposition tous les outils dont vous avez besoin pour la cration et la publication de votre site Web.

Slectionnez le modle "Site Vide", et dans la zone nom du site, renseignez le nom de votre site Web.

Par dfaut l'diteur vous propose les choix suivants : Mes Sites, pour accder rapidement vos sites Web existants et les modifier avec WebMatrix ; Site partir de la galerie Web, qui vous donne un accs direct une large gamme de CMS et applications Web open source (DotNetNuke, Dupral, Joomla, WorldPress), pouvant tre tlchargs, personnaliss et publis sans quitter l'diteur. Pour avoir accs cette option, vous devez au pralable avoir install le Web Platform installer et WebDeploy ; Site partir du modle, qui permet de crer un site Web bas sur un modle prdfini, ceci permet d'inclure des fichiers et pages Web ayant une certaine structure de base en fonction des diffrents choix disponibles ; Site partir du dossier, qui permet d'ouvrir et diter un site existant dans un dossier autre que celui dans lequel les sites Web sont par dfaut crs avec WebMatrix. 5. Premier site Web avec WebMatrix Maintenant que nous avons procd l'installation et au dmarrage de WebMatrix, nous allons crer notre premier site Web bas sur un modle existant. Pour cela, dans la fentre de "Dmarrage rapide", cliquez sur l'option "Site partir du modle". Le programme affiche une liste des diffrents modles de site Web disponibles par dfaut (Site vide, Site de dmarrage, Ptisserie, Galerie de photos ).

L'interface utilisateur est compose de quatre zones importantes, savoir : la barre d'outils (1), le panel de navigation (2), le panel de slection d'espace de travail (3) et la zone de travail (4). 1. La barre d'outils: elle contient un ruban "Accueil" faon office 2007 ou 2010. Ce ruban contient les commandes permettant de paramtrer le site (Mes sites, publier un site, excuter, arrter) ; 2. Le panel de navigation : ce panel vous permet de naviguer entre les diffrentes options disponibles et slectionner ce qui doit tre affich dans la zone de travail ; 3. Le panel de slection d'espace de travail : cette zone permet de slectionner l'espace de travail (Site, Fichiers, Base de donnes, Rapports). En fonction de ce que vous avez slectionn dans cette zone, les lments du ruban, du panel de navigation et de la zone de travail sont automatiquement remplacs par ceux adapts votre choix ; 4. La zone de travail : cette zone est celle ou sont affichs les rapports, la zone d'dition des fichiers, de paramtrage du site 5.2. Cration d'une premire page Web Dans le panel de slection d'espace de travail, slectionnez l'espace de travail "Fichiers" (cet espace vous permet de crer des fichiers et dossiers de votre site Web).

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 14

L'espace de travail fichier vous prsente la structure des 5.3. Qu'est-ce qu'un fichier de type CSHTML ? fichiers existants dans votre site dans le panel de Les fichiers de type cshtml sont des pages Web ASP.NET navigation. pouvant contenir du code HTML, JavaScript et CSS tout comme une page HTML normale, sauf qu'ils reposent sur le nouveau moteur de vues Razor et peuvent de ce fait avoir du contenu dynamique. Les fichiers avec l'extension .vbhtml utilisent galement le modle de vues Razor. Nous allons, l'aide de l'diteur de code de WebMatrix, ajouter quelques lignes de code pour afficher un message et la date du jour dans une page. Dans le ruban de la boite d'outils, cliquez sur "nouveau", ensuite sur "nouveau fichier" pour procder la cration d'un nouveau fichier dans notre site.

WebMatrix vous affiche une liste des types de fichiers disponibles.

Et l'excution on obtient ceci :

Comme vous pouvez le constater, WebMatrix vous propose plusieurs types de fichiers (html, css, cshtml, vbhtml, php) qui sont pris en charge par l'diteur.

Vous noterez certainement la syntaxe particulire au niveau de l'appel de la fonction [email protected]

Que cela ne vous effraye pas, c'est juste la syntaxe - assez Pour notre exemple nous allons utiliser un fichier avec simple ile faut le dire - qu'introduit le nouveau moteur de l'extension .CSHTML. Slectionnez donc dans la liste des vues Razor sur lequel repose notre page index. fichiers le fichier de type .cshtml et donnez comme nom votre fichier index.cshtml et cliquez sur OK. Ce tutoriel ayant pour principal but de vous faire dcouvrir WebMatrix et non la syntaxe d'un langage ou d'un moteur Le fichier index.cshtml est cr avec les lignes de code de vues, je ne vais pas m'attarder sur la syntaxe de Razor suivantes par dfaut : bien que nous l'utilisions dans quelques exemples. Pour ceux qui prouvent des difficults de comprhension de ce tutoriel cause de cela, je les prie de bien vouloir se rfrer aux diffrents tutoriels sur le sujet disponibles sur Internet. Je tiens quand mme noter que le moteur de vues Razor permet de simplifier normment les vues en rendant fluide le processus de code et en permettant d'intgrer rapidement du code serveur dans des balises HTML.

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 15

6. Utilisation d'une base de donnes SQL Server Compact Passons maintenant un exemple un peu plus complexe dans lequel nous allons manipuler dans une page Web, des informations provenant d'une base de donnes. La page que nous allons construire va simplement nous afficher une liste de clients partir d'une base de donnes, et une autre page sera galement cre pour y insrer des donnes.

Dans la zone Proprit de la colonne, renseignez le nom, le type et la valeur par dfaut. Pour notre exemple vous allons crer les colonnes : Id de type int, auto-incrment ; Nom de type nvarchar ; Prenom de type nvarchar et Email de type nvarchar.

Pour dfinir le champ Id comme la cl primaire, dans la zone "Cl primaire ?" mettre le champ " True " et de mme pour dfinir que c'est un champ auto incrment, mettre dans la zone "Identit" le champ " True " Pour cet exemple, nous allons donc utiliser une base de galement. donnes SQL Server Compact et la nouvelle syntaxe Razor. Lorsque vous aurez termin, vous aurez une table semblable celle ci-dessous : WebMatrix embarque par dfaut SQL Server Compact Edition 4.0, avec des outils d'administration de base vous permettant de crer une base de donnes, crer des tables, des colonnes, ajouter et afficher des donnes. SQL Server Compact est particulirement adapt pour les bases de donnes de petite taille, et rend la publication d'un site beaucoup plus simple, puisque tous les fichiers de base de donnes sont directement inclus dans le dossier de votre site Web. 6.1. Cration d'une nouvelle base de donnes Revenons notre exemple prcdent (MonSiteTest), nous allons ajouter une base de donnes notre site.

Cliquez enfin sur l'icne enregistrer de la boite d'outils Pour crer une base de donnes avec WebMatrix, cliquez d'accs rapide, et renseignez le nom de la table et cliquez sur "Base de donnes" dans le panel de slection d'espace enfin sur OK. de travail pour basculer dans la zone permettant la cration Dans notre cas, on va donner le nom "clients" la table. et la gestion des bases de donnes. Cliquez ensuite sur ajouter une nouvelle base de donnes. Par dfaut, un nouveau dossier App.data est automatiquement ajout votre site. Dans le panel de navigation, un nouveau fichier de base de donnes (.mdf) est ajout avec comme nom par dfaut celui de votre site (bien videment vous pouvez modifier ce nom).

6.3. Ajout des donnes dans la table Dans le panel de navigation, slectionnez la table "clients" et cliquez ensuite sur donnes dans la barre d'outils pour ajouter ou modifier des donnes dans la table "clients". Insrez quelques lments dans cette table comme l'illustre la capture ci-dessous : 6.4. Affichage des donnes dans une page Web 6.2. Ajout d'une nouvelle table Maintenant que nous avons ajout des donnes dans notre Cliquez sur le bouton nouvelle table dans le ruban pour table "clients", voyons maintenant comment nous pouvons procder la cration d'une nouvelle table devant contenir les afficher dans une page Web. nos clients. Dans notre site, nous allons ajouter une nouvelle page Cliquez ensuite sur nouvelle colonne et crez les clients.cshtml. Pour ce cela, "Cliquez" sur Fichiers dans le panel de slection d'espace de travail, ensuite sur nouveau diffrentes colonnes dont nous aurons besoin. dans la boite d'outils. Slectionnez un fichier de type cshtml et dans la zone nom, saisissez "clients".Numro 34 Juin - Juillet 2011 Page 16

Developpez Magazine est une publication de developpez.com

Juste avant la balise DOCTYPE, saisissez les lignes de Et l'excution on obtient le rsultat suivant : code suivant :@{ var db = Database.Open("MonSiteTest"); var sqlreq = "Select * from clients"; }

Le signe @ suivi par des accolades, dsigne un bloc de code sur plusieurs lignes. Database est une nouvelle classe qui fournit un ensemble de mthodes pouvant tre facilement utilises pour travailler avec les bases de donnes.

La mthode Open() tablit automatiquement une connexion et ouvre la base de donnes dont le nom du Dans la section prcdente, nous avons affich les donnes dans une page en utilisant un tableau HTML. Cependant, il fichier est pass en paramtre. existe un moyen beaucoup plus simple d'afficher les La seconde ligne de code est juste une requte pour la donnes l'aide d'un nouveau composant ASP.NET : le WebGrid Helper. slection des donnes dans la base de donnes. Ensuite, dans le body, nous allons crire le script pour lire Le WebGrid Helper retourne un tableau HTML qui affiche les donnes dans la base de donnes et les afficher dans un les donnes d'une table. L'assistant prend en charge les options de mise en forme pour crer un moyen de tableau. parcourir les donnes, et pour laisser aux utilisateurs la Pour cela, nous allons utiliser la mthode Query de la latitude de trier en cliquant sur un titre de la colonne. classe Database qui prend en paramtre la requte et Pour utiliser ce composant, nous allons dclarer une retourne les champs de la table. nouvelle variable de type Webgrid comme suit : Nous allons galement utiliser une boucle foreach pour lire les donnes dans une variable row et les afficher dans var grid = new WebGrid(db.Query(sqlreq)); le tableau. Le WebGrid prend en paramtre le rsultat d'une Le code complet de la page clients.chtml est le suivant : instruction de slection des donnes dans la BD.@{ var db = Database.Open("MonSiteTest"); var sqlreq = "Select * from clients"; } Clients Clients Nom Prnom E-mail @foreach(var row in db.Query(sqlreq)){ @row[1] @row[2] @row[3] }

6.5. Utilisation du WebGrid Helper pour afficher les donnes

La mthode @grid.GetHtml() sera par la suite utilise dans le body pour retourner une reprsentation HTML de la grille(tableau HTML). Le code complet est le suivant :@{ var db = Database.Open("MonSiteTest"); var sqlreq = "Select * from clients"; var grid = new WebGrid(db.Query(sqlreq)); } Clients table {border-collapse: collapse;} td, th {border: solid 1px; } Clients @grid.GetHtml()

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 17

Et l'excution, on obtient le rsultat suivant :

Et la compilation on obtient le rsultat suivant :

6.5.1. Personnaliser un WebGrid Le WebGrid Helper affiche par dfaut toutes les colonnes retournes par la requte. Mais vous pouvez le personnaliser en spcifiant par exemple les donnes qui seront affiches et dans quel ordre, procder aux formatages des donnes ( l'exemple des dates ou des valeurs montaires). La personnalisation du WebGrid est assez simple, il suffit juste lors de l'appel du Grid.GetHtml, de spcifier les colonnes afficher, ainsi que le format de [email protected]( columns: grid.Columns( grid.Column("Nom"), grid.Column("Prenom", "Prnom"), grid.Column("Email","Adresse mail", format:@@item.Email) )

6.5.2. Paginer un WebGrid Helper Dans le cas o vous avez plusieurs lments enregistrs dans la base de donnes, il est possible avec le WebGrid de dfinir le nombre de lignes qui seront affiches dans la grille. Pour cela, il suffit de surcharger le constructeur du WebGrid en spcifiant la colonne qui sera utilise pour le tri et le nombre d'lments afficher par page.var grid = new WebGrid(source: db.Query(sqlreq), defaultSort: "Nom", rowsPerPage: 3) ;

Le code complet est le suivant :@{ var db = Database.Open("MonSiteTest"); var sqlreq = "Select * from clients"; var grid = new WebGrid(source: db.Query(sqlreq), defaultSort: "Nom", rowsPerPage: 3) ; } Clients table {border-collapse: collapse;} td, th {border: solid 1px; } Clients @grid.GetHtml( columns: grid.Columns( grid.Column("Nom"), grid.Column("Prenom", "Prnom"), grid.Column("Email","Adresse mail", format:@@item.Email) ) )

Le code complet est le suivant :@{ var db = Database.Open("MonSiteTest"); var sqlreq = "Select * from clients"; var grid = new WebGrid(db.Query(sqlreq)); } Clients table {border-collapse: collapse;} td, th {border: solid 1px; } Clients @grid.GetHtml( columns: grid.Columns( grid.Column("Nom"), grid.Column("Prenom", "Prnom"), grid.Column("Email","Adresse mail", format:@@item.Email) ) )

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 18

Et la compilation on obtient le rsultat suivant :

//vrification de l'adresse mail Email = Request["Email"]; if (Email.IsEmpty()) { ModelState.AddError("Email", "L'adresse mail est obligatoire."); } if(ModelState.IsValid) { var sqlreq = "INSERT INTO clients (Nom, Prenom, Email) " + "VALUES (@0, @1, @2)"; db.Execute(sqlreq, Nom, Prenom, Email); // Display the page that lists products. Response.Redirect(@Href("~/Clients")); } } } Enregistrement client label {float:left; width: 8em; text-align: right; margin-right: 0.5em;} fieldset {padding: 1em; border: 1px solid; width: 35em;} legend {padding: 2px 4px; border: 1px solid; font-weight:bold;} .validation-summary-errors {font-weight:bold; color:red; font-size: 11pt;} Enregistrement d'un nouveau client @Html.ValidationSummary("Erreur lors de l'opration:") Nouveau client Nom: Prnom: Adresse mail:

6.6. Insertion des donnes partir d'un formulaire Dans cette partie, nous verrons comment insrer les donnes partir d'une page Web dans une table de notre base de donnes SQL Server Compact. Pour cela, dans notre site, nous allons ajouter une nouvelle page nomme InsertClients.chtml. Dans cette page, nous allons ajouter trois zones de saisie pour enregistrer les lments sur les clients et un script pour vrifier que les donnes ont t bien saisies. Aprs vrification de la saisie, les donnes seront ensuite enregistres dans la table clients et l'utilisateur sera automatiquement redirig vers la page clients.cshtml mise jour. La mthode .Execute() de la classe Database sera utilise pour l'insertion des donnes dans la base de donnes. La mthode ModelState.AddError de la classe ModelState sera utilise pour notifier la vue qu'il y'a une erreur sur un champ du formulaire. Le code complet de la page InsertClient.cshtml est le suivant (aprs avoir valid un nouvel enregistrement sans avoir spcifi le champ "Adresse mail") : @{ var db = Database.Open("MonSiteTest"); var Nom = Request["Nom"]; var Prenom = Request["Prenom"]; var Email = Request["Email"]; if (IsPost) { //vrification du nom Nom = Request["Nom"]; if (Nom.IsEmpty()) { ModelState.AddError("Nom", "Le nom est obligatoire."); } //vrification du prnom Prenom = Request["Prenom"]; if (Prenom.IsEmpty()) { ModelState.AddError("Prenom", "Le prnom est obligatoire."); }

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 19

Et la compilation, vous obtenez le rsultat suivant :

de celui-ci et des composants requis.

7. WebMatrix et PHP

La version de PHP tlcharge est celle recommande pour l'excution de PHP sur Windows via la prise en charge FastCGI fournie dans IIS.

Comme nous l'avons dj mentionn plus haut, WebMatrix Lorsque le tlchargement est achev, vous aurez la prend compltement en charge et intgre un diteur de fentre suivante : code avec coloration syntaxique pour le langage PHP. Vous avez la possibilit avec l'diteur de crer et excuter des sites Web PHP o de modifier les applications Web existantes dans la Gallery d'applications. Dans cette section, nous verrons comment crer une application PHP, configurer automatiquement PHP avec le serveur IIS express partir de WebMatrix et excuter un site Web. Pour cela, crez une nouvelle application avec pour nom FirstPHPSite.

Pendant cette opration, WebMatrix procde une Dans le panel de slection d'espace de travail, cliquez sur configuration automatique d'IIS Express pour que celui-ci site, ensuite dans le panel de navigation sur paramtres et puisse excuter votre site Web PHP. dans la zone de travail, dans l'espace "Paramtres PHP", Maintenant nous allons ajouter une page index.php notre cochez la zone "Activer PHP". site. Dans le panel de slection d'espace de travail, cliquez sur fichier et ensuite sur nouveau fichier dans la barre d'outils, puis sur nouveau. Dans la fentre de slection du type de fichier, slectionnez le type PHP et donnez au fichier le nom index.php.

WebMatrix affiche automatiquement les versions de PHP qui sont prises en charge en vous donnant la possibilit de les installer si n'est pas encore fait.

Ajoutez les lignes de code suivantes ce fichier :!DOCTYPE html>

Aprs slection de la version que vous souhaitez utiliser, le programme procde automatiquement au tlchargement

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 20

Maintenant vous pouvez commencer crire vos applications PHP l'aide de WebMatrix. 8. Conclusion partielle Avec cette version de WebMatrix, vous avez votre disposition un environnement de dveloppement Web mature, riche en fonctionnalits et trs facile d'utilisation. Que vous soyez tudiant, dbutant en dveloppement ou que vous souhaitiez mettre sur pied de simples sites Web, WebMatrix est fait pour vous. Avec un minimum de connaissance en dveloppement .NET, il vous offre la possibilit de crer des sites Web riches. 9. Liens Tlcharger WebMatrix : Lien 26 Blog de Scott Guthrie : Lien 27 Les nouveauts d'ASP.NET MVC 3 : Lien 28 Retrouvez l'article de Hinault Romaric DONFACK en ligne : Lien 29

Et la compilation vous obtenez le rsultat suivant :

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 21

Dveloppement WebLes derniers tutoriels et articlestat des lieux de l'accessibilit de HTML5 Aprs avoir affirm Paris Web 2010 que HTML5 tait utilisable immdiatement en production (Lien 30), un expert en accessibilit m'a repris en disant qu'il tait dangereux de prtendre que HTML5 tait accessible (j'en parlais au futur cela dit). Dans le cadre d'un gros projet autour de HTML5, j'ai depuis fait pas mal de recherches, ce qui m'a permis de mieux comprendre son intervention. Je sais qu'il est dangereux de parler en dehors de son domaine d'expertise, mais il faut bien qu'un dveloppeur Web mette les pieds dans le plat et tout le moins provoque le dbat. Autant vous dire que si vous vous y connaissez en accessibilit, je prends tout ajout ou correction. Enfin, mes conclusions sont mitiges et il se pourrait mme que je revienne sur ce que j'affirmais l'poque. L'article original et les commentaires peuvent tre lus sur le site BrainCracking (Lien 31) : Etat des lieux de l'accessibilit de HTML5 (Lien 32).1. Quel HTML5 ? lorsque ces lecteurs de code source (services, moteurs de recherche, navigateurs) exploiteront cette mine Le terme commenant tre flou, il vaut mieux le prciser d'informations. chaque fois qu'on l'voque : pour une fois sur ce blog, le HTML5 dont nous parlerons dans cet article reprsente 2.2. Les problmes uniquement la spcification adoube par le W3C (Lien 33), celle qui correspond lvolution de HTML4 Le reproche principal fait aux nouvelles balises, c'est que avec les nouvelles balises, le nouvel algorithme de parsing, IE6 8 font disparatre du DOM les lments qu'ils ne canvas et le multimdia. connaissent pas et donc ne les prsentent pas aux technologies dassistance. Le moyen de contourner cela est 2. Les nouvelles balises connu (Lien 36), facile mettre en place et bullet-proof mais il induit une dpendance envers JavaScript. Les derniers chiffres franais pris sur la page d'accueil de 2.1. Leur apport Yahoo! (Lien 37) font tat de 1.5 % dutilisateurs dans cet Les balises comme article, time, header, nav ou figure tat. La part de march de IE est d'environ 50 %, cela vous apportent de la smantique votre page. Cela signifie laisse avec 0.7 % d'utilisateurs que cela peut gner parmi vos visiteurs handicaps. concrtement plusieurs choses : une meilleure lisibilit du code, ce qui est important pour ceux qui l'crivent et facilite la ma connaissance, il y a deux autres choses qui ont donn une mauvaise rputation ces nouveaux lments : maintenance ; une combinaison de certaines versions de JAWS une (future) exploitation facilite pour les tiers : et de Firefox avait un bogue qui faisait Readability (application de lecture, service de disparatre le contenu situ dans une balise rtribution des auteurs de blogs : Lien 34) se base header. En plus de la perte brute de contenu, selon sur ces nouvelles balises (ou sur microformat) o elle est place, header peut contenir des titres pour tirer les informations des articles des pages. ou des liens, deux lments fondamentaux pour la Il est difficile de trouver dautres exemples pour navigation avec les technologies dassistance ; le moment ; une autre combinaison, celle des versions de un (futur) meilleur rfrencement : la position Windows-Eyes et dInternet Explorer, narrivait officielle de Google sur le sujet est qu'il adapte pas lister les liens lintrieur dlments ses algorithmes toutes les pratiques mergentes. HTML5 avec une balise role. C'est trs spcifique Si beaucoup de sites utilisent article, Google mais l aussi il y a perte d'lments de navigation finira par linterprter ; fondamentaux. une (future) meilleure accessibilit : les navigateurs vont rajouter automatiquement (Lien 33) des rles ARIA sur certaines balises. Ce Doit-on changer sa manire de coder parce que deux tableau (Lien 35) vous montre le support actuel, il logiciels boguent ? Historiquement les dveloppeurs Web est aujourd'hui trs limit : Firefox 4 pour ont toujours rpondu oui cette question, en changeant certaines balises, Opra pour les formulaires sont leur code pour s'adapter aux bogues de IE par exemple. Sauf que IE est officiellement support par tous les sites leaders. Web alors que ce n'est pas le cas pour ces deux logiciels. Bref, les apports immdiats pour tous les sites ne sont pas Mme si ces bogues ont t corrigs, ils restent majeurs vidents. Il y aura tout de mme un bonus pour ceux qui (perte de contenu). Je n'ai pas de chiffre sur le taux de jouent l'innovation et y passent avant les concurrents pntration de ces versions bogues, mais les seuls chiffresNumro 34 Juin - Juillet 2011 Page 22

tat des lieux de l'accessibilit de HTML5

Developpez Magazine est une publication de developpez.com

publics que j'ai pu trouver montrent que 25 % de ces utilisateurs n'ont pas mis jour leur version aprs un an (Lien 38), ce qui signifie qu'il faut prendre en compte ces bogues durant plusieurs annes. 2.3. En conclusion L'introduction des nouvelles balises est surtout compromise par des bogues majeurs de certains logiciels importants et votre sentiment sur la dpendance JavaScript (que vous devriez d'ailleurs mesurer sur votre site). Elle est mettre en balance avec les avantages de ces balises, qui eux ne sont pas immdiats. 3. Les zones de navigation

projet, nous avons jug que les implmentations navigateur ne valaient pas encore Flash) et l'accessibilit n'est pas en reste. Les implmentations des navigateurs concernant la navigation clavier sont varies, parfois bogues et parfois inexistantes. Les sous-titres ne sont implments nativement nulle part et les spcifications ont vraiment beaucoup boug ce sujet. Difficile de savoir si le consensus actuel autour de l'lment track et le format WebSrt va rester. Comme vous devez de toute manire fournir une lecture de la vido en Flash, qui lui est naturellement encore moins accessible (il pourrait, mais les flasheurs ne le font pas), votre seule option est de coder vous mme un lecteur vido accessible, en sortant les contrles du lecteur (natif ou Flash) pour en faire des lments HTML marqus avec ARIA (Lien 39) et d'implmenter votre propre solution de sous-titrage en JavaScript. Mais vous sacrifiez l'option fullscreen, ce qui est rarement tolr.

L'introduction des balises nav, header, footer et aside est trs intressante car elle permet au navigateur de fournir aux technologies dassistance une carte de la page. Jusqu'ici les utilisateurs de ces technologies naviguaient principalement avec la liste des titres et la liste des liens dune page, ils pourraient galement avoir accs automatiquement aux zones classiques prsentes sur les 4.1. En conclusion sites Web. Les balises audio et video sont vraiment trop jeunes concernant l'accessibilit et il ny a pas de gros bnfices Premire ombre au tableau, HTML5 dfinit (Lien 33) un en tirer sur les navigateurs de bureau. Flash tant pire, mapping strict entre certaines balises et des rles de zone vous devez amliorer vous-mme les choses en codant un ARIA, mais sur ces zones l il n'y a pas de rle par dfaut. lecteur accessible ou en esprant en trouver un dans cette Il y a donc contradiction entre la spcification et les rles longue liste : Lien 40. que les navigateurs devraient automatiquement implmenter ( , , , ). Qui dit contradiction dit HTML5 dfinit un algorithme pour dterminer le vrai msentente possible entre navigateurs. niveau des Hx d'une page (Lien 41). Concrtement si vous mettez un h1 dans une balise section ou article qui n'est Ensuite vient le support : la traduction automatique des elle-mme pas enfant dune autre balise sectionnante, alors balises en rle de zone ARIA par les navigateurs arrive votre h1 est en fait un h2. C'est trs pratique pour ceux qui peine, Firefox 4 tant pour le moment seul. Par contre dveloppent des sites Web de faon modulaire : on ne ARIA est bien support par les versions rcentes des soccupe que de la hirarchie interne d'un bout de page, lecteurs dcran. Sauf que comme pour les navigateurs, les sans avoir se demander quel est le nombre de niveaux de clients de ces logiciels mettent un certain temps avant de titre dj introduit. Pour voir cet algorithme en action, passer aux nouvelles versions. vous pouvez utiliser l'outil HTML5 outliner : Lien 42. Enfin, ces rles et ces balises sont censs permettre la disparition des liens d'chappement, bonne pratique d'accessibilit reconnue. Mais a serait oublier ceux qui n'utilisent pas ces logiciels, mais qui naviguent tout de mme au clavier (choix, accident de souris, mauvais matriel, certains mobiles). A ma connaissance, les navigateurs n'ont pas prvu de fonctionnalit pour ces utilisateurs, en leur mettant disposition des raccourcis vers ces zones. 3.1. En conclusion La technique du lien d'vitement restera trs longtemps un moyen de navigation plus universel. Si vous ne la pratiquiez pas, utiliser les nouvelles balises maintenant apportera naturellement de l'accessibilit au fur et mesure du dploiement des nouvelles versions de navigateurs et de technologie d'assistance. 4. Le multimdia En quoi est-ce important ? Les titres sont la premire manire de naviguer sur une page lorsque l'on utilise un lecteur d'cran et selon le moteur HTML utilis, la hirarchie interprte ne sera pas la mme et vous ne pouvez rien y faire. Honntement si vous n'aviez pas prt attention la hirarchie globale des titres jusqu' prsent, HTML5 vous aidera mieux vous organiser module par module et obtenir au final quelque chose de cohrent au moins sur les nouveaux navigateurs. Si vous aviez une belle hirarchie, alors pour la conserver sur tous les navigateurs, il vous faudra viter les balises sectionnantes comme article, section ou aside. Cela dit, une hirarchie bien matrise de titres n'est rellement importante que si la page comporte beaucoup de titres, par exemple sur des sites fort contenu textuel (longs articles de journaux, encyclopdie). La plupart des sites se contentent d'une vingtaine de titres de niveau 1 et 2.

Les lments audio et video natifs ont fait rver un peu 5.1. En conclusion tout le monde et sur le papier rglent d'pineux problmes. Si vous ne griez pas votre hirarchie parfaitement au En pratique c'est beaucoup plus compliqu (sur monNumro 34 Juin - Juillet 2011 Page 23

Developpez Magazine est une publication de developpez.com

niveau de la page (site trs modulaire, maintenu par plusieurs personnes, ou par mconnaissance), autant passer directement la logique HTML5, vous devrez vivre avec une hirarchie de titres diffrente selon le navigateur. Si vous aviez une belle hirarchie et beaucoup de titres, alors pour la conserver sur tous les navigateurs, il vous faudra viter les balises sectionnantes comme article, section ou aside. 6. Canvas Canvas est effectivement un trou noir d'o rien ne sort et ironiquement, mme Flash peut tre plus accessible que cette balise (encore une fois, si le dveloppeur Flash a fourni un effort supplmentaire). Seul IE9 permet d'accder au shadow DOM, mais en supposant que tous les navigateurs fassent de mme, la question de l'intrt se pose : pourquoi accder des paquets de pixels ? Si vous l'utilisez pour obtenir des effets graphiques dcoratifs, un contenu alternatif textuel peut suffire. Si vous l'utilisez pour la navigation, vous vous tes probablement tromp de technologie. Si votre application repose de manire justifie sur cette technologie, comme pour un jeu, alors il me semble de toute faon impossible de rendre accessible ce type d'application trs graphique.

clairement le leader du march, suivi par Window-Eyes de GW Micro (Lien 44). Ils offrent tous deux des versions d'essai gratuites dont la limite est que vous devez redmarrer Windows toutes les 40 minutes. Astuce : utilisez des machines virtuelles et la fonctionnalit snapshot pour vous viter ces redmarrages fastidieux. Vous pouvez galement utiliser un lecteur dcran open-source : NVDA (Lien 45) ainsi que la toolbar Juicy Studio Accessibility Toolbar (Lien 46) pour Firefox qui permet de vrifier ses zones pendant le dveloppement. 8. Conclusion

Vaste sujet que l'accessibilit de HTML5 et j'imagine (j'espre!) que des experts en accessibilit passeront sur cet article pour me corriger ou rajouter d'autres difficults. En conclusion : il me faut l'admettre, l'introduction des nouvelles balises peut causer des bogues majeurs ou gner des logiciels de lecture d'cran. Ces bogues et cette gne de la hirarchie sont l pour plusieurs annes tandis que les avantages des nouvelles balises ne sont pas encore massivement arrivs. vous de voir ; l'utilisation des balises video et audio est 6.1. En conclusion prmature tous les points de vue ; il va falloir encore du temps avant que HTML5 ne Ressortez donc les bonnes pratiques, fournissez un vous apporte plus d'accessibilit que ARIA. Soit contenu alternatif si c'est possible et valuez bien vos vous passez ARIA immdiatement, soit vous besoins : SVG / VML ou une navigation scripte peuvent pariez sur le futur. suffire. 7. Passer ARIA Si le ton ngatif de ce billet vous fait conclure qu'il ne faut pas utiliser HTML5, alors je vous invite me relire : j'ai principalement list les problmes afin que vous sachiez quoi vous vous engagez en restant sur les techniques actuelles ou en partant sur certaines nouveauts de HTML5. HTML5 au sens des applications Web avec toutes ses nouvelles APIs JS ne sont ici pas concernes.

Ma conclusion personnelle est qu'il faut rajouter ARIA et ses multiples rles votre page HTML5. Voici ce que j'utilise occasionnellement pour tester l'ajout d'ARIA ou pour vrifier l'accessibilit d'une page. Pour tester ARIA, il vous faut un Windows, un Firefox et un Internet Explorer 8 qui sont les deux navigateurs les plus utiliss par les clients des lecteurs d'cran. Ce sont galement les deux Retrouvez l'article de Jean-Pierre Vincent en ligne : navigateurs qui supportent le mieux ARIA. En lecteur Lien 47 dcran JAWS par Freedom Scientific (Lien 43) est Crer des listes ordonnes attrayantes en CSS

Crer des listes ordonnes attrayantes en CSS Cet article est la traduction de : Sexy Ordered Lists with CSS (Lien 48). J'ai rcemment travaill sur un site pour lequel j'ai d crer des styles spciaux pour les listes ordonnes, j'ai donc pens que cela pourrait vous servir pour vos propres projets. Le problme pour beaucoup est de comprendre comment sparer les styles de la numrotation de ceux du contenu de la liste. Il semblerait plus facile d'intgrer la numrotation dans le contenu d'une liste non ordonne et de lui affecter un style, mais ce serait contourner le problme au lieu de le rsoudre ! Dans ce tutoriel, je vais vous montrer une solution pour russir cette mise en forme. Vous pouvez dj voir le rsultat attendu : Lien 49.1. Le code HTML Nous allons d'abord crer une liste ordonne avec pour chaque lment un titre et un paragraphe heading heading paragraph Numro 34 Juin - Juillet 2011 Page 24 paragraph

Developpez Magazine est une publication de developpez.com

2. Le code CSS

2.2. Mthode avec jQuery

Nous commenons par donner un style la liste elle- Utilisons jQuery pour ajouter les noms de classe : Lien 50. mme. Notez que nous prcisons des styles de police pour les lments de liste, ce seront ceux appliqus la $(document).ready(function() { numrotationol.steps { margin: 20px 0; background: url(ul_bg_repeat.gif) repeaty; /*--Image de fond de la numrotation--*/ padding: 0 0 0 35px; /*--Dcalage de la numrotation--*/ border: 1px solid #111; } ol.steps li { margin: 0; padding: 15px 15px; color: #cbff78; font-size: 1.7em; font-weight: bold; /*--Le style biseaut est cr avec les styles suivants appliqus aux bordures--*/ border-top: 1px solid #000; border-bottom: 1px solid #353535; border-right: 1px solid #333; border-left: 1px solid #151515; background: #222; } $("ol.steps li:first").addClass("first"); $("ol.steps li:last").addClass("last"); });

Maintenant que nous en avons fini avec la liste, nous pouvons appliquer des styles aux balises de titre et de paragraphe pour annuler les styles par dfaut de la listeol.steps li h2 { font-size: 0.9em; padding: 5px 0; margin-bottom: 10px; border-bottom: 1px dashed #333; color: #fff; } ol.steps li p { color: #ccc; font-size: 0.7em; font-weight: normal; line-height: 1.6em; }

En crant le style biseaut avec les couleurs de bordures, 3. Conclusion un pixel supplmentaire apparait en haut et en bas de la Comme vous pouvez le voir, les listes ordonnes ne sont liste. pas forcment destines tre austres. Bien entendu, si vous avez d'autres techniques pour Nous pouvons remdier cela de deux faons, mais styliser vos listes, proposez-les dans les commentaires de d'abord, nous ajoutons une classe spcifique pour le ce tutoriel. premier et le dernier lment de la liste.ol.steps li.first { border-top: 1px solid #353535; } ol.steps li.last { border-bottom: none;}

Voir un exemple de ce code : Lien 49. Retrouvez l'article de Soh Tanaka traduit par Didier Mouronval en ligne : Lien 51

2.1. Mthode manuelle Il nous suffit d'ajouter le nom de la classe manuellement dans le code HTML de la liste

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 25

Web smantiqueLes derniers tutoriels et articlesLe tutoriel SPARQL L'objectif de ce tutoriel est de donner un cours rapide sur SPARQL. Il couvre toutes les fonctionnalits majeures du langage de requte travers des exemples, mais ne vise pas tre complet. Si vous cherchez une introduction SPARQL et Jena, regardez Recherche dans les donnes RDF avec SPARQL : Lien 52. SPARQL est un langage de requtes (Lien 53) et un protocole (Lien 54) pour l'accs RDF, conu par le groupe de travail du W3C RDF Data Access (Lien 55). En tant que tel, SPARQL est orient donnes, en ce sens qu'il n'effectue des recherches que sur des informations contenues dans des modles ; il n'y a pas d'infrence dans le langage de requte lui-mme. videmment, le modle Jena peut tre intelligent , en ce sens qu'il fournit l'impression que certains triplets existent en les crant la demande, y compris le raisonnement OWL. SPARQL ne fait rien d'autre que prendre la description de ce que l'application veut sous la forme d'une requte et retourne cette information sous la forme d'un ensemble de donnes lies ou d'un graphe RDF.1. L'article original Cet article est la traduction de SPARQL Tutorial : Lien 56. 2. Prliminaires : les donnes Tout d'abord, il faut tre clair sur les donnes sur lesquelles seront excutes les requtes. SPARQL effectue des recherches sur des graphes RDF. Un graphe RDF est un ensemble de triplets. Jena appelle les graphes modles et les triplets dclarations , car c'est comme a qu'on les appelait au moment o l'API Jena a t conue. Il est important de remarquer que ce sont les triplets qui ont de l'importance, pas la srialisation. La srialisation est juste une manire de coucher par crit les triplets. RDF/XML est la recommandation du RDF, mais il peut tre difficile de voir les triplets dans cette forme, car il y a plusieurs mthodes pour encoder le mme graphe. Dans ce tutoriel, on utilisera une approche de la srialisation plus proche des triplets, Turtle (Lien 57) (voir aussi le langage N3 dcrit dans W3C semantic web primer : Lien 58). On va commencer avec les donnes simples de vc-db-1-rdf (Lien 59) : ce fichier contient un graphe RDF pour un certain nombre de descriptions au format VCARD de gens. VCARD est dcrit dans la RFC2426 (Lien 60) et le procd de traduction RDF est dcrit dans la note du W3C Representing vCard Objects in RDF : Lien 61. La base de donnes d'exemple ne contient que quelques informations sur les noms. Sous la forme de triplets, plutt ceci :@prefix vCard: . @prefix rdf: . @prefix : . vCard:FN "Matt Jones" ; vCard:N [ vCard:Family "Jones" ; vCard:Given "Matthew" ] . vCard:FN "Becky Smith" ; vCard:N [ vCard:Family "Smith" ; vCard:Given "Rebecca" ] . vCard:FN "John Smith" ; vCard:N [ vCard:Family "Smith" ; vCard:Given "John" ] . vCard:FN "Sarah Jones" ; vCard:N [ vCard:Family "Jones" ; vCard:Given

Le tutoriel SPARQL

Graphiquement, cela ressemble ceci :

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 26

"Sarah" ] .

N3 ou N-triplets, les littrales types sont entoures de ^^ et des langues peuvent tre ajoutes avec @. ?x est une variable appele x. Le ? n'est pas une partie du nom, c'est pourquoi il n'apparat pas dans la sortie. Il n'y a qu'une seule correspondance. La requte la retourne dans la variable de requte x. La sortie montre a t obtenue en utilisant une des applications en ligne de commande d'ARQ. 3.2. Excuter la requte Il y a des scripts d'assistance (Lien 63) dans les rpertoires /bat et /bin d'ARQ. Ils pourraient ne pas tre prsents dans la distribution de Jena. 3.2.1. Prparation sous Windows Il faut dfinir la variable d'environnement ARQROOT pour qu'elle pointe sur l'emplacement de la distribution d'ARQ.set ARQROOT=c:\MyProjects\ARQ

Ou sous une forme de triplets plus explicites :@prefix vCard: . @prefix rdf: . vCard:FN "Matt Jones" . vCard:N _:b0 . _:b0 vCard:Family "Jones" . _:b0 vCard:Given "Matthew" . vCard:FN "Becky Smith" . vCard:N _:b1 . _:b1 vCard:Family "Smith" . _:b1 vCard:Given "Rebecca" . vCard:FN "John Smith" . vCard:N _:b2 . _:b2 vCard:Family "Smith" . _:b2 vCard:Given "John" . vCard:FN "Sarah Jones" . vCard:N _:b3 . _:b3 vCard:Family "Jones" . _:b3 vCard:Given "Sarah" .

La distribution est gnralement installe dans un dossier dont le nom contient le numro de version.

Il est important de remarquer qu'il s'agit de reprsentations Dans le rpertoire d'ARQ, excuter : du mme graphe RDF et que les triplets du graphe n'ont pas d'ordre particulier. Ils sont juste crits en groupes lis bat\sparql.bat --data=doc\Tutorial\vc-db-1.rdf ci-dessus pour qu'un humain puisse les lire, la machine n'y --query=doc\Tutorial\q1.rq prte pas attention. 3. Excution d'une requte simple On peut simplement mettre le rpertoire /bat dans le PATH ou les dplacer, ils dpendent tous de ARQROOT.

Dans cette section, on va jeter un il une premire 3.2.2. Scripts Bash pour Unix/Linux/Cygwin requte, simple, puis on va l'excuter avec ARQ. 3.1. Le hello world des requtes Le fichier q1.rq (Lien 62) contient la requte suivante :SELECT ?x WHERE { ?x "John Smith" }

Il faut dfinir la variable d'environnement ARQROOT pour qu'elle pointe sur l'emplacement de la distribution d'ARQ.export ARQROOT=$HOME/MyProjects/ARQ

En excutant cette requte avec l'application en ligne de commande, on obtient : Dans le rpertoire d'ARQ, excuter :--------------------------------| x | ================================= | | ---------------------------------

La distribution est gnralement installe dans un dossier contenant la version dans son nom.

bin/sparql --data=doc/Tutorial/vc-db-1.rdf --query=doc/Tutorial/q1.rq

On peut simplement mettre le rpertoire /bat dans le PATH ou le dplacer, il dpend de ARQROOT. Cygwin est un environnement de type Unix pour Windows : Lien 64. 3.2.3. En utilisant directement les applications Java en ligne de commande On doit alors dfinir le classpath pour qu'il comprenne tous les fichiers jar du dossier /lib.

Ceci fonctionne par comparaison des motifs des triplets dans la clause WHERE avec les triplets du graphe RDF. Le prdicat et l'objet des triplets sont des valeurs fixes, les comparer avec un motif ne ressortira que les triplets avec ces valeurs. Le sujet est une variable et il n'y a pas d'autre restriction sur la variable. Le motif correspond n'importe quel triplet avec ces valeurs d'objet et de prdicat et les fait correspondre avec les solutions pour x.

L'item entour de est une URI (prcisment, une IRI) et Par exemple, sous Windows : l'item entre "" est une valeur littrale. Comme pour Turtle,

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 27

ARQdir\lib\antlr-2.7.5.jar;ARQdir\lib\arqextra.jar;ARQdir\lib\arq.jar; ARQdir\lib\commons-logging1.1.jar;ARQdir\lib\concurrent.jar;ARQdir\lib\icu4 j_3_4.jar; ARQdir\lib\iri.jar;ARQdir\lib\jena.jar;ARQdir\lib \jenatest.jar; ARQdir\lib\json.jar;ARQdir\lib\junit.jar;ARQdir\l ib\log4j-1.2.12.jar; ARQdir\lib\lucene-core-2.2.0.jar;ARQdir\lib\staxapi-1.0.jar; ARQdir\lib\wstx-asl3.0.0.jar;ARQdir\lib\xercesImpl.jar;ARQdir\lib\xm l-apis.jar

dans chaque solution, comme on le verra plus tard. 4.2. Motifs de base Un motif de base est un ensemble de motifs de triplet. Il correspond des lments du graphe si tous les motifs du triplet correspondent la valeur utilise chaque fois que la variable de mme nom est utilise.SELECT ?givenName WHERE { ?y "Smith" . ?y ?givenName . }

Avec ARQdir le rpertoire d'extraction d'ARQ. Tout doit tre sur une seule ligne.

Le nom des fichiers jar volue avec le temps et de Cette requte (Lien 66) utilise deux motifs de triplet, nouveaux apparaissent - il suffit de vrifier cela dans la chacun tant fini par un point (.) (celui aprs le dernier peut cependant tre omis, comme dans l'exemple version d'ARQ. prcdent). La variable y doit tre la mme pour chaque correspondance pour ce motif. Les commandes elles-mmes sont dans le paquet arq. 4. Motifs de base Cette section couvre les bases des motifs et des solutions, les blocs principaux dans la construction de requtes SPARQL. 4.1. Solutions Les solutions d'une requte sont l'ensemble des paires d'un nom de variable avec une valeur. Une requte SELECT expose directement les solutions (aprs tri, limite ou dcalage) telles que prsentes dans l'ensemble de rsultats. D'autres formes de requtes utilisent ces solutions pour raliser un graphe. La solution est la manire de faire correspondre le motif. Le premier exemple de requte n'avait qu'une seule solution. On change le motif pour qu'il corresponde la deuxime requte (Lien 65) :SELECT ?x ?fname WHERE {?x ?fname}

Les solutions sont :------------| givenName | ============= | "John" | | "Rebecca" | -------------

4.2.1. Qnames Il y a un mcanisme raccourci pour crire de longues URI avec des prfixes. La requte prcdente est crite de manire plus claire comme ceci (Lien 67) :PREFIX vcard: SELECT ?givenName WHERE { ?y vcard:Family "Smith" . ?y vcard:Given ?givenName . }

Il y a un mcanisme de prfixation - les deux parties de l'URI (la dclaration de prfixe et la partie aprs le : dans Il y a ici quatre solutions, une pour chaque triplet qui le qname) sont concatnes. Ce n'est pas exactement la possde une proprit VCARD name dans les donnes mme chose qu'un qname XML mais utilise la rgle du source : RDF pour convertir un qname en URI par concatnation.------------------------------------------------|x |name | ================================================= ||"Becky Smith" | | |"Sarah Jones" | | |"John Smith" | | |"Matt Jones" | -------------------------------------------------

4.2.2. Nuds anonymes On change la requte juste pour aussi retourner y, ce qui donne (Lien 68) :PREFIX vcard: SELECT ?y ?givenName WHERE { ?y vcard:Family "Smith" . ?y vcard:Given ?givenName . }

Jusqu'ici, avec des motifs de triplet et des motifs de base, chaque variable est dfinie dans chaque solution. Les solutions d'une requte peuvent tre extraites d'une table, mais, dans le cas gnral, c'est une table o seules quelques lignes possdent une valeur pour chaque colonne. Toutes les solutions une requte SPARQL donne ne doivent pas possder des valeurs pour chaque variable

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 28

Et des nuds anonymes apparaissent :-------------------| y | givenName | ==================== | _:b0 | "John" | | _:b1 | "Rebecca" | --------------------

pas dfini par le schma VCARD, on a donc cr une nouvelle proprit pour ce tutoriel. RDF autorise de mixer diffrentes dfinitions de l'information, parce que les URI sont uniques. Notez aussi que la valeur de la proprit info:age est type. Dans cet extrait de donnes, on veut montrer la valeur type. Elle peut tre crite en dur, 23 . info:age "23"^^xsd:integer ; vCard:FN "Becky Smith" ; vCard:N [ vCard:Family "Smith" ; vCard:Given "Rebecca" ] .

Ils apparaissent comme des qnames un peu spciaux, prfixs par _:. Ce n'est pas le label interne pour le nud anonyme, c'est l'affichage ARQ qui a assign les _:b0 et _:b1 pour montrer quand deux nuds anonymes sont identiques. Ici, ils sont diffrents. Cela ne rvle pas le Ainsi, une requte (Lien 73) pour trouver les gens gs label interne utilis pour ces nuds anonymes, bien qu'il d'au moins vingt-quatre ans est : soit disponible dans l'API Java. 5. Contraintes sur les valeurs Aussi appeles filtres. Cette section dcrit comment les valeurs dans une solution peuvent tre restreintes. Il y a de nombreuses comparaisons possibles, on se limitera deux cas ici. 5.1. Correspondance de chanes SPARQL fournit une opration pour tester les chanes, base sur les expressions rgulires. Cela inclut la possibilit de tests comme la commande SQL LIKE, mme si la syntaxe de l'expression rgulire est diffrente du SQL :FILTER regex(?x, "pattern" [, "flags"]) PREFIX info: SELECT ?resource WHERE { ?resource info:age ?age . FILTER (?age >= 24) }

L'expression arithmtique doit tre entre parenthses. La seule solution est :--------------------------------| resource | ================================= | | ---------------------------------

Une seule correspondance, ce qui rsulte en l'URI de John Smith. En transformant cette requte pour les gens gs de L'argument flags est optionnel. Le drapeau i signifie moins de vingt-quatre ans ne retourne que Rebecca Smith, qu'une correspondance sans tenir compte de la casse sera rien propos de Jones. effectue. La base de donnes ne contient aucune information sur La requte d'exemple trouvera les noms avec un r ou un l'ge de Jones : il n'y a pas de proprit info:age sur sa R : Lien 69. VCARD, la variable age n'a donc pas reu de valeur et n'a pas t teste par le filtre.PREFIX vcard: SELECT ?g WHERE { ?y vcard:Given ?g . FILTER regex(?g, "r", "i") }

6. Informations optionnelles RDF ne reprsente que des informations semi-structures, ainsi SPARQL peut trouver des donnes et ne pas chouer quand elles n'existent pas. La requte utilise une partie optionnelle pour tendre les informations trouves dans la solution d'une requte mais pour retourner des informations non optionnelles. 6.1. OPTIONAL Cette requte (Lien 74) retourne le nom d'une personne, ainsi que son ge, si cette information est disponible.PREFIX info: PREFIX vcard: SELECT ?name ?age WHERE { ?person vcard:FN ?name . OPTIONAL { ?person info:age ?age } }

Avec les rsultats :------------| g | ============= | "Rebecca" | | "Sarah" | -------------

Le langage d'expressions rgulires est le mme que celui de Xquery (Lien 70), qui est une version codifie de celle de Perl. La correspondance d'ARQ est effectue par le paquet Jakarta ORO : Lien 71. 5.2. Test de valeurs

Des fois, on veut que l'application filtre sur la valeur d'une variable. Dans le fichier de donnes vc-db-2.rdf (Lien 72), on a ajout un champ supplmentaire pour l'ge. Il n'est Deux des quatre personnes dans les donnes (Lien 75)Numro 34 Juin - Juillet 2011 Page 29

Developpez Magazine est une publication de developpez.com

possdent la proprit age. Cependant, parce que le motif de triplet pour l'ge est optionnel, il y a une solution pour les gens qui n'ont pas cette information.-----------------------| name | age | ======================= | "Becky Smith" | 23 | | "Sarah Jones" | | | "John Smith" | 25 | | "Matt Jones" | | -----------------------

| "Sarah Jones" | | | "John Smith" | 25 | | "Matt Jones" | | -----------------------

Pas d'ge pour Becky Smith, vu qu'il est infrieur vingtquatre. Si la condition de filtre est dplace hors de la partie optionnelle, alors elle peut influer le nombre de solutions, mais il peut tre ncessaire de rendre le filtre plus co