I'm newbie in JSF + Primefaces.I use Tomcat 7 + JSF 2.2.7 + PrimeFaces 5.0. I want to make table like in primefaces tutorial(http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml)
Application started correctly (without errors in log), but my page looks wrong(sorry, i cant attach image because I have little reputation).
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bootstrap</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>nodes.xhtml</welcome-file>
</welcome-file-list>
</web-app>
faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>
nodes.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:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:growl id="growl" life="2000" />
<p:commandButton value="Add Node" id="ajax" update="growl" actionListener="#{nodeListener.addAction}" styleClass="ui-priority-primary" />
<p:dataTable id="nodes" var="node" value="#{nodeListener.nodes}" editable="true" style="margin-bottom:20px"
rendered="true">
<f:facet name="header">
List of nodes
</f:facet>
<p:ajax event="rowEdit" listener="#{nodeListener.onRowEdit}" update=":form:msgs"/>
<p:ajax event="rowEditCancel" listener="#{nodeListener.onRowCancel}" update=":form:msgs"/>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{node.name}"/></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{node.name}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Address">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{node.address}"/></f:facet>
<f:facet name="input"><p:inputText value="#{node.address}" style="width:100%"
label="Address"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor/>
</p:column>
</p:dataTable>
</h:form>
</html>
The <h:head/> tag translates to the HTML <head> tag. Traditionally in HTML, all user-defined scripts and style resource files are declared in the head tag, and JSF is no exception. The styling elements for Primefaces and the AJAX-related js scripts need to be rendered as part of the <h:head/>/<head> tag.
Omitting <h:head/> from your JSF view means that during page render, there's nowhere for the JSF runtime to automatically inject the necessary scripts, hence the results you observed: style-less JSF page. I'm pretty sure your JSF page also lacked any form of ajax-processing support by way of the <p:ajax/> and <f:ajax/> tags
Related
The issue:
I have two <p:selectOneMenu> and when I drop the first menu down, I can not select any items in the menu, and once I click out of the menu I can not open the menu again. Then, if I open the second <p:selectOneMenu> I can select an item in the second menu, but then I can't open either menu again.
Trying to use a <p:pickList> and none of the buttons to move items around work.
<p:growl> functionally is non-existent, as is the action method never gets called.
I'm sure I could keep listing stuff that isn't working for me, but that is the three major components I am trying to use.
The setup:
A Java EE Web Application using JSF 2.3, JDK 18, primefaces-8.0.jar, on a Payara Server v5.2022.2, the primefaces-8.0.jar was imported to the library, and the source was declared as primfaces-8.0-sources.jar. My faces-config only defines a messages resource bundle and some navigation cases. As far as the web.xml it is pretty basic, see below:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
1440
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>/index.xhtml</welcome-file>
</welcome-file-list>
<filter>
<filter-name>MyFilter</filter-name>
<filter-class>Filters.AuthFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AuthFilter</filter-name>
<url-pattern>*.xhtml</url-pattern>
</filter-mapping>
</web-app>
Libraries:
index.xhtml 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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Title</title>
<h:outputStylesheet library="css" name="primeflex3.1.2.css"/>
<h:outputStylesheet library="css" name="styles.css"/>
<h:outputStylesheet library="css" name="datatables.css"/>
<h:outputScript library="js" name="datatables.min.js"/>
</h:head>
<h:body>
<h:form>
<ui:include src="edit.xhtml"/>
</h:form>
</h:body>
</html>
edit.xhtml Code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<h:form rendered="#{navBean.currentTabIndexIsEdit}" >
<center>
<h:outputLabel for="#next" value="Assigned Shop"/>
<p:selectOneMenu id="shops_menu" value="#{edit_Bean.job.shop_id}" appendTo="#this" >
<f:selectItem itemLabel="Select Shop" itemValue="" />
<f:selectItem itemValue="1" itemLabel="Broussard, Louisiana" />
<f:selectItem itemValue="2" itemLabel="North Louisiana" />
<f:selectItem itemValue="3" itemLabel="South Texas" />
<f:selectItem itemValue="4" itemLabel="West Texas" />
</p:selectOneMenu>
<h:outputLabel>Rig Name </h:outputLabel>
<p:selectOneMenu id="rigs_menu" value="#{edit_Bean.job.rig_id}" appendTo="#this">
<f:selectItems value="#{edit_Bean.rigs}" var="rigs" itemLabel="#{rigs.rig_name}" itemValue="#{rigs.rig_id}" />
</p:selectOneMenu>
<!-- Other Items -->
</center>
</form>
</ui:composition>
</html>
edit_Bean.java Code:
No much to put here, its just a named bean with a session scope with a few supporting methods.
Thanks for any help in advance!
The solution
If you see in index.xhtml, I am including a javascript file from datatables. That particular version of the JS file from data tables included its own jQuery version, which was conflicting with primefaces. I re-downloaded the datatables java script with out jQuery selected and it is now working.
Today I was working on our application for a school project. We had no problems with the our Bootsfaces but suddenly I can't seem to get the components to show (see image). I don't know what's causing this unexpected behaviour because it worked before. Nothing has been changed to the .xhtml page. The error log in the Chrome console and the Payara console are both giving 0 errors.
I am using Payara 5.181 and Java EE 7.
Edit:
Removing the "generated" folder in the Payara server and restarting the PC seems to solve this problem, but after a while (can't reproduce exactly why) the page turns blank again.
.xhtml file
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://bootsfaces.net/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Kies je cartracker</title>
<h:outputStylesheet name="default.css" library="css" />
</h:head>
<h:body>
<h1>Kies je cartracker:</h1>
<b:dataTable value="#{tourmanager.allCartrackers}"
var="tracker">
<b:dataTableColumn>
<f:facet name="header">
<h:outputText value="Vehicle" />
</f:facet>
<h:outputText value="#{tracker.vehicle.serieNr}" />
</b:dataTableColumn>
<b:dataTableColumn>
<f:facet name="header">
<h:outputText value="Kies cartracker" />
</f:facet>
<h:form>
<b:commandButton action="#{tourmanager.pickCartracker(tracker)}"
value="Pick car" >
</b:commandButton>
</h:form>
</b:dataTableColumn>
</b:dataTable>
</h:body>
</html>
pom.xml
<dependency>
<groupId>net.bootsfaces</groupId>
<artifactId>bootsfaces</artifactId>
<version>1.2.0</version>
<scope>compile</scope>
</dependency>
web.xml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
curiously in my case I had a similar problem, and it turns out that so many modifications and tests prove that this dependency in my pom.xml generated that the bootsfaces components were not rendered. My solution was to eliminate this dependence.
org.glassfishjavax.faces2.2.7
This question already has an answer here:
JSF returns blank/unparsed page with plain/raw XHTML/XML/EL source instead of rendered HTML output
(1 answer)
Closed 8 years ago.
I have a problem with PrimeFaces 5 and bootstrap theme. I am using wildfly server , ejb 3.2, JSF 2.2 + PrimeFaces 5 with bootstrap theme.
I am trying to do simple login page.
My login page:
<h:head>
<title>Login Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="primefaces-bootstrap" />
</h:head>
<h:body>
<h:form id="login" onsubmit="action='j_security_check';" prependId="false">
<h:panelGrid columns="2">
<p:outputLabel for="j_username" value="Username" />
<p:inputText id="j_username" />
<p:outputLabel for="j_password" value="Password" />
<p:password id="j_password" />
<p:commandButton id="submit" value="Login" ajax="false"/>
</h:panelGrid>
</h:form>
</h:body>
</html>
Unfortunately, there is no display on my web browser.
Can you tell me what is the reason?
Login page
I have changed url pattern in web.xml file:
from:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*xhtml</url-pattern>
</servlet-mapping>
to:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>/faces/login.xhtml</welcome-file>
</welcome-file-list>
Now it works.
I'm trying to display a dataGrid with primefaces, but it doesn't show correctly :
The code .xhtml is here :
<!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/basic.xhtml">
<ui:define name="content">
<h:form>
<p:dataGrid value="#{data.result}" columns="3" rows="10" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:panel header="#{article.name}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="/Images/linux.jpg"/>
<h:outputText value="#{article.description}" />
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
</ui:define>
</ui:composition>
</html>
My web.xml :
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<display-name>PrimeFaces</display-name>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bootstrap</param-value>
</context-param>
</web-app>
I have installed primefaces-4.0.jar in MyProject/WebContent/WEB-INF/lib/primefaces-4.0.jar and right click on it > Build Path > Configure Build Path... so that I have a primefaces-4.0.jar in MyProject/Java Resources/Libraries/primefaces-4.0.jar. I did the same with bootstrap-1.0.10.jar.
Why is that not working ?
If you need more informations, tell me.
---UPDATE---
To show the Network of the page :
http://imagesup.org/images12/1389819198-networkepimarket.png
I am developing a jsf web application using primefaces tool for the ui tags. i'm having one problem in primefaces tag which is not working it show an exception like this
/templates/leftmenu.xhtml at line 10 and column 28 <p:tabMenu> Tag Library supports namespace: http://primefaces.org/ui, but no tag was defined for name: tabMenu
my leftmenu xhtml page
<!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">
<h:head></h:head>
<body>
<h:form>
<p:tabMenu activeIndex="0">
<p:menuitem value="Home" url="Menu.jsf" icon="ui-icon-star" />
<p:menuitem value="Fabricants" url="/pagess/pagesFabricant/Fabricant.jsf" icon="ui-icon-wrench" />
<p:menuitem value="Composants" url="/pagess/pagesComposant/Composant.jsf" icon="ui-icon-search" />
<p:menuitem value="Dossier d'equivalence" url="DEQ.jsf" icon="ui-icon-document" />
</p:tabMenu>
</h:form>
</body>
</html>
my template xhtml file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<link type="text/css" rel="stylesheet" href="theme.css.jsf.css"/>
<title>Cation</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
<p:graphicImage value="/logo.gif" />
</p:layoutUnit>
<p:layoutUnit position="south" size="40" closable="true" collapsible="true">
<span style="padding-left: 500px;">Company Name, Copyright 2013</span>
</p:layoutUnit>
<p:layoutUnit position="west" size="180" header="Menu" collapsible="true">
<ui:insert name="leftmenu">
<div>
<ui:include src="leftmenu.xhtml" />
</div>
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">
Select one of the links on the left to proceed.
</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
my web.xml file
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>Cation</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/login.xhtml</welcome-file>
</welcome-file-list>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<description>
This parameter tells MyFaces if javascript code should be allowed in
the rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default is 'true'</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>
If true, rendered HTML code will be formatted, so that it is 'human-readable'
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default is 'true'</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>
If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default is 'false'
</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
<init-param>
<param-name>uploadDirectory</param-name>
<param-value>C:\</param-value>
</init-param>
<init-param>
<param-name>thresholdSize</param-name>
<param-value>1000000</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
and i'm using primefaces 3.2 jar file
Can any one help me to solve this problem plz...
tabMenu is not supported in primefaces 3.2 version. Its been supported for version 3.4 and more.