I am writing a basic login screen with textboxes for username and password, a submit button and a commandLink to redirect to a page to retrieve password. I have set required = true for both text fields and set a required message too. Now, if i need to redirect to the retrieve password page without entering any text in the textboxes, it wont let me. Kindly help.
<?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://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>
</h:head>
<h:body>
<ui:composition template="/template/Template.xhtml">
<ui:define name="title">Login</ui:define>
<ui:define name="pageContent">
<h:form>
<p:messages id="message1" closable="true"/>
<p:panelGrid id="loginPanel" columns="2"
style="margin-left: auto;margin-right: auto;margin-top: 10%;border-style:none">
<h:outputLabel for="uName" value="User Name "></h:outputLabel>
<p:inputText id="uName" value="#{loginBean.uName}" required="true"
requiredMessage="#{prop.userNameRequired}"></p:inputText>
<h:outputLabel for="passwrd" value="Password "></h:outputLabel>
<p:password id="passwrd" value="#{loginBean.passwrd}"
required="true" requiredMessage="#{prop.passwordRequired}"></p:password>
</p:panelGrid>
<p:commandButton id="login" value="Login"
style="margin-left: 40%;margin-top: 2%"
action="#{loginBean.authenticate}" ajax="false"></p:commandButton>
<p:spacer></p:spacer>
<p:commandLink id="forgotPass" value="Forgot User-Name/Password ?"
style="margin-left: 4.5%;font-size:0.7em" action="ForgotPassword.xhtml?faces-redirect=true"></p:commandLink>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Any command component submits and processes (and validates!) by default the entire form. You merely want to perform page-to-page navigation. The <p:commandLink> is the wrong tool therefor. You should be using <h:link> instead.
<h:link id="forgotPass" value="Forgot User-Name/Password ?"
style="margin-left: 4.5%;font-size:0.7em" outcome="ForgotPassword.xhtml" />
See also:
When should I use h:outputLink instead of h:commandLink?
How to navigate in JSF? How to make URL reflect current page (and not previous one)
Related
I am new to stackoverflow and also this my very first question to this forum so if i am doing something wrong when i am posting here please let me know.
my question related to primefaces i tried with lot of solution but nothing work for me.
i am using...
jsf 2.2.4
primefaces 5.2
tomcat 8
below code is the my template.xhtml
it's located on /templates/template.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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html" id="fview">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page template with PrimeFaces</title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<p:layout fullPage="true" resizeTitle="resize"
style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true"
showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0"
style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:head>
And below code is my home.xhtml
it's located on pages/home.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="../templates/template.xhtml">
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
Hello world! Welcome to a page derived from a template
</ui:define>
when i run my application request successfully go to the controller and return. But browser come up with alert
> / UI Layout Initialization Error
The center-pane element does not exist.
The center-pane is a required element.
If any one know the proper answer for my question please help me.
Thanks in advance.
Your components and tags structure is all wrong. Here is how it should look.
<!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:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<f:view encoding="UTF-8" contentType="text/html">
<ui:insert name="metadata" />
<h:head>
<title>Page template with PrimeFaces</title>
</h:head>
<h:body>
<ui:debug />
<p:layout fullPage="true" resizeTitle="resize" style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true" showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0" style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
The main mistake: layout and content belong in body, not head.
Title and meta tags must be in head.
Template can't use f:metadata. The client view can. See f:metadata doc.
Define content type and encoding in f:view.
There is no id attribute in f:view.
By the way I don't recommend using ui:debug. It evaluates all the properties it can see, and sometimes provokes undesirable side-effects.
Here is the JSF code trying to display and navigate.
<!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">
<h:head>
<title>A Simple JavaServer Faces 2.0 View</title>
</h:head>
<h:body>
<h:form>
<h1>Images</h1>
<p><h:graphicImage library = "/images" name = "img_jsf.jpg"/>
<h:button value = "Proceed to page 2" outcomr = "gotopage2"/></p>
<p>Above the Main table</p>
<h:dataTable border="1" var="book"
value="#{catalogBean.bookList}">
<h:column>
<h:graphicImage url="#{book.imageLink}" height = "150" width= "150"/>
<h:link outcome="gotopage2">
<h:outputText value = "Proceed to page 2"/>
</h:link>
</h:column>
</h:dataTable>
</h:form>
Here is faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
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-facesconfig_2_0.xsd"
version="2.0"
>
<!-- Comments here, wow talk about hard to do this right.... -->
<navigation-rule>
<from-view-id>CatProdPage.xhtml</from-view-id>
<navigation-case>
<from-outcome>gotopage2</from-outcome>
<to-view-id>/storePage2.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Here is storePage2.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">
<h:head>
<title>Store Page2</title>
</h:head>
<ui:composition template="./../template/secondaryTemplate.xhtml">
<ui:define name="header">
<ui:include src="/common/header.xhtml" />
</ui:define>
<ui:define name="leftMenu">
<ui:include src="/common/leftMenu.xhtml" />
</ui:define>
<ui:define name="CatProdPage">
<ui:include src="CatProdPage.xhtml" />
</ui:define>
<ui:define name="page2">
<ui:include src="page2.xhtml" />
</ui:define>
</ui:composition>
</html>
This is the result of a snippet from "view source" on the page
<h1>Images</h1>
<p><img src="RES_NOT_FOUND" /><input type="button" onclick="window.location.href='/jsfreg/faces/store/storePage.xhtml'; return false;" value="Proceed to page 2" /></p>
<p>Above the Main table</p><table border="1">
<tbody>
<tr>
<td><img src="/jsfreg/resources/images/img_coreJsf.jpg" height="150" width="150" /><span>: This link is disabled because a navigation case could not be matched.Proceed to page 2</span></td>
</tr>
The core problem is that I can't get images to display and can't get static navigation to work.
I have tried moving the images/*.jpg folder to every possible location I can think of beneath the application root, under WEB-INF, etc.
I am using Glassfish 4 and Maven.
In my project there is a requirement that when we change language from Engish to Arabic all layout will be displayed in right to left position.
growl message working fine when i didn't use common layout but when i add this thing in common layout of my page then its still showing right side only..
source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.ui-growl{
#{msg['msg']}:20px;
}
</style>
</h:head>
<body>
<ui:composition template="/home/template/common1/commonLayout.xhtml">
<ui:define name="content">
<h:form id="myform">
<p:growl id="msgs" sticky="true" autoUpdate="true" />
<f:event listener="#{localeControllerBean.islang}" type="preRenderView" />
<p:outputLabel for="sname" value="#{msg['welcome.jsf']}"
styleClass="label" />
<p:inputText id="sname" value="#{sponsorBean.sponsor_name}"
required="true" requiredMessage="#{msg['welcome.jsf']}"
styleClass="input" />
<p:commandButton id="submit" value="Save" ajax="false"
action="#{sponsorBean.save}" style="margin-bottom:50px;"
update="msgs" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Anything outside <ui:composition> is ignored during building the view.
In your commonLayout.xhtml master template you should add a new <ui:insert> inside <h:head>:
<h:head>
...
<ui:insert name="head" />
</h:head>
Then define it inside the <ui:composition> of your template client:
<ui:composition template="...">
<ui:define name="head">
<style>.ui-growl{ #{msg['msg']}: 20px; }</style>
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
(by the way #{msg['msg']} is absolutely not self-documenting; I'd myself also rather have used <html dir="#{direction}"> so that you can just use e.g. html[dir='rtl'] .ui.growl selector)
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
I am running JSF2.0 with Java 6 code on JBOSS 7.1.0.Final. Here is the code for my page:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.org/schema/seam/taglib"
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:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
template="layout/template.xhtml">
<ui:define name="body">
<h:form id="quizform">
<rich:panel>
<f:facet name="header">Quiz Details</f:facet>
<a4j:repeat value="#{quizHome.mcqs}" var="_mcq" rowKeyVar="idx">
<s:decorate template="layout/display.xhtml">
<h:outputText value="#{idx+1}.#{_mcq.questionText}"/>
<h:selectOneRadio id="optionId-#{idx}" immediate="true" value="#{answerBean.optionId}" valueChangeListener="#{answerBean.selectAnswerLsnr}">
<s:selectItems value="#{_mcq.mcqOptions}" var="opt" label="#{opt.optionText}" itemValue="#{opt.id}" />
</h:selectOneRadio>
</s:decorate>
</a4j:repeat>
<div style="clear:both"/>
</rich:panel>
<div class="actionButtons">
<h:commandButton value="Submit Response" action="#{answerBean.findUserAnswer}" />
<h:commandButton value="Reset" type="reset" />
<s:button view="/StartQuiz.xhtml" id="startquiz" value="Restart Quiz"/>
</div>
</h:form>
</ui:define>
</ui:composition>
The page renders with correct values from the database. But, on submitting the form, I get the following message in the browser:
value is not valid.
What am I doing wrong? Thanks for your suggestions.
Tried Mojarra - 2.0.8, 2.1.6 , MyFaces 2.0.11,2.1.5
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml" xmlns:f="java.sun.com/jsf/core" xmlns:h="java.sun.com/jsf/html" xmlns:ui="java.sun.com/jsf/facelets">
<body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</body>
</html>
The XML namespaces are invalid. You've removed the http:// prefix from them all. This is not right.
Here's a rewrite:
<!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">
<h:head>
<title>Page title</title>
</h:head>
<h:body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</h:body>
</html>
Note that you also forgot the <h:head> component. This generates a HTML <head> element which allows JSF to auto-include the necessary JS and CSS files. In case of <f:ajax>, the JSF-supplied jsf.js file needs to be (auto)included, otherwise you will face a JS error after the page is been loaded.