en utilisant xslt et XML pour générer le code HTML souhaité

Question

J'utilise XSLT et XML pour générer le code HTML que je souhaite.

J'ai deux XMLS, ci-dessous sont les détails.

1) Destinations.XML

<?xml version="1.0"?> 
<list type="Destinations"> 
<resources location="include/xml/locations.xml"> 
<publication>481</publication> 
</resources> 
<destination id="594051" title="Sydney" url="/asiapacific/australia/sydney.aspx" > 
<country id="192395" /> 
</destination> 
<destination id="594088" title="Brisbane" url="/asiapacific/australia/brisbane.aspx" > 
<country id="192395" /> 
</destination> 
<destination id="594579" title="Dubai" url="/middleeast/uae/dubai.aspx" > 
<country id="192849" /> 
</destination> 
<destination id="594580" title="Abu Dhabi" url="/middleeast/uae/abudhabi.aspx" > 
<country id="192849" /> 
</destination> 
</list> 

2) Locations.xml

<?xml version="1.0"?> 
<list type="Locations"> 
<region id="192393" code="ASIA" name="Asia &amp; the Pacific" shortname="Asia &amp; the Pacific"> 
<country id="192395" code="AU" name="Australia" shortname="Australia"> 
<city id="192397" code="BNE" name="Brisbane" shortname="Brisbane"> 
<airport id="192399" code="BNE" name="Brisbane International Airport" shortname="Brisbane"></airport> 
</city> 
<city id="192409" code="SYD" name="Sydney" shortname="Sydney"> 
<airport id="192411" code="SYD" name="Kingsford Smith Airport" shortname="Sydney"></airport> 
</city> 
</country> 
</region> 
<region id="192847" code="MEAF" name="The Middle East &amp; Africa" shortname="The Middle East &amp; Africa"> 
<country id="192849" code="AE" name="United Arab Emirates" shortname="United Arab Emirates"> 
<city id="192851" code="AUH" name="Abu Dhabi" shortname="Abu Dhabi"> 
<airport id="192853" code="AUH" name="Abu Dhabi" shortname="Abu Dhabi"></airport> 
</city> 
<city id="192855" code="DXB" name="Dubai" shortname="Dubai"> 
<airport id="192857" code="DXB" name="Dubai International Airport" shortname="Dubai"></airport> 
</city> 
</country> 
</region> 
</list> 

Si vous voyez le destinations.xml nous avons obtenu le titre par exemple "sydney", aussi url = "/ asiapacific/australia/sydney.aspx "ainsi que l'ID du pays = 192395, et quand vous voyez le fichier Locations.xml il y a aussi l'ID du pays = 192395 et le nom =" Australie "ci-dessus qu'il y a le nom de la région =" Asie & Pacific ", Maintenant, je veux utiliser ces xml et écrire XSLT de sorte que toute la liste des destinations De destinations.xml apparaîtra avec son nom de pays et le nom de la région avec des urls, pour le pays cette URL deviendra (/asiapacific/australia/index.aspx) et pour la région il deviendra (/asiapacific/index.aspx), ci-dessous sera HTML généré

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="displayTable"> 
    <tbody> 
     <tr> 
      <th scope="col" class="first sortSelected"> 
       <div class="thPadding"> 
        <a class="iconDownSortArrow" href="#">Destination</a></div> 
      </th> 
      <th scope="col" class="sortHover"> 
       <div class="thPadding"> 
        <a class="iconSortArrowOff" href="#">Country</a></div> 
      </th> 
      <th scope="col" class="sortHover"> 
       <div class="thPadding"> 
        <a class="iconSortArrowOff" href="#">Region</a></div> 
      </th> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/sydney.aspx">Sydney</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/index.aspx">Australia</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/index.aspx">Asia & Pacific</a></td> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/brisbane.aspx">Brisbane</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/index.aspx">Australia</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/index.aspx">Asia & Pacific</a></td> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/middleeast/uae/dubai.aspx">Dubai</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/uae/index.aspx">UAE</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/index.aspx">Middle East</a></td> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/middleeast/uae/abudhabi.aspx">Abu Dhabi</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/uae/index.aspx">UAE</a></td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/index.aspx">Middle East</a></td> 
     </tr> 
    </tbody> 
</table> 

S'il vous plaît vous suggérons d'utiliser XSLT, je veux utiliser aussi quand il pagination plus de 20 destinations, ci-dessous est le code html pour paginations.

<div class="continueBar"> 
    <div class="continueBarLeft"> 
     <strong>Displaying destinations 1-20 of 100</strong></div> 
    <div class="continueBarRight"> 
     <ul class="paginationLinks"> 
      <!--<li class="noBorder"><a class="iconButtonBackBar" href="#">&nbsp;</a></li>--> 
      <li class="noBorder"><span class="iconButtonBackBarOff">&nbsp;</span></li> 
      <li><strong class="thisPage">1</strong></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">2</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">3</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">4</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">5</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">6</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">7</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">8</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">9</a></li> 
      <li class="separatorLine">|</li> 
      <li><a href="#">10</a></li> 
      <!--<li class="last"><span class="iconButtonForwardBarOff">&nbsp;</span></li>--> 
      <li class="last"><a class="iconButtonForwardBar" href="#">&nbsp;</a></li> 
     </ul> 
    </div> 
    <div class="clearBoth"> 
    </div> 
