You are on page 1of 60

Developpez

Sommaire
Java 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 : magazine@redaction-developpez.com

Article Web smantique

Le tutoriel SPARQL
Ce 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

ditorial
Ce 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 Android


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

Java
Les dernires news Le Java Community Process approuve contrecur Java SE 7
Des 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 gratuite


Pour 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 trait
Numro 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 <jarfile> similaire java -jar ; scala <classname> excute la mthode main de l'objet ; scala <sourcefile> excute le script. Si le contenu n'est pas un script, trouve un objet avec une mthode main et l'excute ; scala -save <sourcefile> cre un jar avec les sources compiles. Ce jar peut ensuite tre excut via scala <jarfile> ; 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 articles


Les 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'interface


ImageResource 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 par
Resources.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.com
Numro 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<TextResource>(){ @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

Android
Les derniers tutoriels et articles
Introduction 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 votre
Numro 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

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/ res/android" package="com.tuto.android" android:versionCode="1" android:versionName="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".HelloWorldActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.catego ry.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

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.

<xml version="1.0" encoding="utf-8"> <resources> <string name="hello"> Hello World, HelloWorldActivity! </string> <string name="app_name">Hello World</string> </resources>

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

PHP
Les derniers tutoriels et articles
WebMatrix : 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 et
Developpez Magazine est une publication de developpez.com
Numro 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 Datetime.


@DateTime.Now

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"; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Clients</title> </head> <body> <H1>Clients</H1> <table> <tr> <th>Nom</th> <th>Prnom</th> <th>E-mail</th> </tr> @foreach(var row in db.Query(sqlreq)){ <tr> <td>@row[1]</td> <td>@row[2]</td> <td>@row[3]</td> </tr> } </table> </body> </html>

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)); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Clients</title> <style type="text/css"> table {border-collapse: collapse;} td, th {border: solid 1px; } </style> </head> <body> <h1>Clients</h1> @grid.GetHtml() </body> </html>

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 celles-ci.
@grid.GetHtml( columns: grid.Columns( grid.Column("Nom"), grid.Column("Prenom", "Prnom"), grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>) )

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) ; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Clients</title> <style type="text/css"> table {border-collapse: collapse;} td, th {border: solid 1px; } </style> </head> <body> <h1>Clients</h1> @grid.GetHtml( columns: grid.Columns( grid.Column("Nom"), grid.Column("Prenom", "Prnom"), grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>) ) ) </body> </html>

Le code complet est le suivant :


