I have a jsf project, that i made using only core and html jsf taglibs, but the components of the forms look awful, so i'm now trying to add richfaces so i can add a skin to them, the jars i've added for richfaces are:
richfaces-core-api-4.3.4.Final.jar
richfaces-core-impl-4.3.4.Final.jar
richfaces-components-api-4.3.4.Final.jar
richfaces-components-ui-4.3.4.Final.jar
cssparser-0.9.5.jar
guava-r09.jar
sac-1.3.sources,jar
and my web.xml looks like this
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<filter>
<!-- Nome que indentifica o filtro pode ser qualquer um -->
<filter-name>LoginWard</filter-name>
<!-- Endereço da classe que herda de javax.servlet.Filter com o nome dos pacotes e sem .java ex: org.otkdrg.NomeDaClasse -->
<filter-class>br.com.gbcCalcados.moduloVendas.filter.LoginWard</filter-class>
</filter>
<filter-mapping>
<filter-name>LoginWard</filter-name>
<url-pattern>*.xhtml</url-pattern>
</filter-mapping>
<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>classic</param-value>
</context-param>
Still nothing happens when i run the project everthing still the same not even an exception.
Here is a 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"
>
<ui:composition template="/WEB-INF/templates/gbcTemplate.xhtml"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j" >
<ui:define name="Conteudo">
<div id="funcFormDiv" align="center">
<h:form>
<h:messages/>
<h:outputLabel for="campoNome" value="Nome Completo:"/><br/>
<h:inputText id="campoNome" required="true" value="#{cadastroFuncBean.nomeCompleto}" validatorMessage="O nome completo é composto de um ou mais nomes e não pode conter numeros" requiredMessage="O nome completo é obrigatorio" >
<f:validateRegex pattern="\D* \D*"/>
</h:inputText><br/>
<h:outputLabel for="campoUsuario" value="Nome de usuário:"/><br/>
<h:inputText id="campoUsuario" required="true" value="#{cadastroFuncBean.usuario}" requiredMessage="O nome de usuario é obrigatorio" validatorMessage="O nome de usuário deve conter no minimo 6 e no maximo 15 letras">
<f:validateLength minimum="6" maximum="15"/>
</h:inputText><br/>
<h:outputLabel for="campoSenha" value="Senha:"/><br/>
<h:inputSecret id="campoSenha" required="true" value="#{cadastroFuncBean.senha}" requiredMessage="A senha é obrigatoria" validatorMessage="A senha deve conter no minimo 3 e no maximo 10 letras">
<f:validateLength minimum="3" maximum="10"/>
</h:inputSecret><br/>
<h:outputLabel for="campoNumContrato" value="Numero do contrato:"/><br/>
<h:inputText id="campoNumContrato" required="true" value="#{cadastroFuncBean.numContrato}" requiredMessage="O numero de contrato é obrigatorio" validatorMessage="Numero de contrato invalido">
<f:validateRegex pattern="^9\d{5}"/>
</h:inputText><br/><br/><br/>
<h:commandButton value="Enviar" action="#{cadastroFuncBean.cadastrar}" /><input type="reset" value="Resetar" />
<br/>
<h:button id="voltar" value="Voltar para Login" outcome="login" />
</h:form>
</div>
</ui:define>
</ui:composition>
</html>
the template:
<?xml version="1.0" encoding="UTF-8"?>
<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:a4j="http://richfaces.org/a4j" >
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GBC calçados</title>
<h:outputStylesheet name="arquivo.css" library="css"/>
</h:head>
<h:body>
<div id="LoginInfoTab"><span id="LoginInfo">Usuário Logado:<h:outputText value="#{sessionScope['usuario_logado'] }" /></span></div>
<div id="TopBanner"><h:graphicImage width="100%" library="images" name="TopBanner.jpg" /></div>
<div id="Menu" >
<h:form>
<h:link outcome="clientesHome">
<div class="menuItem">
<span class="menuItemTexto">Clientes</span>
</div>
</h:link>
<h:link outcome="vendasHome" >
<div class="menuItem" id="botaoVendas">
<span class="menuItemTexto">Vendas</span>
</div>
</h:link>
</h:form>
</div>
<div id="Content" align="center">
<ui:insert name ="Conteudo"/>
</div>
<div id="BottomBanner"><h:graphicImage width="100%" library="images" name="BottomBanner.jpg" /></div>
</h:body>
</html>
Related
Good Day.
I've created a PrimeFaces 5 project (JSF 2.2) which makes use of Spring Security 4. I'm attempting to make use of p:dataTable control with single selection enabled, which through an ajax call, updates a p:pickList control.
The problem is related with Spring Security. If I deactivate the security of the page where my page controls are located (admin.faces), the ajax behavior works fine. But if I activate security, I get 403 status codes and the pickList doesn't get updated. I must indicate here that with security activated, if I attempt going to admin page, without logging first, I'm redirected to the login page.
This is the configuration used for Spring Security. Several code was eliminated for sake of simplicity:
<beans:beans xmlns="http://www.springframework.org/schema/security"
xmlns:beans="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
http://www.springframework.org/schema/security
http://www.springframework.org/schema/security/spring-security.xsd">
<http pattern="/*.css" security="none" />
<http pattern="/*.js" security="none" />
<http use-expressions="true">
<intercept-url pattern="/login.faces" access="permitAll" />
<intercept-url pattern="/javax.faces.resource/**" access="permitAll"/>
<intercept-url pattern="/admin.faces" access="hasRole('Administrator')" />
<form-login
login-page="/login.faces"
authentication-failure-url="/login.faces" />
<logout />
</http>
<authentication-manager alias="authManager">
<authentication-provider ref="daoAuthenticationProvider"/>
</authentication-manager>
</beans:beans>
The login 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: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">
<h:head>
<title>Reports</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="_csrf" content="#{_csrf.token}"/>
<meta name="_csrf_header" content="#{_csrf.headerName}"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</h:head>
<body>
<h:messages />
<h:form id="loginForm">
<input type="hidden" name="#{_csrf.parameterName}" value="#{_csrf.token}"/>
<p:panelGrid columns="2">
<h:outputLabel value="User:" />
<h:inputText value="#{loginBean.user}" required="true"/>
<h:outputLabel value="Password:" />
<h:inputSecret value="#{loginBean.password}" required="true"/>
<f:facet name="footer">
<div style="text-align:right;">
<h:commandButton type="submit" id="login"
action="#{loginBean.login}" value="Login" />
</div>
</f:facet>
</p:panelGrid>
</h:form>
</body>
</html>
The protected page (admin):
<!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:p="http://primefaces.org/ui">
<h:head>
<title>Reports</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="_csrf" content="#{_csrf.token}"/>
<meta name="_csrf_header" content="#{_csrf.headerName}"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<h:outputScript library="primefaces" name="jquery/jquery.js"/>
<h:outputScript library="js" name="admin.js"/>
</h:head>
<body>
<h1>Reports</h1>
<br />
<div>
<h:form id="form">
<input type="hidden" name="#{_csrf.parameterName}" value="#{_csrf.token}"/>
<p:messages id="messages" showDetail="false" showSummary="true"
autoUpdate="true" closable="true" />
<br />
<div style="float: left; width: 25%; margin-right: 10px;">
<p:dataTable value="#{reports.tables}" var="tbl"
selection="#{reports.tablesel}" selectionMode="single"
rowKey="#{tbl}" scrollable="true" scrollHeight="300" id="tables">
<p:ajax event="rowSelect" update=":form:selColumns" />
<p:column>
<f:facet name="header">
<h:outputText value="Tables" />
</f:facet>
<h:outputText value="#{tbl}" />
</p:column>
</p:dataTable>
</div>
<div style="float: left;">
<div style="margin-bottom: 10px;">
<div style="float: left; margin-right: 10px;">
<p:selectOneMenu value="#{reports.format}">
<f:selectItem itemValue="pdf" itemLabel="PDF" />
<f:selectItem itemValue="xls" itemLabel="Excel 2003" />
</p:selectOneMenu>
</div>
<div style="float: left; margin-right: 10px;">
<p:commandButton action="#{reports.create}"
value="View report" />
</div>
<div style="clear: both;"></div>
</div>
<p:pickList value="#{reports.lstColumns}" var="c"
itemLabel="#{c}" itemValue="#{c}" style="margin-bottom:10px;"
id="selColumns" />
<div style="margin-bottom: 10px;">
<p:outputLabel value="Conditions" for="filter"
style="display:block;" />
<p:inputTextarea id="filter" value="#{reports.filter}"
style="width:97%;" />
</div>
</div>
</h:form>
</div>
</body>
</html>
A javascript file used in admin.faces:
$(document).ready(function() {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
})
});
Thanks for your attention.
I had the problem with 403 Responses for AJAX calls as well.
The Problem was, that no CSRF Token was submitted.
By manually adding:
<h:form>
...
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</h:form>
it worked.
My jsf page on IE won't show anything on firefox i atleast get the text. Strange thing is that there is no error so i am not sure what is wrong. I looked around for information and even added a f:view for the page but still nothing. Thank you for your time.
<!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:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j" >
<f:view contentType="text/html">
<h:head>
<title>QC-Form</title>
<link href="./css/styles.css"
rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<h1 class="title">QC Form</h1>
<br/> <br/>
<font face="comic sans MS" size="2" color="#33CCFF">
<p><b>Enter the information below: </b> </p>
</font>
<h:form>
<font face="comic sans MS" size="2">
<h:panelGroup id="initialInfo">
<b>Your initials: </b>
<h:inputText value="#{qcFormBean.techNameValue}"/><br/>
<br/>
<b>Model #: </b>
<h:selectOneMenu value="#{qcFormBean.modelValue}">
<f:selectItem itemValue="3600" itemLabel="3600" />
<f:selectItem itemValue="7200" itemLabel="7200" />
<f:selectItem itemValue="8300" itemLabel="8300" />
<f:selectItem itemValue="8400" itemLabel="8400" />
<f:selectItem itemValue="8500p" itemLabel="8500p" />
<f:selectItem itemValue="8800" itemLabel="8800" />
<f:selectItem itemValue="9000" itemLabel="9000" />
<f:selectItem itemValue="9008" itemLabel="9008" />
<f:selectItem itemValue="9200" itemLabel="9200" />
<f:selectItem itemValue="9300" itemLabel="9300" />
</h:selectOneMenu><br/>
<br/>
<b>Date : </b>
<h:outputText value="#{currentDate}"/>
<br/> <br/>
<b>Serial #: </b>
<h:inputText value="#{qcFormBean.serialValue}"/><br/>
<br/>
<b>Customer Name: </b>
<h:inputText value="#{qcFormBean.customerNameValue}"/><br/>
<br/>
<b>Special Instructions: </b>
<h:inputText value="#{qcFormBean.specialInstructionsValue}"/><br/>
</h:panelGroup>
</font>
<font face="comic sans MS" size="2" color="#33CCFF">
<p><b>QC Process</b> </p>
</font>
<font face="comic sans MS" size="2">
<h:panelGroup id="dliSerial">
<b>1.Unit Serial number has been applied: </b>
<h:selectOneMenu value="#{qcFormBean.unitSerialValue}">
<f:selectItems value="#{qcFormBean.valueQcValue}"/>
</h:selectOneMenu>
<br/>
</h:panelGroup>
<br/>
<b>2.Screen Protector has been applied: </b>
<h:panelGroup id="dliSticker">
<h:selectOneMenu value="#{qcFormBean.dliStickerValue}">
<f:selectItem itemValue="P" itemLabel="Pass or Not applicable" />
<f:selectItem itemValue="M" itemLabel="FAIL-Mechanical" />
<f:selectItem itemValue="E" itemLabel="FAIL-Electrical" />
<f:selectItem itemValue="C" itemLabel="FAIL-Cosmetic" />
<f:selectItem itemValue="S" itemLabel="FAIL-Software" />
<a4j:ajax event="change" execute="#this" render="perfbyDliSticker" limitRender="true" />
</h:selectOneMenu>
</h:panelGroup>
<h:panelGroup id="perfbyDlitcSticker">
<h:selectOneMenu value="#{qcFormBean.stickerFreq}"
rendered="#{!qcFormBean.dliStickerValue eq 'P'}">
<f:selectItem itemValue="A" itemLabel="Always" />
<f:selectItem itemValue="O" itemLabel="Often" />
<f:selectItem itemValue="S" itemLabel="Seldom" />
</h:selectOneMenu>
</h:panelGroup>
<br/>
</font>
<h:commandButton action="#{qcFormBean.submitForm()}"/>
</h:form>
</h:body>
</f:view>
</html>
Update: Right clicking on the source file on firefox does show the raw code being displayed like this:
<b>Your initials: </b>
<h:inputText value=""></h:inputText><br />
<br />
<b>Model #: </b>
<h:selectOneMenu value="">
</h:selectOneMenu><br />
<br />
and my web.xml file has the following servlet information.
<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>*.jsf</url-pattern>
</servlet-mapping>
As per the symptoms described in the comments, the <f:xxx> and <a4j:xxx> tags are properly processed by JSF, but the <h:xxx> tags not. Now, let's look at their XML namespace declarations, which is where all the processing starts:
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j" >
The xmlns.jcp.org domain as you've declared for the <h:xxx> XML namespace is introduced since JSF 2.2. The symptom of it being unprocessed thus indicates that you aren't running JSF 2.2 at all, but an older JSF 2.x version, such as 2.0 or 2.1, which don't recognize the new XML namespace domains yet.
You've basically 2 options:
Either fix the <h:xxx> XML namespace accordingly to match JSF 2.0/2.1 specification:
xmlns:h="http://java.sun.com/jsf/html"
Or, just upgrade to JSF 2.2.
That means your jsf tags are not parsed to plain html. To confirm this one see the page view source if you could see the plain jsf tags then that is the problem.
The primary reason for tags not being parsed means your request is not being handed by Faces servlet. You should have some thing like this in your web.xml
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
JSF 2.2
Richfaces 4.3.3
Java 7
Netbeans 7.3.1
Im trying to use a richfaces popup calender, but it does not popup, i can see the input field aswell as the calender icon but when i click it nothing happens. when setting popup to false i can see the whole calender.
Page examples:
<?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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/template.xhtml" >
<ui:define name="title">
<h:outputText value="#{bundle.CreateTimeLoggingDetailTitle}"></h:outputText>
</ui:define>
<ui:define name="pagetitle">
<h:outputText value="Client Details" styleClass="auto-style3"></h:outputText>
</ui:define>
<ui:define name="heads">
<h:link outcome="/login/admin.xhtml" value="#{bundle.CreateTimeLoggingDetailIndexLink}"/>
</ui:define>
<ui:define name="body">
<!-- CLIENT INFORMATION-->
<h:panelGroup id="messagePanel" layout="block">
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
</h:panelGroup>
<h:form>
<h:panelGrid columns="4">
<h:outputText value="#{bundle.ViewTimeLoggingLabel_employeesEmployeeNo}"/>
<h:outputText value="#{employeesController.getEmployees(timeLoggingController.selected.employeesEmployeeNo).name} #{employeesController.getEmployees(timeLoggingController.selected.employeesEmployeeNo).surname}" title="#{bundle.ViewTimeLoggingTitle_employeesEmployeeNo}"/>
<h:outputText value="#{bundle.ViewTimeLoggingLabel_customersId}"/>
<h:outputText value="#{customersController.getCustomers(timeLoggingController.selected.customersId).name}" title="#{bundle.ViewTimeLoggingTitle_customersId}"/>
<h:outputText value="#{bundle.ViewTimeLoggingLabel_projectsId}"/>
<h:outputText value="#{projectsController.getProjects(timeLoggingController.selected.projectsId).description}" title="#{bundle.ViewTimeLoggingTitle_projectsId}"/>
<h:outputText value="#{bundle.ViewTimeLoggingLabel_tasksId}"/>
<h:outputText value="#{tasksController.getTasks(timeLoggingController.selected.tasksId).description}" title="#{bundle.ViewTimeLoggingTitle_tasksId}"/>
<br/>
</h:panelGrid>
<h:outputText value="Log Time" styleClass="auto-style3" />
<!-- LOG TIME PANEL-->
<br/>
<br/>
<table border="1" style="text-align: center" class="jsfcrud_odd_row,jsfcrud_even_row, jsfcrud_list_form">
<tr>
<th><h:outputLabel value="#{bundle.CreateTimeLoggingDetailLabel_date}" for="date" /></th>
<th><h:outputLabel value="#{bundle.CreateTimeLoggingDetailLabel_description}" for="description" /></th>
<th><h:outputLabel value="#{bundle.CreateTimeLoggingDetailLabel_normalHours}" for="normalHours" /></th>
<th><h:outputLabel value="#{bundle.CreateTimeLoggingDetailLabel_overtimeHours}" for="overtimeHours" /></th>
<th><h:outputLabel value="#{bundle.CreateTimeLoggingDetailLabel_doubleTimeHours}" for="doubleTimeHours" /></th>
<th><h:outputLabel value="#{bundle.CreateTimeLoggingDetailLabel_billTypesId}" for="billTypesId" /></th>
</tr>
<tr>
<td>
<rich:calendar value="#{timeLoggingDetailController.selected.date}" locale="Locale.US" popup="true" datePattern="MM/dd/yyyy" style="width:200px"/>
</td>
<td><h:inputText id="description" value="#{timeLoggingDetailController.selected.description}" title="#{bundle.CreateTimeLoggingDetailTitle_description}" size="18" /></td>
<td><h:inputText id="normalHours" value="#{timeLoggingDetailController.selected.normalHours}" title="#{bundle.CreateTimeLoggingDetailTitle_normalHours}" size="10"/></td>
<td><h:inputText id="overtimeHours" value="#{timeLoggingDetailController.selected.overtimeHours}" title="#{bundle.CreateTimeLoggingDetailTitle_overtimeHours}" size="10" /></td>
<td><h:inputText id="doubleTimeHours" value="#{timeLoggingDetailController.selected.doubleTimeHours}" title="#{bundle.CreateTimeLoggingDetailTitle_doubleTimeHours}" size="16" /></td>
<td><h:selectOneMenu id="billTypesId" value="#{timeLoggingDetailController.selected.billTypesId}">
<f:selectItems value="#{billTypesController.items}" var="i" itemLabel="#{i.description}" itemValue="#{i.id}" />
</h:selectOneMenu></td>
<td> <h:commandLink onclick="#{timeLoggingDetailController.selected.timeLoggingId=timeLoggingController.selected.id}" action="#{timeLoggingDetailController.create}" value="#{bundle.CreateTimeLoggingDetailSaveLink}" styleClass="linkbutton"/></td>
</tr>
</table>
<br/>
</h:form>
where i use the calender:
<rich:calendar value="#{timeLoggingDetailController.selected.date}" locale="Locale.US" popup="true" datePattern="MM/dd/yyyy" style="width:200px"/>
My web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.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>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>plain</param-value>
</context-param>
</web-app>
I also have <h:head></h:head> in my template file
i want to implement a login page using jsf for that i wanted
to implement a form:
<!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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Login</title>
<link href="../resources/css/basic.css" type="text/css" rel="stylesheet" />
</h:head>
<h:body>
<div id="wrapper">
<ul id="menu">
<li id="menutab"><a class="link" href="../index.jsp">Home</a></li>
<li id="menutab"><a class="link" href="../jsf/list.jspx">Liste</a></li>
<li id="menutab"><a class="link" href="../servlets/DataServlet">Daten</a></li>
<li id="menutab"><a class="link" href="../servlets/ListMoviesServlet">Movies</a></li>
<li id="menutab"><a class="link" href="../servlets/ListPeopleServlet">People</a></li>
</ul>
<br></br>
<h2 id="title">Login</h2>
<h:form id="j_security_check">
<center>
<h:messages errorClass="errorMessage" infoClass="infoMessage" warnClass="warnMessage"></h:messages>
<h:panelGrid columns="2">
<h:outputText value="Username : "/>
<h:inputText id="j_username" value="#{loginBean.username}"/>
<h:outputText value="Password : "/>
<h:inputSecret id="j_password" value="#{loginBean.password}"/>
<h:commandButton value="Submit" action="#{loginBean.login}" type="submit"/>
</h:panelGrid>
</center>
</h:form>
</div>
</h:body>
</html>
The page is shown but the form defined here isnt shown. everything
after the title is just a white screen.
Why the form isnt rendered?
Ok i got it!
This is the jsf mapping in my web.xml:
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jspx</url-pattern>
</servlet-mapping>
As you see the url-pattern describes ".jspx"
So i have to call my jsf with "myjsf.jspx" instead of "myjsf.xhtml"
<login-config>
<auth-method>FORM</auth-method>
<realm-name>loginRealm</realm-name>
<form-login-config>
<form-login-page>/jsf/login.jspx</form-login-page>
<form-error-page>/jsf/error.jspx</form-error-page>
</form-login-config>
</login-config>
I have a problem which I cannot solve. When I open JSF tab and I try to click on the buttons the page is not working.
Main page:
<?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" xml:lang="en" lang="en"
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:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
<style type="text/css">
.settingsHashMap { font: 80% "Trebuchet MS", sans-serif;}
</style>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="DX-57" /> Rack Management Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:100%; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="logodiv" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Datacenter Profile" style="position:relative" value="resources/images/logo_datacenter_profile.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMapz" class="settingsHashMap" style="width:1150px; height:400px; position:absolute; top:20px; left:1px">
<h:form prependId="false">
<h:panelGroup id="tabs" layout="block">
<ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<li>#{tab.tabid}</li>
<h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{DatacenterProfileController.switchPages(tab.tabid)}" style="display:none">
<f:ajax render="tabs"></f:ajax>
</h:commandButton>
</c:forEach>
</ul>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
<h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq DatacenterProfileController.selectedTab}">
<ui:include src="#{tab.tabfilename}"></ui:include>
</h:panelGroup>
</c:forEach>
</h:panelGroup>
</h:form>
</div>
</div>
</div>
</h:body>
</html>
Tab page:
<?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" xml:lang="en" lang="en"
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:c="http://java.sun.com/jsp/jstl/core">
<h:head>
</h:head>
<h:body>
<ui:composition>
<h:panelGroup>
<h:form id="zones" >
<p:growl id="growl" showDetail="true" sticky="true" />
<!-- The sortable data table -->
<h:dataTable onmouseover="addOnclickToTabsDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabZonesController.dataList}" binding="#{zones}" var="item">
<!-- Check box -->
<h:column>
<f:facet name="header">
<h:selectBooleanCheckbox style="margin-left: 0px;" value="#{DCProfileTabZonesController.mainSelectAll}" class="checkall" >
<f:ajax listener="#{DCProfileTabZonesController.selectAll}" render="#form" />
</h:selectBooleanCheckbox>
</f:facet>
<h:selectBooleanCheckbox onclick="highlight(this)" value="#{DCProfileTabZonesController.selectedIds[item.datacenterid]}" >
<!-- if the user deselects one row deselect the main checkbox -->
<f:ajax listener="#{DCProfileTabZonesController.deselectMain}" render="#form" />
</h:selectBooleanCheckbox>
<!-- Click on table code -->
<h:outputLink id="lnkHidden" value="ZoneProfile.jsf" style="text-decoration:none; color:white; background-color:black">
<f:param name="id" value="#{item.datacenterid}" />
</h:outputLink>
</h:column>
............
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabZonesController.pageFirst}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabZonesController.pagePrevious}"
disabled="#{DCProfileTabZonesController.firstRow == 0}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="next" action="#{DCProfileTabZonesController.pageNext}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:commandButton styleClass="bimage" value="last" action="#{DCProfileTabZonesController.pageLast}"
disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:outputText value="Page #{DCProfileTabZonesController.currentPage} / #{DCProfileTabZonesController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{DCProfileTabZonesController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{DCProfileTabZonesController.page}"
rendered="#{page != DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:white;">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandLink>
<h:outputText value="#{page}" escape="false"
rendered="#{page == DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:gray;"/>
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{DCProfileTabZonesController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{DCProfileTabZonesController.pageFirst}" >
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<h:message for="rowsPerPage" errorStyle="color: red;" />
<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{DCProfileTabZonesController.deleteSelectedIDs}" style="display:none">
<f:ajax render="#form"></f:ajax>
</h:commandButton>
<!-- the delete button -->
<h:button styleClass="bimage" value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />
<!-- New Zone -->
<h:button id="newzone" styleClass="lbimage" value="New Zone" outcome="/NewZone.xhtml"/>
<script type="text/javascript" src="resources/js/tabs.js"></script>
</h:form>
</h:panelGroup>
</ui:composition>
</h:body>
</html>
When I remove the ui:composition tag and I insert all the code into one page the buttons are working.
As you pointed out in one of your comments, you cannot use nested forms. You need to restructure your layout. Place your outer form around your <ul>:
<h:panelGroup id="tabs" layout="block">
<h:form prependId="false">
<ul>
...
</ul>
</h:form>
<c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
...
</c:forEach>
</h:panelGroup>
The rest of you code should be OK. By this way you avoid nested forms.