XSL file causing error when stylesheet is included - css

I have a XML file with code like
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="rss2.xsl" type="text/xsl" media="screen"?> <rss version="2.0"> <channel>
<title>TITLE</title>
<description>Description</description>
<link>
some link
</link>
<copyright>Copyrights 2012, All Rights Reserved</copyright>
<item>
<title> title 1</title>
<description> desc</description>
<link>
some link
</link>
</item> </channel> </rss>
And an XSL file for this is
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />
<xsl:template match="/">
<html>
<head>
<title>XML RSS Feed</title>
<link type="text/css" rel="stylesheet" href="rss_xsl.css" >
</head>
<body>
<h2>XML RSS Feed</h2>
<hr />
<div id="content">
<xsl:for-each select="rss/channel/item">
<div class="article">
<h3><xsl:value-of select="title"/></h3>
<p><xsl:value-of select="description"/></p>
</div>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The issue is when i comment the stylesheet code then chrome shows the feed. when i include the style the feeds are no more visible. How can this stop showing the feeds. is their some thing wrong with this inclusion of Style for XSL files..

Well the stylesheet markup is not well-formed, due to <link type="text/css" rel="stylesheet" href="rss_xsl.css" > which should be <link type="text/css" rel="stylesheet" href="rss_xsl.css"/>. Then I think the approach works when loading over HTTP. If you load the XML document from the file system then I think Chrome refuses to load the the stylesheet linked to, for security reasons. There might be command line options or settings to change the behavior.

Related

CSS not working in JSF 2.0 project

My JSF 2.0 web project isn't rendering graphics from CSS. It loads images but it cannot load any background color or anything at all. Am I doing anything wrong here? My CSS file contains code for coloring and other things. I am using Bootstrap. My output page is plain black and white. I do not see any error messages in Eclipse.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<f:facet name="meta-tags">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aayush Mittal</title>
</f:facet>
<!-- Bootstrap -->
<f:facet name="css-files">
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
<h:outputStylesheet name="css/additional.css"></h:outputStylesheet>
<h:outputStylesheet name="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800"></h:outputStylesheet>
<h:outputStylesheet name="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"></h:outputStylesheet>
</f:facet>
<f:facet name="js-files">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<h:outputScript name="js/bootstrap.min.js"></h:outputScript>
<h:outputScript name="js/custom.js"></h:outputScript>
</f:facet>
</h:head>
<h:body class="main-body" data-spy="scroll" data-target="#navbar-collapse1" data-offset="50">
<div class="container-fluid body-prop1" id="home">
<div class="container-fluid section-contents">
<h1 class="welcome-text">Hola, Amigo!</h1>
<div class="container-fluid personal-info">
<p class="personal-info-text">
This website is my experiment with Bootstrap framework. I will try to put up my college projects and personal projects live here. I would also add some interesting stuff
including some blog posts. Feel free to "Stalk" me on Twitter, check out my code on GitHub, or just shoot me an Email if you find anything interesting.
</p>
</div>
</div>
</div>
</h:body>
</html>
This is my directory structure for the project:
OK, so I transferred all the folders - images, js, fonts, and css to a resources directory and moved that directory under WEB-INF folder. After that, I added following code to my web.xml file:
<context-param>
<param-name>
javax.faces.WEBAPP_RESOURCES_DIRECTORY
</param-name>
<param-value>/WEB-INF/resources</param-value>
And that made things to work. Now that I am following the official pattern of using the resources folder here, I had to get rid of relative paths and use only file names. Names of the folders that the files are in go to the library attribute. For example:
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
becomes
<h:outputStylesheet library="css" name="bootstrap.css"></h:outputStylesheet>
Also, the resources folder can be put in the WebContent directory as well as long as you put all that information in web.xml. I am writing these instructions just in case someone gets stuck on the same thing!

Namespace problems in XSL transformation of XHTML

Whilst transforming XHTML to XHTML with XSL I have a problem with namespaces. Consider as an example input:
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Test</title></head>
<body>
<p>Remove this</p>
</body>
</html>
Then the following transformation does not work (e.g. does not remove the <p />):
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="#*|node()" name="copy">
<xsl:copy><xsl:apply-templates select="#*|node()" /></xsl:copy>
</xsl:template>
<xsl:template match="p" />
</xsl:stylesheet>
But this one does:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xsl:template match="#*|node()" name="copy">
<xsl:copy><xsl:apply-templates select="#*|node()" /></xsl:copy>
</xsl:template>
<xsl:template match="xhtml:p" />
</xsl:stylesheet>
My problem and question is: How can I change the XSLT so that I do not have to add prefixes to all the XHTML elements and it still get to match them? From what I tried so far, adding a default namespace like <xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" /> does not achieve this.
Thanks for your help!
How can I change the XSLT so that I do not have to add prefixes to all the XHTML elements and it still get to match them?
This is possible, but I would recommens defining the namespace and using the preefix in referring to elements in this namespace:
<xsl:template match="*[local-name()='p']" />
Warning:
This technique can be safe only if it is guaranteed that there arent two elements with the same local-name() but in different namespaces.