@{ var db = Database.Open("MonSiteTest"); var sqlreq = "Select * from clients"; var grid = new WebGrid(db.Query(sqlreq)); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Clients</title> <style type="text/css"> table {border-collapse: collapse;} td, th {border: solid 1px; } </style> </head> <body> <h1>Clients</h1> @grid.GetHtml( columns: grid.Columns( grid.Column("Nom"), grid.Column("Prenom", "Prnom"), grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>) ) ) </body> </html>

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")); } } } <html> <head> <title>Enregistrement client</title> <style type="text/css"> 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;} </style> </head> <body> <h1>Enregistrement d'un nouveau client</h1> @Html.ValidationSummary("Erreur lors de l'opration:") <form method="post" action=""> <fieldset> <legend>Nouveau client</legend> <div> <label>Nom:</label> <input name="Nom" type="text" size="50" value="@Nom" /> </div> <div> <label>Prnom:</label> <input name="Prenom" type="text" size="50" value="@Prenom" /> </div> <div> <label>Adresse mail:</label> <input name="Email" type="text" size="50" value="@Email" /> </div> <div> <label>&nbsp;</label> <input type="submit" value="Enregistrer" class="submit" /> </div> </fieldset> </form> </body> </html>

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") :
<!DOCTYPE html> @{ 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> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body>

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

<?php phpinfo(); ?> </body> </html>

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 Web
Les derniers tutoriels et articles
tat 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 chiffres
Numro 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 ( <nav role="navigation">, <header 5. Les titres role="banner">, <footer role="contentinfo">, <aside role="complementary">). 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 mon
Numro 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
<ol class="steps"> <li> <h2>heading</h2> </li> <li> <h2>heading</h2> <p>paragraph</p> </li> </ol> Numro 34 Juin - Juillet 2011 Page 24 <p>paragraph</p>

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 <script type="text/javascript"> $(document).ready(function() { numrotation
ol.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"); }); </script>

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 liste
ol.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
<li class="first"><!--Contenu--></li> <li><!--Contenu--></li> <li class="last"><!--Contenu--></li>

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 25

Web smantique
Les derniers tutoriels et articles
Le 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: <http://www.w3.org/2001/vcardrdf/3.0#> . @prefix rdf: <http://www.w3.org/1999/02/22-rdfsyntax-ns#> . @prefix : <#> .<http://somewhere/MattJones/> vCard:FN "Matt Jones" ; vCard:N [ vCard:Family "Jones" ; vCard:Given "Matthew" ] .<http://somewhere/RebeccaSmith/> vCard:FN "Becky Smith" ; vCard:N [ vCard:Family "Smith" ; vCard:Given "Rebecca" ] .<http://somewhere/JohnSmith/> vCard:FN "John Smith" ; vCard:N [ vCard:Family "Smith" ; vCard:Given "John" ] .<http://somewhere/SarahJones/> 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: <http://www.w3.org/2001/vcardrdf/3.0#> . @prefix rdf: <http://www.w3.org/1999/02/22-rdfsyntax-ns#> .<http://somewhere/MattJones/> vCard:FN "Matt Jones" . <http://somewhere/MattJones/> vCard:N _:b0 . _:b0 vCard:Family "Jones" . _:b0 vCard:Given "Matthew" . <http://somewhere/RebeccaSmith/> vCard:FN "Becky Smith" . <http://somewhere/RebeccaSmith/> vCard:N _:b1 . _:b1 vCard:Family "Smith" . _:b1 vCard:Given "Rebecca" .<http://somewhere/JohnSmith/> vCard:FN "John Smith" . <http://somewhere/JohnSmith/> vCard:N _:b2 . _:b2 vCard:Family "Smith" . _:b2 vCard:Given "John" .<http://somewhere/SarahJones/> vCard:FN "Sarah Jones" . <http://somewhere/SarahJones/> 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 <http://www.w3.org/2001/vcardrdf/3.0#FN> "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 | ================================= | <http://somewhere/JohnSmith/> | ---------------------------------

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 <http://www.w3.org/2001/vcardrdf/3.0#Family> "Smith" . ?y <http://www.w3.org/2001/vcard-rdf/3.0#Given> ?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 <http://www.w3.org/2001/vcardrdf/3.0#FN> ?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: <http://www.w3.org/2001/vcardrdf/3.0#>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 | ================================================= |<http://somewhere/RebeccaSmith/>|"Becky Smith" | |<http://somewhere/SarahJones/> |"Sarah Jones" | |<http://somewhere/JohnSmith/> |"John Smith" | |<http://somewhere/MattJones/> |"Matt Jones" | -------------------------------------------------

4.2.2. Nuds anonymes On change la requte juste pour aussi retourner y, ce qui donne (Lien 68) :
PREFIX vcard: <http://www.w3.org/2001/vcardrdf/3.0#>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 .
<http://somewhere/RebeccaSmith/> 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: <http://somewhere/peopleInfo#>SELECT ?resource WHERE { ?resource info:age ?age . FILTER (?age >= 24) }

L'expression arithmtique doit tre entre parenthses. La seule solution est :


--------------------------------| resource | ================================= | <http://somewhere/JohnSmith/> | ---------------------------------

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: <http://www.w3.org/2001/vcardrdf/3.0#>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: <http://somewhere/peopleInfo#> PREFIX vcard: <http://www.w3.org/2001/vcardrdf/3.0#>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 compliqu pour que la variable ne soit pas rencontre, requte (Lien 78) :
PREFIX info: <http://somewhere/peopleInfo#> PREFIX vcard: <http://www.w3.org/2001/vcardrdf/3.0#>SELECT ?name ?age WHERE { ?person vcard:FN ?name . OPTIONAL { ?person info:age ?age . } FILTER ( !bound(?age) || ?age > 24 ) }

Si la clause gnrale n'est pas ici, aucune information sur l'ge n'aurait t rcupre. Si le motif de triplet avait t inclus sans tre optionnel, on aurait eu cette requte (Lien 76) :
PREFIX info: <http://somewhere/peopleInfo#> PREFIX vcard: <http://www.w3.org/2001/vcardrdf/3.0#>SELECT ?name ?age WHERE { ?person vcard:FN ?name . ?person info:age ?age . }

Avec ces deux seules solutions :


----------------------| name | age | ======================= | "Becky Smith" | 23 | | "John Smith" | 25 | -----------------------

Si la solution possde une variable age, elle doit tre suprieure vingt-quatre. Elle peut aussi ne pas tre rencontre. Il y a maintenant trois solutions :
----------------------| name | age | ======================= | "Sarah Jones" | | | "John Smith" | 25 | | "Matt Jones" | | -----------------------

En effet, la proprit info:age doit tre prsente dans toute valuer une expression qui possde des variables non solution. rencontres sans s'y attendre cause une exception d'valuation et toute l'expression choue. 6.2. OPTIONAL et FILTER OPTIONAL est un oprateur binaire qui combine deux 6.3. OPTIONAL et requtes dpendant de l'ordre motifs de graphe. Le motif optionnel est un motif de Il faut faire attention une chose : l'utilisation de la mme groupe quelconque et peut faire usage d'autres types de variable dans deux clauses optionnelles ou plus. motifs SPARQL. Si le groupe correspond, la solution est tendue ; sinon, la solution d'origine est donne. La PREFIX foaf: <http://xmlns.com/foaf/0.1/> PREFIX vCard: <http://www.w3.org/2001/vcardrequte (Lien 77) :
PREFIX info: <http://somewhere/peopleInfo#> PREFIX vcard: <http://www.w3.org/2001/vcardrdf/3.0#>SELECT ?name ?age WHERE { ?person vcard:FN ?name . OPTIONAL { ?person info:age ?age . FILTER ( ? age > 24 ) } } rdf/3.0#>SELECT ?name WHERE { ?x a foaf:Person . OPTIONAL { ?x foaf:name ?name } OPTIONAL { ?x vCard:FN ?name } }

Si le premier OPTIONAL trouve une valeur pour ?name et ?x, le second est une tentative de faire correspondre les mmes triplets (?x et ?name possdent des valeurs). Si le Ainsi, tant qu'on filtre sur les ges suprieurs vingt- premier OPTIONAL n'a pas fait correspondre la partie quatre ans dans la partie optionnelle, on va toujours optionnelle, alors la seconde est une tentative de faire obtenir quatre solutions (du motif vcard:FN), mais en ne correspondre son triplet avec deux variables. rcuprant l'ge que s'il passe le test :
----------------------| name | age | ======================= | "Becky Smith" | |

7. Alternatives dans un motif Une autre manire de grer les donnes semi-structures est d'effectuer une requte pour une des possibilits. Cette section couvre le motif UNION, o l'une des possibilits
Numro 34 Juin - Juillet 2011 Page 30

Developpez Magazine est une publication de developpez.com

est trie. Tant le vocabulaire vCard que le vocabulaire FOAF ont des proprits pour le nom des personnes. Dans vCard, il y a vCard: FN, le nom format , et dans FOAF, il y a foaf:name. Dans cette section, nous nous pencherons sur un petit ensemble de donnes o les noms des personnes peuvent tre donns soit par le vocabulaire FOAF soit par le vocabulaire vCard. Supposons que nous ayons un graphe RDF (Lien 79) qui contient des informations en utilisant le nom la fois avec le vocabulaire vCard et le vocabulaire FOAF.
@prefix foaf: <http://xmlns.com/foaf/0.1/> . @prefix vcard: <http://www.w3.org/2001/vcardrdf/3.0#> ._:a foaf:name "Matt Jones" ._:b foaf:name "Sarah Jones" ._:c vcard:FN "Becky Smith" ._:d vcard:FN "John Smith" .

contrainte ainsi que par la couche de stockage. 7.1. Union - se rappeler o les donnes ont t trouves L'exemple ci-dessous utilise la mme variable dans chaque branche. Si les diffrentes variables sont utilises, l'application peut dcouvrir quel sous-modle cause la correspondance (q-union2.rq : Lien 82) :
PREFIX foaf: <http://xmlns.com/foaf/0.1/> PREFIX vCard: <http://www.w3.org/2001/vcardrdf/3.0#>SELECT ?name1 ?name2 WHERE { { [] foaf:name ?name1 } UNION { [] vCard:FN ? name2 } } --------------------------------| name1 | name2 | ================================= | "Matt Jones" | | | "Sarah Jones" | | | | "Becky Smith" | | | "John Smith" | ---------------------------------

Une requte pour accder aux informations du nom, quand il peut tre dans les deux formes, pourrait tre (qunion1.rq : Lien 80) :
PREFIX foaf: <http://xmlns.com/foaf/0.1/> PREFIX vCard: <http://www.w3.org/2001/vcardrdf/3.0#>SELECT ?name WHERE { { [] foaf:name ?name } UNION { [] vCard:FN ? name } }

Cette deuxime requte a conserv des renseignements o le nom de la personne vient de l'attribution du nom pour diffrentes variables. 7.2. OPTIONAL et UNION Dans la pratique, OPTIONAL est plus commun que UNION , mais ils ont tous deux leur utilisation. OPTIONAL est utile pour augmenter les solutions trouves, UNION est utile pour la concatnation des solutions partir de deux possibilits. Ils ne retournent pas les informations ncessaires de la mme manire (requte q-union3.rq : Lien 83) :
PREFIX foaf: <http://xmlns.com/foaf/0.1/> PREFIX vCard: <http://www.w3.org/2001/vcardrdf/3.0#>SELECT ?name1 ?name2 WHERE { ?x a foaf:Person OPTIONAL { ?x foaf:name ?name1 } OPTIONAL { ?x vCard:FN ?name2 } } --------------------------------| name1 | name2 | ================================= | "Matt Jones" | | | "Sarah Jones" | | | | "Becky Smith" | | | "John Smith" | ---------------------------------

Cela renvoie les rsultats :


----------------| name | ================= | "Matt Jones" | | "Sarah Jones" | | "Becky Smith" | | "John Smith" | -----------------

La forme utilise pour le nom n'avait pas d'importance, la variable ?name est un ensemble. Ceci peut tre ralis en utilisant un FILTER comme cette requte (q-union1alt.rq : Lien 81) le montre :
PREFIX foaf: <http://xmlns.com/foaf/0.1/> PREFIX vCard: <http://www.w3.org/2001/vcardrdf/3.0#>SELECT ?name WHERE { [] ?p ?name FILTER ( ?p = foaf:name || ?p = vCard:FN ) }

On teste si la proprit est une URI ou autre chose. Les solutions ne peuvent pas sortir dans le mme ordre. La premire forme est susceptible d'tre plus rapide, en fonction des donnes et du stockage utilis, parce que la seconde forme peut obtenir tous les triplets du graphe qui correspondent au modle des triplets avec des variables non lies (ou nuds anonymes) dans chaque emplacement, puis de tester chaque ?p pour voir s'il correspond l'une des valeurs. Il dpendra de la sophistication de l'optimiseur de requtes de savoir si les requtes qu'il peut effectuer de manire plus efficace sont capables de passer par la

Mais mfiez-vous d'utiliser ?name dans chaque OPTIONAL parce que c'est une requte dpendant de l'ordre. 8. Graphes nomms Cette section couvre les ensembles de donnes RDF - un ensemble de donnes RDF est l'unit qui est interroge par
Numro 34 Juin - Juillet 2011 Page 31

Developpez Magazine est une publication de developpez.com

une requte SPARQL. Il s'agit d'un graphique par dfaut et et un graphe par dfaut qui enregistre la dernire lecture de d'un certain nombre de graphes nomms. ces graphes. 8.1. Interrogation des ensembles de donnes L'opration de correspondance des graphes (modles de base (Lien 84), OPTIONAL (Lien 85) et UNION (Lien 86)) fonctionne sur un graphe RDF. Cela commence comme le graphe par dfaut de l'ensemble de donnes, mais il peut tre modifi par le mot-cl GRAPH.
GRAPH uri { ... pattern ... } GRAPH var { ... pattern ... }

Les requtes peuvent tre excutes avec l'application en ligne de commande (ce qui se ferait en une seule ligne) :
java -cp ... arq.sparql --graph ds-dft.ttl --namedgraph ds-ng-1.ttl --namedgraph ds-ng-2.ttl --query query file

Les jeux de donnes ne sont pas obligatoirement crs juste pour la dure de vie de la requte. Ils peuvent tre crs et stocks dans une base de donnes, ce qui serait plus habituel pour un agrgateur.

Si une URI est donne, le modle sera en correspondance avec le graphe de l'ensemble des donnes qui portent ce 8.1.2. Accs l'ensemble de donnes nom - s'il n'y en a pas, la clause GRAPH ne correspond Le premier exemple accde simplement au graphe par rien. dfaut (q-ds-1.rq : Lien 90) : Si une variable est donne, tous les graphes nomms (et non le graphe par dfaut) sont jugs. La variable peut tre utilise ailleurs de sorte que si, lors de l'excution, sa valeur est dj connue pour une solution, seul le graphe nomm spcifique est essay. 8.1.1. Exemple de donnes Un ensemble de donnes RDF peut prendre diverses formes. Deux configurations communes : le graphe par dfaut est l'union (la fusion RDF) de tous les graphes nomms ou le graphe par dfaut est un inventaire des graphes nomms (d'o ils venaient, o ils ont t lus, etc.) Il n'y a pas de limites - un graphe peut tre inclus deux fois sous des noms diffrents, des graphes peuvent aussi partager d'autres triplets.
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> PREFIX dc: <http://purl.org/dc/elements/1.1/> PREFIX : <.>SELECT * { ?s ?p ?o }

Le PREFIX : <.> permet simplement de formater la sortie.


------------------------------------------------| s | p | o | ================================================= | :ds-ng-2.ttl | dc:date | "2005-09-22T05:53:05 | | | |+01:00"^^xsd:dateTime | | :ds-ng-1.ttl | dc:date | "2005-07-14T03:18:56 | | | |+01:00"^^xsd:dateTime | -------------------------------------------------

Dans les exemples ci-dessous nous allons utiliser les donnes suivantes qui pourraient se produire pour les Voici le graphe par dfaut seulement - rien depuis les graphes nomms, parce qu'ils ne sont pas interrogs sauf dtails d'un agrgateur RDF de livres. indication contraire par GRAPH. Graphe par dfaut (ds-dft.ttl : Lien 87) : On peut effectuer une requte pour les triplets en interrogeant le graphe par dfaut et les graphes nomms @prefix dc: <http://purl.org/dc/elements/1.1/> . (q-ds-2.rq : Lien 91) : @prefix xsd:
<http://www.w3.org/2001/XMLSchema#> .<ds-ng1.ttl> dc:date "2005-0714T03:18:56+0100"^^xsd:dateTime . <ds-ng-2.ttl> dc:date "2005-0922T05:53:05+0100"^^xsd:dateTime . PREFIX PREFIX PREFIX { { ?s } xsd: <http://www.w3.org/2001/XMLSchema#> dc: <http://purl.org/dc/elements/1.1/> : <.>SELECT * ?p ?o } UNION { GRAPH ?g { ?s ?p ?o } }

Graphe nomm (ds-ng-1.ttl : Lien 88) :


@prefix dc: <http://purl.org/dc/elements/1.1/> . [] dc:title "Harry Potter and the Philospher's Stone" . [] dc:title "Harry Potter and the Chamber of Secrets" .

Donne :
------------------------------------------------| s | p | o | g | ================================================= |:ds-ng-2.ttl|dc:date|"2005-09-22| | | | | T05:53:05 | | | | | +01:00"^^ | | | | |xsd:dateTime| | |:ds-ng-1.ttl|dc:date|"2005-07-14| | | | | T03:18:56 | | | | | +01:00"^^ | | | | |xsd:dateTime| | | _:b0 |dc:title|"Harry Potter|:ds-ng-2.ttl| Numro 34 Juin - Juillet 2011 Page 32

Graphe nomm (ds-ng-2.ttl : Lien 89) :


@prefix dc: <http://purl.org/dc/elements/1.1/> . [] dc:title "Harry Potter and the Sorcerer's Stone" . [] dc:title "Harry Potter and the Chamber of Secrets" .

Maintenant, on a deux petits graphes dcrivant des livres

Developpez Magazine est une publication de developpez.com

| | | and the | | | | | Sorcerer's| | | | | Stone" | | | _:b1 |dc:title|"Harry Potter|:ds-ng-2.ttl| | | | and the | | | | |Chamber of | | | | | Secrets" | | | _:b2 |dc:title|"Harry Potter|:ds-ng-1.ttl| | | | and the | | | | |Chamber of | | | | | Secrets" | | | _:b3 |dc:title|"Harry Potter|:ds-ng-1.ttl| | | | and the | | | | |Philospher's| | | | | Stone" | | -------------------------------------------------

------------------------------------------------| date | title | ================================================= | "2005-09-22T05:53:05 | "Harry Potter and the | | +01:00"^^xsd:dateTime | Sorcerer's Stone" | | "2005-09-22T05:53:05 | "Harry Potter and the | | +01:00"^^xsd:dateTime | Chamber of Secrets" | -------------------------------------------------

8.2. Dcrire les ensembles de donnes RDF - FROM et FROM NAMED Une excution de la requte ne peut donner l'ensemble des donnes lorsque l'objet de l'excution est construit ou qu'il peut tre dcrit dans la requte elle-mme. Lorsque les dtails sont sur la ligne de commande, un ensemble de donnes temporaire est cr, mais une application peut crer des ensembles de donnes et les utiliser ensuite dans de nombreuses requtes.

8.1.3. Interrogation d'un graphe spcifique

Si l'application connat le nom de graphe, elle peut demander directement une requte comme trouver tous les Lorsqu'il est dcrit dans la requte, FROM url est utilis titres dans un graphe donn (q-ds-3.rq : Lien 92) : pour identifier le contenu dans le graphe par dfaut. Il peut y avoir plus d'une clause FROM et le graphe par dfaut est PREFIX dc: <http://purl.org/dc/elements/1.1/> la suite de la lecture de chaque fichier dans le graphe par PREFIX : <.>SELECT ?title dfaut. Il s'agit de la fusion RDF des graphes individuels. {
GRAPH :ds-ng-2.ttl { ?b dc:title ?title } }

Rsultats :
--------------------------------------------| title | ============================================= | "Harry Potter and the Sorcerer's Stone" | | "Harry Potter and the Chamber of Secrets" | ---------------------------------------------

Ne soyez pas troubls par le fait que le graphe par dfaut soit dcrit par une ou plusieurs URL dans les clauses FROM. C'est partir de l que les donnes sont lues, pas le nom du graphe. Comme plusieurs clauses FROM peuvent tre donnes, les donnes peuvent tre lues partir de plusieurs endroits, mais aucun d'entre eux ne deviendra le nom du graphe.

FROM NAMED url est utilis pour identifier un graphe nomm. Le graphe est donn par le nom url et les donnes sont lues partir de cet emplacement. Des clauses multiples FROM NAMED occasionnent des graphes 8.1.4. Interrogation des donnes partir de graphes qui multiples ajouts l'ensemble de donnes. correspondent un modle Notez que les graphes sont chargs avec le FileManager de Le nom des graphes qui peuvent tre interrogs peut tre Jena, qui peut fournir des sites alternatifs pour les fichiers. dtermin avec la requte elle-mme. Le mme processus Par exemple, la requte peut prciser FROM NAMED s'applique pour les variables si elles font partie d'un motif <http://example/data> et avoir ses donnes lues partir de du graphe ou d'un GRAPH. La requte ci-dessous file:local.rdf. Le nom du graphe sera (Lien 93) fixe une condition sur la variable utilise pour <http://example/data>, comme dans la requte. slectionner des graphes nomms sur base des informations contenues dans le graphe par dfaut. Par exemple, la requte pour trouver tous les triplets dans les deux graphes par dfaut et dans les graphes nomms PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> peut tre crite comme ceci (Lien 94) :
PREFIX dc: <http://purl.org/dc/elements/1.1/> PREFIX : <.>SELECT ?date ?title { ?g dc:date ?date . FILTER (?date > "2005-0801T00:00:00Z"^^xsd:dateTime ) GRAPH ?g { ?b dc:title ?title } } PREFIX xsd: <http://www.w3.org/2001/XMLSchema#> PREFIX dc: <http://purl.org/dc/elements/1.1/> PREFIX : <.>SELECT * FROM <ds-dft.ttl> FROM NAMED <ds-ng-1.ttl> FROM NAMED <ds-ng-2.ttl> { { ?s ?p ?o } UNION { GRAPH ?g { ?s ?p ?o } } }

Les rsultats de l'excution de cette requte sur l'ensemble des donnes de l'exemple sont les titres dans l'un des graphes, le premier avec la date au plus tard le 1 aot 9. Rsultats 2005. SPARQL possde quatre formes de rsultat : SELECT : retourne un tableau de rsultats ; CONSTRUCT : retourne un graphe RDF, bas sur
Numro 34 Juin - Juillet 2011 Page 33

Developpez Magazine est une publication de developpez.com

un modle dans la requte ; DESCRIBE : retourne un graphe RDF, bas sur ce que le processeur de requtes est configur pour renvoyer ; ASK : pose une requte boolenne.

9.1.3. DISTINCT Le formulaire de rsultat SELECT peut prendre le modificateur DISTINCT, qui assure qu'il n'y a pas deux solutions retournes qui sont les mmes - cela a lieu aprs la projection pour les variables demandes.

La forme SELECT retourne directement une table de 9.2. SELECT solutions comme un jeu de rsultats, tandis que DESCRIBE et CONSTRUCT utilisent les rsultats de La forme du rsultat de SELECT est une projection, avec DISTINCT appliqu, de l'ensemble solution. SELECT l'appariement pour construire des graphes RDF. identifie les variables nommes dans le jeu de rsultats. * signifie toutes les variables nommes (les nuds 9.1. Modificateurs de solutions anonymes dans la requte sont utiliss comme variables La correspondance de modles produit un ensemble de d'appariement, mais ne sont jamais retourns). solutions. Cet ensemble peut tre modifi de diverses manires : 9.3. CONSTRUCT Projection : ne garder que les variables CONSTRUCT construit un graphe RDF bas sur un slectionnes ; OFFSET / LIMIT : couper le nombre de solutions modle de graphe. Le modle de graphe peut avoir des variables qui sont lies par une clause WHERE. L'effet est ( utiliser avec ORDER BY) ; de calculer le fragment de graphe, tant donn le modle, ORDER BY : trier les rsultats ; DISTINCT : ne rendre qu'une seule ligne pour pour chaque solution de la clause WHERE, aprs la prise en compte des modificateurs de solution. Les fragments de une combinaison de variables et de valeurs. graphe, dont un pour la solution, sont fusionns en un seul Les modificateurs de solution OFFSET / LIMIT et graphe RDF, le rsultat. ORDER BY s'appliquent toujours toutes les formes de Tous les nuds anonymes explicitement mentionns dans rsultats. le modle de graphe sont crs nouveau chaque fois que le modle est utilis pour une solution. 9.1.1. OFFSET et LIMIT Un ensemble de solutions peut tre abrg en spcifiant un OFFSET (index de dbut) et une LIMIT (le nombre de solutions retourner). L'utilisation de LIMIT seul peut tre utile pour assurer que de trop nombreuses solutions ne soient retournes et, ainsi, restreindre l'effet d'une situation inattendue. LIMIT et OFFSET peuvent tre utiliss en addition avec le tri pour prendre un intervalle dfini par les solutions trouves. 9.1.2. ORDER BY 9.4. DESCRIBE La forme CONSTRUCT prend un modle d'application pour les rsultats sous forme de graphe. La forme DESCRIBE cre galement un graphe, mais sa forme est fournie par le processeur de requtes, pas par l'application. Pour chaque URI trouve ou explicitement mentionne dans la clause DESCRIBE, le processeur de requte devrait fournir un fragment utile de RDF, comme tous les dtails connus d'un livre. Le gestionnaire ARQ permet l'criture d'une description spcifique du domaine.

Les solutions SPARQL sont tries par l'expression, y compris les fonctions personnalises. 9.5. ASK
ORDER BY ?x ?y ORDER BY DESC(?x) ORDER BY x:func(?x) # condition de tri personnalis

Le formulaire de rsultat ASK retourne un boolen, vrai pour un motif qui correspond, faux sinon. Retrouvez la traduction de Thibaut Cuvelier et Julien Plu en ligne : Lien 95

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 34

C/C++/Gtk+
Les derniers tutoriels et articles
Dbuter avec les Enlightenment Foundation Libraries (EFL) Les EFL (Enlightenment Foundation Libraries) sont des bibliothques graphiques C (des bindings sont galement disponibles pour C++, Python, Perl, JavaScript, Vala et Ruby) dveloppes ct du projet Enlightenment luimme. Comparables Qt ou GTK, elles ont t cres pour raliser des IU (Interface Utilisateur) fluides, du fait de leur base asynchrone. Ce tutoriel montre par tapes comment prendre en main aisment et rapidement ces bibliothques.
1. Introduction 1.1. Enlightenment et les EFL, qu'est-ce ? uniquement conus pour les plateformes mobiles et pour Linux/X11. En effet, ils sont galement ports sous Windows et sous Mac OS. Dbuter avec les Enlightenment Foundation Libraries (EFL)

Enlightenment, galement connu sous le nom de E 1.2. Les bibliothques composants les EFL (actuellement E17), est un gestionnaire de fentrage pour Comme leur nom l'indique, les EFL sont constitues de Linux/X11 comprenant une suite complte de plusieurs bibliothques ayant chacune leurs spcificits : bibliothques pour la ralisation d'interfaces utilisateur Evas ; aussi fluides qu'esthtiques. Gestionnaire de fentrage Eina ; rapide et lger en publication roulante (rolling release) Edje ; depuis dix ans, E permet notamment d'effectuer un Eet ; thmage complet. Ecore ; Efreet ; Les EFL (Enlightenment Foundation Libraries) sont des bibliothques graphiques C (des bindings sont galement E_Dbus ; disponibles pour C++ (Lien 96), Python (Lien 97), Perl, Embryo ; JavaScript et Ruby) dveloppes ct du projet Eeze ; Enlightenment lui-mme. Elles ont t cres pour raliser Elementary ; des IU (Interface Utilisateur) fluides, du fait de leur base et bien d'autres. asynchrone et peuvent tre utilises avec des systmes de bureau tels que GNOME ou KDE. Jugeant que les la suite de ce tutoriel seront brivement prsentes plateformes fixes commencent perdre de leur prestige, certaines de ces bibliothques. cdant peu peu leur place aux plateformes mobiles, les EFL s'orientent vers un support de ces dernires, ayant 1.2.1. Eina pour objectif une meilleure portabilit des sources. Ainsi, elles s'orientent principalement vers une utilisation tactile, La bibliothque Eina correspond la trousse outils des sans pour autant dlaisser l'utilisation bureautique. Elles EFL, permettant des oprations core, soit la manipulation restent parfaitement adaptes au dveloppement de types de donnes tels que les strings buffers, les bureautique. Les EFL sont sponsorises par un certain stringshares (optimisation sur les chanes de caractres par nombre d'entreprises (Lien 98), dont Samsung et Free. un moyen de stockage et d'utilisation travers toute Pour finir, elles constituent le sujet de ce cours ; nous ne l'application, rduisant considrablement les doublons de nous intresserons pas au gestionnaire de fentrage lui- la chane en mmoire), listes, itrateurs, fichiers, etc. mme. Consulter la documentation d'Eina : Lien 99. 1.2.2. Eet La bibliothque Eet est un moyen simple et rapide de stockage et de chargement de tout type de donnes. C'est notamment un moyen de srialisation. Un exemple d'utilisation peut tre trouv sur le SVN : Lien 100. Consulter la documentation d'Eet : Lien 101. 1.2.3. Evas La bibliothque Evas est une bibliothque de gestion d'objets graphiques simples (rectangles, images, textes, polygones et lignes) dont la particularit est d'optimiser le Note : les produits d'Enlightenment ne sont pas rendu en n'en effectuant un que lorsque des objets ont t Exemple Buttons d'Elementary_test
Numro 34 Juin - Juillet 2011 Page 35

Developpez Magazine est une publication de developpez.com

modifis, par souci de consommation de ressources. On n'a donc jamais de rendu partiel, ce qui correspond un gain de temps et d'nergie important.
}

} } } }

Attention ne pas confondre cette bibliothque bibliothque Elementary : Evas n'est pas conue cration de widgets mais pour la cration et d'lments simples dont la liste exhaustive a t plus haut.

avec la pour la gestion donne

Et le rendu :

noter qu'Evas est la base de tous les lments graphiques fournis par les EFL. Consulter la documentation d'Evas : Lien 102. 1.2.4. Ecore La bibliothque Edje utilise plusieurs bibliothques fournies par les EFL : Eet pour la partie concernant le stockage de donnes ; Evas pour la partie graphique des thmes crits avec Edje ; Ecore pour grer la boucle d'vnements.

La bibliothque Ecore est une bibliothque de boucles d'vnements permettant l'utilisation de timers, d'animations, de fonctionnalits rseaux (tcp, udp, http, ftp, etc.) et de bien d'autres choses. L'intrt fondamental que cette bibliothque fournit est que rien de ce qu'elle met disposition n'est bloquant, ce qui simplifie la ralisation d'applications fluides. Par exemple, quand Ecore n'a plus Cette bibliothque sera bien plus amplement dtaille par aucune tche effectuer, il rentre en mode Idle, ce qui la suite ; cette partie consiste uniquement en un aperu de vite une consommation inutile de ressources. la chose. Consulter la documentation d'Ecore : Lien 103. 1.2.5. Edje La bibliothque Edje est sans doute la bibliothque la plus importante des EFL, dans le sens o toute application utilisant les EFL va y recourir un moment ou un autre. Elle correspond un moyen de concevoir des applications en sparant la partie design de la partie concernant la logique et le code. En effet, la cration d'une interface graphique avec Edje ne ncessite pas la moindre ligne de code C, ce qui permet notamment aux dveloppeurs et aux designers de travailler ensemble sur un projet. Le designer mettrait en place la partie Edje de l'application tandis que le dveloppeur pourrait se concentrer exclusivement sur le code C, ce qui correspondrait un gain non ngligeable de temps. Quel dveloppeur n'a jamais eu de problme avec son chef d'quipe comme quoi le design de l'application ne collerait pas avec le travail initial des designers ? Grce la bibliothque Edje, c'en est fini de ce type de problmes. Consulter la documentation d'Edje : Lien 104. 1.2.6. Elementary

La bibliothque Elementary met disposition un grand nombre de widgets hautement personnalisables. Certains widgets d'Elementary, nomms widgets performants , ont initialement t conus pour tre utiliss sur des plateformes mobiles, ncessitant une grande fluidit.

Pour illustrer, on peut prendre un exemple qui a pouss les dveloppeurs mettre en place les genlists : on dispose d'une liste de plusieurs centaines d'lments graphiques. Parmi ces lments, on souhaite uniquement en afficher une vingtaine en mme temps l'cran. Dans ce cas de figure, n'est-ce pas tre inconscient que de vouloir prendre de la mmoire pour un tel nombre ? Le principe est de stocker les items dans un arbre pour viter d'avoir parcourir trop d'lments. Les widgets performants vont tre crs lors de l'affichage, et dtruits lorsqu'ils ne seront plus affichs ( noter que derrire cela, on a tout de mme Le codage avec la bibliothque Edje se fait un peu comme un principe de cache). en CSS avec une association proprit: valeur. Exemple du traditionnel Hello world : Voici une capture d'cran de l'exemple Genlist Group
collections { group { name: "interface"; parts { part { name: "text"; type: TEXT; description { state: "default" 0.0; color: 255 255 255 255; text { font: "Sans-serif"; text: "Hello world !"; size: 18; }

d'Elementary_test qui permet de visualiser une genlist ordinaire :

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 36

Consulter la documentation d'Elementary : Lien 105. 1.3. Diffrences avec des frameworks tels que Qt et GTK Il est fort possible que vous vous interrogiez sur la diffrence qu'ont les EFL avec les gros frameworks d'aujourd'hui tels que Qt et GTK. Certes, ces trois frameworks permettent plus ou moins d'effectuer la mme chose, mais EFL ne tente pas de suivre ces deux monstres. Il prfre se dmarquer d'eux sur plusieurs points dtaills ci-dessous de manire non exhaustive. Comme Qt et GTK, les EFL fournissent avec leur bibliothque Elementary des widgets (comme des boutons, cases cocher, etc.). Il faut voir les widgets des EFL comme des outils et non comme de simples lments de fentre, la diffrence de ce que proposent Qt et GTK. Avec Qt, on voit couramment des widgets conteneurs prsents dans d'autres conteneurs (exemple : un QPushButton prsent dans un QWidget, lui-mme englob dans un QMainWindow), soit des arbres de widgets s'englobant les uns les autres. Avec EFL, les widgets sont utiliss comme des briques combines avec la bibliothque Edje. Les widgets d'Elementary sont hautement personnalisables, donnant la possibilit de modifier l'chelle, de changer diverses proprits. Une autre diffrence notable avec les frameworks concurrents est sans doute que les EFL prsentent pour leurs widgets une zone tactile diffrencie de la zone d'affichage, peu importe le fait que le tactile soit utilis ou non dans l'application. Il est logique de constater une grande similitude entre Qt Quick (de Qt) et du code de thmes avec Edje ( noter qu'Edje existait avant que Qt Quick ne fasse son entre c'est par ignorance que bien des gens ont annonc avoir attendu le concept utilis par QML). Il existe toutefois de nombreux points les dissociant. Tout d'abord, les fichiers de description d'Edje sont compils avant de pouvoir tre observs, la diffrence des fichiers QML. Avec Edje, il est possible de modifier entirement le thme d'une application sans avoir besoin de modifier le code C. On peut passer d'une architecture en liste une architecture tout autre d'une simple modification du fichier Edje. Quant lui, Qt Quick va plutt se baser sur un moteur JavaScript. Glade, l'quivalent de Qt Designer, crit ses fichiers en XML. Sur ce point, Edje et QML sont donc plus avancs dans le sens o un fichier Edje permet de raliser le thme de l'application en plus de disposer les lments dans l'interface utilisateur. Tel que vous avez d l'avoir compris, les EFL s'associent au mot optimisation par les moyens dont sont raliss leurs composants et par leur base asynchrone. Mme si certaines optimisations peuvent vous paratre peu intressantes, voire mme compltement inutiles, les EFL ont prouv par cela leur fluidit. Gnralement, une application dveloppe avec les EFL, sauf problme de conception de son coeur, ne devrait jamais geler. C'est une grande diffrence par rapport aux frameworks du type de Qt et de GTK.

2. Installation 2.1. Windows Si vous souhaitez utiliser les EFL sous Windows, tlchargez cet installeur (Lien 106), lancez-le et laissezvous guider. Vous pouvez galement vous rfrer cette page pour choisir l'installeur adapt vos besoins : Lien 107. 2.2. Mac OS Si vous prfrez utiliser les EFL sous Mac OS, vous devez tre en possession des programmes Fink et XCode2. L'installation des EFL sous Mac OS ncessite des dpendances, ce qui explique l'intrt de Fink :
fink fink fink fink fink fink fink fink fink fink install install install install install install install install install install xorg m4 autoconf2.5 automake1.9 libtool14 gettext-tools pkgconfig libjpeg libpng3 dbus-dev

Liste en provenance de ce site : Lien 108. Vous pouvez alors tlcharger les sources :
svn co http://svn.enlightenment.org/svn/e/trunk/eina eina-svn svn co http://svn.enlightenment.org/svn/e/trunk/eet eetsvn svn co http://svn.enlightenment.org/svn/e/trunk/evas evas-svn svn co http://svn.enlightenment.org/svn/e/trunk/ecore ecore-svn svn co http://svn.enlightenment.org/svn/e/trunk/efreet efreet-svn svn co http://svn.enlightenment.org/svn/e/trunk/embryo embryo-svn svn co http://svn.enlightenment.org/svn/e/trunk/edje edje-svn svn co http://svn.enlightenment.org/svn/e/trunk/e_dbus e_dbus-svn svn co http://svn.enlightenment.org/svn/e/trunk/elementa ry elementary-svn

Cela peut prendre un certain temps. La dernire tape est la compilation et l'installation. Pour cela, il s'agit d'entrer dans chaque rpertoire (dans l'ordre donn ci-dessus) et d'excuter les commandes :
./autogen.sh make make install && ldconfig

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 37

Par exemple, pour eina :


cd /chemin/vers/eina/ ./autogen.sh make make install && ldconfig

Cela peut prendre un certain temps. L'installation du module exchange est susceptible de bloquer easy_e17.sh. Si c'est le cas chez vous, retirez-le de la liste des modules installer puis relancez le script. Vous pourrez toujours l'ajouter manuellement par la suite. Par dfaut, le script va rcuprer les sources depuis le SVN et installer les EFL dans /opt/e17. Les sources seront disponibles dans $HOME/e17_src (par exemple, /home/username/e17_src). Une fois l'excution du script termine, le script va suggrer l'ajout de plusieurs variables d'environnement. Pour une installation par dfaut, les variables suivantes sont ncessaires :
export PATH=/opt/e17/bin:$PATH export LD_LIBRARY_PATH=/opt/e17/lib: $LD_LIBRARY_PATH export PKG_CONFIG_PATH=/opt/e17/lib/pkgconfig: $PKG_CONFIG_PATH

Note : la page mentionne ci-dessus parle de la ncessit d'un hack dans e17/libs/eet/src/lib/eet_lib.c pour les versions de Max OS X prcdant la version Leopard (10.5), donc les versions Tiger (10.4) et prcdentes. Ce hack correspond ajouter les deux lignes suivantes aux alentours de la ligne 21.
typedef unsigned int uint8_t; typedef unsigned char uint32_t;

2.3. Linux

Pour les distributions telles qu'Ubuntu, une solution est d'utiliser le script easy_e17.sh (Lien 109) pour rcuprer les sources depuis le SVN puis les compiler. La mthode ne marche pas toujours du fait que des changements dans Les utilisateurs d'Archlinux, la commande suivante suffit l'organisation du dpt cassent de temps en temps le script. faire l'installation : Quelques modifications sont donc parfois requises.
pacman -S e-svn sudo apt-get install xterm make gcc bison flex subversion automake autoconf autotools-dev autoconf-archive libtool \ gettext libpam0g-dev libfreetype6-dev libpng12dev zlib1g-dev libjpeg62-dev libtiff4-dev libungif4-dev librsvg2-dev \ libx11-dev libxcursor-dev libxrender-dev libxrandr-dev libxfixes-dev libxdamage-dev libxcomposite-dev libxss-dev \ libxp-dev libxext-dev libxinerama-dev libxft-dev libxfont-dev libxi-dev libxv-dev libxkbfile-dev libxres-dev \ libxtst-dev libltdl7-dev libglu1-xorg-dev libglut3-dev xserver-xephyr libdbus-1-dev cvs subversion mercurial \ liblua5.1-dev libavformat-dev mplayer libxine-dev libxml2-dev libcurl4-openssl-dev wget libexif-dev libsqlite3-dev \ libxine1-all-plugins libxine1-ffmpeg libudev-dev liblua5.1-dev doxygen

Toutefois, il faudra galement installer Elementary qui n'est pas inclus par dfaut. Pour les distributions ne permettant pas ce type d'installation, se rfrer cette page du site officiel : Lien 111. 3. Les forces et les problmes des EFL 3.1. Les forces

Les EFL sont extrmement pratiques pour le dveloppement d'applications fluides et esthtiques. Le tactile est trs bien gr, d'o le moyen de faire tourner des logiciels faits avec les EFL sous de multiples types de plateformes, fixes ou mobiles. Un logiciel, peu importe la plateforme sur laquelle il doit s'excuter, n'aura Liste initialement en provenance de ce site : Lien 110 ; gnralement jamais de souci de ralentissement, sauf souci doxygen est optionnel. Une fois ces paquets installs, on de conception. En effet, les solutions d'optimisation mises rcupre easy_e17.sh : disposition sont nombreuses car initialement non ngliges.
wget http://omicron.homeip.net/projects/easy_e17/easy_ e17.sh

l'heure actuelle, Elementary n'est pas sortie en version stable. Ainsi, cette bibliothque n'est pas installe par dfaut. Remdions-y : ditez le fichier easy_e17.sh et ajoutez en dernire position elementary dans efl_basic :
efl_basic="eina eet evas ecore efreet eio eeze e_dbus embryo edje elementary"

Comme autre force, on peut noter que le thmage entirement personnalisable d'une application dveloppe avec les EFL est extrmement simple et offre de nombreuses possibilits, comme la ralisation d'animations et d'effets sans avoir besoin de toucher une seule ligne de C, ce qui permet aux dveloppeurs et aux designers de travailler ensemble. Enfin, les EFL disposent de bien des modules conus pour la ralisation de tout type d'application, ce qui permet leurs utilisateurs de ne pas avoir besoin d'utiliser des bibliothques externes pour combler des manques. Multimdia, rseau, bureautique et bien d'autres choses sont dj englobs par les EFL, et la liste ne fait que s'agrandir !

Une fois cela fait, on peut lancer le script :


chmod +x easy_e17.sh ./easy_e17.sh -i

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 38

3.2. Les faiblesses D'un point de vue de la communication, Enlightenment souffre de quelques problmes. La documentation est assez limite, les moteurs de recherche ne trouvent pas grand-chose sur les EFL (il faut souvent passer par le motcl Enlightenment pour avoir des rsultats pertinents). Ces problmes de communication engendrent le fait qu'il y ait un manque de tutoriels et par exemple que l'installation des EFL ne soit pas toujours vidente.
}

color: 255 255 255 255; text { font: "Sans-serif"; text: "Hello world !"; size: 18; } } } } }

