Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

xml / xslt et un peu .net en pratique

Dans la partie Admin de CodeS-Sources il nous manquait une page regroupant les infos de tous les admins (email, msn, age, etc...)

Je m'y suis donc collé. Etant donné que c'est un truc simple, et surtout qui va pas changer tous les jours, j'ai mis tous ca dans un fichier xml, j'aurais pu ensuite en faire un dataset et mettre toutes ces infos dans un repeater, mais j'ai décidé de faire autrement.

J'ai décidé d'utiliser XSLT que je ne connaissais encore pas.

XSLT qu'est-ce que c'est ?

eXtended Stylesheet Language Transformations (XSLT) c'est un fichier XML (eXtensible Markup Language (pour ceux qui l'ont oublié)) qui va permettre de transformer un fichier XML contenant des données en un autre type de document, généralement un document XML surtout du XHTML (eXtensible HyperText Markup Langage).
Vous connaissez tous XML comme langage pour contenir des données, XSLT est tout simplement son complement indispensable. Il permet d'afficher les données comme bon vous semble. XSLT utilisé aussi XPath pour selectionner les données.

Plus d'infos :

Exemples d'utilisation

Voyons comment j'ai utilisé tout ca pour créer la page admin des admins

Le document XML

Tout d'abord il nous fallait un document xml.
Voici la structure que j'ai choisi.

 <admin id="19303">
  <pseudo>jesusonline</pseudo>
  <nom>DURAND</nom>
  <prenom>Cyril</prenom>
  <age date="31/01/86">19</age>
  <ville>France &gt; Rhone &gt; Lancié &lt;/ville>
  <sites>
   <site>www.aspfr.com</site>
   <site>www.graphfr.com</site>
  </sites>
  <email>xxxxxxxxxxx</email>
  <msn>xxxxxxxxxxxxxxxxxxxx</msn>
  <sitepersos>
   <siteperso>http://blogs.developpeur.org/cyril/</siteperso>
  </sitepersos>
  <activite>Etudiant </activite>
  <competences>
   <competence>Asp.net</competence>
   <competence>VB.net</competence>
   <competence>CSS</competence>
   <competence>HTML</competence>
   <competence>Javascript</competence>
  </competences>
  <photo url="http://www.aspfr.com/gdi/u/19303.cs.jpg"/>
  <commentaire></commentaire>
 </admin>
        

J'ai bien sur penser à créer un schéma en cliquant sur le bouton Create Schema le bouton create Schema ce qui pourrait servir plus tard pour par exemple créer un formulaire infopath ...

Le fichier xslt

Ce que je veux du fichier xslt, c'est :

  • trier les elements par ID
  • faire une boucle sur tous les admin
  • dire que l'admin n'a pas msn si le champ est absent
  • pour l'exemple compter le nombre d'admin (on peut aussi se servir de variable)

Voici donc la feuille de style xslt

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:template match="/" xml:space="preserve">
 <ul>
 <xsl:for-each select="admins/admin">
  <xsl:sort select="./@id" data-type="number" order="ascending"/>
  <li><a href="#{pseudo}" alt="aller à la fiche de {pseudo}"><xsl:value-of select="pseudo"/></a></li>
 </xsl:for-each>
 </ul>
 <xsl:for-each select="admins/admin">
  <xsl:sort select="./@id" data-type="number" order="ascending"/>
        <h2 class="Admin" id="{pseudo}">
   <a href="http://www.codes-sources.com/auteurdetail.aspx?id={@id}" title="voir la fiche de {pseudo}"> 
    <xsl:number value="position()"/> - <xsl:value-of select="pseudo"/>
     <span>( <xsl:value-of select="nom"/> <xsl:value-of select="prenom"/> )</span>
   </a>
  </h2>
  <div class="Admin">
   <a href="http://www.codes-sources.com/auteurdetail.aspx?id={@id}" 
    title="voir la fiche de {pseudo}">
    <img src="{photo/@url}" alt="photo de {pseudo}" width="200px" />
   </a>
   <ul class="InfoPerso">
    <li class="Nom"><xsl:value-of select="nom"/> <xsl:value-of select="prenom"/></li>
    <li title="né le {age/@date}"><span>Age : </span><xsl:value-of select="age"/> ans</li>
    <li><span>Ville : </span><xsl:value-of select="ville"/></li>
    <li><span>email : </span><a href="mailto:{email}" 
     title="ecrire à {prenom} "><xsl:value-of select="email"/></a></li>
    <xsl:if test="msn != '' ">
     <li><span>MSN : </span><xsl:value-of select="msn"/></li>
    </xsl:if>
    <xsl:if test="msn = ''">
     <li><span>MSN : </span>aucun</li>
    </xsl:if>
    <li><span>Occupation : </span><xsl:value-of select="activite"/></li>
    <xsl:if test="sitepersos != '' ">
    <li>
     <ul>
     <xsl:for-each select="sitepersos/siteperso">
      <li><span>Site perso : </span><a href="{.}"><xsl:value-of select="."/></a></li>
     </xsl:for-each>
     </ul>
    </li>
   </xsl:if>
   </ul>
   <ul class="Divers">
    <li class="Sites"><span>Traine sur : </span>
     <ul>
      <xsl:for-each select="sites/site">
       <li><a href="http://{.}"><xsl:value-of select="."/></a></li>
      </xsl:for-each>
     </ul>
    </li>
    <li class="Competence"><span>Domaine de compétence : </span>
     <ul>
      <xsl:for-each select="competences/competence">
       <li><xsl:value-of select="."/></li>
      </xsl:for-each>
     </ul>
    </li>
   </ul>
  </div>
 </xsl:for-each>