IE7-only stylesheet for XSL document

How do I add an IE7-and-lower-only stylesheet to an XSL page? I tried adding it into the template for header information like so:
<xsl:template name="header">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
</xsl:template>
And the conditional never gets executed in my document, even though I use the same snippet in HTML-only documents and it works fine. What gives?
The comment will be seen by the parser as a comment in the XSL, and will be dropped from the generated HTML code.
If you want to generate a comment into your HTML, you need to enclose it inside a CDATA block, so it will be seen by the XSL parser as plain text to be copied to the destination document verbatim.
The code would look like this:
<![CDATA[
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
]]>
Everything between <![CDATA[ and ]]> will be treated as plain text.
Hopefully that should answer your question.
However, if at all possible, I'd suggest the best solution here would be to drop support for IE7. The usage stats for it have dropped through the floor in the last six months or so - it's almost as low as IE6 now; there's hardly anyone still using it. I appreciate in some cases you may not have a choice, but if you do have a choice, my advice is to drop it.
[EDIT]
Okay, after further research, it seems you're right: a plain CDATA block does escape its output (despite claims to the contrary in many places).
Instead, you need to use <xsl:comment> to generate an HTML comment in the output. Doing this with conditional comment syntax gets quite messy, and you will probably still need to use CDATA.
The best example I can find is here: http://getsymphony.com/download/xslt-utilities/view/21798/
As you can see, it's quite a lot of code.
A short version (without the flexibility) might look like this:
<xsl:comment>
[if lte 7<![CDATA[>]]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![CDATA[<![endif]]]>
</xsl:comment>
Hope that helps. Sorry the original answer was incomplete.
Here is one proven way to do it -- this is one of the rare cases when DOE is helpful:
<xsl:text disable-output-escaping="yes">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
</xsl:text>
A complete example:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes"/>
<xsl:template match="/*">
<xsl:text disable-output-escaping="yes">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
</xsl:text>
<p>
Done.
</p>
</xsl:template>
</xsl:stylesheet>
When this transformation is applied on any XML document (not used), the wanted, correct result is produced:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/rcm/verisign/style/2012/ie7.css"/>
<![endif]-->
<p>
Done.
</p>
You have:
<!--[if lte IE 7]>
It should be:
<!--[if lt IE 7]>

Using XSLT to get all the get all the elements out of an xhtml file

I have an xhtml file that I'm attempting to transform such that:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>yada</title>
<meta.....>
</head>
<body>
<p>Something</p>
<p>awesome</p>
</body>
</html>
becomes a
<title>yada</title>
<meta.....>
<p>Something</p>
<p>awesome</p>
The key thing that I'm getting at is that the <head> and <body> tags are removed from the document. I don't want to run this through sed or awk to remove them.
Everything that I've tried either has the whole thing in html or converts it all into pure text.
Background on problem: I've got a backup of my blog written in multimarkdown, I'm hoping to put them into different format but I need to get over this issue first.
Note: I started off with the identity template.
something like this? (bear with me, its been ages since I've done XSL actively)
<xsl:for-each select="head">
<xsl:copy-of select="."/>
</xsl:for-each>
<xsl:for-each select="body">
<xsl:copy-of select="."/>
</xsl:for-each>
Sounds like you want the identity transform for everything below html and body:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/html|/html/head|/html/body">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="#*|node()">
<xsl:copy>
<xsl:apply-templates select="#*|node()"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Are you sure this isn't the usual namespace problem? Does the input really look like you showed us, or did you leave out the namespaces because you didn't realise they made all the difference?

background-color not covering full screen with xsl in xhtml

When I tried to convert my website to xhtml, things went perfectly until I realized that IE doesn't support it.
I went to the xhtml FAQ's section about IE, and tried out the workaround there, using an identity transformation to trick IE into rendering it as html in quirks mode. Unfortunately, this seems to make firefox (and possibly other browsers?) display the css background only over the text of the page.
So here is the code:
test.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="backgroundexample.css" />
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
backgroundexample.css:
body {
background-color:red;
}
copy.xsl:
<stylesheet version="1.0"
xmlns="http://www.w3.org/1999/XSL/Transform">
<template match="/">
<copy-of select="."/>
</template>
</stylesheet>
The effect of this is that the background only displays over the text, not the whole page.
I could not find the problem here or by googling, so please tell me if this has already been asked (and i am therefore bad at searching).
Can't verify your problem. Did you have tried something like this?
html, body {
background-color:red;
}

Resources