La bibliothque Elementary, bien que bien garnie , manque de widgets, et le non tactile n'est pas tellement une La compilation d'un fichier Edje est relativement simple. priorit dans le dveloppement. En ralit, cela se limite une seule commande, qui est la suivante : Pour finir, on peut ajouter qu'il arrive que les dveloppeurs rcrivent des lments afin de les amliorer, mais retirent edje_cc description.edc occasionnellement des possibilits pour les remplacer par d'autres. L'adaptation n'est pas toujours vidente. Quoi Avec cela, si aucune erreur n'est dtecte, un fichier qu'il en soit, il faut noter que les changements majeurs description.edj a d faire son apparition dans le mme prvus pour E17 ont t repousss E18. Ce problme rpertoire que le fichier description.edc. Pour visionner un d'adaptation ne devrait ainsi pas se poser avant un certain fichier EDJ, on utilise gnralement edje_player : temps. 4. Introduction Edje La description faite dans la partie prcdente est suffisante pour comprendre le rle qu'a Edje dans le dveloppement d'une application avec les EFL. Pour rsumer, le principe des EFL est de sparer le design et la partie applicative. Grossirement dit, on ralise son interface avec Edje sans avoir crire la moindre ligne de C puis on conoit le reste avec Elementary et les autres bibliothques. 4.1. Les fichiers EDC et EDJ
edje_player description.edj

Cette ligne excute, votre interface devrait s'afficher sous vos yeux. Il est bon de savoir que divers arguments peuvent tre passs l'edje_player et l'edje_cc pour altrer des choses et d'autres. Pour en connatre la liste, entrez :
edje_cc --help

