I wonder if anybody could help me please with a tricky problem I am having. Probably asking the impossible here but would be interested to hear any suggestions.
I have an XML file that in one of the nodes contains the HTML of a page. I would like to take the data in that node and some how create an HTML file from it. So, from the example XML below, I want to transform and pick cell[2] node from //dvm/rows/row and place that in another file so that I can actually see what that HTML mark-up shows and display as a proper web page rather than the code.
If I put it in and XSL like this, would it work?
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" method="html"/>
<xsl:template match="/">
<xsl:value-of select="//dvm/rows/row/cell[2]" disable-output-escaping="yes"/>
</xsl:template>
</xsl:stylesheet>
The XML is:
<dvm>
<description>This is a DVM file</description>
<columns>
<column name="lang"/>
<column name="text"/>
<column name="code" qualifier="true" order="1"/>
<column name="type" qualifier="true" order="2"/>
<column name="subj"/>
<column name="urem"/>
<column name="vreq"/>
</columns>
<rows>
<row>
<cell>English(UK)</cell>
<cell><![CDATA[<!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>
<title>My HTML File</title>
</head>
<body>
<div class="text">
<p>This is a line of text</p>
<p>This is a line of text</p>
<p>This is a line of text</p>
</div>
</body>
</html>]]>
</cell>
<cell>Code 1</cell>
<cell>Text</cell>
<cell>HTML Block 1</cell>
<cell/>
<cell/>
</row>
</rows>
</dvm>
You must get rid of the CDATA section and use the text it contains as regular markup. The DOCTYPE should also be removed (it will be generated by the transformation):
<?xml-stylesheet type="text/xsl" href="delete_3.xsl" ?>
<dvm>
<description>This is a DVM file</description>
<columns>
<column name="lang"/>
<column name="text"/>
<column name="code" qualifier="true" order="1"/>
<column name="type" qualifier="true" order="2"/>
<column name="subj"/>
<column name="urem"/>
<column name="vreq"/>
</columns>
<rows>
<row>
<cell>English(UK)</cell>
<cell>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My HTML File</title>
</head>
<body>
<div class="text">
<p>This is a line of text</p>
<p>This is a line of text</p>
<p>This is a line of text</p>
</div>
</body>
</html>
</cell>
<cell>Code 1</cell>
<cell>Text</cell>
<cell>HTML Block 1</cell>
<cell/>
<cell/>
</row>
</rows>
</dvm>
Then the transformation that produces the XHTML contained in the second cell element is simple:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/">
<xsl:copy-of select="/*/rows/*/cell[2]/node()"/>
</xsl:template>
</xsl:stylesheet>
When now I open the file: c:\temp\delete\delete2.xml with IE, the result is:
<!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>
<title>My HTML File</title>
</head>
<body>
<div class="text">
<p>This is a line of text</p>
<p>This is a line of text</p>
<p>This is a line of text</p>
</div>
</body>
</html>
and this is displayed by the browser as:
My HTML File
This is a line of text
This is a line of text
This is a line of text
<xsl:value-of select="cell[2]" disable-output-escaping="yes" />
Note that since your <cell> contains XHTML, there is no real need for a CDATA section. XHTML and XML are compatible, you can transport the one inside the other without converting it to a string first.
Related
I have a Primefaces project where all the views are generated via Netbeans.
Some of the views are edited and made into common used one, to make it more transparant. My problem is, that the VIEW part of the CRUD is one of the common ones, so it's referenced like this:
myView/myListView.xhtml:
<p:dialog id="InvoiceViewDlg" widgetVar="InvoiceViewDialog" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.ViewInvoiceTitle}">
<ui:include src="View.xhtml"/>
</p:dialog>
referencing myView/View.xhtml:
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:components="http://xmlns.jcp.org/jsf/composite/Components"
xmlns:my="http://mywork.com/jsf/facelets">
<ui:composition>
<ui:include src="/view/form/formView.xhtml">
<ui:param name="item" value="#{invoiceController.selected}" />
<ui:param name="formType" value="invoice"/>
<ui:param name="controller" value="#{invoiceController}"/>
</ui:include>
</ui:composition>
</html>
referening /view/form/formView.xhtml and this is the problem:
<p:commandButton value="#{bundle.Close}" onclick="PF('FormViewDialog').hide()" styleClass="cancelButton"/>
formView is referenced on every View form and sadly the Close button (not the X, that is working) isn't working, because of the bad reference in the onclick event. I have no idea how make this work for every form... Has anyone any idea?
EDIT:
I edited my myView/View.xhtml to this:
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:components="http://xmlns.jcp.org/jsf/composite/Components"
xmlns:my="http://mywork.com/jsf/facelets">
<ui:composition>
<ui:include src="/view/form/formView.xhtml">
<ui:param name='dialogname' value='InvoiceViewDialog'/>
<ui:param name="item" value="#{invoiceController.selected}" />
<ui:param name="formType" value="invoice"/>
<ui:param name="controller" value="#{invoiceController}"/>
</ui:include>
</ui:composition>
</html>
And my /view/form/formView.xhtml:
<p:commandButton value="#{bundle.Close}" onclick="PF('#{dialogname}')).hide()" styleClass="cancelButton"/>
Sadly, this is the error I'm still getting:
I would like to include jqplot.dateAxisRenderer.min.js file in your xhtml page.
How do i do ?
PF Version : 6.0.0
Added Dependency using POM:
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>jqplot</artifactId>
<version>7.6.0</version>
</dependency>
How to add in xhtml file?
Following is my xhtml file code:
<?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"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<ui:composition template="/pages/layout.xhtml">
<ui:define name="pageTitle">
<h:outputText value="Page 3" />
</ui:define>
<ui:define name="centerContent">
<div class="contentdetailheadline parbase">
<h1>Page 1</h1>
</div>
<div class="bodycopy parbase">
<div style="clear: both"></div>
<div class="content-body">
<p>
Welcome to My Page !!!
</p>
</div>
<div style="clear: both"></div>
</div>
</ui:define>
</ui:composition>
</html>
he truth is that the code is small since I am learning, but I can not make it work, I have already touched other issues about this and I have not found a solution
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<h:outputScript library="js" name="jquery-last.js" />
</h:head>
<div id="header">
<div class="logo"></div>
<div class="medio">MANAGER DX2</div>
<div class="fin"> </div>
</div>
<h:body>
<div class="body">
<div class="upbody">
<div></div>
<div>
Salir
</div>
</div>
<div class="container">
</div>
</div>
</h:body>
</html>
I also add some images with error and be able to provide more information
Thank you very much for your help
I am trying to read through an xml file with xslt transformations and place the content into different divs. I am limited in some solutions in that I CANNOT use any server side languages this content will run local (direct from a cd) and must work in IE (i know why right?) per client specs
Essentially I would like to put all the phases in the "phase" div with an onClick function that loads the lessons into the "lessons" div
some of the code below is pseudo and does not function
thanks in advance for any assistance.
XML File
<?xml version="1.0" encoding="utf-8"?>
<menu frame="UH1Y" curriculum="Crew Chief Training ICW">
<phase name='Unit 01'>
<lesson link='lesson01/menu.htm'>lesson 01</lesson>
<lesson link='lesson02/menu.htm'>lesson 02</lesson>
<lesson link='lesson03/menu.htm'>lesson 03</lesson>
<lesson link='lesson04/menu.htm'>lesson 04</lesson>
<lesson link='lesson0/menu.htm'>lesson 05</lesson>
</phase>
<phase name='Unit 02'>
<lesson link='lesson01/menu.htm'>lesson 01</lesson>
<lesson link='lesson02/menu.htm'>lesson 02</lesson>
<lesson link='lesson03/menu.htm'>lesson 03</lesson>
</phase>
</menu>
XSL File
<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="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>menu</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="scripts/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container2">
<div id="phase">
<ul>
<xsl:for-each select="menu/phase">
<li onclick='loadLesson(<xsl:value-of select="menu/phase/#name[current()]"/>);'>
<xsl:value-of select="#name"/></li>
</xsl:for-each>
</ul>
</div>
<div id="lesson2">
<ul>
<xsl:for-each select="menu/phase[position() = {*the current phase*]/lesson">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
JS file
function loadLesson(x) {
alert(x);
//<xsl:value-of select="menu/phase/#name[current()]"/>
theDiv=document.getElementById('lesson2')
theDiv.innerHTML = x;
}
Rather than do another XSLT transform each time a user clicks a link, it might be worth simply rendering out all possible divs on the page in the first place, and making them all hidden (using the CSS display property). Then, when they select a 'phase' simply make the relevant div visible.
The first problem with your XSLT though is this
<li onclick='loadLesson(<xsl:value-of select="menu/phase/#name[current()]"/>);'>
It is not valid to have XSLT elements embedded in an attribute like this. In this case, you would really need to use "Attribute Value Templates". Also note as you are already positioned on a phase element, you don't need to write the full path here, just #name would do.
<li onclick="loadLesson('{#name}');'>
Note the curly braces here, as this indicates the Attribute Value Template, and the contents of the braces are evaluated, rather than output literally.
Actually, because you are going to have a separate div for each phase, each such div would need a unique Id, one without spaces in, so it might be better to do this
<li onclick="loadLesson('phase_{generate-id()}');">
Then to render out the lessons for each phase, you could do this
<xsl:for-each select="menu/phase">
<div id="phase_{generate-id()}" style="display:none">
<ul>
<xsl:for-each select="lesson">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</div>
</xsl:for-each>
Again note the use of Attribute Value Templates to set the Id of the div.
Then, finally, you would write your javascript function loadLesson like so:
var current_div = null;
function loadLesson(divId)
{
if (current_div != null) current_div.style.display = 'none';
current_div = document.getElementById(divId);
current_div.style.display = 'block';
}
Here is the full XSLT in this case:
<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="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>menu</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="scripts/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container2">
<div id="phase">
<ul>
<xsl:for-each select="menu/phase">
<li onclick="loadLesson('phase_{generate-id()}');">
<xsl:value-of select="#name"/>
</li>
</xsl:for-each>
</ul>
</div>
<xsl:for-each select="menu/phase">
<div id="phase_{generate-id()}" style="display:none">
<ul>
<xsl:for-each select="lesson">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</div>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The google code prettifier (which is also used here, on SO) parses the content of a .prettyprint and injects some <span>s to allow highlighting via css.
This works perfectly simple, unless I'm serving an XML file with an XSLT. Then, the prettifier only runs correctly in Opera, but refuses to work with Firefox or Chrome (Chromium to be precise). I complied a minimal example, see below.
If I open the XHTML file (generated on the server with xsltproc) directly, Firefox suddenly does manage to run prettyprint correctly. But if it transforms the XML itself, prettify stops working. How can I get around this? Am I perhaps doing something wrong?
This is the XML file
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="test.xslt" type="text/xsl" ?>
<root><![CDATA[
int main() {
float x {7.7};
return 0;
}
]]></root>
And this is the stylesheet:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
<xsl:output method="xml" version="1.0" indent="yes"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
/>
<xsl:template match="/">
<html><head>
<link rel="stylesheet" type="text/css" href="_include/gcp/prettify.css" />
<script type="text/javascript" src="_include/gcp/prettify.js"> </script>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint"><xsl:value-of select="." /></pre>
</body></html>
</xsl:template>
</xsl:stylesheet>
For reference, this is the XHTML 1.1 that is generated by xsltproc:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="_include/gcp/prettify.css"/>
<script type="text/javascript" src="_include/gcp/prettify.js"/>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint">
int main() {
float x {7.7};
return 0;
}
</pre>
</body>
</html>
Edit:
This is the markup as rendered by Firefox (extracted using Ctrl+Shift+I)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="gcp/prettify.css"/>
<script type="text/javascript" src="gcp/prettify.js"/>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint">
<SPAN xmlns=""> </SPAN>
<SPAN xmlns="">int</SPAN>
<SPAN xmlns=""> main</SPAN>
<SPAN xmlns="">()</SPAN>
<SPAN xmlns=""> </SPAN>
<SPAN xmlns="">{</SPAN>
<SPAN xmlns="">
</SPAN>
<SPAN xmlns="">float</SPAN>
<SPAN xmlns=""> x </SPAN>
<SPAN xmlns="">{</SPAN>
<SPAN xmlns="">7.7</SPAN>
<SPAN xmlns="">};</SPAN>
<SPAN xmlns="">
</SPAN>
<SPAN xmlns="">return</SPAN>
<SPAN xmlns=""> </SPAN>
<SPAN xmlns="">0</SPAN>
<SPAN xmlns="">;</SPAN>
<SPAN xmlns="">
</SPAN>
<SPAN xmlns="">}</SPAN>
</pre>
</body>
</html>
Maybe you could try adding a
<script>prettyPrint()</script>
after the body. I think that maybe Firefox executes the code line by line, so it will first try to execute prettyPrint() and insert the XSLT content after, so prettyPrint() won't have anything to execute...
Update the output method of your xsl from xml to html.
<xsl:output method="html" version="1.0" indent="yes"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>