</div> 

Answer 1

Je ne sais pas quel genre de "pagination" que vous voulez, mais cette feuille de style:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:key name="kCountryById" match="country" use="@id"/> 
    <xsl:variable name="vLocations" select="document(/*/resources/@location)"/> 
    <xsl:template match="list"> 
     <table width="100%" cellspacing="0" cellpadding="0" border="0" 
                  class="displayTable"> 
      <tbody> 
       <tr> 
        <th scope="col" class="first sortSelected"> 
         <div class="thPadding"> 
          <a class="iconDownSortArrow" href="#">Destination</a> 
         </div> 
        </th> 
        <th scope="col" class="sortHover"> 
         <div class="thPadding"> 
          <a class="iconSortArrowOff" href="#">Country</a> 
         </div> 
        </th> 
        <th scope="col" class="sortHover"> 
         <div class="thPadding"> 
          <a class="iconSortArrowOff" href="#">Region</a> 
         </div> 
        </th> 
       </tr> 
       <xsl:apply-templates select="destination"/> 
      </tbody> 
     </table> 
    </xsl:template> 
    <xsl:template match="text()"/> 
    <xsl:template match="destination"> 
     <xsl:variable name="vReverseURL"> 
      <xsl:call-template name="reverse"> 
       <xsl:with-param name="string" select="@url"/> 
      </xsl:call-template> 
     </xsl:variable> 
     <xsl:variable name="vCountryURL"> 
      <xsl:call-template name="reverse"> 
       <xsl:with-param name="string" 
           select="substring-after($vReverseURL,'/')"/> 
      </xsl:call-template> 
      <xsl:text>/index.asp</xsl:text> 
     </xsl:variable> 
     <xsl:variable name="vRegionURL"> 
      <xsl:call-template name="reverse"> 
       <xsl:with-param name="string" 
       select="substring-after(substring-after($vReverseURL,'/'),'/')"/> 
      </xsl:call-template> 
      <xsl:text>/index.asp</xsl:text> 
     </xsl:variable> 
     <xsl:variable name="me" select="."/> 
     <xsl:for-each select="$vLocations"> 
      <tr> 
       <td class="detail first"> 
        <a class="arrowSmallFront" href="{$me/@url}"> 
         <xsl:value-of select="$me/@title"/> 
        </a> 
       </td> 
       <td class="detail noLeftBorder"> 
        <a class="arrowSmallFront" href="{$vCountryURL}"> 
         <xsl:value-of 
          select="key('kCountryById',$me/country/@id)/@name"/> 
        </a> 
       </td> 
       <td class="detail noLeftBorder"> 
        <a class="arrowSmallFront" href="{$vRegionURL}"> 
         <xsl:value-of 
         select="key('kCountryById',$me/country/@id)/../@name"/> 
        </a> 
       </td> 
      </tr> 
     </xsl:for-each> 
    </xsl:template> 
    <xsl:template name="reverse"> 
     <xsl:param name="string" select="''"/> 
     <xsl:if test="$string != ''"> 
      <xsl:call-template name="reverse"> 
       <xsl:with-param name="string" select="substring($string,2)"/> 
      </xsl:call-template> 
      <xsl:value-of select="substring($string,1,1)"/> 
     </xsl:if> 
    </xsl:template> 
</xsl:stylesheet> 

Sortie:

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="displayTable"> 
    <tbody> 
     <tr> 
      <th scope="col" class="first sortSelected"> 
       <div class="thPadding"> 
        <a class="iconDownSortArrow" href="#">Destination</a> 
       </div> 
      </th> 
      <th scope="col" class="sortHover"> 
       <div class="thPadding"> 
        <a class="iconSortArrowOff" href="#">Country</a> 
       </div> 
      </th> 
      <th scope="col" class="sortHover"> 
       <div class="thPadding"> 
        <a class="iconSortArrowOff" href="#">Region</a> 
       </div> 
      </th> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/sydney.aspx">Sydney</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/index.asp">Australia</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/index.asp">Asia &amp; the Pacific</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/brisbane.aspx">Brisbane</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/australia/index.asp">Australia</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/asiapacific/index.asp">Asia &amp; the Pacific</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/middleeast/uae/dubai.aspx">Dubai</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/uae/index.asp">United Arab Emirates</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/index.asp">The Middle East &amp; Africa</a> 
      </td> 
     </tr> 
     <tr> 
      <td class="detail first"> 
       <a class="arrowSmallFront" href="/middleeast/uae/abudhabi.aspx">Abu Dhabi</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/uae/index.asp">United Arab Emirates</a> 
      </td> 
      <td class="detail noLeftBorder"> 
       <a class="arrowSmallFront" href="/middleeast/index.asp">The Middle East &amp; Africa</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Remarque: modèle de chaîne inverse pour permettre URL relative à modifier. Clés avec plusieurs sources de documents.