my problem is the following,
I have a template.xhtml that i uses for layout of the my web application
<div id="header">
<ui:insert name="header">
[Top Bar content will be inserted here]
</ui:insert>
</div>
<div id="main">
<ui:insert name="main">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
<div id="button">
<ui:insert name="button">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
then i have a addOrder.xhtml
<!DOCTYPE html 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: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"
template="/WEB-INF/template/popUpInsert.xhtml">
<ui:define name="header">
<h:outputLabel value="Status" />
<rich:inplaceInput value="#{ordineController.orderToSave.status}" />
<h:outputLabel value="Code" />
<rich:inplaceInput value="#{ordineController.orderToSave.code}" />
</ui:define>
<ui:define name="main">
Here there is a data table that contains lines of the order
</ui:define>
<ui:define name="button">
<h:form>
<a4j:commandButton value="Save" action="#{ordineController.addOrder()}" />
<h:form>
</ui:define>
but when i try to save the order both status and code are null , i try to change a scope to button save (execute="#all") but nothing
What's wrong?
Add this to your page <h:messages styleClass="message" />, you will see more warnings from JSF, in your case there should be a warning about missing forms because JSF knows which elements require to be inside one. In the end it is all HTML and JavaScript so inputs need to be inside the form if you want to do a submit.
You need to put the related input components in the same form as the command component. Any input components which are not in the same form as the command component are plain ignored in the submit. Note that this is a HTML restriction, not a JSF restriction.
So, this should do for you:
<h:form>
<div id="header">
<ui:insert name="header">
[Top Bar content will be inserted here]
</ui:insert>
</div>
<div id="main">
<ui:insert name="main">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
<div id="button">
<ui:insert name="button">
[Nav Bar Left content will be inserted here]
</ui:insert>
</div>
</h:form>
And:
<ui:define name="header">
<h:outputLabel value="Status" />
<rich:inplaceInput value="#{ordineController.orderToSave.status}" />
<h:outputLabel value="Code" />
<rich:inplaceInput value="#{ordineController.orderToSave.code}" />
</ui:define>
<ui:define name="main">
Here there is a data table that contains lines of the order
</ui:define>
<ui:define name="button">
<a4j:commandButton value="Save" action="#{ordineController.addOrder()}" />
</ui:define>
Be careful that you don't create "God" forms this way.
Related
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)
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.
I'm passing one request parameter to a facelet page which is processed in the corresponding preRenderView event/listener :
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="id" value="#{essayDetails.id}" />
<f:event type="preRenderView" listener="#{essayDetails.init}"/>
</f:metadata>
</ui:define>
Init method is properly accessed and the page is rendered normally. I have a commandLink (RichFaces component) that show a modal panel via an ajax request:
<a4j:commandLink rendered="#{essayDetails.comment}" render="create_comment_group" oncomplete="#{rich:component('create_comment_panel')}.show()">
<h:graphicImage library="images/icons" name="comment.png" />
</a4j:commandLink>
The modal panel snippet:
<ui:composition 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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:utils="http://java.sun.com/jsf/composite/components/utils">
<rich:popupPanel id="create_comment_panel" autosized="true">
<f:facet name="header">
<utils:labeledIcon label="#{msg.action_comment}" image="icons/comment.png" />
</f:facet>
<h:form>
<h:panelGroup id="create_comment_group">
<h:inputTextarea cols="80" rows="8" value="#{essayDetails.userComment}" style="resize: none;" />
<table style="width: 100%">
<tr>
<td style="width: 50%;text-align: right;">
<a4j:commandButton value="#{msg.button_create}" action="#{essayDetails.saveComment}" execute="create_comment_panel_essay" render="essay_comments" oncomplete="#{rich:component('create_comment_panel')}.hide()" />
</td>
<td style="width: 50%;text-align: left;">
<a4j:commandButton value="#{msg.button_cancel}" execute="#none" oncomplete="#{rich:component('create_comment_panel')}.hide()" />
</td>
</tr>
</table>
</h:panelGroup>
</h:form>
</rich:popupPanel>
In this panel a comment is inserted in a h:inputTextArea field, but when the corresponding Accept button is pressed instead of calling #{essayDetails.saveComment} method the post-back request fails in validating f:viewParam id parameter saying that this fields needs a value.
If we make no changes to original code but adds an extra f:viewParam:
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="id" value="#{essayDetails.id}" required="true" />
<f:viewParam name="v" value="#{essayDetails.v}" required="true" />
<f:event type="preRenderView" listener="#{essayDetails.init}"/>
</f:metadata>
</ui:define>
There is no validation error and the behaviour is as expected. What am I doing wrong in using f:viewParam and/or preRenderView event?
Thanks in advance!
try this:
<f:viewParam name="id" value="#{essayDetails.id}" required="#{not facesContext.postback}" />
Try checking in your init() method whether it is a postback:
if (!FacesContext.getCurrentInstance().isPostback()) {
//do your initilialization
}
I'm working with JSF2 and I want to display a map with the object gmap. As I saw, gmap object doesn't exist anymore with richfaces 4.x, so I tried to import the gmap4jsf.jar to render my map...
To have an exemple I took a part of my code from the Richfaces demo here : Richfaces live demo
The map is displayed well, but if I want to control it (change the type, zoom,...) with the jsf elements from the rich:panel, I get an error in Firebug : "map is undefined"...
Can somebody help me to find out the problem please because I didn't find the answer in other thread...
Here is my code:
<!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:rich="http://richfaces.org/rich"
xmlns:m="http://code.google.com/p/gmaps4jsf/"><h:head><title>JSF 2.0: Ajax Support</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=myPersonnalKeyIsWrittenHere"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>.optionList {height: 30px;}</style></h:head><h:body>
<div id="container">
<ui:include src="tpl/menu.xhtml" />
<h1>Gmap4Jsf</h1>
<div align="center">
<f:view contentType="text/html">
<h:panelGrid columns="2">
<h:form id="mapform" prependId="false">
<m:map var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
</h:form>
<h:panelGroup>
<h:form>
<rich:tabPanel switchType="ajax" width="350" height="400">
<rich:tab label="Using Google Map API">
<h:panelGrid columns="2" columnClasses="optionList">
<h:outputText value="Controls:" />
<h:panelGroup>
Hide
Show
<br />
</h:panelGroup>
<h:outputText value="Zoom:" />
<rich:inputNumberSlider id="zoom" showInput="false"
minValue="1" maxValue="18" value="#{gmapBean.zoom}"
onchange="map.setZoom(this.value)" />
<h:outputText value="Map Type:" />
<h:panelGroup>
<a href="javascript: void 0"
onclick="map.setMapType(G_NORMAL_MAP)">Normal</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a>
<br />
</h:panelGroup>
</h:panelGrid>
</rich:tab>
<rich:tab label="Using Ajax with JSON">
<rich:dataGrid var="place" value="#{gmapBean.point}"
columns="2">
<h:graphicImage onclick="showPlace('#{place.id}')"
style="cursor:pointer" value="resource://#{place.pic}" />
</rich:dataGrid>
</rich:tab>
</rich:tabPanel>
</h:form>
</h:panelGroup>
</h:panelGrid>
</f:view>
</div>
</div>
Ok I found it out...
I had to define the name of the Javascript variable generated by JSF.
So, I just added the attribut "jsVariable" to my gmap element.
<m:map jsVariable="map" var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
Bye