I am using Primefaces 3.3.1, JSF 2.0 and Liferay 6.0 in my app. I have my JS files included in the portal_normal.vm as follows
portal_normal.vm
<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
<head>
<title>$the_title - $company_name</title>
<script src="$javascript_folder/jquery-1.7.2.min.js"></script>
<script src="$javascript_folder/javascript.js"></script>
<script src="$javascript_folder/jquery.tablesorter.min.js"></script>
<script src="$javascript_folder/jquery.tablesorter.pager.js"></script>
<script src="$javascript_folder/jquery.autocomplete.js"></script>
<script src="$javascript_folder/jquery.simplemodal.1.4.2.min.js"></script>
<script src="$javascript_folder/jquery.scrollTo.js"></script>
<script src="$javascript_folder/ui.datepicker.js"></script>
$theme.include($top_head_include)
</head>
<body></body>
</html>
sample.xhtml:
<div 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"
lang="en" xml:lang="en" style="padding-bottom: 8px;">
<h:head>
<script type="text/javascript" src="#{lookupBean.themePath}/js/jquery-1.7.2.min.js" />
<script type="text/javascript" src="#{lookupBean.themePath}/js/javascript.js" />
<script type="text/javascript" src="#{lookupBean.themePath}/js/jquery.tablesorter.min.js" />
<script type="text/javascript" src="#{lookupBean.themePath}/js/ui.datepicker.js" />
</h:head>
<h:body></h:body>
</div>
Prime faces requires h:head to be included in the view. When I add the h:head to my xhtml, none of the js files are getting imported. Could you please let me know how can I add the .js to h:head?
The portal_normal.vm file is designed to be a template for the portal page, and is contained within the Liferay theme. You should not need to add any PrimeFaces or jQuery related resources to the head section of this template. Instead, simply create a PrimeFaces portlet and use h:head within your Facelet view. If you do that, then PrimeFaces will automatically add required resources during the JSF lifecycle, and Liferay Faces Bridge will take care of injecting them into the <head>...</head> section of the portal page for you. I would recommend that you look at the primefaces3-portlet demo for more information.
JSF 2 expects all resources to be located under webapp - resources
here you can place your scripts. You might want to create a subfolder called "scripts" and then use this tag:
<h:outputScript library="js" name="common.js" />
full guide here:
http://www.mkyong.com/jsf2/how-to-include-javascript-file-in-jsf/
Edit: Yes your view do need namespaces. Try this header:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui">
Related
I have 2 basic templates - one with a side menu, and one without - that both ui:include a common page which contains ui:insert tags (templates are largish, so basic example below).
Using Mojarra everything worked ok, but now I have migrated to MyFaces the ui:insert tags are ignored and the content of the related ui:define does not get rendered (i.e. 'Here are my results' is not displayed).
Should I be specifying included-page.xhtml as a template somehow? I tried
<ui:composition template="included-page.xhtml" />
instead of
<ui:include src="included-page.xhtml" />
but lost the CSS.
Hoping someone can suggest a solution :)
Many thanks,
Neil
my-page.xhtml
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="/templates/default-template.xhtml">
<ui:param name="title" value="My Title" />
<ui:define name="results">
Here are my results
</ui:define>
</ui:composition>
default-template.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>#{title}</title>
</h:head>
<h:body>
<ui:include src="included-page.xhtml" />
</h:body>
</html>
included-page.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:insert name="results">
</ui:insert>
</ui:composition>
The <ui:include> should have been an <ui:decorate>.
<ui:decorate template="included-page.xhtml" />
But if the included-page.xhtml is by itself not reused elsewhere, I wonder why it isn't just been inlined in the master template instead.
See also:
Difference between ui:composition and ui:decorate in Facelets
What is the real conceptual difference between ui:decorate and ui:include?
I've been migrating aplication from EJB to JSF + Spring and doing this, I updated RichFaces from 3.3.1 to 4.1.0.
Now I'm struggling with following problem, that the console in chrome shows
Uncaught ReferenceError: jQuery is not defined
in RichFaces scripts like richfaces-event.js, popupPanel.js.
I know that in header of the html file, including of the jQuery file should be first, but I've looked into the former application and this scripts are also included there before jQuery and no errors appear. What's more, I don't now how I could change this, because these scripts are added implicitly by having:
<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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
How can I fix this problem?
<f:view contentType="text/html" locale="#{localeSelector.language}">
<h:head>
<title>#{messages['news.title']}</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css"
href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
</h:head>
<h:body>
<h:outputScript name="jquery.js" library="js" target="head" />
<div id="container">
</div>
</h:body>
</f:view>
</html>
The problem here is not lightbox but RichFaces.The html code generated is:
<script type="text/javascript" src="/ESA/javax.faces.resource/richfaces-event.js.xhtml"> </script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanel.js.xhtmlln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanelBorders.js.xhtml?ln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanelSizer.js.xhtml?ln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/jquery.js.xhtml?ln=js"> </script>
<script type="text/javascript" src="/ESA/javax.faces.resource/jquery.lightbox-0.5.js.xhtml?ln=js"></script>
But is the application I'm migrating, the code is the same and console does not show any errors
You should load your JavaScript libraries in the right order. If you see the source of the rendered page you will see that jQuery is loaded in second or not at all because of the library="js".
Modify the inclusion like that :
<h:head>
<h:outputScript name="jquery.js" />
<h:outputScript name="js/jquery.lightbox-0.5.js" />
</h:head>
Note :
The jQuery used will come from RichFaces, you wont be able to use the $ descriptor. You will need to use jQuery("your-selector")... instead. You will also need to put the LightBox library in <web-root>/resources/js/jquery.lightbox-0.5.js so it will be found.
I am using the following snippet for uploading photo, using primefaces :
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:outputText value="PrimeFaces Single Upload" />
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{uploadPhotoHandler.handleFileUpload}" mode="advanced"
update="messages" label="Choose a file" sizeLimit="5242880" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
invalidFileMessage="You are allowed to upload only images !" />
<p:growl id="messages" showDetail="true" sticky="true" />
This composition I am adding into the main page, which is index.xhtml using the following command : <ui:include src="upload_img_form.xhtml" />.
The main page looks like :
<?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 lang="en" 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">
<h:head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.xdr-transport.js"></script>
<script type="text/javascript" src="js/jquery.fileupload.js"></script>
<script type="text/javascript" src="themes/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="themes/jquery-ui-1.10.0.custom/css/sunny/jquery-ui-1.10.0.custom.css" />
<link type="text/css" rel="stylesheet" href="css/base.css" />
<link type=" text/css" rel="stylesheet" href="css/styles.css" />
</h:head>
<h:body>
<div id="container" class="container ">
<ui:include src="upload_img_form.xhtml" />
</div>
</h:body>
</html>
I have the following problems :
The progress bar doesn't work,
Cancel button doesn't work, and the biggest problem is the sizeLimit which doesn't validate the file which is given as a input.
Even this is not autoupload, the files are autouploaded, without clicking Upload button before.
The problem is 100% related to the head section because if I remove that, it works. Though, it doesn't work for others functionality in the same page, so I have to keep the js files and styles.
Thank you for your response.
Get rid of the manually included jQuery. PrimeFaces already auto-includes own copies. If they are of a different version, it would only conflict, resulting in JS-related trouble in all colors. You would have noticed it if you have checked the JS console in browser's developer toolset.
I'm trying to incorporate primefaces into my JSF 2.0 web project.
I've recently updated from facelets 1.x to 2.0 and Added primefaces jar to my library folder. Everything is fine except, the way I have my templates structured has a conflict with the primefaces.
my template.xhtml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">MILO</ui:insert></title>
//Css
//js
</h:head>
<h:body class="milo">
<h:form styleClass="miloForm" enctype="multipart/form-data">
<div id="container">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
<ui:insert name="content">
<!-- include your content file or uncomment the include below and create content.xhtml in this directory -->
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert> </div>
</h:form>
</h:body>
And my index.xhtml looked like this:
<!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">
<ui:composition template="/WEB-INF/templates/base.xhtml">
<ui:define name="content">
<p:editor/>
</ui:define>
Once I have this, the p:editor won't show up. any ideas why? the console won't show me any warnings/errors.
EDIT>>> Found JS Error
In your template.xhtml, you need to replace <head> by <h:head> and <body> by <h:body>. You shouldn't add another ones, that would only result in invalid HTML.
Particularly the <h:head> is mandatory as it allows component libraries like PrimeFaces to auto-include the necessary CSS/JS files by resource dependency injection. The <h:body> is only mandatory whenever you have <h:outputScript> elements with a target="body" so that they will be auto-relocated to the very bottom of the generated HTML <body> element.
Update your concrete problem is caused by a conflict in the manually loaded jQuery library and the one which is auto-included by PrimeFaces. PrimeFaces uses jQuery and jQuery UI under the covers. If you stick to using PrimeFaces, I'd recommend to drop the manually loaded jQuery and use the PrimeFaces-bundled one instead. To cover pages where you don't use PrimeFaces components as well, you can explicitly load PrimeFaces-bundled jQuery for every page by adding the following line to the <h:head>:
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I create a template xhtml file which is like richfaces-showcase main.xhtml:
<!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:a4j="http://richfaces.org/a4j">
<f:view contentType="text/html">
<h:head>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>My title</title>
</h:head>
<h:body>
<div id="page">
<ui:insert name="body">
Body content missed
</ui:insert>
</div>
</h:body>
</f:view>
</html>
And in sub page, I defined the "template body", and add an a4j:poll in my sub page, which I want to use to refresh the data every 5 seconds:
<!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:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/templates/main.xhtml">
<ui:define name="body">
<h:form>
<a4j:poll id="poll" interval="5000" enabled="true" action="..." render="poll,grid" />
</h:form>
<h:form>
<h:panelGrid columns="2" width="80%" id="grid">
sorry, details forgot ...
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
</html>
But the question is, when I open my sub page with IE8 in the localhost computer, the a4j:poll can refresh data once, and then it never get data again. when I open the sub page with IE6 or IE8 in other computer, it works fine! Can anybody find the reason out? Thanks in advance!!
I change the
<h:head>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>My title</title>
</h:head>
to
<h:head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>My title</title>
</h:head>
and, it works now... but why?
I got it working with EmulateIE8. But probably when using it in an intranet way IE can be doing things differently.
Check your Browser mode and Document mode (press F12).
I got: IE9 / IE8 standards.