xml to html problem - newbie question

[grant]

Hi,

I am new to xml - xsl but wonder if someone could help me with an
issue. Maybe an explanation of how to get to the result too

I have an xml structure for a menu and i need to create an xsl to
transform it into html to dynamically create the menu.

The xml structure cant be changed so that's not an option.

The xml structure is as follows:

<?xml version="1.0"?>
<commandResult>
<data>
<searchData>
<searchName>Web Access Menu</searchName>
<searchId>80000000000001D0</searchId>
<listView><name>Web Access Menu</name><label>Web Access
Menu</label></listView>
<searchMeta>
<label>Web Access Menu</label>
<tableData>
<tableId>8000000000000119</tableId>
<accessPermissions>
<read/>
</accessPermissions>
<tableQuickSearch>
<rId>8000000000000278</rId>
</tableQuickSearch>
</tableData>
<queryId>8000000000000997</queryId>
<disconnected>0</disconnected>
<resultsListLimit>100</resultsListLimit>
<searchParameter>
<parameterFieldMeta>
<fieldName>Type</fieldName>
<fieldId>8000000000001A7C</fieldId>
<rType>rText</rType>
<dataAttribute>0</dataAttribute>
<maxCharacters>10</maxCharacters><isOptional>0</isOptional>
<defaultConditionValue>0</defaultConditionValue>
<hasDefault>0</hasDefault>
<label>Type</label>
<ordinal>1</ordinal>
</parameterFieldMeta>
<operator>Equals</operator>
</searchParameter>
<searchFields>
<searchFieldMeta>
<fieldName>URL</fieldName>
<fieldId>8000000000001A80</fieldId>
<rType>rText</rType>
<dataAttribute>0</dataAttribute>
<maxCharacters>100</maxCharacters><label>URL</label>
<ordinal>0</ordinal><visible>1</visible>
</searchFieldMeta>
<searchFieldMeta>
<fieldName>Target</fieldName>
<fieldId>8000000000001A7D</fieldId>
<rType>rText</rType>
<dataAttribute>0</dataAttribute>
<maxCharacters>10</maxCharacters><label>Target</label>
<ordinal>1</ordinal><visible>1</visible>
</searchFieldMeta>
<searchFieldMeta>
<fieldName>Description</fieldName>
<fieldId>8000000000001A81</fieldId>
<rType>rText</rType>
<dataAttribute>0</dataAttribute>
<maxCharacters>100</maxCharacters><label>Description</label>
<ordinal>2</ordinal><visible>1</visible>
</searchFieldMeta>
</searchFields>
<availableFields>
</availableFields>
</searchMeta>
<searchResults>
<resultsListCount>2</resultsListCount>
<recordSelection>
<startRecordNumber>0</startRecordNumber>
<numberOfRecords>2</numberOfRecords>
</recordSelection>
<searchRow>
<recordId>0000000000000001</recordId>
<fieldValue>forgotpassword.asp</fieldValue>
<fieldValue>_self</fieldValue>
<fieldValue>forgot password</fieldValue>
</searchRow>
<searchRow>
<recordId>0000000000000002</recordId>
<fieldValue>home.asp</fieldValue>
<fieldValue>_self</fieldValue>
<fieldValue>Home</fieldValue>
</searchRow>
</searchResults>
<searchCriteria>
<parameterValue>a</parameterValue>
<orConditions>0</orConditions>
</searchCriteria>
</searchData>
</data>
</commandResult>

As you can see its not too friendly but there is a node called
/commandResult/data/searchData/searchMeta/searchFields/searchFieldMeta
that contains the field names and another under
/commandResult/data/searchData/searchResults/searchRow that contains
the values for the fields.

How can I construct an XSL document that will create a HTML table for
each of the field name nodes and give me the data for <A> hyperlinks
etc..