</xsl:template>
</xsl:stylesheet>  

Ca n'a pas l'air trés facile comme ca, mais une fois plongé dedans c'est trés simple, de toute facon je vais pas vous donner un cours de XSLT, il y en a suffisament sur le net ;) et je pense que la meilleure facon d'apprendre et par l'exemple :).

Mais ce qu'il faut quand meme remarquer, c'est les balises

  • <xsl:for-each select="admins/admin"> qui va nous permettre de faire une boucle sur tous les admin
  • <xsl:sort select="./@id" data-type="number" order="ascending"/> permet de trier nos admin par id, cette balise doit se placer juste derriere la boucle for each
  • <xsl:number value="position()"/>qui permettra de compter le nombre d'admin affiché
  • <xsl:if test="msn = ''"> qui fais ce que son nom indique

Affichage dans un navigateur

il y a deux facons d'afficher ca dans un navigateur, soit on inclu directement notre feuille xslt, dans ce cas il aurait fallu inclure les balises <html> etc... pour que ca rende un document bien propre,pour cela, il nous faut inclure notre fichier xslt en haut du document xml

<?xml-stylesheet type="text/xml" href="admins.xsl"?>

Ce n'est pas cet solution que je vais choisir, car j'aimerais bien que la liste des admins soit une page aspx qui reprendrais la master page admin

Alors comment faire ? trés simplement : asp.net a pensé à nou: le composant xml

Si y'a un controle que je ne m'etais encore jamais servis c'est bien celui la. En fait il est extrement simple et utile: il sert exactement à ce qu'on veut : afficher un fichier xml en passant par une transformation xslt

<asp:Xml ID="Xml1" runat="server" DocumentSource="~/admins.config" TransformSource="~/admins.xsl"></asp:Xml>

Note au passage. Vu que c'est un fichier "sensible", que j'ai pas envie que toutes ces infos soit lisible pour tous, au lieu de mettre l'extension xml, j'ai mis .config qui interdit à tous le monde de pouvoir telecharger ce fichier

le css pour la decoration

Il nous reste maintenant un brin de CSS pour habiller le tout

    <style type="text/css">
        h2.Admin{width:100%;border-bottom:solid 2px #333;}
        h2.Admin a{color:#000; text-decoration:none;}
        h2.Admin span{font-size:smaller;}
        div.Admin * {border:none 0;}
        div.Admin img{float:left;}
        div.Admin ul.InfoPerso{ margin:0 0 0 210px;padding:0;line-height:1.4em;list-style-type:none;}
        div.Admin ul.InfoPerso li.Nom {font-weight:bold;font-size:larger;}
        div.Admin ul.InfoPerso li span{font-weight:bold;}
        div.Admin ul.InfoPerso li ul {margin:0;padding:5px;list-style-position:inside;}
        div.Admin ul.Divers {clear:left; margin:0}
        div.Admin ul.Divers li span {font-weight:bold;}
        div.Admin ul.Divers li {line-height:2em;}
        div.Admin ul.Divers ul { margin:0 0 0 1.5em;list-style-type:square;}
        div.Admin ul.Divers li li {line-height:1.2em;}
    </style>

et voici le resultat final

resultat final

Un peu plus loin

Niveau perf :

nombre d'enregistrementdurée en ms
35
11040
1300640

Ces temps ne valent pas dire grand chose sans comparaison avec d'autres méthodes, c'est juste pour donner une idée. petit rappel de ce qu'on fait, on a un compteur, deux boucles qui sont chacune triés par id

remplissage des données

Pour bien faire j'aurais aussi pu utiliser infopath pour que les admins remplissent le xml... Ce serait en effet trés simple, on a un schéma, infopath doit pouvoir nous generer un formulaire automatiquement à partir du schéma, il nous resterait à publier le modele infopath puis on recuperera les fichiers xml que l'on fusionnera pour n'en avoir qu'un seul. Je ferais peut etre ca plus tard si l'envie me prend :)

Conclusion

En attendant, j'espere vous avoir montrer la puissance de Xslt ainsi que l'envie d'en faire. Je rappel egalement que c'est une techno trés simple puisque je n'ai mis que 2heures à faire cet exemple

Posted: lundi 4 juillet 2005 04:55 par cyril
Classé sous :
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Raphael a dit :

Salut Cyril.
Je suis tombé sur cette page en faisant une recherche sur le xml/xslt. J'ai bien aimé ton tuto. J'n'en avais jamais fais et après avoir vu le rendu de ta page, j'ai commencé un mini site comme ca. J'aime bien, c'est frais.

Je voulais te remercier même si ton article date.

Ciao et bonne continuation.

Par contre dans ta feuille xml, tu as fait une ch'tite erreur :
<ville>France &gt; Rhone &gt; Lancié &lt;/ville>

tu as oublié le chevron "ouvrant" de </ville>
# mars 30, 2006 12:31
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01