[RESOLVED] Help needed to build a fragment .xsl page

[eeb3]

I am quite new with trying to build a .xsl page and having problems getting the output I want from the xml file.

this is how the Map.xml file is set up:
(Just to a little notation, vert = Vertical, nvert is Numerical Vertical, horz is horizontal)

<Map>
<Row vert="A" nvert="1">
<Column horz="1">
<Hegemony>Empty</Hegemony>
<SectorEffect>No Effects</SectorEffect>
</Column>
<Column horz="2">
<Hegemony>Empty</Hegemony>
<SectorEffect>No Effects</SectorEffect>
</Column>
...... (Basically 'Column horz=3'~'Column horz=34')
<Column horz="35>
<Hegemony>Empty</Hegemony>
<Sector Effect>No Effects</SectorEffect>
</Column>
</Row>
<Row vert="B" nvert="2">
...... (Basically a repeat of above column)
</Row>
...... (Basically 'Row vert=C'~'Row vert=EE')
<Row vert="FF" nvert="32">
......
</Row>
</Map>


And I've made up two .xsl files which both of them don't quite work out like the way I want.

One of them does give out some sort of output (Map.xsl) But not near the desired result I was looking for and the coding is a bit messy.


<?xml version="1.0" encoding="utf-8"?>
<!-- DWXMLSource="Map.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<!-- Title for just show -->
<div style="position:relative; text-align:center; background-color:#060; color:#FFF"> <strong>Maps</strong>:</div>
<!-- This is an all emcompasing div, thinking of having the height be set by Highest @nhort*50 and width set by highest @vert*30+10 (?) -->
<div style="background-color:#C93; position:relative">
<!-- For each row the followiing will occur -->
<xsl:for-each select="Map/Row">
<xsl:value-of select="@horz" />
<xsl:attribute name="style2"><xsl:value-of select="@nhortz" /> </xsl:attribute>
<div style="background-color:#C03; height:20px;">
<xsl:for-each select="Column/@vert">
<xsl:attribute name="$style1"><xsl:value-of select="@vert" /> </xsl:attribute>
<div style="background-image:url(../Images/EmptySpace.gif); position:relative; background-repeat:no-repeat; top:style2 ; left:$style1; height:60px; width:50px; color:#F2F">P:<xsl:value-of select="../../@horz" />-<xsl:value-of select="../@vert" /> H:<xsl:value-of select="Hegemony"/> SE:<xsl:value-of select="SectorEffect"/></div>
</xsl:for-each>
</div>
</xsl:for-each>
</div>
</xsl:template>
</xsl:stylesheet>


The 2nd one (Map2.xsl) does not give any output but has notations of what I was trying to do and is cleaner coding wise (or I hope cleaner).


<?xml version="1.0" encoding="utf-8"?>
<!-- DWXMLSource="Map.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<!-- All encomposing div -->
<div style="position:relative">
<!-- Refer to the matching Row Template -->
<xsl:apply-templates select="Map/Row" />
</div>
</xsl:template>

<!-- Row Template -->
<xsl:template match="/Map/Row">
<!-- Do this item for each instance of the element Row -->
<xsl:for-each select="Map/Row">
<!-- Refer to the matching Column Template -->
<xsl:apply-templates select="Map/Row/Columns" />
</xsl:for-each>
</xsl:template>

