I am trying to use Picklist from Primefaces. When the page is rendered, the javascript engine in Chrome cannot find Primefaces object. I get the following error 'Uncaught ReferenceError: PrimeFaces is not defined'. Am I missing to include any resource (js) in my .xhtml file? Please advise. Thanks.
Xhtml
<?xml version="1.0"?>
<!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" xml:lang="en" lang="en"
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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<link rel="stylesheet" type="text/css"
href="../jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" media="all" />
<script src="../jquery-ui-1.8.23.custom/js/jquery-1.8.0.min.js"></script>
<script
src="../jquery-ui-1.8.23.custom/js/jquery-ui-1.8.23.custom.min.js"></script>
</head>
<h:body>
<form id="form_486588" class="appnitro" method="post">
<div class="form_description"></div>
<p:pickList id="pickList" value="#{editorsMB.editors}" var="editor"
itemLabel="#{editor}" itemValue="#{editor}" />
<p:commandButton id="citySubmit" value="Submit"
style="margin-top:5px" />
</form>
</h:body>
</html>
Managed bean
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.DualListModel;
#ManagedBean(name = "editorsMB")
#SessionScoped
public class AdminEditorsBean {
private DualListModel<String> editors;
public AdminEditorsBean(){
List<String> adminsSource = new ArrayList<String>();
List<String> adminsTarget = new ArrayList<String>();
adminsSource.add("aaa");
adminsTarget.add("target1");
editors = new DualListModel<String>(adminsSource, adminsTarget);
}
public DualListModel<String> getEditors() {
return editors;
}
public void setEditors(DualListModel<String> editors) {
this.editors = editors;
}
}
PrimeFaces will auto-include the necessary JS/CSS resources in <h:head>.
However, you don't have that tag. You've there a "plain HTML" <head>. Fix it accordingly:
<html>
<h:head>
...
</h:head>
<h:body>
...
</h:body>
</html>
This mistake should also have been logged in the server log as below:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
See also How to include another XHTML in XHTML using JSF 2.0 Facelets? and When to use <ui:include>, tag files, composite components and/or custom components? for various correct examples of authoring JSF/Facelets pages.
Unrelated to the concrete problem: PrimeFaces as being a jQuery based JSF component library already ships with jQuery and jQuery UI bundled. You should remove the manually included scripts from your page to avoid conflicts. See also Adding jQuery to PrimeFaces results in Uncaught TypeError over all place.
Take immediately the opportunity to replace that verbose <link> by a <h:outputStylesheet>. See also How to reference CSS / JS / image resource in Facelets template?
Related
I am trying to use Picklist from Primefaces. When the page is rendered, the javascript engine in Chrome cannot find Primefaces object. I get the following error 'Uncaught ReferenceError: PrimeFaces is not defined'. Am I missing to include any resource (js) in my .xhtml file? Please advise. Thanks.
Xhtml
<?xml version="1.0"?>
<!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" xml:lang="en" lang="en"
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"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<link rel="stylesheet" type="text/css"
href="../jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" href="css/form.css" media="all" />
<script src="../jquery-ui-1.8.23.custom/js/jquery-1.8.0.min.js"></script>
<script
src="../jquery-ui-1.8.23.custom/js/jquery-ui-1.8.23.custom.min.js"></script>
</head>
<h:body>
<form id="form_486588" class="appnitro" method="post">
<div class="form_description"></div>
<p:pickList id="pickList" value="#{editorsMB.editors}" var="editor"
itemLabel="#{editor}" itemValue="#{editor}" />
<p:commandButton id="citySubmit" value="Submit"
style="margin-top:5px" />
</form>
</h:body>
</html>
Managed bean
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.DualListModel;
#ManagedBean(name = "editorsMB")
#SessionScoped
public class AdminEditorsBean {
private DualListModel<String> editors;
public AdminEditorsBean(){
List<String> adminsSource = new ArrayList<String>();
List<String> adminsTarget = new ArrayList<String>();
adminsSource.add("aaa");
adminsTarget.add("target1");
editors = new DualListModel<String>(adminsSource, adminsTarget);
}
public DualListModel<String> getEditors() {
return editors;
}
public void setEditors(DualListModel<String> editors) {
this.editors = editors;
}
}
PrimeFaces will auto-include the necessary JS/CSS resources in <h:head>.
However, you don't have that tag. You've there a "plain HTML" <head>. Fix it accordingly:
<html>
<h:head>
...
</h:head>
<h:body>
...
</h:body>
</html>
This mistake should also have been logged in the server log as below:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
See also How to include another XHTML in XHTML using JSF 2.0 Facelets? and When to use <ui:include>, tag files, composite components and/or custom components? for various correct examples of authoring JSF/Facelets pages.
Unrelated to the concrete problem: PrimeFaces as being a jQuery based JSF component library already ships with jQuery and jQuery UI bundled. You should remove the manually included scripts from your page to avoid conflicts. See also Adding jQuery to PrimeFaces results in Uncaught TypeError over all place.
Take immediately the opportunity to replace that verbose <link> by a <h:outputStylesheet>. See also How to reference CSS / JS / image resource in Facelets template?
I am trying to integrate the ICEFaces ACE component library in my project. I've the following view:
<!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">
<head>
<h:outputStylesheet library="org.icefaces.component.skins"
name="rime.css" />
<f:loadBundle basename="resources.application" var="msg" />
<title>
<h:outputText value="#{msg.templateTitle}" />
</title>
</head>
<body>
<div id="content">
<h:form>
<ace:dataTable var="user" value="#{userBean.users}"
paginator="true" rows="50" selectionMode="multiple">
<ace:column headerText="users">
<ace:row>#{user}</ace:row>
</ace:column>
</ace:dataTable>
</h:form>
</div>
</body>
</html>
Unfortunately apparently there is no JavaScript / CSS loaded, so the components are not displayed properly. Moreover, the server logs this:
ICEfaces configured for view /index.xhtml but h:head and h:body components are required
Is this related?
You need to use JSF <h:head> and <h:body> components instead of plain HTML <head> and <body>. This way JSF and any JSF component library will be able to programmatically auto-include CSS/JS resources in there.
E.g.
<!DOCTYPE html>
<html lang="en"
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"
>
<f:loadBundle basename="resources.application" var="msg" />
<h:head>
<title>#{msg.templateTitle}</title>
</h:head>
<h:body>
...
</h:body>
</html>
Note that this way you also don't need that <h:outputStylesheet> anymore.
See also:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
Unrelated to the concrete problem, you'd better declare resources.application as <resource-bundle> in faces-config.xml, so that you don't need to repeat it over all views. Also note that you don't necessarily need <h:outputText> over all place. The <head> and all of above also indicates that you're learning JSF based on a JSF 1.x targeted tutorial instead of a 2.x targeted one. Make sure that you're using the right resources to learn.
I read somewhere that the Facelet Tag Libraries URI's changed from http://java.sun.com/jsf/* to http://xmlns.jcp.org/jsf/*, so that means the new namespaces applies only for the new specification(JSF 2.2) or they can or should be used in older versions like 2.0, 2.1 or 1.x?
for example:
Library Old URI New URI
Composite Components http://java.sun.com/jsf/composite http://xmlns.jcp.org/jsf/composite
Faces Core http://java.sun.com/jsf/core http://xmlns.jcp.org/jsf/core
HTML_BASIC http://java.sun.com/jsf/html http://xmlns.jcp.org/jsf/html
JSTL Core http://java.sun.com/jsp/jstl/core http://xmlns.jcp.org/jsp/jstl/core
Facelets Templating http://java.sun.com/jsf/facelets http://xmlns.jcp.org/jsf/facelets
EDIT
To make the question more understandable nothing like a snippet of code:
<?xml version="1.0" encoding="UTF-8" ?>
<!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"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css" title="Style" href="theme/stylesheet.css" />
</h:head>
<h:body>
<h:form id="form1" styleClass="form">
<h:inputText id="text1" styleClass="inputText"></h:inputText>
</h:form>
</h:body>
</html>
The previous code would be valid for JSF 2.0? notice the taglibs:
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
Thanks.
From what I've seen here : http://www.oracle.com/webfolder/technetwork/jsc/xml/ns/index.html, the canonical names for the large majority of taglibs stays http://java.sun.com/
However, as stated, you can use the new URIs since they created an alias.
i have written a simple code to display an image using Jsp XHTML template but it is not working
but same is working when i am using Jsp HTML template ....
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Car Details</title>
</head>
<body>
<f:view>
<h:graphicImage id="root" value="http://www.allbestwallpapers.com/tagwallpaper/convertible%20car-wallpapers.jpg"></h:graphicImage>
</f:view>
</body>
</html>
please Help....
You're mixing JSP (foo.jsp) with Facelets (foo.xhtml).
JSP is the ancient view technology which was the default in JSF 1.x. It is not XML based. Facelets is the successor of JSP and is the default view technology since JSF 2.0 (and JSP became deprecated). Facelets is XML based. Those xmlns XML namespace declarations don't work in JSP, but in Facelets only.
Rename the filename from the .jsp extension to .xhtml extension and get rid of that JSP specific #page declaration and it'll work.
I am trying richface 4. It seems tags class are not setting on JAVA build path. I am getting this error for all rich component: "ERROR: tag handler class for * (org.richfaces.taglib.*) was not found on the Java Build Path"
For a4j component also, for all component i am getting same error "The tag handler class for "a4j:" (org.ajax4jsf.taglib.html.jsp.) was not found on the Java Build Path"
For richface4, i performed following actoin:
1) Added following jars:
annotations-4.0.0.Final.jar
cssparser-0.9.5.jar
guava-r08-gwt.jar
guava-r08.jar
jsf-api.jar
jsf-impl.jar
richfaces-components-api-4.1.0.Final.jar
richfaces-components-ui-4.1.0.Final.jar
richfaces-core-api-4.1.0.Final.jar
richfaces-core-impl-4.1.0.Final.jar
sac-1.3.jar
commons-beanutils-1.8.3.jar
commons-collections-3.2.1.jar
commons-digester-2.1-sources.jar
commons-digester-2.1.jar
commons-discovery-0.4.jar
jhighlight-1.0.jar
jsf-facelets-1.1.14.jar
web.xml is default generated and NO new element is added. As it is not required to change in RF4 (which is required in RF3.3).
JSP file is
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" 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:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" version="2.0">
<jsp:directive.page language="java"
contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" />
<jsp:text>
<![CDATA[ <?xml version="1.0" encoding="ISO-8859-1" ?> ]]>
</jsp:text>
<jsp:text>
<![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
</jsp:text>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>TESTING</title>
</head>
<body>
<f:view>
<h:form>
<a4j:commandLink
value="Opss! I forgot password"
reRender="forgetPasswordPanel"
oncomplete="#{rich:component('forgetPasswordPanel')}.show()">
</a4j:commandLink>
</h:form>
<rich:modalPanel id="forgetPasswordPanel" autosized="true" width="380">
<f:facet name="header">
<h:outputText value="Reset Password"/>
</f:facet>
</rich:modalPanel>
</f:view>
</body>
</html>
</jsp:root>
i further investigated this issue and found that taglib(tld file) doesn't contain tag-class for many rich and a4j component and richFace4.1 jar does not have corrosponding java class for them (which is in richFaces 3.3 jars).
Am i missing some jars ? What else should i do to work with richface4 ?
You seem to be trying to upgrade a RichFaces 3.3 web application to RichFaces 4.1. You need to do many more changes than only replacing the JAR files. You can find the exact migration steps in their own documentation: RichFaces 3.3.x to 4.x migration guide.
For example, JSP is been deprecated and replaced by Facelets, you'd need to rewrite your JSPs to be XHTMLs. The <rich:modalPanel> is been replaced by <rich:popupPanel>, you need to find and replace all those tags accordingly. The reRender attribute is been replaced by update attribute. Etcetera. Also that jsf-facelets-1.1.14.jar which is of Facelets 1.x should be removed from the /WEB-INF/lib. JSF 2.x libraries already ships with the right Facelets 2.x implementation bundled.
See also:
Migrating from JSF 1.2 to JSF 2.0