I'm unable to use ui:include in tabView. I'm trying to make dynamic tabs using included Facelet.
Here's my code:
<p:tabView id="panelGl" var="tabContent" value="#{mainPageBackingBean.tabs}" widgetVar="panelGlJs" style="height: 100%;" dynamic="true" >
<p:ajax event="tabClose" listener="#{mainPageController.onTabClose}" oncomplete="questionDialogWV.show()" update="#(this) :questionForm:questionFormPanel" />
<p:ajax event="tabChange" onstart="setActive()" update="#(this)" />
<p:tab title="#{tabContent.title}" titletip="#{tabContent.description}" closable="true">
<ui:include src="#{mainPageBackingBean.tabContents}" />
</p:tab>
</p:tabView>
And #{mainPageBackingBean.tabContents} runtime value is pointing at this Facelet:
<?xml version="1.0" encoding="UTF-8"?>
<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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<p:panel>
<h:form>
<p:commandButton id="testEmail" value="" process="#this" actionListener="#{communicationChannelsController.testEmailChannel()}"/>
</h:form>
</p:panel>
</ui:composition>
When I use the above ui:include outside of p:tabView it works normally (I am able to invoke communicationChannelsController.testEmailChannel() without a problem). Also when I copy the contents of above file inside p:tab everything works fine also.
Problem is that, when combined p:tab and ui:include do not work, this bean method is not called.
What is the best approach at creating dynamic tabs using some navigation bean like mainPageBackingBean in my example?
Related
I'm using JSF 2.2, PF 5.3 and GlassFish 4.1.1.
I'm trying to centralize the blockUI content in my web application.
here the code of the my custom blockUI
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:p="http://primefaces.org/ui">
<cc:interface>
<cc:attribute name="block" type="java.lang.String"/>
<cc:attribute name="trigger" type="java.lang.String"/>
</cc:interface>
<cc:implementation>
<p:blockUI block="#{cc.attrs.block}" trigger="#{cc.attrs.trigger}">
LOADING<br />
<p:graphicImage library="images" name="ajax-loader.gif"/>
</p:blockUI>
</cc:implementation>
and here the code in which I'm trying to apply this one
<h:form>
...
...
<p:dataTable id="myTable">
<p:column headerText="actions">
<p:commandButton class="triggerableFromBlockUI" action="#{action1}"/>
<p:commandButton class="triggerableFromBlockUI" action="#{action2}"/>
</p:column>
</p:dataTable>
...
...
<myTag:blockUI block="myTable" trigger="#(.triggerableFromBlockUI)"/>
</h:form>
but I see the following error
Cannot find component for expression "myTable".
If I use directly the p:blockUI all is working. Can you help me?
Here the solution found in the Prime Faces Forum
<myTag:blockUI block="#form:myTable" trigger="#(.triggerableFromBlockUI)"/>
Environment:
- PrimeFaces version: 5.0
I'm trying to include a p:carousel
in my application, but the p:dataTable appears as a blank in the p:tab view. The following is a simplified example. The facelets template page is:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<h:outputStylesheet name="./css/style.css"/>
<title>Test Template</title>
</h:head>
<h:body>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
The carousel JSF page:
<body>
<ui:composition template="./ClientNav.xhtml">
<ui:define name="content">
<h:form>
<p:carousel numVisible="1" autoPlayInterval="20000" effect="easeInStrong"
headerText="Contents" style="margin-bottom: 0" circular="true">
<p:tab>
<h1>Heading</h1>
<p>Text of the first tab view</p>
<p:graphicImage name="images/enterBlank.jpg" alt="sky" width="1000" height="252"/>
</p:tab>
<p:tab>
<p:dataTable value="#{topicbean.pubTopList}" var="top">
<p:column>
<p:commandLink value="#{top.topicname}" action="#{topicbean.searchGuestItems}"
ajax="false"/>
</p:column>
</p:dataTable>
</p:tab>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
</body>
If i replace p:dataTable with h:dataTable it renders perfectly. I also tested an ordinary JSF page (without templating) using the p dataTable and the same problem (no rendering) happened. Finally I tried to strip the carousel component to the bare minimum (in case any setting were causing css conflict):
<p:carousel numVisible="1">
tabs here
</p:carousel>
I'm not sure if this is a bug or I'm missing something in my code or how I'm using the carousel. Would appreciate any guidance. Thank you.
This question already has answers here:
Invoke JSF managed bean action on page load
(4 answers)
Closed 7 years ago.
Is there an autoload command within JSF or PrimeFaces?
I have a JSF template that I use for my facelets:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="template.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:form>
<p:remoteCommand name="onload" action="#{mainMenuBean.setMenuCategories}" autoRun="true" />
</h:form>
<ui:define name="west">
<ui:include src="mainmenu.xhtml" />
</ui:define>
<ui:define name="center">
<p:outputLabel value="Zentrum" />
<h:form>
<p:remoteCommand name="rc" update="msgs" actionListener="#{mainMenuBean.setMenuCategories()}" />
<p:growl id="msgs" showDetail="true" />
<p:commandButton type="button" onclick="rc()" value="Execute" icon="ui-icon-refresh" />
</h:form>
</ui:define>
</ui:composition>
Now the p:remoteCommand does not work for some reason. Is there are command that I could place instead of p:remoteCommand to automatically execute some bean method everytime it gets loaded?
JSF 2.2 has viewAction, which can be executed on each load or on each get (and skipped on postbacks). It's placed in meta part of page:
<f:meta>
<f:viewAction action="#{anyBean.anyAction}"/>
</f:meta>
edit: mind that this is an action component, so it's execution will depend on any preceding validations / conversions being successful.
Today I discovered a new bug in P5. When I update the button which the overlay panel is referring to, it doesn't work anymore - The overlaypanel is not shown anymore.
As a workaround I do use PF('widgetVar').loadContents(); but this feels very uncomfortable.
In PF4 this did work without any workarounds.
Anyone got some solution?
My solution:
don't update single button that opens overlay, update both
also add dismissable="false" showCloseIcon="true"
in the case you are using overlay on a dialog: add appendTo="#(body)"
Example code:
<p:commandButton value="updateSection" update=":form:overlayPanelGroup" />
<h:panelGroup id="overlayPanelGroup">
<p:commandButton id="openOverlayBtn" process="#this" value="openOverlay"/>
<p:overlayPanel for="openOverlayBtn" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true" appendTo="#(body)">
<h:outputText value="textSample"/>
</p:overlayPanel>
</h:panelGroup>
I don't know exactly what you are pointing at. What do you mean with updating the button?
For me the following code works fine with PrimeFaces 5.0:
<!DOCTYPE html>
<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"
xmlns:pm="http://primefaces.org/mobile">
<h:head>
</h:head>
<h:body>
<p:commandButton id="menuButton" value="Menu" icon="ui-icon-home"/>
<p:overlayPanel for="menuButton" widgetVar="menuPanel" at="left" showEffect="push">
<!-- overlayPanel content goes here -->
</p:overlayPanel>
</h:body>
</html>
Does this help you with your problem?
I have the following page:
<?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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Fire - Registration</title>
</h:head>
<h:body>
<f:view>
<f:event type="preRenderView" listener="#{confirmPasswordResetBean.bindSessionKey()}"/>
</f:view>
<p:growl id="growl" showDetail="true" life="5000" />
<h:form>
<p:panel header="Select your new password">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="newPassword" value="Type your new password"/>
<p:password id="newPassword"
value="#{confirmPasswordResetBean.firstPassword}"
feedback="true"/>
<p:outputLabel for="retypedPassword" value="Retype your password"/>
<p:password id="retypedPassword"
value="#{confirmPasswordResetBean.secondPassword}"/>
</h:panelGrid>
<p:commandButton id="confirmButton"
value="reset"
action="#{confirmPasswordResetBean.doResetPassword()}"
update=":growl"/>
</p:panel>
</h:form>
</h:body>
The backing bean used above is RequestScoped, and the page itself takes a single parameter (sessionKey)...what I want to do is to:
1. Bind sessionKey to a variable in the backing bean. This is straightforward enough.
2. Use the bound value of sessionKey when executing dedicated logic in the same bean, when the client presses the commandButton.
The problem is that pressing the button starts a new request, which invalidates both the current bean (with the bound value), as well as the external page context...I thus lose all means to get a hold of sessionKey from either the bean or the page parameters...how can I resolve this? I am relatively new to both web programming and JSF, so pardon me if this has an obvious answer.
Either put the bean in the view scope, so that it lives long as you're interacting with the same view, or pass the request parameter by <f:param> to the subsequent requests.
<p:commandButton ...>
<f:param name="sessionKey" value="#{param.sessionKey}" />
</p:commandButton>
By the way, you'd rather have used <f:viewParam> to bind the request parameter to the bean directly.
<f:metadata>
<f:viewParam name="sessionKey" value="#{bean.sessionKey}" />
</f:metadata>
See also:
What can <f:metadata>, <f:viewParam> and <f:viewAction> be used for?