<!-- Column Template -->
<xsl:template match="/Map/Row/Columns">
<!-- Do this item for each instance of the element Column -->
<xsl:for-each select="Map/Row/Column">
<!-- Set the attribute that is to be used for 'div style="top:##px", to be named $Top, to take the attribute of Row marked vert and do the following math -->
<xsl:attribute name="$Top">
<xsl:value-of select="../@vert*30-30" />
</xsl:attribute>
<!-- Set the attribute that is to be used for 'div style="left:##px", to be named $Left, to take the attribute of Column marked horz and do the following math -->
<xsl:attribute name="$Left">
<xsl:value-of select="./@horz*50-50+((../@vert+1) mod 2)*25" />
</xsl:attribute>
<!-- Set the attribute that is to be used for the 'div class="Text"' from the Hegemony Tag -->
<xsl:attribute name="$Alliance">
<xsl:value-of select="Map/Row/Column/Hegemony" />
</xsl:attribute>
<!-- Set theattribute thatis to be used for the 'div title="Text"' from the SectorEffect Tag -->
<xsl:attribute name="$Title">
<xsl:value-of select="Map/Row/Column/SectorEffect" />
</xsl:attribute>
<!-- This 'Empty' Div gets the attributes that were just set previously to build a populated map similar to http://www.geocities.com/fleet_admril_eddie/STCCGWars/TestMap/STCCGWarsTest.html And that the background image of the div would be set once the 'class' of the div is given.-->
<div class="$Alliance" style="background-image:url(EmptySpace.gif);height:60px; width:50px; top:{$Top}px; left:{$Left}px;" title="$Title"></div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>


The end result I am trying to get to is like the map that is on this page: http://www.geocities.com/fleet_admril_eddie/STCCGWars/TestMap/STCCGWarsTest.html
I also included the .gif file that is used for the background. (which is just temporary to be able to see the results since the CSS isn't attached to this page.)

I apologize if anything here doesn't make sense, or if I used some sort of tag in the wrong form or way, or just seems too daunting.

Thank you, if there is someone that is able to help.


(Also, I already know the geocities.com is closing out, so please no comment about it :p )

[Webnerd]

<xsl:apply-templates select="Map/Row/Columns" />

<xsl:template match="/Map/Row/Columns">

<xsl:for-each select="Map/Row/Column">


should be

<xsl:apply-templates select="Map/Row" />

<xsl:template match="Row">

<xsl:for-each select="Column">

[eeb3]

Webnerd, I have applied those changes you have suggested to the map2.xsl file, and it has fix something, cause at this point, I am now getting an error in IE.
The error states, "This name may not contain the '$' character: -->$<--Top". Which I assume is in refrence to line 27: <xsl:attribute name="$Top">. Now if I try to remove the '$' from in front of the xsl:attributes' Top, Left, Alliance, Title. I get this next error.

"A reference to variable or parameter 'Top' cannot be resolved. The variable or parameter may not be defined, or it may not ..." And IE seems to cut off the rest of the error I assume.

[jkmyoung]

You should be using
<xsl:variable> instead of <xsl:attribute>

[eeb3]

Thanks jkmyoung, that worked, (as well as a few other modifications like removing all the templates).
here is the end result of the coding that I have after getting it all finally to work:


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<xsl:for-each select="Map/Row">
<xsl:for-each select="Column">
<!-- Set the variable that is to be used for 'div style="top:##px", to be named $TopOff, to take the attribute of Row marked vert (verticle) and do the following math -->
<xsl:variable name="TopOff" select="../@nvert*40-40" />
<!-- Set the variable that is to be used for 'div style="left:##px", to be named $LeftOff, to take the attribute of Column marked horz (Horizontal) and do the following math -->
<xsl:variable name="LeftOff" select="./@horz*50-50+((../@nvert+1) mod 2)*25" />
<!-- Set the variable that is to be used for the 'div class="Text"' from the Hegemony Tag -->
<xsl:variable name="Alliance" select="./Hegemony" />
<!-- Set the variable that is to be used for the 'div title="Text"' from the SectorEffect Tag -->
<xsl:variable name="Title" select="./SectorEffect" />
<!-- This 'Empty' Div gets the variables that were just set previously to build a populated map. And that the background image of the div would be set by the CSS once the 'class' of the div is given.-->
<div class="{$Alliance}" style="background-image:url(../Images/EmptySpace.gif); height:60px; width:50px; top:{$TopOff}px; left:{$LeftOff}px; position:absolute" title="{$Title}"></div>
</xsl:for-each>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>