I have 2 Facelets files (index.xhtml and report.xhtml). I use the RichFaces <ui:include src="report.xhtml"/> to load the report into the index. Works fine.
But when I try to only show report on certain conditions, I fail! What does not work is this:
<ui:include src="report.xhtml" rendered="#{indexService.contentName == 'report'}"/>.
The rendered attribute of ui:include does not seem to work.
How can I load the report.xhtml into the index.xhtml on certain conditions? Where is the error in my code?
Edit:
Half of it works now. Changing the Facelet file works with conditions. But the functionality of the loaded Facelet does not work properly. Why is that? Where is the problem in the code?
Based on the suggestions I now have this:
<h:form>
<h:panelGrid>
<a4j:commandLink value="Home" render="contentpanel" action="#{indexService.setContentName('home')}"/>
<a4j:commandLink value="Report" render="contentpanel" action="#{indexService.setContentName('report')}"/>
</h:panelGrid>
</h:form>
<a4j:outputPanel id="contentpanel">
<ui:fragment rendered="#{indexService.contentName eq 'report'}">
<ui:include src="report.xhtml" />
</ui:fragment>
</a4j:outputPanel>
Edit 2:
This is my report Facelet. If I use without any condition the functionality of the report Facelet works perfectly, but if I load it using the condition I posted in Edit 1, then the buttons of <rich:panelMenuItem .../> don't work anymore and <h:outputText escape="false" value="#{reportService.content}"/> does not load the content. Any idea why?
Edit 3:
Changed the <rich:panel header="Report">...</rich:panel>, but behaviour still unchanged.
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<ui:composition>
<h:outputStylesheet>
.placesmenu {
width: 200px;
vertical-align: top;
}
.contentplace {
vertical-align: top;
}
</h:outputStylesheet>
<h:panelGrid columns="2" width="100%" columnClasses="placesmenu, contentplace">
<rich:panel header="Places">
<h:form>
<rich:panelMenu style="width: 170px">
<a4j:repeat value="#{reportService.menuItems}" var="menuItem" id="repeat_layer1">
<rich:panelMenuGroup label="#{menuItem.label}">
<a4j:repeat value="#{menuItem.subMenuItemList}" var="subMenuItem" id="repeat_layer2">
<rich:panelMenuItem label="#{subMenuItem.label}" render="reportpanel" onbeforedomupdate="#{reportService.setId(subMenuItem.id)}"/>
</a4j:repeat>
</rich:panelMenuGroup>
</a4j:repeat>
</rich:panelMenu>
</h:form>
</rich:panel>
<rich:panel header="Report">
<h:outputText escape="false" value="#{reportService.content}" id="reportpanel"/>
</rich:panel>
</h:panelGrid>
</ui:composition>
</html>
try to surround your ui:include tag with ui:fragment as follows :-
<ui:fragment rendered="#{indexService.contentName eq 'report'}">
<ui:include src="report.xhtml" />
</ui:fragment>
Related
I am using Jsf primefaces version 8 and trying to show the calendar field in the xhtml page. But inspite all efforts, the popup calendar field is not displaying at all in the page.
My main.xhtml page contains a p:dialog and this dialog includes another xhtml page, dateEdit.xhtml. Inside the second xhtml, I am trying to have the p:datePicker or p:calendar field. But its not working.
Below is the piece of code from my main.xhtml page:
<p:dialog closable="true" visible="false" modal="true" id="dateDialog" widgetVar="dateDialog" resizable="false" showEffect="fade" hideEffect="fade"
header="Date Edit" width="60%" height="50%" style="max-height:100%; overflow:auto; ">
<ui:include src="dateEdit.xhtml" >
</ui:include>
</p:dialog>
Below is the code snippet from the dateEdit.xhtml :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" >
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="../jsfStyle.css" media="all"></link>
</f:facet>
</h:head>
<h:body>
<h:form id="formDtId" enctype="multipart/form-data" method="post" >
<p:outputPanel id="editProjectInfo">
<h:panelGrid id="coreGrid" columns="3" style="margin-bottom:10px" cellpadding="7">
<p:outputLabel for="update_Date" value="Demo Date : " />
<p:calendar id="update_Date" value="#{dateManagedBean.demoDate}" mode="popup" navigator="true" pattern="yyyy-MM-dd" style="font-size:8pt;" showOn="button" >
<f:convertDateTime type="date" pattern="yyyy-MM-dd" for="update_Date"></f:convertDateTime>
</p:calendar>
</h:panelGrid>
</p:outputPanel>
</h:form>
</h:body>
</html>
But if I click on the button icon, no calendar is getting displayed. Nothing is happening.
I tried with the below code also, instead of p:calendar, but that also didn't work :
<p:datePicker id="update_Date" value="#{dateManagedBean.demoDate}" pattern="MM-dd-yyyy" showIcon="true" />
Kindly help to resolve this issue. Thanks.
Some, but not all UI Components are not responding.
Restart, rebuild code and clean caches.
Part of the template file
<!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">
<h:head>
<title><ui:insert name="title">JKPGBooking /.::.\ Boka online på ED</ui:insert></title>
</h:head>
<h:body>
<h:panelGrid columns="3">
<ui:insert name="menu">
<ui:include
src="/WEB-INF/template/header_#{userbean.currUser.role}.xhtml"></ui:include>
</ui:insert>
<p:spacer style="width: 100px; height: 10px;"></p:spacer>
<ui:insert name="content_row1_col2" />
</h:panelGrid>
<ui:insert name="content_row2_col1">
</ui:insert>
<ui:insert name="footer">
<ui:include src="/WEB-INF/template/footer.xhtml"></ui:include>
</ui:insert>
</h:body>
</html>
part of the .xhtml
<ui:define name="content_row1_col2">
<h:form>
<p:growl id="growl" showDetail="true" sticky="false" />
<br />
<br />
<p:panelGrid columns="5" id="userform">
<f:facet name="header">
<p:outputLabel value="Vem har bokat salen?" />
</f:facet>
<h:outputText value="vecka" />
<p:selectOneMenu value="#{infobean.week}" autoWidth="true" >
<f:selectItems value="#{infobean.allWeeks}" >
</f:selectItems>
</p:selectOneMenu>
<h:outputText value="Dag" />
<p:selectOneMenu value="#{infobean.day}">
<f:selectItems value="#{infobean.days}">
</f:selectItems>
</p:selectOneMenu>
<h:commandButton value="Sök"
action="#{infobean.getHouseSchedule}" update="resultTab">
</h:commandButton>
</p:panelGrid>
</h:form>
</ui:define>
Everything renders nicely but in this case only the button of the form is responding will says is fired. If I enlarge the page in the browser by changing the zoom the SelectOneMenu for the day is responding too, but never the the SelectOneMenu for the week. If I remove the panelGrid the form works as intended.
this is one example of the problem. On another page are tabs generatered by a script, in most cases 12-14. Often the last two or three are not responding/firing and there is no mouseover/hiver response. What really fiddles me is that is not always the case.
I have a p:dataTable and the selected value is throwing null pointer when Im tring to get it,this situation is after put the datatable inside a modal p:dialog, but if remove the modal atribute works fine.
PD:the modal p:dialog was behid the overlay like this question
Primefaces - AjaxStatus - Dialog is behind the overlay
the answer is not working for me, because Im using primefaces 5.1, so I have to use appendTo="#(body)"
I don´t know if that is important for my problem.
Resume: the null pointer exist if the p:dialog is modal.
Here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition template="/resources/sysged.xhtml"
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"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<ui:define name="vDoc">
<h:form id="form">
<p:panel header="Document">
<h:panelGrid columns="4">
<p:commandButton id="prev"
actionListener="#{DocumentController.priviousPage()}"
icon="ui-icon-circle-triangle-w" update="docImage next prev"
disabled="#{DocumentController.inicioLista}" />
<p:commandButton id="next"
actionListener="#{DocumentController.nextPage()}"
icon="ui-icon-circle-triangle-e" update="docImage prev next"
disabled="#{DocumentController.finalLista}" />
<p:commandButton id="anotacoes" value="Anotaçoes"
onclick="PF('dialogAnotacao').show();" />
<p:button id="voltar" outcome="pesquisaDocumento.xhtml"
value="Voltar" />
</h:panelGrid>
</p:panel>
</h:form>
<h:form id="panotation">
<p:dialog id="dialogAnotacao" closeOnEscape="true" header="Anotaçoes"
widgetVar="dialogAnotacao" modal="true" resizable="false"
appendTo="#(body)" draggable="true">
<p:dataTable id="tanotation" var="anotation"
value="#{DocumentController.arquivo.anotacaoList}"
selectionMode="single"
selection="#{DocumentController.selected}"
rowKey="#{anotation.i}">
<p:column headerText="Indice" style="text-align:left">
<h:outputText value="#{anotation.i}" />
</p:column>
<p:column headerText="text" style="text-align:left">
<h:outputText value="#{anotation.text}" />
</p:column>
</p:dataTable>
<p:contextMenu for="tanotation">
<p:menuitem value="do" update="tanotation"
icon="ui-icon-close" actionListener="#{DocumentController.doit}">
</p:menuitem>
</p:contextMenu>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
My method in the managedBean
public void doit() {
System.out.println(selected);
}
You append your <p:dialog> to the body of the html page(see appendTo attribute), as a result it is not included in any <h:form>.
This could be a problem for your <p:dataTable>
Could you place your <h:form id="panotation"> inside of your <p:dialog> and not outside ?
I'm trying to add a JSF selectOneMenu in a UI fragment using icefaces 1.8 and cannot get it to render no matter what I do. I can get it to render in a normal jspx page but not within a ui fragment.
<ui:fragment 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:ice="http://www.icesoft.com/icefaces/component">
<ice:selectOneMenu id="myselect"
style="width:100px"
value="#{someField}"
rendered="true">
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
<f:selectItem itemValue="3" itemLabel="3"/>
</ice:selectOneMenu>
</ui:fragment>
Am I missing something basic? I am new to JSF. If I pull out the exact same selectOneMenu into a jspx it works as it should but when I include a ui fragment it does not.
Edit for BalusC:
The fragment is used later in a jspx file that is pulled in with
<ui:include src="myfile.jspx">
<ui:param name="someField" value="#{beanName.someField}"
</ui:include>
I am going off of an existing . There is a lot more in the include that all works as expected and I can add other components like outputText into the ui:fragment but it doesn't make any difference. The full fragment is below. I can post the full include from the jspx as well.
<ui:fragment 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:ice="http://www.icesoft.com/icefaces/component">
<ice:panelGrid cellspacing="0" cellpadding="0" columns="3">
<!-- This component is displayed when the form is opened for editing or display mode-->
<ice:panelGroup rendered="#{not beanName.outputOnlyView }">
<!-- This component is displayed when the form is opened for display mode in EDM stage-->
<ice:panelGroup rendered="#{beanName.displayMode}">
<ice:outputText
id="#{fieldId }"
style="#{inlineStyleField}"
value="#{fieldValue}" >
</ice:outputText>
</ice:panelGroup>
<ice:selectOneMenu id="myselect"
style="width:100px"
value="#{someField}"
rendered="#{not beanName.outputOnlyView}">
<f:selectItem itemValue="IntranetID" itemLabel="Intranet ID"/>
<f:selectItem itemValue="Name" itemLabel="Last Name, First Name"/>
<f:selectItem itemValue="KnownAs" itemLabel="Known As"/>
</ice:selectOneMenu>
<!-- This component is displayed when the form is opened for editing mode in Submitter stage-->
<ice:panelGroup rendered="#{!beanName.displayMode}" panelTooltip="#{fieldId}Help">
<ice:panelGrid style="#{inlineStyle}" cellspacing="0" cellpadding="0" columns="3">
<!-- Column 1 the component -->
<ice:selectInputText id="#{fieldId }"
binding="#{feildBinding}"
options="{frequency:0.4}"
rows="20"
width="100"
partialSubmit="true"
immediate="true"
autocomplete="true"
value="#{fieldValue}"
rendered="#{not beanName.outputOnlyView}"
readonly="#{beanName.globalReadOnly }"
listVar="employee"
listValue="#{beanName[employeeSelect].employeeNamePossibilities}"
valueChangeListener="#{beanName[valueChangeListener] }"
textChangeListener="#{beanName[textChangeListener]}">
<f:facet name="selectInputText">
<ice:panelGrid columns="1">
<ice:panelGrid columns="2" columnClasses="searchCol1,searchCol2">
<ice:outputText id="name" value="#{employee.name}"/>
<ice:outputText id="email" value="#{employee.email}"/>
</ice:panelGrid>
<ice:panelGrid columns="3" columnClasses="searchCol4,searchCol3,searchCol5">
<ice:outputText id="function" value="#{employee.function}"/>
<ice:outputText id="subfunction" value="#{employee.subfunction}"/>
<ice:outputText id="stat1" value="#{employee.stat1}"/>
</ice:panelGrid>
</ice:panelGrid>
</f:facet>
</ice:selectInputText>
<!-- Column 2: Error Messages for this component -->
<ice:message style="color:red;" id="#{fieldId}Error" for="#{fieldId}" showDetail="true"/>
<!-- Column 3: HoverHelp if required -->
<ui:include src="../inc-components-pcr/sub-components-pcr/hoverHelpColumnAndTooltip.jspx"/>
</ice:panelGrid>
</ice:panelGroup>
</ice:panelGroup>
</ice:panelGrid>
</ui:fragment>
I was including the template multiple times on the page which was causing multiple instances of the same id causing it to not render at all. Hence the behavior at the end where an initially hidden one was able to show since the initial render would not render any leaving that ID as available. Dumb mistake.
Popup panels in RichFaces are pretty ugly to work with to be honest. There are several calls to some JavaScripts involved which makes it not easy to derive something that works in general. Anyway, I was trying the following:
<?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">
<ui:composition 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"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:commandLink>
<h:graphicImage library="images/icons" name="#{buttonImageFileName}" />
<rich:tooltip value="#{buttonTooltipText}" direction="bottomRight" />
<rich:componentControl target="#{popupId}" operation="show" />
</h:commandLink>
<rich:popupPanel modal="true"
height="#{popupHeight}"
resizeable="#{popupResizable}"
onmaskclick="#{componentCallToId}.hide(); return false;"
id="#{popupId}">
<f:facet name="header">
<h:outputText value="#{popupHeaderText}" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{componentCallToId}.hide(); return false;">
<h:outputText value="X" />
</h:outputLink>
</f:facet>
<p>#{popupSubject}</p>
<p>
<h:inputText value="#{inputTextBean[inputTextProperty]}" styleClass="full-width" id="#{inputTextId}" />
</p>
<h:panelGrid columns="2" style="margin: 0 auto;">
<h:commandButton value="OK"
action="#{acceptButtonBean[acceptButtonMethod](acceptButtonMethodArg)}"
onclick="#{componentCallToId}.hide(); return true;">
<a4j:ajax execute="#this #{inputTextId}" render="#form" />
</h:commandButton>
<h:commandButton value="Cancel" onclick="#{componentCallToId}.hide(); return false;" immediate="true" />
</h:panelGrid>
</rich:popupPanel>
</ui:composition>
This displays an image button which pops up a simple input dialog, which is supposed to be hidden by clicking outside the popup (onmaskclick="..."), by X'ing the popup in the top right corner (<f:facet> with onclick="..."), or by pressing the Cancel <h:commandButton onclick="...">. On OK the AJAX form is supposed to be submitted and the popup is hidden, too. But nothing happens (can't close):
The EL expression #{componentCallToId}.hide(); return false; is the "problem child" in the above. It is not working that way.
In its original, non-Facelets variant here (http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=popup&sample=modalPopup&skin=classic) the call to control the component looks like this:
<h:commandButton value="Cancel" onclick="#{rich:component('add-root-chapter-popup')}.hide(); return false;" immediate="true" />
I pass the following parameters to <ui:include>:
<ui:include src="/subviews/add-node-clink-input-popup.xhtml">
<ui:param name="buttonImageFileName" value="add.png" />
...
<ui:param name="popupId" value="add-root-chapter-popup" />
<ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" />
...
</ui:include>
Notice the long entry (the rest seems to be working - even the strange syntax for the bean + method + arg, but this is not the focus here).
Q:
Why isn't <ui:param name="componentControlCallToId" value="rich:component('add-root-chapter-popup')" /> working? Currently nothing happens when clicking outside the popup, X'ing, or pressing OK or Cancel (popup staying).
Firebug only shows:
syntax error
.hide(); return false;
Looks like the expression is evaluated to null/empty string.
What's wrong? Can it be fixed? What are my alternatives?
PS: Note, that I've previously tried to use the "popupId" in the Facelets expression like
<h:commandButton value="Cancel" onclick="#{rich:component('popupId')}.hide(); return false;" immediate="true" />
but this has the same result.
Omitting the single quotes did the trick:
<h:commandButton value="Cancel" onclick="#{rich:component(popupId)}.hide(); return false;" immediate="true" />
I thought they were part of JS, but they seem to be EL here.
Also you could try this:-
onmaskclick="#{rich:component('cc.attrs.popupId')}.hide()"
If the quotes cause you any problem use " instead of them.
I believe here you are trying to parse the id to the popup panel dynamically through your custom components exposed variables.
Where in you might be parsing the value for id as
popupId="xyz"
If this being the situation the above solution would work just fine.