Pour edje_cc. Et pour edje_player : La plupart des tutoriels disponibles sur la Toile entendent par Edje deux choses et ce cours n'chappera pas la edje_player --help rgle : les fichiers de description EDC (Edje Data 5. criture d'un fichier de description Edje Collection) o est crite la description du thme de l'application ; les fichiers EDJ obtenus lors de la compilation 5.1. Gnralits sur les fichiers EDC des fichiers EDC. Les fichiers de description Edje, donc les fichiers EDC, font parfois penser une structure en C ou bien du code Note : c'est la bibliothque libedje.so qui relie les fichiers CSS dans le sens o ils correspondent des dfinitions de EDJ et le code C. proprits. On obtient des arbres de dfinitions de la sorte : 4.2. Compilation et vision d'un fichier Edje Dans cette partie, je vais partir du principe que vous avez un fichier description.edc dans un rpertoire donn contenant une description de thme quelconque. Si vous souhaitez suivre les tapes de la compilation mais que vous n'avez pas de fichier .edc en attente de compilation, vous pouvez par exemple utiliser l'exemple Hello world donn prcdemment :
collections { group { name: "interface"; parts { part { name: "text"; type: TEXT; description { state: "default" 0.0; block { property: value; block { ... } ... }

tudions notre fichier Hello_world.edc contenant le code de l'exemple Hello world.


collections { ... }

Le mot-cl collections correspond la dfinition d'un


Numro 34 Juin - Juillet 2011 Page 39

Developpez Magazine est une publication de developpez.com

ensemble de groupes dfinissant le thme de l'application.


group { name: "group_name"; ... }

Pour ne pas se perdre dans son travail, tout dveloppeur a l'habitude de crer de multiples fichiers pour arer son code. Pour cela, Edje permet l'utilisation de directives telles que la directive #include, dont voici un exemple :
collections { #include "interface.edc" ... }

Ce mot-cl-ci correspond quant lui la dfinition d'un groupe, ou objet, composant le thme. Chaque groupe a un nom unique, dfini par le mot-cl name , et peut contenir divers lments, comme des parts ou des 5.2. Points particuliers scripts (cette notion sera aborde plus loin). Si un groupe Maintenant que nous avons pass en revue une description du mme nom qu'un autre est dfini, il va craser Edje, nous allons pouvoir entrer dans les dtails. compltement son prdcesseur, d'o l'unicit de la valeur du mot-cl name . 5.2.1. Disposition des lments
parts { part { } ... }

Tout d'abord, un point sur l'affichage l'cran d'un thme : les lments sont affichs dans l'ordre de leur criture dans le fichier Edje. Cela signifie que s'il y a lieu de superposition d'lments, l'lment dfini en dernier sera situ au-dessus des autres.

Les parts sont un ensemble de part , chacune d'elles Puisque nous parlons de superposition, parlons de reprsentant les lments graphiques prsents dans un disposition : comment faire pour afficher un lment une thme, donc un bouton, label, etc. position donne ? Comment faire pour que notre lment part { s'agrandisse et se rtrcisse selon la taille de la fentre ? name: "text"; Comment disposer un lment relativement un autre ? Le type: TEXT; positionnement et le comportement face aux ... redimensionnements forment sans aucun doute la partie la } plus importante d'une interface utilisateur. Edje nous permet par le biais des proprits des descriptions de la Chaque part possde au minimum un nom (name) et grer, par de divers moyens. un type. Ce dernier peut correspondre l'un des types suivants : Dans un premier temps, voyons l'alignement avec les RECT : les rectangles ; balises rel1 et rel2 . La balise rel1 correspond au TEXT : les textes ; point situ en haut gauche de l'lment placer, et rel2 IMAGE : les images ; au point en bas droite. Pour un placement relatif d'un lment 50 % de l'axe des abscisses et 0 % de l'axe des SWALLOW : les conteneurs ; ordonnes par rapport rel1, on va utiliser : TEXTBLOCK : les blocs de texte ; rel1 { GROUP : les groupes ; relative: 0.5 0.0; BOX : les botes ; } TABLE : les tableaux ; EXTERNAL : les lments externes. Comme vous avez d le comprendre, 0 % d'un axe va Dans le cas de l'exemple Hello world, on a un TEXT. correspondre la valeur 0 tandis que 100 % va Selon le type, la description de chaque part va tre mene correspondre 1. Pour un placement absolu 200x300px varier. Quoi qu'il en soit, les donnes des proprits du de rel1, on va utiliser : thme ne sont pas condamnes garder la valeur qu'on offset: 200 300; leur a assigne dans le fichier EDC. En effet, le code C } gnralement situ en parallle - il est rare de trouver des applications ralises entirement avec Edje - fournit bien Qui est l'quivalent logique de : des moyens de changer leur valeur lors de l'excution. Pour plus d'informations concernant les proprits mises disposition, vous pouvez consulter cette page de la documentation (Lien 112) qui en donne la liste exhaustive. Nous allons tout de mme nous pencher par la suite sur Tout en gardant en tte que les valeurs d'offset peuvent plusieurs de ces lments afin d'illustrer. tre ngatives. Il est possible de combiner les proprits relative et offset . Cela correspond tout simplement Notez que l'on peut commenter les fichiers EDC avec des un positionnement absolu partir d'un point relatif. commentaires tels qu'on les crit en C :
// Ceci est un commentaire /* Ceci en est un autre */ rel1 { relative: 0 0; offset: 200 300; } rel1 {

On peut d'ailleurs aussi faire un placement relatif un autre lment avec l'aide de la proprit to :
rel1 {

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 40

... to: "other part's name"; }

de mme s'avrer intressant de s'arrter sur les images afin de parler de certaines fonctionnalits en plus du type lui-mme.
collections { group { name: "interface" ; images { image: "image_normal.png" COMP; } parts { part { name: "image"; type: IMAGE; description { state: "default" 0.0; aspect: 1 1; aspect_preference: BOTH; image { normal: "image_normal.png"; } } } } } }

Qui est l'quivalent de :


rel1 { ... to_x: "other part's name"; to_y: "other part's name"; }

Les proprits to_x et to_y veulent respectivement dire que l'on souhaite placer notre lment relativement la position des abscisses (to_x) ou bien des ordonnes (to_y). Utiliser les deux n'est bien entendu pas obligatoire, on peut utiliser l'un et/ou l'autre, ou tout simplement ne pas les utiliser du tout. Edje laisse au dveloppeur la possibilit de positionner un lment par rapport la place qui lui est attribue avec align. Par dfaut, lorsqu'un lment est plus petit que l'espace dont il dispose, il va s'y placer au centre (align: 0.5 0.5). Exemple pour placer un lment en haut gauche de l'espace lui tant allou :
align: 0 0; // 0 pour 0 % et 1 pour 100 %

Cela affiche l'image image_normal.png s'adaptant En ce qui concerne les proprits lies au l'cran tout en conservant son ratio d'origine. dimensionnement, on a le choix entre plusieurs lments. #define IMAGE_NORMAL "image_normal.png" Ci-dessous se trouvent trois des plus importants, en collections { group { provenance de la documentation (Lien 113) : name: "interface"; fixed [longueur, 0 ou 1] [hauteur, 0 ou 1] : fixe ou images { non la longueur et la largeur de l'lment ; image: IMAGE_NORMAL COMP; min [longueur, px] [hauteur, px] : fixe une taille } minimale l'lment (astuce : -1 pour ne pas parts { fixer, 1 pour laisser Edje calculer la taille) ; part { max [longueur, px] [hauteur, px] : fixe une taille name: "image"; maximale l'lment. type: IMAGE; Pour le comportement face un redimensionnement, on va plutt utiliser aspect, le ratio entre la longueur et la hauteur, et aspect_preference, le comportement de redimensionnement (HORIZONTAL, VERTICAL ou BOTH). Ces deux proprits sont lies. Exemple d'un rectangle se redimensionnant sur les deux axes tout en conservant ses proportions initiales :
collections { group { name: "interface"; parts { part { name: "button"; type: RECT; description { state: "default" 0.0; aspect: 1.0 1.0; aspect_preference: BOTH; } } } } } } description { state: "default" 0.0; image { normal: IMAGE_NORMAL; } } } } }

Le code identique avec l'utilisation d'une macro IMAGE_NORMAL, dans l'unique but d'informer que les macros existent et s'crivent tout comme en C. Afin d'utiliser une image, il est ncessaire de passer au pralable par images pour la dfinir :
images { image: "image_normal.png" COMP; }

Un certain nombre de formats sont supports par Edje (JPEG, PNG, etc.), qui permet galement une compression de l'objet image. COMP, utilis dans l'exemple, correspond une compression sans perte, RAW aucune 5.2.2. Les images compression, LOSSY[x] une compression de qualit x (x La documentation est suffisante pour comprendre variant entre 0 et 100), comparable la qualit JPEG, et comment dfinir un certain nombre d'lments. Il peut tout USER une image non intgre au Edje, lue depuis le
Numro 34 Juin - Juillet 2011 Page 41

Developpez Magazine est une publication de developpez.com

disque. Il est souvent prfrable d'utiliser COMP plutt l'intervalle des proprits size , l'image ayant un minque USER dans le sens o il est plus pratique de ne pas size 0 sera utilise jusqu' la ncessit d'un changement avoir la charger depuis le disque. menant l'utilisation d'une autre image. Attention : dans le cas de la qualit RAW, il reste La solution des set d'images est trs pratique pour viter ncessaire de faire attention la taille finale que peut avoir d'avoir passer par une solution bien plus lourde telle que le fichier binaire. l'utilisation de SVG. Puisqu'il est question de compression, et donc de qualit, une question se pose : nous avons une image donne que l'utilisateur peut redimensionner. Comment faire pour qu'elle ne soit pas floue pour les grands crans ? Une rponse possible serait de joindre une grande image plutt qu'une image de qualit moyenne. Dans ce cas, la question inverse se poserait : comment faire pour qu'il n'y ait pas de baisse de la qualit pour les petits crans ? Edje propose une solution : set.
collections { group { name: "interface"; images { set { name: "my_image"; image { image: "image-32.png" COMP; size: 0 0 32 32; } image { image: "image-64.png" COMP; size: 33 33 64 64; } image { image: "image-128.png" COMP; size: 65 65 128 128; } } } parts { part { name: "image"; type: IMAGE; description { state: "default" 0.0; aspect: 1 1; aspect_preference: BOTH; image { normal: "my_image"; } } } } } }

5.2.3. Effets et animations avec Edje Tout ce qu'on a vu jusque-l est certes assez instructif, mais n'est pas vraiment impressionnant. Cette partie va donc donner l'occasion d'aborder un point que vous attendiez : les animations, les effets, et donc la gestion des vnements, tout cela dans un fichier de description Edje sans la moindre ligne de C. On appelle programme une action effectue par Edje, gnralement en rponse un signal (un clic de la souris, par exemple). Ces programs peuvent tre intgrs un group et effectuer diverses choses sur divers lments, comme changer l'tat d'un ou plusieurs lments. Voyons un exemple simple. On souhaite faire en sorte qu'un lment TEXT affich l'cran laisse sa place un lment IMAGE lorsqu'on clique dessus, et inversement. Ainsi, nous allons devoir dfinir deux programmes : le premier correspondra la raction un clic sur l'lment TEXT et le second un clic sur l'lment IMAGE. La mthode n'est pas trs complique. Chacun des deux lments, TEXT et IMAGE, va tre dot de deux descriptions : une pour l'tat par dfaut et une autre pour l'tat aprs un clic. Lorsque l'utilisateur va cliquer sur l'lment TEXT, le programme associ cette interaction va changer l'tat des deux lments l'tat aprs un clic afin de repositionner l'lment TEXT hors de la fentre et de repositionner l'lment IMAGE l'intrieur. Pour un clic sur l'lment IMAGE, l'action est rciproque.
collections { group { name: "interface"; images { image: "image.png" COMP; } parts { part { // Notre lment TEXT name: "text"; type: TEXT; mouse_events: 1; description { // tat par dfaut state: "default" 0.0; text { text: "Cliquez ici !"; size: 12; font: "Sans"; } } description { // tat clicked state: "clicked" 0.0; inherit: "default" 0.0; rel1.offset: -1000 0; } } part { // Notre lment IMAGE name: "image"; type: IMAGE; Numro 34 Juin - Juillet 2011 Page 42

Dans ce code, on dfinit un set d'images de diffrentes tailles, avec my_image comme valeur de la proprit name . Au moment de la dfinition de l'lment IMAGE, on va utiliser la valeur de la proprit name de notre set :
image { normal: "my_image"; }

De l, Edje va dterminer quelle image choisir selon la taille de la fentre l'excution l'aide des proprits size de chaque image du set. Dans le cas o, lors de l'excution, la taille de la fentre ne serait pas incluse dans

Developpez Magazine est une publication de developpez.com

mouse_events: 1; description { // tat par dfaut state: "default" 0.0; max: 128 128; aspect: 1 1; aspect_preference: BOTH; image.normal: "image.png"; rel1.offset: -1000 0; } description { // tat clicked state: "clicked" 0.0; inherit: "default" 0.0; rel1.offset: 0 0; } } } programs { program { // Programme dclench par name: "text_clicked"; signal: "mouse,clicked,1"; source: "text"; action: STATE_SET "clicked" 0.0; target: "text"; target: "image"; } program { // Programme dclench par l'IMAGE name: "image_clicked"; signal: "mouse,clicked,1"; source: "image"; action: STATE_SET "default" 0.0; target: "text"; target: "image";

Dans chacun de nos programmes, nous dfinissons : name, le nom du programme ; signal, le signal qui va dclencher le programme ; source, le nom de l'lment source du signal (au plus, une seule source par programme) ; action, l'action effectuer lors du dclenchement du programme ; target, la cible de l'action (il peut y avoir plusieurs cibles).
program { // Programme dclench par le TEXT name: "text_clicked"; signal: "mouse,clicked,1"; // Appel par un clic de la souris source: "text"; // En provenance de l'lment TEXT action: STATE_SET "clicked" 0.0; // Change l'tat clicked target: "text"; // ... pour le TEXT target: "image"; // ... et pour l'IMAGE }

le TEXT

Si vous testez ce code, vous vous rendez compte que l'image apparat immdiatement aprs un clic sur l'lment TEXT, qui va quant lui disparatre. Avec la proprit transition de chaque programme, on va pouvoir passer d'un simple effet une petite animation, et cela en une seule ligne. La proprit transition a la syntaxe suivante :
transition: TYPE paramtre;

Avec TYPE faisant partie des types de transition suivants : NONE ; } LINEAR ; } SINUSOIDAL ; ACCELERATE ; Avec la proprit mouse_events mise 0, on dit qu'on DECELERATE ; n'accepte pas les vnements de la souris, tandis qu'avec cette mme proprit mise 1, on dit qu'on les accepte. Et paramtre correspondant au temps de transition en C'est pour cela que nos deux lments ont la proprit secondes. Plus la valeur passe sera leve, plus dfinie 1 : l'animation sera longue.
} } mouse_events: 1; // On accepte les vnements de la souris

Par exemple, si on met pour chacun de nos programmes :


transition: ACCELERATE 1;

Note : par dfaut, la proprit mouse_events est dj 1. L'intrt de la dfinir 1 dans le code n'a donc qu'une On pourra voir une animation lors d'un clic sur l'image ou utilit, vous avertir que cela existe. le texte. L'lment prsent va sortir de l'cran en l'espace d'une seconde avec une vitesse s'acclrant, puis l'lment L'utilisation de la proprit inherit sur les descriptions non prsent va entrer dans l'cran par un effet identique. clicked de nos lments avec pour argument default est un moyen d'viter de devoir crire deux fois la mme chose. Note : les actions des programmes ne se limitent pas aux Cela permet de dire Edje cette description a les mmes simples changements d'tat. l'heure o j'cris cet article, proprits et valeurs que la description default . partir un programme peut galement envoyer un signal pouvant de l, il ne nous reste plus qu' placer les proprits par exemple tre capt et gr par le code C (nous verrons divergeant de l'tat par dfaut : cela par la suite), ainsi que stopper l'excution d'un autre
description { // Description de state: "clicked" 0.0; // tat clicked inherit: "default" 0.0; // Hrite de default rel1.offset: 0 0; // On change uniquement le placement }

programme. Consulter la documentation des programmes Edje : Lien 113. Retrouvez la suite de l'article de Louis du Verdier en ligne : Lien 114

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 43

Qt
Les dernires news Qt SDK 1.1 disponible en version finale
Qt 4.7.3 et Qt Mobility 1.1.3 galement de Qwt 5 Qwt 6 ne sera pas ais. Qwt 6.0.0 est disponible : Lien 118. L'quipe de Qt vient d'annoncer la disponibilit de la version finale du kit de dveloppement Qt SDK 1.1 Voici la liste des principaux changements : Cette version apporte quelques corrections de bogues la Release Candidate. Ce SDK est le premier permettre de crer des applications fondes sur Qt 4.7 et de les publier sur la galerie d'applications Ovi Store, y compris pour les applications Qt Quick. Qt SDK 1.1 unifie tous les kits de dveloppements Qt actuellement disponibles. De ce fait, il vise la fois les solutions Desktop et mobiles. Il intgre notamment un paquet complmentaire qui permet l'installation des API natives qui peuvent tre utilises dans un environnement de dveloppement Symbian. On notera galement l'intgration de la compilation distance, qui permet de compiler un projet pour toutes les plateformes prises en charge par Nokia et ce, que ce soit depuis un environnement de dveloppement Windows, Linux ou Mac. Cette sortie du SDK Qt version 1.1 est accompagne de la publication de Qt 4.7.3 et de Qt Mobility 1.1.3 qui sont directement inclus dans Qt SDK 1.1 (Qt Mobility 1.1.3 peut tre tlcharg indpendamment). Qt 4.7.3 et Qt Mobility 1.1.3 apportent uniquement des corrections de bogues importants pour Qt et Qt mobility, en particulier pour la plate-forme mobile Symbian, et tient compte du retour d'expriences des utilisateurs pour la beta et la Release Candidate de Qt SDK 1.1. Qt Creator 2.2, quant lui, sera publi trs bientt et ncessitera pas la rinstallation de Qt SDK 1.1 pour une mise jour. Qt SDK 1.1 est disponible sur cette page : Lien 115 Qt Mobility 1.1.3 peut-tre tlcharg sur cette page : Lien 116 Commentez cette news d'Hinault Romaric en ligne : Lien 117 1) Qt3 support dropped 2) QwtPlot layout/render code ported from int to double Exported/printed documents in scalable formats like SVG or PDF are 100% scalable now. 3) Template base classes introduced for curve and curve data to be reusable in all plot items displaying series of samples. 4) New plot items - QwtPlotHistogram - QwtPlotIntervalCurve (error bars or displaying the area between 2 curves) - QwtPlotSpectroCurve (mapping the z value to a color) 5) Raster items - QwtMatrixRasterData introduced - More accurate rendering - Several API changes - Thread support for rendering spectrograms 6) QwtPlot::print moved to QwtPlotRenderer 7) Other new classes QwtColumnSymbol QwtDoublePoint3D QwtIntervalSymbol QwtPlotDirectPainter QwtSamplingThread QwtSystemClock 8) QwtPicker and friends reorganized, QwtPickerTrackerMachine added for displaying a rubberband for mouse moves. Enter/Leave added to events, that are handled by the picker machines. 9) QwtScaleWidget::LayoutFlag added Introduced to control the direction of vertical axis titles. 10)QwtWeedingCurveFitter added QwtWeedingCurveFitter is an implementation of the Douglas/Peuker algorithm, that can be used to reduce the number of curve points. It can be very useful to improve the performance of painting curves of many lines (e.g. by implementing different level of details). 11)Legend code update for representing different pixmaps for different types of plot items. 12)Copy operators removed, using pointers instead 13)QwtPolarPoint from qwtpolar added 14)QwtThermo Optional QwtColorMaps added 15)Interfaces and code of all sliders/dials cleaned up. QApplication::globalStrut(), styled backgrounds ...

Sortie de Qwt 6.0.0


La bibliothque de widgets techniques pour Qt ne supportera plus Qt 3 La version 6.0.0 de Qwt est sortie, une anne aprs la version prcdente, la 5.2.1.

La principale nouveaut est l'abandon du support de Qt 3 pour nettoyer l'API. Cette version requiert donc Qt 4.4 ou Commentez cette news de Thibaut Cuvelier en ligne : plus rcent. Autre consquence : le portage d'applications Lien 118
Numro 34 Juin - Juillet 2011 Page 44

Developpez Magazine est une publication de developpez.com

Les blogs Qt
chaque plateforme, ce qui implique que l'on va d'abord fournir des fonctionnalits plus diffrencies entre les OS, tout en offrant une rutilisation du code aussi efficace que Six ans dj que Qt 4.0 est sorti, en juin 2005. Depuis lors, possible pour la majorit des plateformes. beaucoup de choses ont chang dans l'industrie du logiciel : le dveloppement se droulait principalement Dvelopp ouvertement pour le desktop, alors que les priphriques mobiles se sont rpandus. L'interface utilisateur est passe de la souris Le modle de dveloppement va compltement changer au toucher, du statique au fluide. Sept versions mineures entre Qt 4 et Qt 5, changement qui se profile depuis dj depuis cette poque ont permis Qt de s'approcher des longtemps : Qt 4 a principalement t dvelopp par demandes actuelles, avec la sortie de Qt Quick par Trolltech puis Nokia, le fruit de ce travail a t publi. Qt exemple. La base d'utilisateurs de Qt ne cessant de crotre, 5 se veut dvelopp par la communaut, un projet open il faut toujours rester proche des besoins nouveaux des source ds le tout dbut. Il n'y aura pas de diffrences entre un dveloppeur de chez Nokia et un contributeur externe. dveloppeurs.

Quelques penses sur Qt 5, quelles seront ses lignes directrices ?

Ainsi, pour rester la pointe de la technologie et un framework leader dans l'industrie en gnral, Qt doit continuer se renouveler. Qt 4 a t une volution, les prochaines versions de Qt devront tre dans sa perspective technique. Ces dernires annes, de nouvelles fondations ont t esquisses pour la prochaine gnration : Qt Quick, QML Scenegraph, Lighthouse, Qt WebKit.

Vision

Qt 5 devrait tre la fondation d'une nouvelle manire de dvelopper des applications. En offrant toute la puissance de Qt en C++ natif, le focus sera dplac vers un modle, o le C++ est principalement utilis pour implmenter les fonctionnalits derrire Qt Quick. Qt 5 mettra Qt Quick au centre, sans se couper du code dj existant, il s'agira plus restructuration. Les applications Qt/C++ En plus de son orientation vers l'open gouvernance, voici d'une traditionnelles vont continuer fonctionner avec Qt 5, quelques pistes architecturales pour Qt 5. mme si quelques changements vont tre apports sur les fondements de la manire de dvelopper des applications. Objectifs pour Qt 5 Mieux utiliser le GPU, pour obtenir des applications graphiques fluides et performantes, mme avec peu de ressources. Rendre la cration d'applications avances plus facile et plus rapide, avec QML et JavaScript. Faire en sorte que les applications connectes au Web soient aussi puissantes que possible, notamment au niveau de l'insertion de contenu Web dans des applications Qt. Rduire la quantit de code requise et sa complexit pour implmenter et maintenir un port. Qt 4.7 contient encore du vieux code qui empche certaines volutions et Qt d'tre aussi bon que possible pour la cration d'applications next-gen. La plupart du code convient encore, alors que certaines parties bloquent le chemin de Qt 4.x. Faciliter la migration entre Qt 4 et Qt 5 Avec Qt 5, il est prvu d'effectuer des changements bien prcis dans les API pour abandonner certaines limitations du pass. La difficult du portage de Qt 3 vers Qt 4 ne sera pas ritre : la compatibilit des sources sera conserve pour la majorit des cas, alors que, d'autres endroits, il sera ncessaire de la briser. Il est actuellement envisag de se focaliser sur un petit ensemble de systmes supports (Wayland, X11 pour Linux, en plus de Mac OS X et de Windows), le nombre total de plateformes supportes dpendra de l'activit de la communaut, suivant le principe de l'open gouvernance. Les autres systmes d'exploitation ne seront pas maintenus par Nokia (principalement les UNIX commerciaux). Le but de Qt 5 est de fournir les meilleures fonctionnalits sur On devrait s'attendre ce que toutes les IU soient crites en QML. JavaScript deviendra un citoyen de premire classe de l'environnement Qt : beaucoup de logique, voire toute une application sera crite en JavaScript, non en C+ +. Le but est que les dveloppeurs commencent d'abord avec QML et JavaScript pour n'implmenter des fonctionnalits en C++ que lorsque cela est ncessaire. Dans ce cas, toute la puissance des API C++ pourra tre utilise pour implmenter des fonctionnalits plus complexes ou dont l'excution doit tre trs rapide. Le modle bas sur QWidget sera conserv, les API lies aussi, pour la compatibilit, mais le long terme devrait voir QML comme le futur des interfaces utilisateur pour desktop. La solution retenue sera probablement des composants bass sur QML qui s'intgrent dans le style natif des plateformes desktop. Les quatre grands changements architecturaux Les premiers changements sont dj en cours depuis un certain temps, le travail dbute pour le reste. La plupart de ces changements pourraient tre effectus avant aot. Changer l'architecture de la pile graphique Qt Quick et QML Scenegraph seront au centre de la nouvelle architecture. QPainter sera toujours disponible et est trs utile pour bien des choses, mais il ne sera plus utilis pour l'interface principale. Qt aura besoin d'OpenGL (ES) 2.0 pour fonctionner. Les QWidget seront rendus par-dessus le graphe de scne, pas l'inverse comme actuellement.

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 45

Les derniers tutoriels et articles


Manipulation d'images avec PyQt

Qt Components et Qt Mobility feront donc partie Les classes bases sur QWidget sont actuellement trs intgrante de Qt, plus des modules avec un statut spcial. importantes ; le modle va cependant changer et les IU seront principalement faites avec QML. Sparer les Baser tous les ports de Qt sur Lighthouse fonctionnalits bases sur QWidget est donc une manire d'obtenir une architecture propre dans Qt 5. Le projet Lighthouse a t lanc pour fournir une meilleure manire d'abstraire l'intgration au systme de Beta fin 2011, version finale en 2012 fentrage que ce qui est actuellement disponible. La maturit est proche avec Qt 4.8, son utilisation sera On ne doit pas trop changer dans les fondations de Qt, on probablement requise pour Qt 5.0. veut aussi rendre facile le portage d'applications vers Qt 5 : on ne peut donc pas trop modifier la base de code dj Utiliser une structure de rpertoires modulaire en place. Beaucoup des changements proposs se basent sur la modularisation de Qt, avec chaque bibliothque Beaucoup a dj t fait ces dernires semaines, le travail partage dans son propre rpertoire. On devra supprimer est d'ores et dj visible dans les nouveaux dpts : quelques API rarement utilises si elles se rvlent Lien 119. Cette modularisation va permettre de faciliter et contraignantes maintenir sans empcher d'avancer. Du d'acclrer l'intgration de contributions Qt. code en version beta devrait tre disponible fin 2011, avec une version finale pour 2012. Sparer les fonctionnalits lies QWidget dans une bibliothque distincte Retrouvez ce billet sur le blog de Thibaut Cuvelier en ligne : Lien 120 Manipulation d'images avec PyQt

Ce tutoriel est destin ceux qui dcouvrent la bibliothque Qt et ses nombreuses possibilits dans le domaine de l'imagerie. Nous y aborderons les principes de base en personnalisant une interface et en ralisant une visionneuse d'image.
1. Introduction QPicture Les QPicture sont des supports de dessin permettant La manipulation d'images revt plusieurs aspects. Tout d'enregistrer une suite de commandes de QPainter et de d'abord l'utilisation d'images sur des constituants de les reproduire sur diverses images. l'interface, appels widgets, des fins de personnalisation Utilis pour la srialisation de dessins, estampillages, etc. de cette interface, ensuite les traitements simples des images, classement, visionnage, gestion des mtadonnes QBitmap et quelques manipulations de base telles que pivotement, QBitmap dsigne une image monochrome, avec un bit 0 redimensionnement, etc. Pour terminer, le traitement pour l'arrire-plan (ou pixel transparent) et un bit 1 pour d'image impliquant une modification de ses proprits, l'avant-plan (ou pixel opaque). accs aux pixels, colorimtrie, etc. L'exemple le plus courant tant la cration de curseur personnalis. Nous verrons dans ce tutoriel les deux premiers aspects de la manipulation d'images. QIcon Les QIcon sont des objets dynamiques en ce sens qu'ils 2. Les types d'images Qt sont redimensionnables selon les besoins de l'interface et peuvent revtir divers tats : dsactiv, actif, survol, QPixmap Une pixmap est optimise pour l'affichage l'cran, celle- cliqu, etc. Les QIcon sont gnralement construits ci est charge en mmoire du ct serveur X ou dans la partir de Qpixmap. mmoire de la carte graphique. Les donnes stockes dans Nous en verrons des exemples d'utilisation sur des l'instance d'un QPixmap ne sont qu'une rfrence widgets. l'image charge sur le serveur X. Son avantage est de profiter des ressources matrielles (acclration graphique) 3. Les formats d'image mais, par contre, cela implique que l'image soit traite Par dfaut, Qt peut lire les formats BMP, GIF, ICO, JPEG, dans la boucle principale du programme et non pas dans JPG, MNG, PBM, PGM, PNG, PPM, SVG, TIF, TIFF, un thread spar. XBM, XPM et peut enregistrer sous les formats BMP, Une visionneuse utilisera de prfrence des QPixmap. ICO, JPEG, JPG, PNG, PPM, TIF, TIFF, XBM, XPM. QImage QImage permet un accs direct aux pixels de l'image, est indpendant du matriel, peut tre utilis dans un thread spar, mais ne profite pas de l'acclration matrielle. Les QImage seront prfrs dans une application de traitement d'images. L'ajout d'autres formats doit se faire par plug-in. Les deux commandes suivantes permettent de savoir quels sont les formats d'image supports par votre version de Qt :

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 46

Formats supports en lecture:


for format in QtGui.QImageReader.supportedImageFormats(): print format

imageViewer.py
# -*- coding: utf-8 -*import sys import os from PyQt4 import QtCore, QtGui

Formats supports en criture :


for format in QtGui.QImageWriter.supportedImageFormats(): print format class ImageViewer(object): def setupUi(self, Viewer): Viewer.resize(640, 480) Viewer.setWindowTitle(u"Exemples d'usage d'images") self.image_1 = "image1.jpg" self.image_2 = "image2.png" self.centralwidget = QtGui.QWidget(Viewer) self.gridLayout = QtGui.QGridLayout(self.centralwidget) self.verticalLayout_2 = QtGui.QVBoxLayout() self.horizontalLayout = QtGui.QHBoxLayout() # QLabel self.label = QtGui.QLabel(self.centralwidget) sizePolicy = QtGui.QSizePolicy(QtGui.QSizePolicy.Preferred, Q tGui.QSizePolicy.Fixed) self.label.setSizePolicy(sizePolicy) self.label.setPixmap(QtGui.QPixmap(self.i mage_1)) self.label.setScaledContents(True) self.horizontalLayout.addWidget(self.labe l) self.verticalLayout = QtGui.QVBoxLayout() self.label_cmb = QtGui.QComboBox(self.centralwidget) self.verticalLayout.addWidget(self.label_ cmb) spacerItem = QtGui.QSpacerItem(20, 18, QtGui.QSizePolicy.Minimum, Q tGui.QSizePolicy.Fixed) self.verticalLayout.addItem(spacerItem) self.horizontalLayout.addLayout(self.vert icalLayout) self.verticalLayout_2.addLayout(self.hori zontalLayout) self.horizontalLayout_2 = QtGui.QHBoxLayout() # QPushButton self.pushButton = QtGui.QPushButton(self.centralwidget) self.pushButton.setText("PushButton") icon1 = QtGui.QIcon() icon1.addPixmap(QtGui.QPixmap(self.image_ 2),QtGui.QIcon.Normal, QtGui.QIc on.Off) self.pushButton.setIcon(icon1) self.horizontalLayout_2.addWidget(self.pu shButton) self.push_cmb = QtGui.QComboBox(self.centralwidget) self.horizontalLayout_2.addWidget(self.pu

4. Les modes d'ouverture Diverses manires permettent d'instancier un objet image, entrons dans le code.
# Avec le nom de fichier image = QtGui.QImage("fichierImage.jpg") pixmap = QtGui.QPixmap("fichierImage.jpg") # L'extension peut tre spare image = QtGui.QImage("fichierImage", "jpg") pixmap = QtGui.QPixmap("fichierImage", "jpg") # ou ignore image = QtGui.QImage("fichierImage") pixmap = QtGui.QPixmap("fichierImage") # dans ce cas Qt dterminera le format par l'entte du fichier. # ! Lorsque l'extension est donne, celle-ci doit tre exacte. # Avec une autre instance d'image image = QtGui.QImage("fichierImage.jpg") pixmap = QtGui.QPixmap(image) # QPixmap possde une mthode .toImage() image = pixmap.toImage() == image = QtGui.QImage(pixmap) # et une mthode .fromImage(image, flag) pixmap = QtGui.QPixmap.fromImage(image, 0)

les diffrentes valeurs de 'flag' (0 par dfaut) peuvent tre trouves ici : Lien 121 ce stade, il devient utile de savoir si l'image a t correctement charge. En effet, en cas de non-ouverture du fichier, Qt ne retourne pas d'erreur mais cre une "null pixmap", il est donc souvent indispensable de vrifier le bon chargement de l'image au moyen des mthodes QPixmap.isNull() et QImage.isNull().
if image.isNull(): print "Image non valide !"

5. Les supports Les images peuvent tre appliques diffrents widgets selon qu'elles sont destines la dcoration de l'interface ou qu'elles sont l'objet mme de l'application. Nous allons voir l'utilisation de ces diffrents supports par la pratique, pour cela nous allons crer une interface qui nous servira tout au long de ce tutoriel.

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 47

sh_cmb) # QToolButton self.toolButton = QtGui.QToolButton(self.centralwidget) self.toolButton.setText("toolButton") self.toolButton.setIcon(icon1) self.toolButton.setToolButtonStyle(QtCore .Qt.ToolButtonTextBesideIcon) self.horizontalLayout_2.addWidget(self.to olButton) self.tool_cmb = QtGui.QComboBox(self.centralwidget) self.horizontalLayout_2.addWidget(self.to ol_cmb) self.verticalLayout_2.addLayout(self.hori zontalLayout_2) self.horizontalLayout_3 = QtGui.QHBoxLayout() # QRadioButton self.radioButton = QtGui.QRadioButton(self.centralwidget) self.radioButton.setText("RadioButton") self.radioButton.setIcon(icon1) self.horizontalLayout_3.addWidget(self.ra dioButton) # QCheckBox self.checkBox = QtGui.QCheckBox(self.centralwidget) self.checkBox.setText("CheckBox") self.checkBox.setIcon(icon1) self.checkBox.setLayoutDirection(QtCore.Q t.RightToLeft) self.horizontalLayout_3.addWidget(self.ch eckBox) spacerItem1 = QtGui.QSpacerItem(40, 20, QtGui.QSizePolicy.Expanding, QtGui.QSi zePolicy.Minimum) self.horizontalLayout_3.addItem(spacerIte m1) # Colors comboBox self.colors_cmb = QtGui.QComboBox(self.centralwidget) self.horizontalLayout_3.addWidget(self.co lors_cmb) self.verticalLayout_2.addLayout(self.hori zontalLayout_3) # QGraphicsView self.vue = QtGui.QGraphicsView(self.centralwidget) self.verticalLayout_2.addWidget(self.vue) self.horizontalLayout_4 = QtGui.QHBoxLayout() self.horizontalLayout_4.setObjectName("ho rizontalLayout_4") self.image_btn = QtGui.QToolButton(self.centralwidget) self.image_btn.setText("Image") self.image_btn.setObjectName("image_btn") self.horizontalLayout_4.addWidget(self.im age_btn) spacerItem2 = QtGui.QSpacerItem(40, 20, QtGui.QSizePolicy.Expanding, QtGui.QSi zePolicy.Minimum) self.horizontalLayout_4.addItem(spacerIte

m2) self.verticalLayout_2.addLayout(self.hori zontalLayout_4) self.gridLayout.addLayout(self.verticalLa yout_2, 0, 0, 1, 1) Viewer.setCentralWidget(self.centralwidge t) self.populate_combos() # Connections self.label_cmb.currentIndexChanged.connec t(self.update_label) self.push_cmb.currentIndexChanged.connect (self.update_push_button) self.tool_cmb.currentIndexChanged.connect (self.update_tool_button) def populate_combos(self): items = ["setScaledContents(True)", "setScaledContents(False)"] self.label_cmb.addItems(items) items = ["Modifier...", "setAutoDefault()", "setDefaut()", "setFlat()"] self.push_cmb.addItems(items) items = ["Modifier...", "setAutoRaise()", "ToolButtonIconOnly", "ToolButtonTextOnly", "ToolButtonTextBesideIcon", "ToolButtonTextUnderIcon" , "ToolButtonFollowStyle"] self.tool_cmb.addItems(items) names = ["Rouge", "Vert", "Bleu"] colors = [QtGui.QColor(255, 0, 0, 255), QtGui.QColor(0, 255, 0, 255), QtGui.QCo lor(0, 0, 255, 255)] pix = QtGui.QPixmap(QtCore.QSize(30, 10)) self.colors_cmb.setIconSize(QtCore.QSize( 30, 10)) for idx, name in enumerate(names): pix.fill(colors[idx]) icon = QtGui.QIcon(pix) self.colors_cmb.addItem(icon, name) def update_label(self, idx): self.label.setScaledContents(not self.label.hasScaledContents()) def update_push_button(self, idx): if not idx: return if idx == 1: self.pushButton.setAutoDefault(not self.pushButton.autoDefault()) elif idx == 2: self.pushButton.setDefault(not self.pushButton.isDefault()) else: self.pushButton.setFlat(not self.pushButton.isFlat()) def update_tool_button(self, idx): if not idx: return if idx == 1: self.toolButton.setAutoRaise(not self.toolButton.autoRaise()) else: self.toolButton.setToolButtonStyle(id Numro 34 Juin - Juillet 2011 Page 48

Developpez Magazine est une publication de developpez.com

x-2)

if __name__ == "__main__": import sys app = QtGui.QApplication(sys.argv) Viewer = QtGui.QMainWindow() ui = ImageViewer() ui.setupUi(Viewer) Viewer.show() sys.exit(app.exec_())

Pour terminer avec les widgets pouvant tre dcors au moyen d'images, nous avons un QComboBox o les images sont insres au moyen de QIcon. Ces icnes tant cres partir de pixmaps dans la dernire partie de la fonction populate_combos(). Toutes les possibilits d'insertion d'image dans tous les widgets possibles ne peuvent tre vues ici, mais les mthodes utilises dans le code devraient permettre de rpondre toutes les situations.

Des personnalisations d'interface plus pousses, couleur de Dans ce code, vous aurez remplacer dans les lignes 12 et fond, couleur de texte, image de fond, feront appel au 13 les chemins des images situes sur votre disque. Pour styleSheet. self.image_2, choisissez de prfrence une image de taille rduite. Une icne fera trs bien l'affaire. 6. Visionnage d'images Remarque sur les chemins des images : soit les images sont dans le mme dossier que le script, utilisez "imageX.jpg" ; soit elles sont dans un sous-dossier (ex. "medias/") utilisez, "medias/imageX.jpg" ; soit elles sont dans le dossier parent (vers le haut) utilisez, "../imageX.jpg" ; soit vous ne vous en sortez pas, utilisez le chemin complet ; d'autre part, "Couch-de-soleil.jpg" retournera une image nulle, utilisez u"Couch-de-soleil.jpg". (Non, Qt n'est pas sensible aux fautes d'orthographe.) Lorsque l'image est l'objet mme de l'application, comme dans une visionneuse, divers widgets peuvent servir de support tels que QFrame, QWidget ou encore QScrollArea. Ces widgets impliquent toutefois que notre code implmente les fonctions de positionnement ou de centrage qui peuvent s'avrer de vrais casse-tte, surtout si l'on dsire que la fentre soit redimensionnable ou, dans le cas du QScrollArea o l'apparition d'une barre de dfilement repositionne systmatiquement l'image dans le coin suprieur gauche du widget.

Qt nous propose un conteneur beaucoup plus performant pour l'affichage d'image: le QGraphicsView. Plus exactement, la paire QGraphicsView et Voyons le code, tout d'abord le QLabel, rien de QGraphicsScene. compliqu, un QPixmap ou un QPicture peuvent lui tre appliqu directement. Un argument optionnel permet Le QGraphicsView ou la vue, est l'espace physique dans d'ajuster la taille de l'image l'espace du QLabel, mais cet lequel se positionnera la scne. Ce widget hrite de agrandissement n'est pas proportionnel, l'image peut donc QAbstractScrollArea ce qui nous permettra de profiter de apparatre trop tire dans un des deux axes. fonctionnalits "ready-to-use" comme nous le verrons avec l'outil panoramique. On ne peut joindre texte et image dans un Qlabel. Le QGraphicsScene ou la scne, est l'espace virtuel dans Les QPushButton et QToolButton demandent la cration lequel nous placerons notre image. Cet espace tant d'un QIcon qui sera appliqu avec la mthode virtuel, il ne doit pas obligatoirement tre dimensionn, setIcon(icon). dans ce tuto, nous lui donnerons cependant, les dimensions de l'image afficher, pour profiter, entre autres, du Une option permet de dterminer la taille de l'icne mais centrage automatique de l'image dans la scne. sera inoprante si la taille choisie est suprieure celle du bouton. Il est souvent prfrable de laisser Qt choisir la La vue sera donc une fentre sur un espace illimit par taille de l'icne. dfaut. Vous remarquerez, dans les combos que ces deux types de Dans le code, nous avons utilis la mthode la plus simple boutons n'ont pas les mmes options d'apparence. pour instancier la vue : Pour obtenir un rsultat comme celui-ci :
self.vue = QtGui.QGraphicsView(self.centralwidget) self.verticalLayout_2.addWidget(self.vue)

Nous crerons la scne lorsque nous importerons l'image puisque nous avons choisi de lui donner les dimensions de Les QRadioButton et QCheckBox demandent aussi un l'image. QIcon pour l'insertion d'une image. Ici, les options d'apparence se limitent la direction du widget, c'est-- La scne aurait pu tre cre ds le dpart en utilisant la dire que la case cocher peut tre positionne droite mthode suivante : comme dans le cas de la QCheckBox. on choisira des QPushButton.
self.scene = QtGui.QGraphicsScene()

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 49

self.vue = QtGui.QGraphicsView(self.scene) self.verticalLayout_2.addWidget(self.vue)

Remarquez : pas de parent pour la scne, la vue a la scne pour parent et c'est toujours la vue que nous plaons dans le layout. Compltons notre code, dans le groupe des connexions (lignes 104-106), ajoutons une ligne :
self.image_btn.clicked.connect(self.get_image)

ensuite ajoutons la fonction get_image() la fin de notre classe :


def get_image(self): img = unicode(QtGui.QFileDialog.getOpenFileName(Viewer, u"Ouverture de fichiers", "", "Image Files (*.png *.jpg *.bmp)")) if not img: return self.open_image(img)

Les arguments de la mthode .scaled() : Les modes de redimensionnement : Qt.IgnoreAspectRatio le rapport largeur/hauteur de l'image originale ne sera pas respect, dans la majorit des cas cela entranera une dformation disgracieuse ; Qt.KeepAspectRatio le rapport de taille sera respect et le plus petit agrandissement possible sera utilis. C'est le mode que nous choisissons ; Qt.KeepAspectRatioByExpanding le rapport de taille sera respect et le plus grand agrandissement possible sera utilis. Note : il n'est pas impossible qu'une barre de dfilement apparaisse, les dimensions de la vue retournes par Qt peuvent tre dpendantes du systme. Les mthodes de redimensionnement : Qt.FastTransformation redimensionnement rapide sans antialias ; Qt.SmoothTransformation redimensionnement avec antialias, le filtre utilis est de type bilineaire.

La fonction view_current() : Cette fonction permettra de choisir une image en cliquant sur le bouton "Image". Remarquez l'utilisation d'Unicode Nous relevons les dimensions de notre pixmap, w_pix et pour viter le problme d'ouverture cit plus avant. h_pix. Terminons en ajoutant les fonctions open_image() et Nous instancions une scne et nous lui attribuons les view_current() : dimensions de notre pixmap.
def open_image(self, path): w_vue, h_vue = self.vue.width(), self.vue.height() self.current_image = QtGui.QImage(path) self.pixmap = QtGui.QPixmap.fromImage( self.current_image.scaled(w_vue, h_vue, QtCore.Qt.KeepAspectRatio, QtCore.Qt.SmoothTransformation)) self.view_current() def view_current(self): w_pix, h_pix = self.pixmap.width(), self.pixmap.height() self.scene = QtGui.QGraphicsScene() self.scene.setSceneRect(0, 0, w_pix, h_pix) self.scene.addPixmap(self.pixmap) self.vue.setScene(self.scene)

Les deux dernires lignes placent notre image dans la scne et ensuite celle-ci dans la vue. Variante : Si la scne a t cre directement avec la vue, comme indiqu plus haut, la fonction view_current() se prsentera comme ceci :
def view_current(self): w_pix, h_pix = self.pixmap.width(), self.pixmap.height() self.scene.clear() self.scene.setSceneRect(0, 0, w_pix, h_pix) self.scene.addPixmap(self.pixmap)

la ligne 'self.vue.setScene(self.scene)' ne se justifiant plus ici.

C'est ici que les choses deviennent intressantes, voyons Afin de comprendre pourquoi nous imposons la scne les ces fonctions en dtail. dimensions de l'image, je vous propose de tester le code avec des dimensions trs diffrentes de l'image. La fonction open_image() : ex. si l'image mesure 2500x1800 px, essayez ceci : Nous partons du principe que nous afficherons notre image la taille de la vue, nous implmenterons un zoom ensuite, donc commenons par extraire la taille de la vue w_vue et h_vue, respectivement largeur et hauteur.
self.scene.setSceneRect(0, 0, 6000, 4000) # et ceci : self.scene.setSceneRect(0, 0, 500, 300)

Testez le code et vous constaterez que l'image n'est plus Crons notre image en tant que QImage, celle-ci ne sera centre. jamais affiche mais nous en aurons besoin plus tard. Nous crons ensuite notre pixmap la dimension de la vue. Remettez le code dans l'tat initial.
self.scene.setSceneRect(0, 0, w_pix, h_pix)

Comme nous ne sommes jamais satisfaits, implmentons


Numro 34 Juin - Juillet 2011 Page 50

Developpez Magazine est une publication de developpez.com

un zoom. Tout d'abord, il faut mettre la vue l'coute de la par ceci : roulette de la souris. Dans la dfinition de la vue (ligne self.pixmap 84), rajoutons l'vnement wheelEvent. Nous devons avoir ceci :
# QGraphicsView self.vue = QtGui.QGraphicsView(self.centralwidget) self.vue.wheelEvent = self.wheel_event self.verticalLayout_2.addWidget(self.vue)

= self.pixmap.scaled(w, h, QtCore.Qt.KeepAspectRatio, QtCore.Qt.FastTransformation)

Testez le code, la dgradation de l'image apparat rapidement. Il nous manque encore une chose, c'est de pouvoir dplacer l'image " la main" lorsque celle-ci est plus grande que la vue. Retournons dans notre code et ajoutons une ligne la dfinition de notre vue pour obtenir ceci :
# QGraphicsView self.vue = QtGui.QGraphicsView( self.centralwidget) self.vue.setDragMode( QtGui.QGraphicsView.ScrollHandDrag) self.vue.wheelEvent = self.wheel_event self.verticalLayout_2.addWidget(self.vue)

et, la fin de notre code, ajoutons ces fonctions :


def wheel_event (self, event): steps = event.delta() / 120.0 self.zoom(steps) event.accept() def zoom(self, step): w_pix, h_pix = self.pixmap.width(), self.pixmap.height() w, h = w_pix * (1 + 0.1*step), h_pix * (1 + 0.1*step) self.pixmap = QtGui.QPixmap.fromImage( self.current_image.scaled(w, h, QtCore.Qt.KeepAspectRatio, QtCore.Qt.FastTransformation)) self.view_current()

C'est tout ce dont nous avons besoin pour notre outil panoramique. Les options de la mthode setDragMode() sont : QGraphicsView.noDrag supprimer toute fonctionnalit pralablement dfinie ; Voyons cela en dtail. QGraphicsView.ScrollHandDrag dplacer l'image avec la souris ; La fonction wheel_event() : QGraphicsView.RubberBandDrag tirer un event.delta() nous retourne la rotation de la roulette en 1/8 rectangle de slection. de degr, la plupart des souris tant crantes tous les 15 nous divisons par 120 pour obtenir le nombre de crans, Relancez le script, zoomez et dplacez l'image, nous avons plus vident pour l'utilisateur. Autrement dit, "chaque cran construit une modeste visionneuse. = un niveau de zoom" ; event.delta() sera positif en cas de rotation vers l'avant de 7. Conclusions la souris et ngatif pour une rotation vers l'utilisateur. Nous avons vu ici, les outils lmentaires de Qt permettant une manipulation simple d'images avec peu de lignes de La fonction zoom() : Rcuprons tout d'abord les dimensions de notre pixmap code ainsi que les bases de la personnalisation d'interface. w_pix et h_pix. Appliquons ces dimensions notre facteur Toutefois, ceci n'est qu'un aperu des possibilits de Qt, des techniques plus pousses deviennent accessibles par d'agrandissement comme ceci : supposons une largeur de pixmap de 600 pxl, un pas de une tude des classes suivantes : zoom de 0.1 (valeur que vous dcidez vous-mme) et deux QtGui.QImage ; steps (crans de souris), nouvelle largeur = 600 * (1 + 0.1 * QtGui.QPixmap ; QtGui.QImageReader ; 2) QtGui.QImageWriter ; Maintenant, c'est ici que nous dcouvrons l'intrt d'avoir QtGui.QIcon ; conserv une instance de notre image originale, en effet, et QtGui.QMatrix. nous ne pouvons nous permettre de recharger l'image depuis le disque pour chaque saut de zoom et d'autre part, 8. Liens si nous redimensionnons directement notre pixmap nous Pour accder la documentation de l'ensemble des allons voir celle-ci se dgrader de faon exponentielle, classes : chaque redimensionnement amplifiant les erreurs du PyQt : Lien 122 ; prcdent. PySide : Lien 123. Pour vous en convaincre, modifiez le code comme ceci : Et bien sr, n'hsitez pas utiliser le forum pour dans la fonction zoom() remplacez commenter cet article ou poser vos questions : Forum self.pixmap = QtGui.QPixmap.fromImage( PyQt PySide (Lien 124).
self.current_image.scaled(w, h, QtCore.Qt.KeepAspectRatio, QtCore.Qt.FastTransformation))

Retrouvez l'article de Vincent Vande Vyvre en ligne : Lien 125

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 51

Visual Basic
Les derniers tutoriels et articles
xGUICOM : composant COM (GUI) portable pour langage Active Scripting (VBScript/JScript) Oubliez les applications HTML (HTA) pour dfinir les interfaces graphiques de vos scripts VBS/JS. xGUICOM est un composant WSC qui fournit une interface graphique aux langages de script capables d'exploiter les composants COM. Sa syntaxe est trs simple et familire aux utilisateurs du VBA. Le code du composant tant lui-mme crit en VBScript, xGUICOM peut tre adapt et complt sans difficult. Il est en outre totalement autonome puisqu'il ne requiert aucune inscription dans la base de registre. Enfin, un diteur visuel de ressources comme Resource Hacker (Lien 126) permet de concevoir rapidement et sans peine les botes de dialogue de cette interface.
1. Introduction Microsoft n'a pas jug utile de doter ses langages VBScript/Jscript de la facult de grer une interface graphique srieuse, y compris lorsque ceux-ci sont excuts dans le contexte Windows Script Host. ceux qui souhaitent, malgr tout, pouvoir en bnficier, l'diteur propose une solution partir de pages DHTML interprtes par le moteur de rendu d'Internet Explorer. xGUICOM vite ces deux cueils puisqu'il n'a pas besoin d'tre obligatoirement enregistr s'il est rfrenc par un moniker. Par ailleurs, si les mthodes traditionnelles de cration et d'ajout de contrles sont prsentes dans le composant, celui-ci a la capacit d'exploiter des ressources binaires cres par des diteurs externes, ce qui autorise une cration confortable et visuelle de la bote de dialogue. xGUICOM : composant COM (GUI) portable pour langage Active Scripting (VBScript/JScript)

Bien videmment, il ne s'agit pas de rivaliser avec des librairies comme QT ou wxWidgets mais plus Cette solution est clairement un pis-aller qui prsente, modestement de permettre l'criture rapide d'une interface mon sens, deux inconvnients majeurs : efficace pour des scripts ponctuels. Cette version 1.0 - le rendu final est susceptible de varier en fonction des supporte nanmoins une quinzaine de contrles de base volutions qui sont ou seront apportes au moteur de rendu dont vous trouverez la description dtaille ci-dessous. d'un produit aussi stratgique qu'IE ; - l'interprtation effective de la page n'est pas vraiment 2. Prsentation de xGUICOM conforme la logique de la programmation imprative suivie par le langage lui-mme et ncessite une criture xGUICOM se prsente sous la forme d'un Windows Script souvent verbeuse. Component (WSC), c'est--dire un composant COM crit dans un langage de script interprt, en l'occurrence le Pour y remdier, il existe dj sur le net plusieurs VBScript. C'est un simple fichier texte dnomm composants COM gratuits qui permettent la cration et la xGuiCom.wsc. Cela permet xGUICOM de proposer gestion d'une interface graphique : plusieurs niveaux d'utilisation : - WshDialog crit en VB6 qui utilise plusieurs autres - le niveau (trs) basique qui consiste traiter le dialogue composants ActiveX ce qui ne simplifie malheureusement cr par xGUICOM comme une MsgBox gante dont il pas le dploiement : Lien 127 ; reproduit le comportement sans se soucier de grer les - Quick prompts, simple, sans dpendances particulires, vnements de celui-ci ; mais limit par sa licence un usage non commercial : - le niveau intermdiaire qui s'attache grer les Lien 128 ; vnements dclenchs par les actions de l'utilisateur et de - WindowSystemObject (WSO) le composant de loin le rcuprer les valeurs des contrles avant la fermeture du plus puissant et complet (presque trop) offrant notamment dialogue ; la possibilit d'insrer les composants ActiveX visuels de - le niveau avanc qui ne concerne a priori qu'une petite son choix : Lien 129. La documentation est rigoureuse et minorit d'utilisateurs et qui consiste modifier complte mais uniquement en anglais (ou russe). directement le contenu du composant, soit pour le simplifier, soit au contraire pour y ajouter des Pourquoi un "yet another" alors qu'il existe une telle fonctionnalits comme de nouveaux vnements. Les offre ? Tout simplement parce que ces solutions prsentent sections 5 et 8 s'adressent tout particulirement ces toutes les mmes faiblesses : utilisateurs avancs ; - obligation pralable d'inscrire le composant dans la base de registre, sauf rdiger un manifest, mais la complexit xGUICOM cre ses botes de dialogues en faisant appel de l'interface ne facilite pas son criture ; l'API Win32 de Windows. La gestion des DLL est (pour plus de dtails, voir cet article : Lien 130) nativement impossible en VBScript et il est donc - la disposition des contrles dans la bote de dialogue se ncessaire de recourir un composant tiers pour y parvenir fait l'aveuglette ce qui rend trs pnible la cration des (DynamicWrapperX). Afin d'assurer son dploiement sans masques mme si le composant QuickPrompts propose un inscription dans la base de registre, le code du composant "automatic form layout" utile pour les dialogues simples. reprend la quasi-totalit du code dcrit dans un prcdent article : Lien 131. Seule la fonction de dcodage Base64 a
Numro 34 Juin - Juillet 2011 Page 52

Developpez Magazine est une publication de developpez.com

t lgrement modifie pour pouvoir renvoyer une Valeur retourne : numrique - ID du dialogue cr variable chane et pas seulement un fichier. (incrment automatique partir de zro). En cas d'erreur, renvoie -1. La section 3 (Lien 132) contient la documentation de rfrence pour la mise en uvre pratique du composant. Note : La section 4 (Lien 133) contient un bref tutoriel sur la La bote cre devient le dialogue courant. Toute mthode manire d'utiliser un diteur de ressources pour crer AddControl appele ultrieurement s'appliquera rapidement des botes de dialogue. Enfin, les sections 5 automatiquement ce dialogue. (Lien 134) et 8 (Lien 135) ne prsentent d'intrt que pour les dveloppeurs qui voudront adapter le composant leur 3.2.2. AddControl(iID, sClass, lLeft, lTop, lWidth, convenance. lHeight[, sData, iStyle]) Ajoute un contrle la bote de dialogue courante. Pour des raisons d'encombrement, le code des fichiers iID : numrique - identifiant unique entre 1..65535. binaires n'a pas t reproduit dans le script ci-dessous mais sClass : chane - nom de classe du contrle (casse il est prsent dans l'exemplaire tlchargeable dont le lien indiffrente). se trouve la section 6 : Lien 136. Noms supports : commandbutton ; optionbutton ; 3. Rfrence checkbox ; frame ; edit ; 3.1. Objet edpswd ; La conception d'xGUICOM s'carte volontairement du memo ; paradigme POO pour n'en conserver que le strict label ; minimum. Ainsi, le modle objet du composant est rduit image ; un objet racine Dialog dot de neuf mthodes et de sept listbox ; vnements. scrollbar ; combobox ; 3.1.1. Dialog hotkey ; ipcontrol ; L'instanciation de l'objet se fait au moyen du moniker de progressbar ; composant, c'est--dire un identifiant chane unique filedlgbox. compos de "script:" suivi du nom complet du fichier qui lLeft, lTop : numrique - coordonnes relatives de l'angle peut tre une URL et termin ventuellement par "#nomducomposant" si le fichier .wsc contient plusieurs haut gauche du contrle (twips). composants distincts. La connexion sortante de l'objet n'est lWidth, lHeight : numrique - largeur et hauteur du pas supporte dans cette configuration. Elle doit donc tre contrle (twips). ralise sparment au moyen de la fonction sData : chane - donnes initiales du contrle. ConnectObject afin de pouvoir grer les vnements dans iStyle : numrique - style propre du contrle. Valeur retourne : boolenne - True en cas de succs, le script client. False si l'ajout a chou. L'instanciation correcte de l'objet est ainsi assure en VBScript de la faon suivante (oDlg est le nom de Note : l'instance de l'objet Dialog et "ev_" le nom du prfixe) ou Selon les contrles concerns, la syntaxe de sData sera diffrente : son quivalent dans un autre langage : commandbutton, optionbutton, checkbox, frame, label : lgende du contrle, chane libre. Set oDlg = GetObject("script:" & Left(WScript.ScriptFullName,Len(WScript.ScriptFul edit, edpswd, memo : contenu initial du contrle, chane lName) - Len(WScript.ScriptName)) & libre. "xGuiCom.wsc") listbox, combobox : liste des items du contrle, chaque WScript.ConnectObject oDlg,"ev_" item est spar par le caractre |. (ex : "poire|pomme| cerise") 3.2. Mthodes hotkey : valeur initiale du contrle, syntaxe identique Les paramtres obligatoires sont mentionns en gras. Les celle de la fonction VbScript SendKeys. (ex : "{^%F2}" autres paramtres ne peuvent tre omis et doivent tre au quivaut Ctrl + Alt + F2) moins reprsents soit par une chane nulle, soit par la ipcontrol : valeur initiale du contrle, chane conforme au format IPv4. (ex : "120.52.255.255") valeur zro. filedlgbox : paramtres de la bote de dialogue fichier spars par le caractre | selon le format "caption|type| 3.2.1. CreateForm(sCaption, lLeft, lTop, lWidth, iodata|filename|initialdir|titre". lHeight) caption : chane, libell du bouton d'ouverture Cre une bote de dialogue vierge sans l'afficher. du dialogue fichier. sCaption : chane - titre de la bote. type : 0 = OpenFileDlgBox, 1 = lLeft, lTop : numrique - coordonnes relatives de l'angle SaveFileDlgBox. haut gauche du dialogue (twips). iodata : nom de variable ou ID du contrle lWidth, lHeight : numrique - largeur et hauteur du contenant les donnes en entre (open) ou en sortie (save). dialogue (twips).
Numro 34 Juin - Juillet 2011 Page 53

Developpez Magazine est une publication de developpez.com

filename : chane, nom de variable ou ID du contrle contenant le nom par dfaut du fichier. initialdir : chane, nom de variable ou ID du contrle contenant le rpertoire par dfaut. titre : chane, nom de variable ou ID du contrle contenant le titre du dialogue. image, scrollbar, progressbar : non exploit, peut tre une chaine nulle. Par dfaut, il est assign un style standard pour chaque contrle et iStyle est alors gal zro. Le contrle listbox est une liste classe et dot d'un ascenseur vertical, le contrle combobox est du type dropdown avec ascenseur vertical. Il est possible d'assigner une combinaison diffrente de styles au contrle en donnant au paramtre iStyle une valeur suprieure zro. Nanmoins, iStyle peut avoir une signification particulire pour certains contrles. (voir infra) 3.2.3. LoadLayoutFromRes(sData) Cre une bote de dialogue avec ses contrles partir de ressources binaires issues d'un diteur externe. sData : chane - nom de constante ou nom de fichier contenant les ressources. S'il s'agit d'une constante du script, les ressources sont codes en Base64. Valeur retourne : numrique - ID du dialogue cr (incrment automatique partir de zro). En cas d'erreur, renvoie un nombre ngatif : -1 : objets ADO.Stream et FileSystem absents si sData est un nom de fichier existant ; -2 : fichier et constante inexistants ; -3 : format fichier binaire incorrect ; -4 : erreur initialisation.

hWndDlg : numrique - handle de la bote de dialogue ; Valeur retourne : dpend de la nature du contrle (voir infra pour chaque contrle). Si erreur renvoie VbNull. Note : cette mthode permet notamment lors de l'vnement Close de rcuprer les valeurs de certains contrles du dialogue. S'applique aux contrles OptionButton, CheckBox, Frame, Edit, EdPswd, Memo, ListBox, ComboBox, Image, HotKey et IPControl. 3.2.6. SetValueFromID(iID, hWndDlg, vData) Assigne la valeur sData au contrle iID contenu dans le dialogue d'handle hWndDlg. iID : numrique - identifiant du contrle ; hWndDlg : numrique - handle de la bote de dialogue ; vData : chane/numrique - valeur assigne au contrle, elle dpend de sa nature (voir infra pour chaque contrle) ; Valeur retourne : True ou False en cas d'erreur. Note : cette mthode est particulirement utile lors des vnements Create, Click ou Change pour mettre jour certains contrles du dialogue. S'applique aux contrles OptionButton, CheckBox, Frame, Edit, EdPswd, Memo, ListBox, ComboBox, Image, HotKey et IPControl. 3.2.7. AddItem(iID, hWndDlg, sData, iIndex)

Ajoute un item sData un contrle ListBox ou ComboBox au rang d'iIndex. Si iIndex = -1, l'item sera plac en fin de liste. iID : numrique - identifiant du contrle ; hWndDlg : numrique - handle de la bote de dialogue ; sData : chane - contenu de l'item ; iIndex : rang d'insertion de l'item (base 0) ; Note : Valeur retourne : rang effectif de l'item insr ou -1 si La bote cre devient le dialogue courant. Toute mthode erreur. AddControl appele ultrieurement s'appliquera automatiquement ce dialogue. 3.2.8. RemoveItem(iID, hWndDlg, iIndex) 3.2.4. Show(iIDD, bOnTaskBar) Retire un item sData de rang iIndex d'un contrle ListBox ou ComboBox. Affiche la bote de dialogue portant l'ID correspondant. iID : numrique - identifiant du contrle ; iIDD : numrique - identifiant de la bote de dialogue hWndDlg : numrique - handle de la bote de dialogue ; pralablement cre par la mthode CreateForm ou iIndex : rang de l'item supprimer (base 0) ; LoadLayoutFromRes. Valeur retourne : nombre d'items aprs suppression ou bOnTaskBar : boolen - flag d'affichage du script dans la -1 si erreur. barre des tches, True = affich False = non affich, par dfaut False. 3.2.9. BinToB64(sFileName) Valeur retourne : numrique -1 : erreur ; Convertit un fichier binaire en une chane au format B64. 0 : fermeture bouton systme ; sFileName : nom complet du fichier binaire cible ; 1 : fermeture bouton par dfaut ; Valeur retourne : chane au format B64 contenant les 2 : fermeture touche Esc ou bouton "Annuler"; donnes binaires. 3..7 : ID du bouton contrle actionn. Note : cette mthode n'a pas de rapport direct avec la Note : gestion de la bote de dialogue. Sa prsence permet de Les valeurs renvoyes reproduisent le comportement de la simplifier l'intgration d'un dialogue sous forme binaire au bote de dialogue native de VbScript appele par la sein d'un script client (voir l'exemple fourni fonction MsgBox. Cela implique qu'il existe des valeurs BuildConstFromBin.vbs). rserves pour le choix des ID (voir infra). 3.3. Evnements 3.2.5. GetValueFromID(iID, hWndDlg) Lit la valeur du contrle iID contenu dans le dialogue 3.3.1. Launch d'handle hWndDlg. ventuellement dclench lors du premier appel des iID : numrique - identifiant du contrle ; mthodes CreateForm et LoadLayoutFromRes. Il ne sera
Numro 34 Juin - Juillet 2011 Page 54

Developpez Magazine est une publication de developpez.com

pas activ si le composant COM DynamicWapperX est 3.3.6. Open(iIDD, hWndDlg, iID, sFileName) dj enregistr dans la base de registre. Dclench aprs la fermeture du dialogue systme permettant de slectionner un fichier ouvrir. Si ce composant DynamicWapperX n'a pas t enregistr, iIDD : numrique - identifiant unique du dialogue de zro l'vnement doit alors imprativement tre gr par le n. code VBScript suivant ("ev_" est un prfixe arbitraire) ou hWndDlg : numrique - handle de la fentre de dialogue. son quivalent dans un autre langage : iID : numrique - identifiant unique du contrle qui est l'origine de l'vnement. Sub ev_Launch sFileName : chane - nom complet du fichier qui a t Set oShell = CreateObject("WScript.Shell") slectionn par l'utilisateur. oShell.Run "WScript.exe " & Chr(34) &
WScript.ScriptFullName & Chr(34) WScript.Quit End Sub

3.3.7. Save(iIDD, hWndDlg, iID, sFileName) Dclench aprs la fermeture du dialogue systme permettant de slectionner un nom de fichier sauvegarder. iIDD : numrique - identifiant unique du dialogue de zro n. hWndDlg : numrique - handle de la fentre de dialogue. iID : numrique - identifiant unique du contrle qui est l'origine de l'vnement. sFileName : chane - nom complet du fichier qui a t slectionn par l'utilisateur. 3.4. Contrles Les contrles dcrits dans la prsente section sont ceux reconnus par la mthode AddControl. Il en existe d'autres qui peuvent tre crs par un diteur de ressources et qui seront reconnus par la mthode LoadLayoutFromRes. Toutefois, le code du composant devra tre complt pour permettre leur gestion spcifique. 3.4.1. CommandButton Bouton de commande destin tre actionn ou cliqu par l'utilisateur. iID : choix libre entre 1 et 65535. Les valeurs 1 7 permettent de crer des boutons de fermeture et d'muler ainsi le comportement de la fonction MsgBox. Les boutons crs avec des valeurs suprieures 7 ne dclencheront que l'vnement Click.

3.3.2. Create(iIDD, hWndDlg) Dclench lors de la cration effective de la bote de dialogue par Windows. Les contrles existent et il est donc possible de les initialiser avec des valeurs diffrentes de celles dfinies par AddControl ou par les donnes de ressources binaires. iIDD : numrique - identifiant unique du dialogue de zro n. hWndDlg : numrique - handle de la fentre de dialogue. Attention, seule la mthode Show cre une bote de dialogue. Comme son nom ne l'indique pas, la mthode CreateForm construit seulement une structure de donnes complte par AddControl qui sera ensuite exploite par Show. 3.3.3. Close(iIDD, hWndDlg,iID) Dclench la fermeture de la bote de dialogue avant sa destruction. Comme la fentre existe encore ce stade, c'est l'endroit idal pour lire les valeurs utiles du dialogue entres ou slectionnes par l'utilisateur. iIDD : numrique - identifiant unique du dialogue de zro n. hWndDlg : numrique - handle de la fentre de dialogue. iID : numrique - identifiant unique du contrle qui est l'origine de la fermeture. Si c'est le bouton de la barre systme, iID sera gal zro. Cette valeur est galement retourne par la mthode Show.

sData : chane - lgende du bouton de commande, le raccourci clavier est prcd du caractre &. 3.3.4. Click(iIDD, hWndDlg, iID) iStyle : une valeur gale zro assigne un style standard Dclench par l'action du l'utilisateur sur un contrle au bouton. Une valeur gale un dfinit le bouton par grant cet vnement. Les contrles concerns sont dfaut. Pour modifier en profondeur le style du contrle, se reporter la documentation MSDN Library. CommandButton, OptionButton, CheckBox et Frame. iIDD : numrique - identifiant unique du dialogue de zro 3.4.2. OptionButton n. hWndDlg : numrique - handle de la fentre de dialogue. Bouton radio permettant de dfinir des options iID : numrique - identifiant unique du contrle qui est alternatives. utiliser par groupe de deux minimum. l'origine de l'vnement. iID : choix libre entre 8 et 65535. sData : chane - lgende du bouton radio, le raccourci clavier est prcd du caractre &. Dclench par un changement de la valeur d'un contrle iStyle : une valeur gale un initialise le bouton en lui grant cet vnement. Les contrles concerns sont Edit, donnant le statut slectionn. Pour modifier en profondeur le style du contrle, se reporter la documentation MSDN EdPswd, Memo et ListBox. iIDD : numrique - identifiant unique du dialogue de zro Library. n. hWndDlg : numrique - handle de la fentre de dialogue. GetValueFromID : numrique - lit le statut du bouton iID : numrique - identifiant unique du contrle qui est 0 : non press, 1 : press. vData : numrique - fixe le statut du bouton - 0 : non l'origine de l'vnement. 3.3.5. Change(iIDD, hWndDlg, iID)
Numro 34 Juin - Juillet 2011 Page 55

Developpez Magazine est une publication de developpez.com

press, 1 : press.

iStyle : par dfaut zro, pour modifier en profondeur le style du contrle, se reporter la documentation MSDN Il est ncessaire de regrouper ces contrles dans un Library. contrle Frame. Il suffit de les ajouter immdiatement aprs un Frame. GetValueFromID : chane - lit la premire ligne du champ. vData : chane - remplace la premire ligne du champ par 3.4.3. CheckBox vData. Case cocher permettant de slectionner des paramtres. iID : choix libre entre 8 et 65535. 3.4.8. Label sData : chane - lgende de la case cocher, le raccourci clavier est prcd du caractre &. Texte statique permettant notamment de placer une iStyle : une valeur gale un initialise la case en lui lgende pour les contrles qui ne le grent pas. donnant le statut coch. Pour modifier en profondeur le iID : choix libre entre 8 et 65535. style du contrle, se reporter la documentation MSDN sData : chane - contenu du contrle, le raccourci clavier Library. est prcd du caractre &. iStyle : par dfaut zro, pour modifier en profondeur le GetValueFromID : numrique - lit le statut du bouton - style du contrle, se reporter la documentation MSDN 0 : non press, 1 : press. Library. vData : numrique - fixe le statut du bouton - 0 : non press, 1 : press. 3.4.9. Image Affiche une image stocke dans un fichier au format bmp. iID : choix libre entre 8 et 65535. Cadre permettant de regrouper visuellement des contrles sData : chane - nom complet du fichier contenant l'image. dans le dialogue. Ce contrle est indispensable pour grer iStyle : par dfaut zro, pour modifier en profondeur le les groupes de contrles OptionButton. style du contrle, se reporter la documentation MSDN iID : choix libre entre 8 et 65535. Library. sData : chane - lgende du cadre (facultatif), le raccourci clavier est prcd du caractre &. GetValueFromID : chane - renvoie le nom complet du iStyle : par dfaut zro, pour modifier en profondeur le fichier bmp affich. style du contrle, se reporter la documentation MSDN vData : chane - nom complet du nouveau fichier bmp Library. afficher. 3.4.4. Frame 3.4.5. Edit Contrle permettant l'dition de valeurs alphanumriques sur une seule ligne. iID : choix libre entre 8 et 65535. sData : chane - valeur initiale du contrle. iStyle : par dfaut zro, pour modifier en profondeur le style du contrle, se reporter la documentation MSDN Library. GetValueFromID : chane - lit le contenu du champ. vData : chane - remplace le contenu du champ par vData. 3.4.6. EdPswd Contrle identique au prcdent l'exception des caractres masqus, ce qui le destine la saisie des mots de passe. iID : choix libre entre 8 et 65535. sData : chane - valeur initiale du contrle. iStyle : par dfaut zro, pour modifier en profondeur le style du contrle, se reporter la documentation MSDN Library. 3.4.10. ListBox Contrle affichant une liste d'items et permettant leur slection par l'utilisateur. Suivant les dimensions de ce contrle, une partie seulement de la liste sera affiche la fois. iID : choix libre entre 8 et 65535. sData : chane - liste des items spars par le caractre |. iStyle : par dfaut zro, la liste est ordonne et n'autorise qu'une seule slection, pour modifier en profondeur son style, se reporter la documentation MSDN Library. GetValueFromID : chane - lit l'item slectionn. vData : numrique - place le curseur sur l'item d'indice vData (base zro). 3.4.11. ScrollBar

Contrle affichant un curseur coulissant dans une barre afin de permettre d'afficher l'tat d'une action ou de laisser l'utilisateur agir par le biais d'une souris. iID : choix libre entre 8 et 65535. sData : numrique - . iStyle : une valeur gale zro dfinit une barre GetValueFromID : chane - lit le contenu du champ. horizontale, une valeur gale un, une barre verticale. vData : chane - remplace le contenu du champ par vData. Pour modifier en profondeur son style, se reporter la documentation MSDN Library. 3.4.7. Memo Sa mise en uvre suppose une gestion des notifications Contrle identique au contrle Edit l'exception de la envoyes par le contrle. Cette gestion dpend troitement saisie qui peut s'effectuer sur plusieurs lignes. des objectifs recherchs. Aussi ce composant ne propose iID : choix libre entre 8 et 65535. pas de code gnrique et il appartient l'utilisateur de sData : chane - valeur initiale du contrle. l'crire.
Numro 34 Juin - Juillet 2011 Page 56

Developpez Magazine est une publication de developpez.com

3.4.12. ComboBox Contrle affichant une liste droulante d'items et l'affichage particulier de l'item slectionn. iID : choix libre entre 8 et 65535. sData : chane - liste des items spars par le caractre |. iStyle : par dfaut zro, la liste n'est pas modifiable et droulante, pour modifier en profondeur son style, se reporter la documentation MSDN Library. GetValueFromID : chane - lit l'item slectionn. vData : numrique - place le curseur sur l'item d'indice vData (base zro). 3.4.13. HotKey Contrle affichant un raccourci clavier et facilitant son dition directement par l'utilisateur. iID : choix libre entre 8 et 65535. sData : chane - raccourci clavier selon le format reconnu par la fonction SendKeys. iStyle : par dfaut zro, pour modifier en profondeur son style, se reporter la documentation MSDN Library. GetValueFromID : chane - lit le raccourci du champ. vData : chane - remplace le raccourci existant par celui dfini dans vData (format syntaxe SendKeys()). 3.4.14. IPControl Contrle affichant une adresse selon le format IPv4 et facilitant son dition par l'utilisateur. iID : choix libre entre 8 et 65535. sData : chane - adresse IPv4 conforme soit quatre groupes de trois chiffres spars par un point. iStyle : par dfaut zro, pour modifier en profondeur son style, se reporter la documentation MSDN Library.

dialogue fichier. type : 0 = OpenFileDlgBox, 1 = SaveFileDlgBox. iodata : nom de variable ou ID du contrle contenant les donnes en entre (open) ou en sortie (save). filename : chane, nom de variable ou ID du contrle contenant le nom par dfaut du fichier. initialdir : chane, nom de variable ou ID du contrle contenant le rpertoire par dfaut. titre : chane, nom de variable ou ID du contrle contenant le titre du dialogue. iStyle : une valeur gale zro assigne un style standard au bouton. Une valeur gale un dfinit le bouton par dfaut. Pour modifier en profondeur le style du contrle, se reporter la documentation MSDN Library. 4. Cration de botes de dialogue avec l'diteur de ressources La possibilit de dfinir visuellement les botes de dialogue est un avantage notable de xGUICOM. Pour illustrer cette fonctionnalit, j'ai retenu l'diteur Resource Hacker bien connu de tous les bidouilleurs. Comme il ne permet pas de crer un fichier ressource .res mais seulement de modifier un fichier existant, le pack tlcharger contient un fichier Dialog.res comportant une dialogbox comme seule ressource. L'ajout et le positionnement des contrles se font la souris de faon intuitive. Cet article n'est pas une initiation ce logiciel et il convient de se reporter l'aide pour plus de dtails. L'utilisateur constatera que Resource Hacker propose sur sa palette plusieurs contrles qui ne figurent pas dans la liste de xGUICOM comme SysTreeView32, SysMonthCal32 ou encore SysTabControl32. Ces contrles seront accepts et affichs par xGUICOM mais il appartient l'utilisateur de complter le code de la DialogProc afin de grer les notifications et messages qui leur sont spcifiques.

GetValueFromID : chane - lit le contenu du champ. vData : chane - remplace le contenu du champ par vData. Aprs avoir dfini les contrles et leurs ID, la dialogbox peut alors tre compile puis enregistre dans un fichier sous forme binaire et non comme une ressource (cf. 3.4.15. ProgressBar menu Action). Le nom du fichier est ensuite fourni comme Contrle permettant d'afficher visuellement la progression paramtre de la mthode LoadLayoutFromRes. Ces d'une opration normalement invisible. donnes peuvent galement tre conserves sous la forme iID : choix libre entre 8 et 65535. d'une constante dont le contenu cod en Base64 sera insr sData : numrique - (non gr). dans le script client. Pour faciliter cette mise en uvre, iStyle : par dfaut zro, pour modifier en profondeur son l'exemple fourni dans le pack (BuildConstFromBin.vbs) style, se reporter la documentation MSDN Library. permet justement de crer ou de complter un script vbs partir d'un fichier binaire. Sa mise en uvre requiert la cration d'un timer grant l'tat d'avancement de l'opration dcrite par le contrle. Le champ texte de chaque contrle permet d'y ajouter les La nature de ce timer tant troitement lie ladite valeurs dcrites dans la section rfrence. Deux contrles opration, ce composant ne propose pas de code gnrique prsentent une particularit : et il appartient l'utilisateur de l'crire. - Image (ou Bitmap) : le style WS_TABSTOP doit imprativement tre dfini ; - FileDlgBox : ce contrle n'existe pas rellement et doit Contrle affichant un bouton de commande destin tre tre remplac par le contrle CommandButton. C'est le actionn ou cliqu par l'utilisateur. Lorsqu'il est sollicit, le format du texte (caption|type) qui permettra xGUICOM contrle affiche un dialogue systme, soit pour ouvrir un de l'identifier comme un FileDlgBox. fichier, soit pour le sauvegarder. Resource Hacker, malgr ses qualits, est un programme iID : choix libre entre 8 et 65535. sData : chane - paramtres de la bote de dialogue fichier dj ancien qui n'est plus mis jour par son auteur. Il ne spars par le caractre | selon le format "caption|type| prend pas en compte les contrles plus rcents comme IPControl qui est reconnu par xGUICOM. Le deuxime iodata|filename|initialdir|titre". caption : chane, libell du bouton d'ouverture du lien concerne un diteur dnomm Resourcer911 ou 3.4.16. FileDlgBox
Numro 34 Juin - Juillet 2011 Page 57

Developpez Magazine est une publication de developpez.com

TrueResourcer qui est un peu plus complet et qui autorise outre le paramtre title dfinissant la lgende, recevoir une galement la sauvegarde individuelle d'une ressource sous valeur numrique au moyen du paramtre style que l'on forme binaire. dfinira aussi bien avec AddControl qu'avec un diteur. Label, Frame, Edit, Edpswd et Memo peuvent recevoir le paramtre chane title qui sera pris en compte sans Il est considr comme acquis que le lecteur maitrise les traitement particulier. principes de base de la programmation Win32. 5. Analyse L'interface xGUICOM est constitue par des botes de dialogue modales gnres par l'API de Windows. Leur logique de fonctionnement est celle dcrite dans le chapitre "Dialog Boxes" de la documentation MSDN Library. En consquence, toute la partie navigation dans l'interface est gre automatiquement par le dialogue ce qui permet d'allger le code. Comme le dialogue modal devait pouvoir tre cr partir de donnes du script et qu'il devait tre galement possible d'initialiser simplement les contrles, le choix de la fonction DialogBoxIndirectParam s'imposait. Aprs son instanciation, le composant doit appeler une fois la fonction Initialize. Cette dernire permet d'une part, d'assurer l'instanciation du composant DynamicWrapperX quel que soit le contexte, selon une technique dcrite dans cet article (Lien 137) et d'autre part, de dfinir les diffrentes variables globales ncessaires son fonctionnement. Cet appel est assur par les mthodes CreateForm ou LoadLayoutFromRes. Les donnes de chaque bote de dialogue sont conserves dans deux buffers chane organiss en tableau, chaque dialogue correspondant un lment de celui-ci. Le premier, DLGTEMPLATEEX(), stocke les structures DLGTEMPLATEEX et DLGITEMTEMPLATEEX dfinies par Microsoft et attendues par la fonction API DialogBoxIndirectParam - pour plus de dtails, voir MSDN Library - et le second aDataDlg() conserve les donnes d'initialisation de certains contrles qui seront traites lors du premier appel de la DialogProc (cf. infra). La taille de ces buffers a t dfinie arbitrairement 8192 octets et devra tre ventuellement augmente si les masques comportent de nombreux contrles. Les donnes issues des ressources binaires charges par LoadLayoutFromRes sont sauvegardes dans le buffer par la fonction ParseBinRes et celles provenant d'AddControl par la fonction BuildDataDlg. - Initialisation des contrles Certains contrles peuvent recevoir une valeur initiale qu'il est intressant de grer lors de la dfinition des contrles au lieu d'obliger le concepteur programmer manuellement cette initialisation lors de l'vnement Create. Elle doit tre effective aussi bien en cration manuelle avec la mthode AddControl qu'avec la cration assiste par un diteur de ressources. CommandButton, OptionButton et CheckBox peuvent, ListBox, Image, ComboBox, HotKey, IPControl et FileDlgBox ncessitent un code d'initialisation. ListBox : les donnes du paramtre title sont accessibles lors de l'appel initial de la DialogProc avec le message WM_INITDIALOG. La chane est dcoupe en items qui alimentent la liste. Image : les donnes du paramtre title sont galement disponibles. Il doit s'agir du nom complet d'un fichier contenant l'image afficher au format bmp. La mise jour est effectue dans la DialogProc. ComboBox, HotKey, IPControl : pour des raisons lies l'interprtation du contenu, le paramtre title n'est pas conserv lors de l'appel initial. Il est donc ncessaire de sauvegarder les donnes dans un buffer avant d'appeler la fonction DialogBoxIndirectParam. Les fonctions ParseHotKey et ParseIPStr assurent l'encodage de ces donnes dans un format comprhensible pour ces contrles. FileDlgBox : il s'agit d'un pseudo-contrle qui est trait comme un CommandButton. Le paramtre title contient les donnes du dialogue systme. Elles seront traites chaque fois que l'utilisateur actionne le contrle bouton par la fonction BuildOpenFileName. La fonction DialogProc est strictement celle dcrite dans la documentation de la fonction API DialogBoxIndirectParam. Elle reoit les notifications des contrles et permet de dfinir les vnements que l'on souhaite transmettre au script client. Son appel, lors de la cration du dialogue, permet d'initialiser les contrles qui ncessitent un code spcifique. 6. Liens Tlchargement du pack complet : composant, exemple et fichier ressource : Lien 138. Site Resource Hacker : Lien 139. Editeur Resourcer911 : Lien 140. 7. Le script VBS Les composants WSC ne supportent pas les caractres accentus lorsqu'ils ne sont pas sauvegards en Unicode. Les commentaires sont donc volontairement dpourvus de toute accentuation. Retrouvez directement le script complet cette adresse : Lien 141 Retrouvez l'article d'omen999 en ligne : Lien 142

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 58

Liens
Lien 01 : http://www.developpez.com/actu/23766/Java-SE-7-Oracle-invite-la-Fondation-Apache-a-reconsiderer-sa-position-honorez-vosengagements-repond-la-Fondation/ Lien 02 : http://www.developpez.com/actu/33040/Android-Oracle-demanderait-des-dommages-et-interets-superieurs-aux-revenus-generes-par-l-OSdepuis-son-lancement/ Lien 03 : http://javaweb.developpez.com/actu/32175/Java-Oracle-veut-faire-evoluer-le-Java-Community-Process-vers-plus-de-transparence-dereactivite-et-d-agilite/ Lien 04 : http://jcp.org/en/jsr/results?id=5207 Lien 05 : http://www.developpez.net/forums/d1001119/java/general-java/specifications-java-se-7-8-adoptees-jcp-jdk-7-atteint-stade-feature-complete/ Lien 06 : http://www.developpez.com/actu/23364/Oracle-prepare-une-version-Premium-payante-de-la-Java-Virtual-Machine-elle-sera-issue-de-lafusion-de-JRockit-et-de-HotSpot/ Lien 07 : http://www.oracle.com/technetwork/middleware/jrockit/downloads/index.html Lien 08 : http://blogs.oracle.com/henrik/entry/jrockit_is_now_free_and Lien 09 : http://www.developpez.net/forums/d1084985/java/general-java/java-machine-virtuelle-jrockit-doracle-devient-gratuite/ Lien 10 : http://www.scala-lang.org/node/9483 Lien 11 : http://www.scala-ide.org/2011/05/scala-ide-beta-4-available/ Lien 12 : http://typesafe.com/ Lien 13 : http://akka.io/ Lien 14 : http://www.scala-ide.org/ Lien 15 : http://www.developpez.net/forums/d1082106/java/general-java/langage/scala/sortie-scala-2-9-0-final/ Lien 16 : http://khayyam.developpez.com/articles/web/gwt/bundle/ Lien 17 : http://developer.android.com/sdk/index.html Lien 18 : http://www.eclipse.org/downloads/ Lien 19 : http://java.sun.com/javase/downloads/index.jsp Lien 20 : https://dl-ssl.google.com/android/eclipse/ Lien 21 : http://developer.android.com/guide/topics/intents/intents-filters.html Lien 22 : http://developer.android.com/reference/android/view/ViewGroup.html Lien 23 : http://developer.android.com/reference/android/app/Activity.html Lien 24 : http://nbenbourahla.developpez.com/tutoriels/android/introduction-programmation-android/ Lien 25 : http://nbenbourahla.developpez.com/tutoriels/android/comprendre-corriger-erreurs-application/ Lien 26 : http://msdn.microsoft.com/fr-fr/asp.net/ff796201 Lien 27 : http://weblogs.asp.net/scottgu/ Lien 28 : http://nicolasesprit.developpez.com/tutoriels/dotnet/nouveautes-asp-net-mvc-3/ Lien 29 : http://rdonfack.developpez.com/tutoriels/web/webmatrix-decouverte-et-prise-main-outil-developpement-web-gratuit-tout/ Lien 30 : http://braincracking.org/?p=597 Lien 31 : http://braincracking.org/ Lien 32 : http://braincracking.org/2011/02/19/etat-des-lieux-de-l%E2%80%98accessibilite-de-html5/ Lien 33 : http://www.w3.org/TR/html5/content-models.html#annotations-for-assistive-technology-products-aria Lien 34 : https://www.readability.com/ Lien 35 : http://www.html5accessibility.com/ Lien 36 : http://code.google.com/p/html5shim/ Lien 37 : http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/ Lien 38 : http://webaim.org/projects/screenreadersurvey/ Lien 39 : http://dev.opera.com/articles/view/more-accessible-html5-video-player/#wai-aria Lien 40 : http://praegnanz.de/html5video/ Lien 41 : http://www.w3.org/TR/html5/sections.html#outlines Lien 42 : http://code.google.com/p/h5o/ Lien 43 : http://www.freedomscientific.com/fs_products/software_jaws.asp Lien 44 : http://www.gwmicro.com/Window-Eyes/ Lien 45 : http://www.nvda-project.org/ Lien 46 : https://addons.mozilla.org/fr/firefox/addon/juicy-studio-accessibility-too/ Lien 47 : http://jpvincent.developpez.com/tutoriels/xhtml/etat-lieux-accessibilite-html5/ Lien 48 : http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/ Lien 49 : http://sohtanaka.developpez.com/tutoriels/css/creer-listes-ordonnees-attrayantes-css/fichiers Lien 50 : http://jquery.com/ Lien 51 : http://sohtanaka.developpez.com/tutoriels/css/creer-listes-ordonnees-attrayantes-css/ Lien 52 : http://www.ibm.com/developerworks/xml/library/j-sparql/ Lien 53 : http://www.w3.org/TR/rdf-sparql-query/ Lien 54 : http://www.w3.org/TR/rdf-sparql-protocol/ Lien 55 : http://www.w3.org/2001/sw/DataAccess/ Lien 56 : http://www.developpez.net/forums/redirect-to/?redirect=http%3A%2F%2Fjena.sourceforge.net%2FARQ%2FTutorial%2F Lien 57 : http://www.ilrt.bris.ac.uk/discovery/2004/01/turtle/ Lien 58 : http://www.w3.org/2000/10/swap/Primer Lien 59 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/vc-db-1.rdf Lien 60 : http://www.ietf.org/rfc/rfc2426.txt Lien 61 : http://www.w3.org/TR/vcard-rdf/ Lien 62 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q1.rq Lien 63 : http://jena.sourceforge.net/ARQ/cmds.html Lien 64 : http://www.cygwin.com/ Lien 65 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-bp1.rq Lien 66 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-bp2.rq Lien 67 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-bp3.rq Lien 68 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-bp4.rq Lien 69 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-f1.rq Lien 70 : http://www.w3.org/TR/xpath-functions/#regex-syntax Lien 71 : http://jakarta.apache.org/oro/ Lien 72 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/vc-db-2.rdf Lien 73 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-f2.rq Numro 34 Juin - Juillet 2011 Page 59

Developpez Magazine est une publication de developpez.com

Lien 74 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-opt1.rq Lien 75 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/vc-db-2.rdf Lien 76 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-opt2.rq Lien 77 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-opt3.rq Lien 78 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-opt4.rq Lien 79 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/vc-db-3.ttl Lien 80 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-union1.rq Lien 81 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-union1alt.rq Lien 82 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-union2.rq Lien 83 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-union3.rq Lien 84 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/basic_patterns.html Lien 85 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/optionals.html Lien 86 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/union.html Lien 87 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/ds-dft.ttl Lien 88 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/ds-ng-1.ttl Lien 89 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/ds-ng-2.ttl Lien 90 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-ds-1.rq Lien 91 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-ds-2.rq Lien 92 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-ds-3.rq Lien 93 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-ds-4.rq Lien 94 : ftp://ftp-developpez.com/web-semantique/tutoriels/jena/arq/introduction-sparql/fichiers/q-ds-5.rq Lien 95 : http://web-semantique.developpez.com/tutoriels/jena/arq/introduction-sparql/ Lien 96 : http://trac.enlightenment.org/e/wiki/EFLxx Lien 97 : http://trac.enlightenment.org/e/wiki/Python Lien 98 : http://www.enlightenment.org/?p=about/sponsors Lien 99 : http://docs.enlightenment.org/auto/eina/ Lien 100 : http://svn.enlightenment.org/svn/e/trunk/EXAMPLES/eet_connection/ Lien 101 : http://docs.enlightenment.org/auto/eet/ Lien 102 : http://docs.enlightenment.org/auto/evas/ Lien 103 : http://docs.enlightenment.org/auto/ecore/ Lien 104 : http://docs.enlightenment.org/auto/edje/ Lien 105 : http://trac.enlightenment.org/e/wiki/Elementary Lien 106 : http://packages.enlightenment.org/windows/Efl-1.0.0.exe Lien 107 : http://packages.enlightenment.org/windows/#filelist Lien 108 : http://trac.enlightenment.org/e/wiki/Installation_MacOSX Lien 109 : http://omicron.homeip.net/projects/easy_e17/easy_e17.sh Lien 110 : http://dev.enlightenment.fr/%7Ecaptainigloo/ Lien 111 : http://trac.enlightenment.org/e/wiki/Installation Lien 112 : http://docs.enlightenment.org/auto/edje/edcref.html Lien 113 : http://trac.enlightenment.org/e/wiki/EdjeProgram Lien 114 : http://louis-du-verdier.developpez.com/efl/debuter/ Lien 115 : http://www.forum.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Lien 116 : http://get.qt.nokia.com/qt/add-ons/qt-mobility-opensource-src-1.1.3.zip Lien 117 : http://www.developpez.net/forums/d1028859/c-cpp/bibliotheques/qt/qt-sdk-1-1-disponible-beta/ Lien 118 : http://sourceforge.net/projects/qwt/ Lien 118 : http://www.developpez.net/forums/d1071111/c-cpp/bibliotheques/qt/outils/bibliotheques/qwt/sortie-qwt-6-0-0-a/ Lien 119 : http://qt.gitorious.org/qt. Lien 120 : http://blog.developpez.com/dourouc05/p9961/qt/qt-5/quelques-pensees-sur-qt-5-quelles-seront/ Lien 121 : http://www.riverbankcomputing.co.uk/static/Docs/PyQt4/html/qt.html#ImageConversionFlag-enum Lien 122 : http://www.riverbankcomputing.co.uk/static/Docs/PyQt4/html/classes.html Lien 123 : http://www.pyside.org/docs/pyside/ Lien 124 : http://www.developpez.net/forums/d1073725/autres-langages/python-zope/gui/pyside-pyqt/utilisation-dimages-pyqt/ Lien 125 : http://vincent-vande-vyvre.developpez.com/tutoriels/pyqt/manipulation-images/ Lien 126 : http://www.angusj.com/resourcehacker/ Lien 127 : http://home.hccnet.nl/p.vd.klugt/ Lien 128 : http://www.toptensoftware.com/quickprompts/ Lien 129 : http://www.veretennikov.org/Default.aspx?f=WSO%2FDefault.aspx Lien 130 : http://omen999.developpez.com/tutoriels/vbs/RegFreeSxS/ Lien 131 : http://omen999.developpez.com/tutoriels/vbs/deployBin/ Lien 132 : http://omen999.developpez.com/tutoriels/vbs/xGUICOM/?page=page_1#s3 Lien 133 : http://omen999.developpez.com/tutoriels/vbs/xGUICOM/?page=page_1#s4 Lien 134 : http://omen999.developpez.com/tutoriels/vbs/xGUICOM/?page=page_1#s5 Lien 135 : http://omen999.developpez.com/tutoriels/vbs/xGUICOM/?page=page_2#s8 Lien 136 : http://omen999.developpez.com/tutoriels/vbs/xGUICOM/?page=page_1#s6 Lien 137 : http://omen999.developpez.com/tutoriels/vbs/deployBin/ Lien 138 : ftp://ftp-developpez.com/omen999/tutoriels/vbs/xGUICOM/fichiers/xGuiCom10.zip Lien 139 : http://www.angusj.com/resourcehacker/ Lien 140 : http://www.soft-universe.com/file/Resourcer911.2009-10-23.zip Lien 141 : http://omen999.developpez.com/tutoriels/vbs/xGUICOM/?page=page_2 Lien 142 : http://omen999.developpez.com/tutoriels/vbs/xGUICOM/

Developpez Magazine est une publication de developpez.com

Numro 34 Juin - Juillet 2011 Page 60

You might also like