I'm trying to display a series of images each with its own caption using XSLT. I've coded the images and the captions by nesting <img> and then <figcaption> within but the resultant html does not display as intended (the captions are not lining up with corresponding images). Is there a way to nest <xsl: for-each> for the captions within the images? Here's the XSLT:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs"
version="2.0">
<xsl:output method="html"/>
<xsl:template match="letter">
<html>
<head>
<style type="text/css">
#wrapper {min-height: 100%;}
#figcaption {
text-align: left;
}
#main {
padding-top: 15px;;
width: 1200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="images">
<figure>
<xsl:if test="image">
<xsl:for-each select="image/#xlink:href">
<img>
<xsl:attribute name="src">
<xsl:value-of select="."/>
</xsl:attribute>
</img>
</xsl:for-each>
</xsl:if>
<xsl:if test="image/#label">
<xsl:for-each select="image/#label">
<figcaption><xsl:value-of select="."/></figcaption>
</xsl:for-each>
</xsl:if>
</figure>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Here's the corresponding XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="XSLT.xsl"?>
<letter xmlns:xlink="http://www.w3.org/1999/xlink">
<image label="page 1" xlink:href="http://tinyurl.com/nu7zmhc"/>
<image label="page 2" xlink:href="http://tinyurl.com/pysyztr"/>
<title>Letter from Shawn Schuyler</title>
<date>1963-06-30</date>
<language>English</language>
<creator>
<firstName>William</firstName>
<lastName>Schultz</lastName>
<street>Unites States Disciplinary Barracks</street>
<city>Fort Leavenworth</city>
<state abbr="KS">Kansas</state>
</creator>
</letter>
My desired output in html is basically this for each image:
<figure>
<img src='image.jpg'/>
<figcaption>Caption</figcaption>
</figure>
Or simply:
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xlink="http://www.w3.org/1999/xlink"
exclude-result-prefixes="xlink">
<xsl:template match="/letter">
<html>
<head>
<style type="text/css">
#wrapper {min-height: 100%;}
#figcaption {
text-align: left;
}
#main {
padding-top: 15px;;
width: 1200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="images">
<xsl:for-each select="image">
<figure>
<img src='{#xlink:href}'/>
<figcaption>
<xsl:value-of select="#label"/>
</figcaption>
</figure>
</xsl:for-each>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Note:
There's nothing wrong with using xsl:for-each, especially in a
simple case like this;
There is something wrong with using xsl:element when you can use a literal result element. And while XSLT is naturally verbose, using the attribute value template can reduce the code (quite significanltly, as you can see in this case).
Try this:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs"
version="2.0">
<xsl:output method="html" indent="yes" />
<xsl:template match="letter">
<html>
<head>
<style type="text/css">
#wrapper {min-height: 100%;}
#figcaption {
text-align: left;
}
#main {
padding-top: 15px;;
width: 1200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="images">
<xsl:apply-templates select="./image"></xsl:apply-templates>
</div>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="letter/image">
<xsl:element name="figure">
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="./#xlink:href"/>
</xsl:attribute>
</xsl:element>
<xsl:apply-templates select="./#label"></xsl:apply-templates>
</xsl:element>
</xsl:template>
<xsl:template match="letter/image/#label">
<xsl:element name="figcaption">
<xsl:value-of select="."/>
</xsl:element>
</xsl:template>
</xsl:stylesheet>
xsl:apply-templates says where anything matching the pattern specified in select should be put (with the dot showing the current element's context).
xsl:template is matched against the source document based on the path given in match. Any hits are processed in parallel, then later stitched together based on where the apply-templates elements indicate.
NB: depending on your XSLT engine having output="html" may have different effects on your img element. In HTML5 the img element is defined as not requiring a close tag (or being self-closing), so the engine won't close that tag. Arguments about whether that inconsistency is a good choice or not can be found throughout the net.
Ref: Are (non-void) self-closing tags valid in HTML5?
A good article on this alternate approach to for-each can be found here: http://gregbee.ch/blog/using-xsl-for-each-is-almost-always-wrong
You'll find with XLST that once the concept of a template clicks your code will become way shorter are simpler to maintain.
Related
EXAMPLE
Here is an example from MSDN. It show how to transform a XML file into HTML using xsl:key.
Example XML (input)
<books>
<book title="XML Today" author="David Perry" release="2016"/>
<book title="XML and Microsoft" author="David Perry" release="2015"/>
<book title="XML Productivity" author="Jim Kim" release="2015"/>
</books>
Example XSL (input)
<xsl:key name="title-search" match="book" use="#author"/>
<xsl:template match="/">
<HTML>
<BODY>
<xsl:for-each select="key('title-search', 'David Perry')">
<DIV>
<xsl:value-of select="#title"/>
</DIV>
</xsl:for-each>
</BODY>
</HTML>
</xsl:template>
Example HTML (output)
<HTML>
<BODY>
<DIV>XML Today</DIV>
<DIV>XML and Microsoft</DIV>
</BODY>
</HTML>
MY PROBLEM
I would like to produce the same HTML output but using a different XML input. How should the corresponding XSL file look like?
My XML (input)
<books>
<book>
<a n="author"><s>David Perry</s></a>
<a n="title"><s>XML Today</s></a>
<a n="release"><i>2016</i></a>
</book>
<book>
<a n="author"><s>David Perry</s></a>
<a n="title"><s>XML and Microsoft</s></a>
<a n="release"><i>2015</i></a>
</book>
<book>
<a n="author"><s>Jim Kim</s></a>
<a n="title"><s>XML Productivity</s></a>
<a n="release"><i>2015</i></a>
</book>
</books>
My XSL (input)
???
My HTML (output)
<HTML>
<BODY>
<DIV>XML Today</DIV>
<DIV>XML and Microsoft</DIV>
</BODY>
</HTML>
In the first example, your key matched book elements by their author attribute, but in the new XML, you want to match them by the a element where the n attribute is "author", so the key looks like this.
<xsl:key name="title-search" match="book" use="a[#n='author']/s"/>
Then, to get the title for the a matched book you would do this...
<xsl:value-of select="a[#n='title']/s"/>
Therefore your XSLT would look like this:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:key name="title-search" match="book" use="a[#n='author']/s"/>
<xsl:template match="/">
<HTML>
<BODY>
<xsl:for-each select="key('title-search', 'David Perry')">
<DIV>
<xsl:value-of select="a[#n='title']/s"/>
</DIV>
</xsl:for-each>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
You could actually drop the /s in the expressions here, if the s element was only ever going to be the only element under each a element.
This would work too:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:key name="title-search" match="book" use="a[#n='author']"/>
<xsl:template match="/">
<HTML>
<BODY>
<xsl:for-each select="key('title-search', 'David Perry')">
<DIV>
<xsl:value-of select="a[#n='title']"/>
</DIV>
</xsl:for-each>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
This is basic XSLT transformation, you can do something like this:
<xsl:template match="book">
<div>
Author: <xsl:value-of select="a[#n='author']/s" />
title: <xsl:value-of select="a[#n='title']/s" >
release: <xsl:value-of select="a[#n='release']/s" >
</div>
</xsl:template>
I have data for images like this:
<data>
<image>
<type>preview</type>
<pageNr>1</pageNr>
<url>5981-211.png</url>
</image>
<image>
<type>thumbnail</type>
<pageNr>1</pageNr>
<url>5549a_aldj_thumb.png</url>
</image>
<image>
<type>big thumb</type>
<url>47697-4921.png</url>
</image>
<image>
<type>preview</type>
<pageNr>2</pageNr>
<url>491-d91.png</url>
</image>
<image>
<type>thumbnail</type>
<pageNr>2</pageNr>
<url>491-d91_thumb.png</url>
</image>
</data>
And I want to create the following HTML output:
<a href="5981-211.png" title="1">
<img src="5549a_aldj_thumb.png" />
</a>
<a href="491-d91.png" title="2">
<img src="491-d91_thumb.png" />
</a>
For every preview there is a thumbnail with the same pageNr.
How can I group the data and nest the <img> into the <a> tag?
This can be achieved with the use of a key to lookup the "thumbnail" images
<xsl:key name="thumb" match="image[type='thumbnail']" use="pageNr" />
You would start off by selecting the "preview" elements
<xsl:apply-templates select="image[type='preview']"/>
And in the template that matches this, you would create the a tag, and then select the child "thumbnail" elements using the key
<a href="{url}" title="{pageNr}">
<xsl:apply-templates select="key('thumb', pageNr)" />
</a>
And in the template that matches the thumbnails, you would create the img tag like so:
<img src="{url}" />
Try this XSLT
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" indent="yes" />
<xsl:key name="thumb" match="image[type='thumbnail']" use="pageNr" />
<xsl:template match="/data">
<body>
<xsl:apply-templates select="image[type='preview']"/>
</body>
</xsl:template>
<xsl:template match="image[type='preview']">
<a href="{url}" title="{pageNr}">
<xsl:apply-templates select="key('thumb', pageNr)" />
</a>
</xsl:template>
<xsl:template match="image[type='thumbnail']">
<img src="{url}" />
</xsl:template>
</xsl:stylesheet>
I've the below XML.
<chapter num="1">
<section level="sect2">
<page>22</page>
</section>
<section level="sect3">
<page>23</page>
</section>
</chapter>
here I'm trying to get the first occurrence of <page>.
I'm using the below XSLT.
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ntw="Number2Word.uri" exclude-result-prefixes="ntw">
<xsl:output method="html"/>
<xsl:strip-space elements="*"/>
<xsl:variable name="ThisDocument" select="document('')"/>
<xsl:template match="/">
<xsl:text disable-output-escaping="yes"><![CDATA[<!DOCTYPE html>]]></xsl:text>
<html>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="chapter">
<section class="tr_chapter">
<xsl:value-of select="//page[1]/text()"/>
<div class="chapter">
</div>
</section>
</xsl:template>
</xsl:stylesheet>
but the output that I get all the page valyes printed. I only want the first one.
Current output.
<!DOCTYPE html>
<html>
<body>
<section class="tr_chapter">2223
<div class="chapter">
</div>
</section>
</body>
</html>
the page values are printed here after <section class="tr_chapter">, i want only 22 but I'm getting 2223
here I'm using //page[1]/text(), because I'm not sure that the page comes within the section, it is random.
please let me know how I can get only the first page value.
here is the transformation http://xsltransform.net/3NzcBsR
Try:
<xsl:value-of select="(//page)[1]"/>
http://xsltransform.net/3NzcBsR/1
Note that this gets the value of the first page element in the entire document.
If you want to search the contents of the chapter context element in your template for the first page descendant then use <xsl:value-of select="descendant::page[1]"/> or <xsl:value-of select="(.//page)[1]"/>.
i'm having this error when i tried to validate my XSLT
javax.xml.transform.TransformerConfigurationException:
javax.xml.transform.TransformerException:
javax.xml.transform.TransformerException:
A node test that matches either NCName:* or QName was expected.
this is my XSLT
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="html" />
<xsl:template match="\Apps">
<html>
<head> <title>Apps List</title>
<link rel="StyleSheet" href="table_style.css" type="text/css"/>
<style type="text/css">
body {font-family: Helvetca;}
h1 { color : Grey;}
h2 {color : Blue;}</style>
</head>
<body>
<h1> Apps List: <xsl:value-of select="\#List_Type" /></h1>
<p>This is a list of all currently hot apps:</p>
<xsl:for-each select="\App">
<xsl:if test="\App\#installed == true">
<h2 style="color:Green;"><xsl:value-of select="\App\app_name" />(instaled)</h2>
</xsl:if>
<xsl:otherwise>
<h2><xsl:value-of select="\App\app_name" /></h2>
</xsl:otherwise>
<p style="font-style:bold;">App info:</p>
<table id="#gradient-style">
<tr><th>Category:</th><td><xsl:value-of select="\App\catogry" /></td></tr>
<tr><th>Verdion:</th><td><xsl:value-of select="\App\version" /></td></tr>
<tr><th>Description:</th><td><xsl:value-of select="\App\description" /></td></tr>
<tr><th>App Reviews:</th><td><xsl:for-each select="\App\reviews\review">
<span style="font-style:bold;"><xsl:value-of select="\App\reviews\review\reviewer_name" /></span>
| <xsl:value-of select="\App\reviews\review\review_date" />
| <xsl:value-of select="\App\reviews\review\review_Time" /><br/>
<span style="font-style:bold;">Rating:</span>
<xsl:value-of select="string(\App\reviews\review\rating" /> <br/>
<xsl:value-of select="\App\reviews\review\ontent" /><br/>
----------------------------------------------------------
</xsl:for-each>
</td></tr>
</table>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
this is the XML that tried with
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="ShdenXSLT.xsl"?>
<Apps xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance" List_Type="new releases" >
<App device_type="tablet" app_id="120">
<app_name>Meeting Manager</app_name>
<catogry>LifeStyle </catogry>
<catogry>Bussnisse </catogry>
<version>1.0</version>
<description>This app is about managing the bussnisse meeting</description>
<reviews>
<review>
<reviewer_name>Shaden</reviewer_name>
<review_date>2012-02-13</review_date>
<review_time>11:35:02</review_time>
<content>it was a useful app</content>
<rating>4.5</rating>
</review>
<review>
<reviewer_name>Mohamed</reviewer_name>
<review_date>2012-03-01</review_date>
<review_time>12:15:00</review_time>
<content>i really loved this app</content>
<rating>5.0</rating>
</review>
</reviews>
</App>
<App device_type="tablet" app_id="100">
<app_name>ToDoList</app_name>
<catogry>LifeStyle </catogry>
<version>3.4.2</version>
<description>a simple To Do List applecation</description>
<reviews>
<review>
<reviewer_name>Fahad</reviewer_name>
<review_date>2010-02-05</review_date>
<review_time>09:40:55</review_time>
<content>nice app</content>
<rating>4.0</rating>
</review>
</reviews>
</App>
</Apps>
You are using backslash (\) as your XPath separator (i.e. <xsl:value-of select="\#List_Type" />), which is incorrect. It should be a forward slash (/)
i would like to create a master template in XSLT, which could be stored in a separate file. Every other Page stylesheets share it, with xsl:import.
master.xslt
<xsl:template match="Page">
<html>
<head>
</head>
<body>
<call-template name="Content"/>
</body>
</html>
</xsl:template>
<xsl:stylesheet>
page.xslt
<xsl:stylesheet>
<xsl:import href="master.xslt"/>
<xsl:template match="/">
<apply-templates match="Page"/>
</xsl:template>
<xsl:template name="Content">
... apply something page-specific
</xsl:template>
</xsl:stylesheet>
page.xml
<Page>
... something page-specific
</Page>
Can i improve this solution?
i cannot start from master stylesheet, because i will need xsl:import everything.
i dont want master.xslt contain references on each particular page.
Another decision (which is against the xslt spirit) maybe such:
master.xslt
<xsl:template name="masterHead">
<html>
<head>
</head>
<body>
</xsl:template>
<xsl:template name=masterEnd>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
page.xslt
<xsl:stylesheet>
<xsl:import href="master.xslt"/>
<xsl:template match="/">
<call-template name=masterHead>
... apply something page-specific
<call-template name=masterEnd/>
</xsl:template>
</xsl:stylesheet>
we don't need any general root <Page> element.
Using <xsl:import> is the right design decision. This is exactly the main use-case this XSLT directive was intended for.
One can go further even more -- lookup for the <xsl:apply-imports> directive, and in addition to how an imported stylesheet can apply templates about whose actions and meaning it absolutely doesn't know anything. The latter is called Higher-Order-Functions and is implemented in XSLT with the FXSL library (written entirely in XSLT).
That looks about right to me... very common to what I have used in the past (although I've often used <xsl:include/>, but either should work). The main change I might make is to make the match more explicit (at least in the master xslt) - i.e.
<xsl:template match="/Page"> <!-- leading slash -->
so it won't accidentally match Page elements at other locations (for example, data-paging, like <Page Index="3" Size="20"/>).
One other common thing I do is to add a "*" match that uses xsl:message to throw an error if I don't have a more-specific match for a node. This makes it more obvious when you have a typo, etc.
I'm actually glad to have found this example as I've been looking for verification that this is actually the correct approach to a master/slave template setup.
However the examples provided did not work out of the box on tomcat - so just to help others who only knows how to copy paste here are a working tomcat set of master / slave files.
Master.xsl :
<?xml version="1.0" encoding="iso-8859-1" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" encoding="iso-8859-15" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" indent="no"/>
<!-- http://stackoverflow.com/questions/646878/master-stylesheet-sharing-in-xslt -->
<xsl:template match="ms247">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="border: 1px solid black; width: 200px; float: left; margin: 10px; padding: 5px;">
<xsl:call-template name="left"/>
</div>
<div style="border: 1px solid black; width: 200px; float: left; margin: 10px; padding: 5px;">
<xsl:call-template name="content"/>
</div>
<div style="border: 1px solid black; width: 200px; float: left; margin: 10px; padding: 5px;">
<xsl:call-template name="right"/>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="content">
<span style="color: red">Content template is empty - overrule in page template.</span>
</xsl:template>
<xsl:template name="left">
<span style="color: red">Left template is empty - overrule in page template.</span>
</xsl:template>
<xsl:template name="right">
<span style="color: red">Right template is empty - overrule in page template.</span>
</xsl:template>
</xsl:stylesheet>
And slave.xsl:
<?xml version="1.0" encoding="iso-8859-1" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:import href="master.xsl"/>
<xsl:template name="content">
... apply something page-specific
</xsl:template>
<xsl:template name="right">
And we have RIGHT content!
<!-- Execute matching template which is NOT triggered automatically -->
<xsl:apply-templates select="params/param"/>
</xsl:template>
<!-- And we do not define any left template -->
<!-- Example -->
<xsl:template match="ms247/params/param">
Paramters on page: <xsl:value-of select="#name"/><br/>
</xsl:template>
</xsl:stylesheet>
Hope this can help others - do not be shy to drop me a note.