I have created a XML file I would like for it to be displayed in my HTML page that I also created. Can someone tell me how to do this.
<?xml version="1.0"?>
<Family>
<Mom>Alison</Mom>
<age>44</age>
<son>Ian</son>
<age>8</age>
<son>Seth</son>
</Family>
I would like to read that from my html page
You can use XSLT - language for transforming XML documents. Maybe this would fit your needs.
I have modified your provided XML a little bit, because I think it is not structured well. So if we have such document:
<?xml version="1.0"?>
<?xml-stylesheet href="bla.xsl" type="text/xsl" ?>
<family>
<person>
<role>Mom</role>
<name>Alison</name>
<age>44</age>
</person>
<person>
<role>Father</role>
<name>Ben</name>
<age>45</age>
</person>
<person>
<role>Son</role>
<name>Ian</name>
<age>8</age>
</person>
</family>
The XSLT file would look something like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Family</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Role</th>
<th>Name</th>
<th>Age</th>
</tr>
<xsl:for-each select="family/person">
<tr>
<td><xsl:value-of select="role"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="age"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
a) Simply linking your Xml file
You can link to your Xml file from a Html page by using Server Side Includes.
If your Webserver is configured to allow this feature (this is usually disabled for security reasons) all you need to do is to rename your Html page to .shtml and add the server side include command.
foo.shtml
<html>
<head/>
<body>
<!--#include file="bar.xml" -->
</body>
</html>
bar.xml
<?xml version="1.0"?>
<Family>
<Mom>Alison</Mom>
<age>44</age>
<son>Ian</son>
<age>8</age>
<son>Seth</son>
</Family>
This will show the text Alison 44 Ian 8 Seth in your browser.
b) Rendering your Xml file as Html
If you want to render your complete Xml file as a Html page wenuxas has the correct answer for you.
c) Embedding your Xml file into your Html page
If your Xml document represents only a fragment of your final page Ajax may be what you are looking for.
If you just want to display the XML contents as they look in the file, you can search and replace all brackets (< becomes < and > becomes >), then paste the result in between <pre> and </pre> tags.
I would say the most common way is to use a server-side development platform such as ASP.NET to read the XML file and then format it into the page markup.
If there's a more direct way to include XML content in an HTML page, I'm not familiar with it.
Related
I have the following XSLT file that is already working with the XML file we have on ActiveMQ. The thing is that we are upgrading the system and we don't have the XML view anymore. Instead we have an URL that return in JSON the queue informations.
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>PROJECT Notification</h2>
<div style="width:600px;background-color:#e5eecc;border:1px solid #98bf21;margin:10px;">
<table border="1" style="border-style:dashed">
<tr bgcolor="#9acd32">
<th width="300px;">Queue Name</th>
<th>Queue Size</th>
</tr>
<xsl:apply-templates select="queues" />
</table>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="queue">
<tr>
<td><xsl:value-of select="#name"/></td><td><xsl:value-of select="./stats/#size" /></td>
</tr>
</xsl:template>
</xsl:stylesheet>
I want to know if that's possible to keep using this same XSLT file, just modifying the tags to start reading from the JSON URL instead.
I'm using camel to route to this XSLT, but I didn't want to create a Processor to convert the JSON to XML. Instead I want to use the JSON right away.
XSLT operates on XML input, not JSON input. (While you could parse JSON using XSLT 2.0 string processing facilities, it's still not the right tool for the job.)
Your HTML target is quite simple, so migrating away from XML/XSLT shouldn't be as much of a challenge as it could have otherwise been. Look into a JavaScript-based templating engine such as Mustache.js, Handlebars.js, Underscore.js, Hogan.js...
i am making a website that will feature many articles that will always be changing, i am trying to find a way to quickly change the text in these articles as i am the only person who knows the code in the company.
I was thinking of having a text document or something that has the articles text and when it gets changed so does the text on the site.I just dont know how to implement this.
sorry if its hard to understand what i mean, im not too familiar with sleep these days.
You don't need any dynamic server code like the other answers are suggesting. Either a "static site generator" (there are uncountably many, but that should give you something to Google if my main answer doesn't satisfy you) or a client-side scripting.
XSLT was designed for this exact problem. It can be run client-side or server-side with xsltproc (for compatibility with dumb clients). XSLT 1.0 is well-supported by all common browsers, though if you need EXSLT extensions in IE you had to add shims. Note that Webkit-based browsers can't do XSLT on file:// URLs, either set up a local HTTP server or use Firefox.
I have a minimal example site set up here that includes multiple files in
one page: https://o11c.github.io/foo-test/foo-root.xml
foo-style.xml:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/index">
<html>
<body>
<h2>Merge test</h2>
<table border="1">
<tr>
<th>Attr</th>
<th>Value</th>
</tr>
<xsl:apply-templates select="document(include/#name)"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="root">
<xsl:for-each select="foo">
<tr>
<td><xsl:value-of select="#x"/></td>
<td><xsl:value-of select="text()"/></td>
</tr>
</xsl:for-each>
</xsl:template>
<xsl:template name="identity">
<xsl:copy>
<xsl:for-each select="node()|#*">
<xsl:call-template name="identity"/>
</xsl:for-each>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
foo-root.xml:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="foo-style.xslt"?>
<index>
<include name="foo-1.xml"/>
<include name="foo-2.xml"/>
</index>
foo-1.xml:
<?xml version="1.0"?>
<root>
<foo x="a">aa</foo>
<foo x="b">bb</foo>
<foo x="c">cc</foo>
</root>
foo-2.xml:
<?xml version="1.0"?>
<root>
<foo x="d">dd</foo>
<foo x="e">ee</foo>
<foo x="f">ff</foo>
</root>
Further resources:
XSLT 1.0 spec
XPath 1.0 spec - in particular the function reference
EXSLT extensions - node-set in particular is very useful.
xsltproc webpage
You could use wordpress, if you are building the site from scratch and not adding to an existing one. This will allow you to edit articles in a user friendly interface that will allow you to style the text and will be easier for other people in the company to edit as well. It's very fast to set up.
Or you could just keep the written text in the HTML file itself, but this may make it harder to maintain and style, and those not technical savvy may not be able to edit it or will end up breaking it.
Well you might do this using php and Mysql
You can easily display save the articles in mysql and you could create a simple user interface for the people respnsible for editing the code to edit it too easy
I am trying my hand at XSLT using this page as a guide:
http://www.w3schools.com/xml/xml_xsl.asp
I basically tried to modify the given XSL information to suit my tags, which happen to be in the form of a sitemap. However, when i apply the XSL style to my XML page, it shows as blank! Clearly i am missing/forgetting or not seeing something. Please help.
My XML (snippet only):
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl" ?>
<!-- sitemap-generator-url="http://www.auditmypc.com/free-sitemap-generator.asp" -->
<!-- This sitemap was created using the free tool found here: http://www.auditmypc.com/free-sitemap-generator.asp -->
<!-- Audit My PC also offers free security tools to help keep you safe during internet travels -->
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
>
<url>
<loc>http://www.site.com/</loc>
<lastmod>2014-03-17T13:30:25-05:00</lastmod>
</url>
<url>
<loc>http://www.site.com/index.php?format=feed&type=rss</loc>
<lastmod>2014-03-17T13:28:20-05:00</lastmod>
</url>
</urlset>
My XSL:
<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="urlset/url">
<div style="background-color:teal;color:white;padding:4px">
<span style="font-weight:bold"><xsl:value-of select="loc"/></span>
</div>
<div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
<span>Last Modified:<xsl:value-of select="lastmod"/></span>
</div>
</xsl:for-each>
</body>
</html>
Thanks for the help!
The urlset element and its descendants in your example XML document are all in the http://www.sitemaps.org/schemas/sitemap/0.9 namespace, so in order to match them with XPath expressions you must bind a prefix to that namespace and use it consistently:
<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:sm="http://www.sitemaps.org/schemas/sitemap/0.9">
<body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="sm:urlset/sm:url">
<div style="background-color:teal;color:white;padding:4px">
<span style="font-weight:bold"><xsl:value-of select="sm:loc"/></span>
</div>
<div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
<span>Last Modified:<xsl:value-of select="sm:lastmod"/></span>
</div>
</xsl:for-each>
</body>
</html>
In XSLT/XPath 1.0, unprefixed element names always mean elements in no namespace, and prefixed names take the namespace bindings from the stylesheet, not from the input XML.
As an aside, if you're writing XSLT to be interpreted on the client side by browsers then you will be restricted to XSLT 1.0, so I suggest you find a good 1.0-specific tutorial and reference guide. The material on w3schools isn't always clear about what version of XSLT/XPath it refers to and you'll get frustrated if you keep trying things that don't work, only to find they're 2.0-only constructs...
Remember, XPath (and therefore XSLT) is namespace-aware, but (in the 1.0 version of these standards at least) does not have the concept of default namespace (xmlns=) assignment. If you want to select namespaced nodes, your XPath must use explicit prefixes bound to the correct namespaces.
i want to transform some xml into HTML that has the following format:
<TR><TD> col1 <TD> col2 <TD> col3 </TR>
Note: The output is HTML, complete with optional closing tags omitted. This is the problem, and the reason the question exists.
A snippet of the XSL i'm using is:
<?xml version='1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output
doctype-system='http://www.w3.org/TR/html4/strict.dtd'
doctype-public='-//W3C//DTD HTML 4.01//EN'
indent='yes'
method='html'
/>
...
<xsl:for-each select="/">
<TR><TD><xsl:value-of select="col1"/><TD><xsl:value-of select="col2"/><TD><xsl:value-of select="col3"/></TR>
</xsl:for-each>
You can see that the guts of the XSL matches my desired HTML (wrapped for easy reading):
<TR> <TD><xsl:value-of select="Column1"/>
<TD><xsl:value-of select="Column2"/>
<TD><xsl:value-of select="Column3"/> </TR>
Note: Those of you who know the error i'm getting from the XSLT: hopefully already know the answer.
When presented with my XSL (which, don't forget, is a form of xml), i get the non-well formed error:
End tag 'TR' does not match the start tag 'TD'.
This makes perfect sense. Indeed:
<TD><xsl:value-of select="Column3"/> </TR>
i do not close the TD element before closing the TR. So the question is:
How can i transform xml into HTML, given that HTML is not xml?
See also
HTML: Include, or exclude, optional closing tags?
XSLT: Transforming into non-xml content?
Omitting optional tags of html
Update one
It has been suggested that one could simply include the closing tags anyway, in order to make the XSL validate (shown wrapped for easy reading):
<TR> <TD><xsl:value-of select="col1"/></TD>
<TD><xsl:value-of select="col2"/></TD>
<TD><xsl:value-of select="col3"/></TD> </TR>
then, by using xsl:output method='html', the final HTML content would have the </TD> tags magically omitted. Except it doesn't work:
<TR><TD>col1</TD><TD>col2</TD><TD>col3</TD></TR>
Update two
It has been suggested that i give up, don't bother asking this question, and just include the optional closing tags. That's possible, but that's not my question. Also, the "solution" doesn't work for elements where the closing tag is forbidden, e.g.:
<BR/>
or
<BR></BR>
How would i include a <BR> element in my HTML output, given that it is forbidden in HTML to close a <BR> element.
Here's one way to do this:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text"/>
<xsl:template match="/*">
<TR><TD><xsl:value-of select="col1"/><TD><xsl:value-of select="col2"/><TD><xsl:value-of select="col3"/></TR>
</xsl:template>
</xsl:stylesheet>
When this transformation is applied on the following XML document:
<t>
<col1>1</col1>
<col2>2</col2>
<col3>3</col3>
</t>
the wanted result is correctly produced:
<TR><TD>1<TD>2<TD>3</TR>
I believe the simplest thing is to just accept you're going to have closing tags in the output. While they might be optional, I believe most people would agree that best practice is to include them.
Is there a reason you really don't want optional closing tags in the output?
Re Update Two
There's no problem with this update. With method="html" <BR/> will be output as <BR>:
XSLT (note <BR/>):
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output
doctype-system='http://www.w3.org/TR/html4/strict.dtd'
doctype-public='-//W3C//DTD HTML 4.01//EN'
indent='yes'
method='html'
/>
<xsl:template match="/">
<HTML><BODY>
<TR>
<xsl:apply-templates/>
</TR>
<BR/> <!-- HERE -->
</BODY></HTML>
</xsl:template>
<xsl:template match="item">
<TD><xsl:value-of select="."/></TD>
</xsl:template>
</xsl:stylesheet>
Input:
<root>
<item>one</item>
<item>two</item>
</root>
Output (note <BR>):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><BODY>
<TR>
<TD>one</TD>
<TD>two</TD>
</TR>
<BR> <!-- HERE -->
</BODY></HTML>
Have you tried the output as "HTML"? Elements that shouldn't be self-closed in HTML are not (i.e. <BR>, <img>).
If you still don't like how the XSLT engine is serializing HTML output, then you could set your <xsl:output method="text"> and construct the "HTML" that you want:
<TR><TD><xsl:value-of select="col1"/><TD><xsl:value-of select="col2"/><TD><xsl:value-of select="col3"/></TR>
which produces:
<TR><TD>col1<TD>col2<TD>col3</TR>
Ian, have you tried <xsl:output method="text">?
http://www.w3schools.com/xsl/el_output.asp
I have an XSLT that I input to a 3rd party application. This application displays the result of that XSLT as a web page in their application.
I have a dynamic HTML document that I want to display in that application. How can I "read" the HTML document via an XSLT document such that whenever the html document is updated, the XSLT will read the new file?
If I'm not being clear, to convey the idea, my xslt would read something like this:
<xsl:stylesheet>
<xsl:output method="html"/>
<xsl:template match="Something">
<!-- Stuff is done here -->
</xsl:template>
<xsl:ReadExternalDocument filePath="my/path/document.html" />
</xsl:stylesheet>
I've come across the Document() function, but it seems to destroy my tags. That is, I would like to include the child tags of the parent element in the output.
As Tomalak suggested, the document function is the way to go. I read in the external HTML document using the document() with the copy-of node. copy-of does a deep-copy, including tags, to obtain the whole external HTML document. The code looks like this:
<xsl:stylesheet ... >
<xsl:output method="html"/>
<xsl:template match="/">
<xsl:copy-of select="document('ExternalDocument.html')" />
</xsl:template>
</xsl:stylesheet>