How to generate the random selection html using xslt

Question

Hi Guys,

I am using XSLT and XML to generated my HTML.

I have below XML.

1) destinationTabs.xml

<?xml version="1.0"?>
<list type="Tabs">
<tab id="594978-64" title="Overview" url="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx" />
<tab id="597468-64" title="Guide" url="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx" />
<tab id="597348-64" title="Flight Schedule" url="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx" />
<tab id="597238-64" title="Special Offers" url="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx" />
<tab id="597243-64" title="Photos" url="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx" />
</list>

Now I want to generate below HTML using XSLT.

<ul class="tabHead tabs-nav">
            <li class="tabLeftEnd"></li>            
            <li class="tabs-selected" id="tab-1"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a></li>           
            <li id="tab-2"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a></li>
            <li id="tab-3"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedules</span></a></li>            
            <li id="tab-4"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a></li>           
            <li id="tab-5"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/Photo.aspx"><span>Photos</span></a></li>           
            <li class="tabRightEnd"></li>   
</ul>

Please note that these are the tabs which depends on the no of the tab ID in destinationTabs.xml and whenever any user click the desired tab a new page is called and it will selected too.

There is a class "tabs-selected" which is flowing on the selection of each tab.

Please suggest!

Answer 1

This transformation:

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
 <xsl:output method="html" omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:param name="pSelectedNo" select="1"/>

 <xsl:template match="/*">
  <ul class="tabHead tabs-nav">
   <li class="tabLeftEnd"></li>
     <xsl:apply-templates/>
   <li class="tabRightEnd"></li>
  </ul>
 </xsl:template>

 <xsl:template match="tab">
  <li id="tab-{position()}">
    <xsl:if test="position() = $pSelectedNo">
      <xsl:attribute name="class">tabs-selected</xsl:attribute>
    </xsl:if>
    <a href="{@url}"><span><xsl:value-of select="@title"/></span></a>
  </li>
 </xsl:template>
</xsl:stylesheet>

when applied on the provided XML document:

<list type="Tabs">
    <tab id="594978-64" title="Overview"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx" />
    <tab id="597468-64" title="Guide"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx" />
    <tab id="597348-64" title="Flight Schedule"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx" />
    <tab id="597238-64" title="Special Offers"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx" />
    <tab id="597243-64" title="Photos"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx" />
</list>

produces the wanted, correct result:

<ul class="tabHead tabs-nav">
   <li class="tabLeftEnd"></li>
   <li id="tab-1" class="tabs-selected"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a></li>
   <li id="tab-2"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a></li>
   <li id="tab-3"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedule</span></a></li>
   <li id="tab-4"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a></li>
   <li id="tab-5"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx"><span>Photos</span></a></li>
   <li class="tabRightEnd"></li>
</ul>

Answer 2

This stylesheet:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
    <xsl:template match="list">
        <ul class="tabHead tabs-nav">
            <li class="tabLeftEnd"></li>
            <xsl:apply-templates/>
            <li class="tabRightEnd"></li>
        </ul>
    </xsl:template>
    <xsl:template match="tab">
        <li id="tab-{position()}">
            <a href="{@url}">
                <span>
                    <xsl:value-of select="@title"/>
                </span>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>

Output:

<ul class="tabHead tabs-nav">
    <li class="tabLeftEnd"></li>
    <li id="tab-1">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx">
            <span>Overview</span>
        </a>
    </li>
    <li id="tab-2">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx">
            <span>Guide</span>
        </a>
    </li>
    <li id="tab-3">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx">
            <span>Flight Schedule</span>
        </a>
    </li>
    <li id="tab-4">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx">
            <span>Special Offers</span>
        </a>
    </li>
    <li id="tab-5">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx">
            <span>Photos</span>
        </a>
    </li>
    <li class="tabRightEnd"></li>
</ul>

Note: About @class: You need to pass a parameter to the stylesheet, by javascript or by metadata in the retrived resource.