I cant seem to work out how to link the parent to child nodes (if
that's the right terminology)

Please can someone help me.

Thanks in advance
Grant

 

[Patrick TJ McPhee]

[...]

% As you can see its not too friendly but there is a node called
% /commandResult/data/searchData/searchMeta/searchFields/searchFieldMeta
% that contains the field names and another under
% /commandResult/data/searchData/searchResults/searchRow that contains
% the values for the fields.
%
% How can I construct an XSL document that will create a HTML table for
% each of the field name nodes and give me the data for <A> hyperlinks
% etc..

It might be nice to have an example of the output, but here's an
example which does something which is probably not what you want:

<xsl:stylesheet xmlns:xsl = 'http://www.w3.org/1999/XSL/Transform'
version = '1.0'>
<xslutput method='html'/>

<!-- the point of the first two templates is to constrain the
default xslt behaviour. Rather than trying to match all
nodes against templates and print all text nodes, we want
to match only the searchFields node and ignore the text fileds -->
<xsl:template match='/'>
<xsl:apply-templates select='//searchFields'/>
</xsl:template>

<xsl:template match='text()'/>

<!-- when we find a searchFields, we print a table containing a column
for each search column. You might have to sort on the ordinal
element if the columns don't appear in the right order. -->

<xsl:template match='searchFields'>
<table><tr>
<xsl:for-each select='searchFieldMeta'>
<th><xsl:value-of select='fieldName'/></th>
</xsl:for-each>
</tr>
<xsl:apply-templates select='//searchResults'/>
</table>
</xsl:template>


<!-- in your application, you probably want to print only one
column with the position() = 1 value as an href and the
position() = 3 value as the printed value. You'd do that
like this (untested):

<xsl:for-each select='searchRow'>
<tr>
<td><a href='{fieldValue[1]}'>
<xsl:value-of select='fieldValue[3]'/></a></td>
</tr>
</xsl:for-each>

-->

<xsl:template match='searchResults'>
<xsl:for-each select='searchRow'>
<tr>
<xsl:for-each select='fieldValue'>
<xsl:choose>
<xsl:when test='position() = 1'>
<td><a href='{.}'><xsl:value-of select='.'/></a></td>
</xsl:when>
<xsltherwise>
<td><xsl:value-of select='.'/></td>
</xsltherwise>
</xsl:choose>
</xsl:for-each>
</tr>
</xsl:for-each>
</xsl:template>

</xsl:stylesheet>

 

[grant lang]

Hi,

That has helped alot thanks.

The section:

[...]

<!-- in your application, you probably want to print only one
column with the position() = 1 value as an href and the
position() = 3 value as the printed value. You'd do that
like this (untested):

<xsl:for-each select='searchRow'>
<tr>
<td><a href='{fieldValue[1]}'>
<xsl:value-of select='fieldValue[3]'/></a></td>
</tr>
</xsl:for-each>

-->
[...]

Doesnt seem to work or at least i dont have enough experience to
troubleshoot it yet and make it work but the assumption here is correct.
A single link containing the description (field3) with a href of
(field1).

Ultimately I'd like to use something like this menu system available
here: http://www.obout.com/sm3/pro_outlook.aspx

But at this stage using the ASP version so the code behind the page
would look like:

****************************************

<html>
<head>
<title>obout Slide Menu Pro - Outlook example (classic ASP)</title>
<meta http-equiv="Content-type" content='text/html; charset="UTF-8"'
/>
<link rel="stylesheet" href="/slidemenu/styles/xp_outlook.css"
media="screen" />
</head>

<body>
<%
'create and set up menu
dim osm
set osm = Server.CreateObject("obout_SlideMenu3_Pro.Menu")
osm.ID = "prooutlook"
osm.ScriptPath = "/slidemenu/smscript"
osm.CSSParent = "SMParent"
osm.CSSParentOver = "SMParentOver"
osm.CSSParentSelected = "SMParentSelected"
osm.CSSChild = "SMChild"
osm.CSSChildOver = "SMChildOver"
osm.CSSChildSelected = "SMChildSelected"
osm.CSSChildrenBox = "SMChildrenBox"
osm.CSSMenu = "SMMenu"
osm.KeepExpanded = false
osm.Speed = 8
'Initially select 'a_a'
If(Request.QueryString("sm")="") Then
osm.SelectedId = "a_a"
Else
osm.SelectedId = Request.QueryString("sm")
End If

'build menu
osm.AddParent "a", "Services"
osm.AddChild "a_a", "<BR><img src=""/slidemenu/images/computer.gif""
class=""SMChildImage""><BR>Desktop support", "pro_outlook.asp"
osm.AddChild "a_b", "<BR><img src=""/slidemenu/images/network.gif""
class=""SMChildImage""><BR>Network services", "pro_outlook.asp"
osm.AddChild "a_c", "<BR><img src=""/slidemenu/images/publishing.gif""
class=""SMChildImage""><BR>Publishing services", "pro_outlook.asp"

osm.AddParent "b", "Downloads"
osm.AddChild "b_a", "<BR><img src=""/slidemenu/images/search.gif""
class=""SMChildImage""><BR>Search", "pro_outlook.asp"
osm.AddChild "b_b", "<BR><img src=""/slidemenu/images/drive.gif""
class=""SMChildImage""><BR>Big list", "pro_outlook.asp"

osm.AddParent "c", "Contact us"
osm.AddChild "c_a", "<BR><img src=""/slidemenu/images/contact.gif""
class=""SMChildImage""><BR>E-mail", "pro_outlook.asp"
osm.AddChild "c_b", "<BR><img src=""/slidemenu/images/chat.gif""
class=""SMChildImage""><BR>Talk to us live", "pro_outlook.asp"

'styles switch for user browser
Function styleSwitch (cssClassName)
Dim br_type
If (instr(Request.ServerVariables ("HTTP_USER_AGENT"), "IE")) Then
br_type = "_ie"
End If
styleSwitch = cssClassName + br_type
End Function

'Slide Menu event handler
Response.Write("You've selected: <b>" + osm.SelectedId + "</b><br />")
'Display the SlideMenu
Response.Write(osm.HTML)
Set osm = Nothing
%>
</body>
</html>

*************************************************

And the section containing the osm.AddParent and osm.AddChild would be
dynamically created using the XML in the previous post etc.

On the obout site there is also an XML version too but the XML result
from our application is not flexiable so I would prefer to create
something as above.

So I guess I have two questions, the first being can we make the section
of code work that I cant seem to make work and the second question would
be is it possible using the XML example posted previously to create a
XSL to produce the resulting ASP page above?

Other than that, using the XML does anyone have any suggestions on a
menu system that would look nice like the obout menu system?

Thanks heaps for your time!
Grant