How to include jqplot dateAxisRenderer.min.js file in your xhtml page - javascript

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>

Related

How to make dialog close work with generated views?

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:

How to include JavaScript file in JSF

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

Javascript frameset navigation

It is a long time since I programmed web. How do I perform javascript frameset navigation (or replace the frameset with an exact equivalent):
<frameset rows="*,32">
<frame src="about:blank" id="viewer">
<frame src="cgi/browse.exe?images">
</frameset>
The webpage generated by browse.exe conains an javascript array with a list of files, and two buttons: previuos and next. When the user clicks next, next file should be displayed in the "viewer".
I have tried
parent.frames["viewer"].location.assign("...");
without success in FF. It works in IE. Note that the navigation works fine as long as I stay inside the same frame.
Try to replace the id with the name attribute, then it should work well in all browsers. Tested it on these pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.html</title>
</head>
<frameset cols="240,*">
<frame name="fmenu" src="leftmenu.html" scrolling="yes"/>
<frame name="viewer" src="page1.html" scrolling="yes"/>
<noframes><p>noframes</p></noframes>
</frameset>
</html>
<!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>leftmenu.html</title>
</head>
<body>
<a onclick="window.parent.frames['viewer'].location.assign('page2.html')">test</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page1,2.html</title>
</head>
<body>
<p>START PAGE</p>
</body>
</html>

XSLT: Constructing an HTML file from code snippet in XML node

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.

Why does the google code prettifier refuse to work with XSLT?

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"/>

Categories