Now that we've retrieved our XML data from Exchange Server, you're probably wondering how to display this data in our application. This is where XSL comes in. XML provides a great way to describe data, but it doesn't provide a way to display data. And HTML provides a great way to display data but doesn't provide a good way to describe data. XSL bridges the gap between XML and HTML so you can support rich descriptions of data while also supporting rich viewing of that data.
The following code, taken from coursexml.asp in the Training application, shows how to use XSL to format the XML data returned from Exchange Server. (See Figure 16-9.) I don't have room to cover everything XSL allows you to do, but I will point out the major tasks you can perform with XSL. This code should help you get started.
Figure 16-9: XML data formatted via XSL
<SCRIPT LANGUAGE="javascript">
var thexml;
function Resort()
{
var strProp = document.all.SortByProp.innerText;
//Call sortfield
sortfield(strProp);
}
</SCRIPT>
<LABEL ID="SortByProp" style="display:none"
onpropertychange="javascript:Resort()"></LABEL>
<DIV id="datediv"></DIV>
<BR>
<DIV id=msgdiv></DIV>
<xml id=reportXSL>
<xsl:template
xmlns:xsl="uri:xsl"
xmlns:d="DAV:"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:c="<%=strSchema%>"
xmlns:h="urn:schemas:httpmail:"
xmlns:cal="urn:schemas:calendar:">
<xsl:script>
function getMyDate(objThis, szDateFormatString, szTimeFormatSTring)
{
var m_objDate = new Date();
var m_x=0;
var gszDateString = ";
var szDate = objThis.text;
var szSubStr = szDate.substring(5,7);
if(szSubStr.charAt(0) == "0")
{
szSubStr = szSubStr.charAt(1);
}
m_objDate.setUTCFullYear(szDate.substring(0,4)); //Set Year
m_objDate.setUTCMonth(Number(szSubStr)-1); //Set Month
m_objDate.setUTCDate(szDate.substring(8,10)); //Set Date
m_objDate.setUTCHours(szDate.substring(11,13)); //Set Hours
m_objDate.setUTCMinutes(szDate.substring(14,16)); //Set Minutes
m_objDate.setUTCSeconds(szDate.substring(17,19)); //Set Seconds
var iNumHours = m_objDate.getHours();
var szFormattedTime = formatTime(m_objDate.getVarDate(),
szTimeFormatSTring);
var szFormattedDate = formatDate(m_objDate.getVarDate(),
szDateFormatString);
gszDateString = szFormattedDate.substring(0,szFormattedDate.length-1)
+ " " + szFormattedTime;
return (gszDateString);
}
</xsl:script>
<table id="XMLTable">
<TBODY>
xsl:for-each select="d:multistatus/d:response"
order-by="<%=Request.QueryString("SortBy")%>">
<xsl:if test="d:propstat/d:prop/href[.!='']">
<xsl:if test="d:propstat/d:prop/iscollection[.='0']">
<xsl:if test="d:propstat/d:prop/subject[.!='']">
<TR><TD>
<LI>
<A HREF='detaildrop.asp' title='Click to view more information
about this course.' onclick="vbscript:ExpandCollapse()">
<xsl:attribute name="ID"><xsl:value-of
select="d:propstat/d:prop/href" /></xsl:attribute>
<xsl:value-of select="d:propstat/d:prop/subject" />
</A>
</LI>
</TD></TR>
<TABLE style="display: none"><xsl:attribute name="ID">Details
<xsl:value-of select="d:propstat/d:prop/href"/>
</xsl:attribute>
<TR><TD>
<B>Location:</B></TD><TD>
<xsl:valueof select="d:propstat/d:prop/location" />
</TD></TR>
<TR><TD><B>Instructor:</B></TD><TD>
<!--turn into mailto-->
<A><xsl:attribute name="href">mailto:<xsl:value-of select=
"d:propstat/d:prop/instructoremail" /></xsl:attribute>
<xsl:value-of select="d:propstat/d:prop/instructoremail" />
</A>
</TD></TR>
<TR><TD><B>Category:</B></TD><TD>
<xsl:valueof select="d:propstat/d:prop/category" />
</TD></TR>
<!--convert to the correct timezone -->
<TR><TD><B>Start Time:</B></TD><TD>
<xsl:for-each select="d:propstat/d:prop/starttime">
<xsl:eval>getMyDate(this,"MM-dd-yyyy",
"h:mm tt")</xsl:eval></xsl:for-each>
</TD></TR>
<TR><TD><B>End Time:</B></TD><TD>
<xsl:for-each select="d:propstat/d:prop/endtime">
<xsl:eval>getMyDate(this,"MM-dd-yyyy","h:mm tt")
</xsl:eval></xsl:for-each>
</TD></TR>
<TR><TD><B>Prerequisites:</B></TD><TD>
<xsl:value-of select="d:propstat/d:prop/prereqs" />
</TD></TR>
<TR><TD><B>Description:</B></TD><TD>
<xsl:value-of select="d:propstat/d:prop/description" />
</TD></TR>
<xsl:if test="d:propstat/d:prop/materialsfilepath[.!='']">
<TR><TD><B>Course Materials:</B></TD>
<TD>
<A href="><xsl:attribute name="onclick">
javascript:window.open('<xsl:value-of select=
"d:propstat/d:prop/materialsfilepath" />');
window.event.returnValue=false;</xsl:attribute>
File link to materials
</A>
 
<A href="><xsl:attribute name="onclick">
javascript:window.open('<xsl:value-of select=
"d:propstat/d:prop/materialshttppath" />');
window.event.returnValue=false;</xsl:attribute>
HTTP link to materials
</A>
</TD></TR>
</xsl:if>
<xsl:if test="d:propstat/d:prop/discussionurl[.!='']">
<TR><TD>
<A style="color: olive" href=" title="Click here to
view the discussion for this course.">
<xsl:attribute name="onclick">
javascript:window.open('<xsl:value-of select=
"d:propstat/d:prop/discussionurl" />');
window.event.returnValue=false;</xsl:attribute>
View Discussion Group
</A>
</TD></TR>
</xsl:if>
<TR><TD>
<xsl:choose>
<xsl:when test="d:propstat/d:prop/starttime[. <
'<%=TurnIntoIso(Date(),"end")%> ']">
<!--Course has already taken place work -->
<B>This course has already taken place.</B>
</xsl:when>
<xsl:otherwise>
<A style="color: olive" href=" title="Click here
to register for this course."><xsl:attribute
name="onclick">javascript:window.
open('register.asp?FullCourseURL=<xsl:value-of
select="d:propstat/d:prop/href" />');
window.event.returnValue=false;</xsl:attribute>
Register for this course
</A>
</xsl:otherwise>
</xsl:choose>
</TD></TR>
<TR><TD><BR></BR>
</TD></TR>
</TABLE>
</xsl:if>
</xsl:if>
</xsl:if>
</xsl:for-each>
</TBODY>
</table>
</xsl:template>
</xml>
<script language="javascript">
var URLSchedule ="<%=strURLToSchedule%>";
function sortfield(sortby)
{
thenode =
reportXSL.selectSingleNode("xsl:template/table/TBODY/xsl:for-each");
thenode.setAttribute("order-by", sortby);
if (thexml.selectSingleNode("a:multistatus/a:response") == null)
{
msgdiv.innerHTML = "<B>No courses found.</B>";
}
else
{
msgdiv.innerHTML = thexml.transformNode(reportXSL.documentElement);
}
}
You'll notice that the code contains an XSL template that combines XSL commands with HTML. The template also contains embedded JavaScript that allows the XSL to transform the XML data into correctly formatted HTML.