Mini-projet XML/IHM Gestion d emplois du temps I3 - option SI

Mini-projet XML/IHM Gestion d emplois du temps I3 - option SI Olivier Beaudoux 4 septembre 2008 1 Introduction 1.1 Propos Dans ce mini-projet, nous proposons de construire différentes briques logicielles permettant de définir, de visualiser, d interroger et d éditer des emplois du temps. Le schéma de principe suivant synthétise le processus de gestion des emplois du temps à mettre en œuvre : Editeur XML dédié (C# - WPF) DOM Semaine37.xml XMLSchema XSLT SchemaEdT.xsd résultat validation SVG EdTversSVG.xsl Fonctions.xsl ModelesSVG.xsl XSLT RequetesXPath.xsl résultat requêtes 1

1. L emploi du temps relatif à la semaine 37 de la classe préparatoire P1B est renseigné dans le document Semaine37.xml. L emploi du temps est édité au travers d une application WPF écrite en C#. Elle utilise le processeur DOM de la plateforme.net afin de charger et sauvegarder le document, lequel peut prendre en compte le schéma XML SchemaEdT.xsd de l emploi du temps afin de vérifier la validité du document avant son traitement. 2. Le document instance Semaine37.xml et son schéma XML SchemaEdT.xsd sont construits en s assurant, à chaque étape, que le document instance est validé par son schéma XML. Le processeur XML Schema effectuera le test de validation. 3. L emploi du temps est interrogé via des expressions XPath intégrées à la feuille de transformation RequetesXPath.xsl, laquelle met également en forme le résultat de la requête en HTML. Le processeur XSLT assure la transformation du document instance en un résultat HTML. 4. La représentation SVG de l emploi du temps, qui peut être publiée pour diffusion, est générée par le processeur XSLT. Il transforme le document instance en un document SVG à l aide de la feuille de transformation EdTversSVG.xsl, laquelle inclut les documents Fonctions.xsl et ModelesSVG.xsl. Le document SVG résultat est alors rendu par le processeur SVG, visualisable sur un navigateur Web. Cette architecture sera mise en oeuvre en quatre étapes : 1. Grammaire XML pour emplois du temps : (a) Définition d un document instance XML représentant un emploi du temps en particulier à partir d un modèle UML. (b) Définition d un schéma XML validant le document instance précédent et respectant le modèle UML. Note : On reprendra cette étape à partir de ce qui a été réalisé en I2 (en Relax NG). 2. Requêtes sur un emploi du temps avec XPath/XSLT : Construction de requêtes complexes XPath en s aidant de XSLT (e.g. utilisation de variables XSLT). Formatage du résultat de la requête en HTML pour visualisation dans un navigateur Web. 3. Visualisation d emplois du temps en SVG : (a) Définition des «vignettes» SVG représentant quelques enseignements types. (b) Définition de ces mêmes vignettes SVG en tant que modèle XSL (document ModelesSVG.xsl). (c) Construction de la feuille de style (documents EdTversSVG.xsl et Fonctions.xsl) effectuant la transformation emploi du temps vue SVG. Note : On pourra reprendre, pour le point 3a, ce qui a été réalisé en I2. Concernant le point 3b, la forme du modèle SVG demandé est différente de celle utilisée en I2. 2

4. Édition de l emploi du temps via une application WPF écrite en C# : (a) Implémentation en C# de l éditeur de ressources et de l éditeur d une semaine d enseignement en utilisant DOM et WPF. Il est recommandé de s inspirer de l application «Filmographie» abordée en cours et dont le code source est disponible sur le campus numérique. (b) Bonus : Intégration des points 1, 2 ou/et 3 dans l application : Validation XML Schema par le processeur DOM ; Lancement de Internet Explorer pour la visualisation en SVG ; Reprise des requêtes XPath dans du code C# et affichage des résultats dans l application. Ces différentes étapes, de tailles assez inégales, pourront être traitées relativement indépendamment les unes des autres (sauf 4b). L étape 1a devra cependant être finalisée avant de commencer les autres. 1.2 Environnement Vous travaillerez sous Windows avec l environnement suivant : Éditeur XML et processeur XML Schema : L IDE VisualStudio.NET (version express 2008 / C#) gère l édition de documents XML et des schémas XML. La validation se fait automatiquement dès lors qu un espace de nom est défini par le schéma XML et est spécifié dans le document XML. de transformation XSLT : Le processeur XSLT interne à Internet Explorer est utilisé en spécifiant la feuille de transformation XSLT dans le document instance XML (balise <?xml-stylesheet?>). Les requêtes XPath/XSLT pourront donc être directement exécutées et leur résultat visualisés directement dans le navigateur. SVG : FireFox gère SVG en natif ainsi que la transformation XSLT via la balise <?xmlstylesheet?>). Cependant, il n indique par correctement les erreurs dans les transformations XSLT contrairement à Internet Explorer. Le processeur SVG à utiliser est le plugin SVG pour Internet Explorer téléchargeable sur le site d Adobe, lequel permettra de visualiser le résultat de la transformation directement dans le navigateur. Développement de l application WPF en C# : L IDE VisualStudio.NET sera bien entendu utilisé pour développement l application. 1.3 Fichiers fournis L ensemble des fichiers nécessaires est fourni sur le campus numérique. Différentes documentations utiles pour le mini-projet sont disponibles soit depuis le campus au format PDF, soit directement sur le Web : La recommandation SVG1.0 du W3C (bonne documentation de référence sur SVG). 3

Le site www.w3schools.com contient des tutoriaux simples sur les technologies XML suivantes : XPath : http ://www.w3schools.com/xpath SVG : http ://www.w3schools.com/svg (tutorial un peu léger, voir plutôt la recommandation du W3C) XSLT : http ://www.w3schools.com/xsl Les fichiers suivants seront utiles lors de la construction de la représentation SVG de l emploi du temps : Semaine37.png : Une capture d écran de la représentation SVG possible pour la semaine 37. ModeleSVG.xsl : Le modèle de la grille est intégralement fourni et le modèle de la vignette devra être implémentée (balises <xsl :template name>). Fonctions.xsl : Les différentes fonctions principalement liées au calcul de la mise en page des vignettes dans la grilles sont à implémenter (balises <xsl :template name>). Enfin, l exemple de la filmographie vu en cours d XML et d IHM est intégralement donné. 2 Partie I : Grammaire XML pour emplois du temps Le modèle UML est celui fourni dans le BE XML en I2 : Reprendre l une des versions de l emploi du temps Semaine37.xml faite en I2, en l améliorant éventuellement. A partir du modèle UML ci-dessus et éventuellement du schéma Relax NG fait en I2, construire le schéma XML (document SchemaEdT.xsd) en veillant à respecter toutes les règles XML/UML vues en cours. 4

Utiliser VisualStudio pour éditer les 2 documents XML. Afin de valider le document Semaine37.xml par rapport à son schéma SchemaEdt.xsd, il est nécessaire de déclarer dans ces deux documents un espace de nom définissant de manière unique la grammaire de l emploi du temps : Document Semaine37.xml : <?xml version="1.0" encoding="iso-8859-15"?> <elementracine xmlns="http ://www.eseo.fr/2008/bexml/edt">... Document SchemaEdT.xsd : <?xml version="1.0" encoding="iso-8859-15"?> <xsd :schema xmlns :xsd="http ://www.w3.org/2001/xmlschema" xmlns="http ://www.eseo.fr/2008/bexml/edt" targetnamespace="http ://www.eseo.fr/2008/bexml/edt" elementformdefault="qualied"> Une fois que ceci est fait, remarquer que l édition du document instance est facilitée par le choix des éléments et attributs lors de l édition : l insertion d un < fait afficher un menu présentant les éléments possibles à insérer à cet endroit ; de même, l insertion d un espace après le nom d un élément fait afficher un menu présentant les attributs pouvant y être insérés. 3 Partie II : Requêtes XPath sur un emploi du temps Le document RequetesXPath.xsl doit contenir les requêtes XPath dont les résultats seront mis en forme en HTML grâce aux instructions XSLT. La forme HTML du résultat peut être élémentaire mais doit permettre une visualisation claire des résultats pour l ensemble 7 des requêtes spécifié ci-après. Afin qu Internet Explorer effectue la transformation et affiche son résultat, indiquer au préalable le lien vers la feuille de transformation dans le fichier Semaine37.xml, comme suit : <?xml version='1.0' encoding='iso-8859-15'?> <?xmlstylesheet href="requetesxpath.xsl" type="text/xsl"?>... Construire les requêtes suivantes, données dans l ordre croissant de difficulté, qui doivent fournir : 1. Les enseignants, affichés par leur prénom et leur nom, en fonction du nom partiel passé en paramètre. Par exemple, la chaîne «oug» passée en paramètre retourne «Jean-Yves Fougère». 5

2. Les matières, affichés par leur titre, enseignées par un enseignant dont l identifiant est passé en paramètre. 3. Les enseignants, affichés par leur prénom et leur nom, enseignant une matière dont l identifiant est passé en paramètre. 4. Les enseignements, affichés par l identifiant de l enseignant, le nom du jour et les identifiants des horaires, concernant une matière dont l identifiant est passé en paramètre. 5. Les enseignements, affichés par l identifiant de la matière, le nom du jour et les identifiants des horaires, assurés par un enseignant dont l identifiant est passé en paramètre. Attention : tenir compte qu un enseignant peut ne pas être spécifié si la matière n a qu un enseignant. 6. Les disponibilités, affichées par l identifiant de l horaire disponible, d une salle dont l identifiant est passé en paramètre et pour un jour dont le nom est passé en paramètre. 7. Les disponibilités, affichées par l identifiant de l horaire disponible, d un enseignant dont l identifiant est passé en paramètre et pour un jour dont le nom est passé en paramètre. Attention : tenir compte qu un enseignant peut ne pas être spécifié si la matière n a qu un enseignant. 4 Partie III : Visualisation d'emplois du temps en SVG 4.1 Vignettes enseignements SVG À partir des éléments <g>, <rect>, <polygon> et <text>, construire dans le document Vignettes.svg la description SVG de deux vignettes d enseignements qui concernent respectivement un cours de 2 heures en pleine division, et un TD d une heure (en groupe). La vignette d un enseignement à les dimensions suivantes : Largeur : 1 heure = 150 pixels de large, 2 heures = 305 pixels Hauteur : en pleine division = 145 pixels, en groupe = 70 pixels Cette construction pourra reprendre celle réalisée en I2. Utiliser VisualStudio pour éditer le document SVG et Internet Explorer pour le visualiser (après avoir installé le plugin SVG). Il est préférable d utiliser le préfixe svg pour chaque élément SVG du document, ce qui deviendra indispensable dans la section suivante. 4.2 Modèle SVG en XSL Compléter le modèle SVG «vignette» (balise <xsl :template name= vignette > du document ModelesSVG.xsl) à partir du contenu du document Vignettes.svg précédent. La structure du modèle étant différente de celle proposée en I2, il est inutile de reprendre ce qui a été réalisé en I2. Le test de ce modèle sera réalisé à l étape suivante. 6

4.3 Feuille de transformation Dans cette dernière étape, la feuille de transformation EdTversSVG.xsl va être construite en utilisant les modèles SVG définis dans ModelesSVG.xsl et en codant les fonctions de calcul de la géométrie dans Fonctions.xsl. 1. Commencer par modifier la désignation de la feuille de transformation dans le document instance : <?xml version='1.0' encoding='iso-8859-15'?> <?xml-stylesheet href="edtverssvg.xsl" type="text/xsl"?>... Supprimer également la spécification de l espace de nom présente dans l élément racine (sinon, l affichage dans Internet Explorer poserait problème). 2. Tester la vignette de ModelesSVG.xsl en complétant le document EdTversSVG.xsl de manière à instancier le modèle par un <xsl :call-template>. Note : il faut impérativement utiliser le préfixe svg pour désigner tous les éléments des modèles SVG. 3. Implémenter les différentes fonctions x, x1 et x2 puis y et hauteur déclarées dans le document Fonctions.xsl (balises <xsl :template name>) à partir des formules suivantes : Abscisse de la vignette en fonction de l heure : x(m) = 20 + 2.5 m où m représente le nombre de minutes depuis 8h00, moins 60 si l heure dépasse 13h00. Ordonnée de la vignette en fonction du jour et du groupe : y( j,g) = 50 + 155 j + 75 (g 1) où j représente l indice du jour ( j = 0 pour «lundi», j = 1 pour «mardi», etc.) et g le numéro de groupe (g = 1 ou 2). Pour un enseignement en division complète, g = 1 dans la formule. Hauteur de la vignette en fonction du groupe : h(g) = 70 + 75 (g 1) où g représente le numéro de groupe avec la même convention que pour y( j,g). 4. Définir dans le document EdTversSVG.xsl les règles (balises <xsl :template match>) permettant de construire la grille à l aide des modèles «fond» et «tranchehoraire» donnés dans le document ModelesSVG.xsl. Noter que la règle «match= /» fournie permet d insérer le résultat SVG dans une page HTML visualisable sous Internet Explorer grâce au plugin SVG. Mettre alors au point les fonctions x, x1 et x2 si nécessaire. 5. Terminer la construction de EdTversSVG.xsl en définissant la règles permettant de construire toutes les vignettes des enseignements. Mettre alors au point les fonctions y et hauteur si nécessaire. 7

5 Partie IV : Éditeur WPF en C# 5.1 Prototype papier Avant de se lancer dans la réalisation de l application, il est important d avoir une bonne idée de ce que sera l interface finale via un prototype papier. Réaliser le prototype papier complet des différentes vues nécessaires aux deux tâches principales d édition des ressources et d édition d une semaine d enseignement. Il est souhaitable de faire valider votre prototype par l enseignant responsable du miniprojet. 5.2 Implémentation de l'ihm Implémenter le prototype papier en C# en respectant l approche MVC de WPF présentée lors du cours. L application devra utiliser le processeur DOM de.net afin de charger et sauvegarder l emploi du temps (voir l exemple de la filmographie). 5.3 Bonus : Intégration des différentes briques Ajouter les fonctionnalités suivantes à l application : Validation XML Schema par le processeur DOM ; Lancement de Internet Explorer pour la visualisation en SVG ; Reprise des requêtes XPath dans du code C# et affichage des résultats dans l application. 6 Mode d'évaluation L évaluation prendra en compte, dans l ordre d importance, les points suivants : 1. Qualité du travail 2. Quantité de travail fourni 3. Rapport final 4. Soutenance orale / démonstration (lors de la dernière séance) Il n est pas demandé de rapport final mais une archive au format ZIP qui contiendra les documents XML élaborés à chaque étape du mini-projet : Partie I : Le document instance XML Semaine37.xml Le schéma XML SchemaEdT.xsd Partie II : Le document RequetesXPath.xsl 8

Une sauvegarde Semaine37.xpath.xml du document instance XML contenant le lien <?xml-stylesheet?> vers RequetesXPath.xsl. Partie III : Le document Vignettes.svg contenant les vignettes SVG de deux enseignements. Les feuilles de transformation EdTversSVG.xsl, Fonctions.xsl et ModelesSVG.xsl. Une sauvegarde Semaine37.svg.xml du document instance XML contenant le lien <?xml-stylesheet?> vers EdTversSVG.xsl. Partie IV : Le répertoire contenant le projet VisualStudio WPF/C# complet de votre application. Chaque document doit être fonctionnel lorsqu ils sont ouverts sous VisualStudio pour les documents XML, XSD et XSL et le projet WPF/C#, et par Internet Explorer pour les documents XML (Semaine37.*.xml). L archive devra être nommée GroupeN.zip ou N est le numéro du groupe. Elle servira à évaluer la qualité et la quantité du travail effectué. L oral, effectué sur 10 à 15 minutes à la fin de la dernière séance, inclura en une démonstration (qui fonctionne, donc à préparer!) et un ensemble de questions. 9