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.
Related
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'm a beginner with JSF and Java, please be nice!
I'm trying to render a specific block if a user is an Administrator.
I have a template. This template render correctly a specific block if the user is logged.
admin.xhtml:
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">Admin</ui:define>
<!-- Logged as Admin -->
<ui:fragment rendered="#{user.admin}">
<ui:define name="body">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:define>
</ui:fragment>
</ui:composition>
template.xhtml:
<div class="header">
<h2>
<ui:insert name="sectionTitle"> Default Section Title</ui:insert>
</h2>
<ui:insert name="logBox">
<ui:fragment rendered="#{not user.logged}">
<ui:include src="login.xhtml"></ui:include>
</ui:fragment>
<ui:fragment rendered="#{user.logged}">
<h:form>
<h:commandButton value="Logout"
action="#{userService.logout}" />
</h:form>
</ui:fragment>
</ui:insert>
</div>
<div class="corebody">
<ui:insert name="body"> Default Section Content</ui:insert>
</div>
I can move the rendered block inside the template like so:
<ui:fragment rendered="#{user.admin}">
<ui:insert name="body"> Default Section Content</ui:insert>
</ui:fragment>
but this don't seem ok to me regarding the responsability of each files ( this don't seem really generic, why should such a thing be in the template? ).
Am I missing something really obvious?
Anything outside <ui:define> and <ui:composition> is ignored during building the view and don't end up in JSF component tree.
You need to put <ui:fragment> inside <ui:define>.
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">Admin</ui:define>
<!-- Logged as Admin -->
<ui:define name="body">
<ui:fragment rendered="#{user.admin}">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:fragment>
</ui:define>
</ui:composition>
An alternative is to use JSTL <c:if> as that runs during view build time already:
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">Admin</ui:define>
<!-- Logged as Admin -->
<c:if test="#{user.admin}">
<ui:define name="body">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:define>
</c:if>
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
JSTL in JSF2 Facelets... makes sense?
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">
<!-- Logged as Admin -->
<ui:fragment rendered="#{user.admin}">
<ui:define name="body">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:define>
</ui:fragment>
</ui:define>
</ui:composition>
Try this.
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?
I'm using a p:galleria (primefaces 3.2) and it works fine in FF and chrome. But sometimes it is not showing in IE9 and IE8 is never showing it.
IE9: When I clear browser cache and reload the page, the gallery is shown correctly. But when I then reload the page, the gallery isn't showing. I need to clear the browser cache and then it is shown again.
Here is the galleria code
<f:view
<ui:composition
<ui:define name="content">
<f:view>
<f:subview id="fleetvehicleinfo">
<h:form
.
.
<p:galleria value="#{vehicleRemarketingDetail.vehicle.Pictures_Set}" var="picture" panelWidth="470" panelHeight="350" frameWidth="110" frameHeight="80" >
<p:graphicImage value="/vehicle/remarketing/image/#{picture.document_id}.jpg" height="350" width="470" />
</p:galleria>
</h:form>
</f:subview>
</f:view>
</ui:define>
Anybody having a clue what is wrong and how I can get it to work?
try to add this in the beginning of your header :
<f:facet name="first">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
</f:facet>
I don't understand how to display in center screen when I click button in my "left" menu.
Now I have that when I click button in my "left" menu, new page opens without "left" menu but I don't want it, I need that "left" menu wasn't disappeared.
Below is my code.
<h:head>
<title>Facelet Title</title>
</h:head>
<frameset rows="65,*" frameborder="0">
<frame scrolling="no" src="header.xhtml"/>
<frameset cols="200,*" frameborder="0">
<frame scrolling="no" src="menu.xhtml"/>
</frameset>
</frameset>
Basically, you need to give the target frame a name and specify it in the target attribute of the <a> element. E.g.
<frame name="center">
with
<a href="page.xhtml" target="center">
But this all is not entirely the right way to template a modern web application. Framesets have many disadvantages as to user experience and SEO valuability. Instead, the include and templating facilities of any server side view technology (like Facelets as you're using) should be used. Framesets should only be used when you have absolutely no server server side view technology at hands (thus, just plain HTML) or when you want to present an external website.
With Facelets, you should instead be using something like this as master template
/WEB-INF/templates/layout.xhtml
<!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><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header"><ui:include src="/WEB-INF/includes/header.xhtml"></div>
<div id="menu"><ui:include src="/WEB-INF/includes/menu.xhtml"></div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
</h:body>
</html>
(you can use CSS to position the layout components the way you want, e.g. float:left on #menu and #content)
And this is how the template client (the page which you actually opens by URL) should look like:
/page.xhtml
<ui:composition template="/WEB-INF/templates/layout.xhtml"
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">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
For an open source example of a modern JSF/Facelets web application, check among others the OmniFaces showcase application.
As you're using PrimeFaces, there's another alternative, the <p:layout>. See the "full examples" at its showcase application, for example this one.
See also:
Java EE 6 tutorial - Facelets
Your description is a bit confusing, but I imagine that JSF templating system is what you are after, enabling you to include the same code (a menu for example) on multiple pages. Frames are very outdated and largely not used anymore.
See example at http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
As a further comment, this issue does not seem to be related to Primefaces (which is a component pack, none of these comments are included in your code).
Here is a simple header, page(s), footer example. You can use one form id for all believe it or not. The header goes in WebContent/templates. The other .xhtml can go in WebContent. If your #ManagedBean String method returns "second", the page second.xhtml will be displayed. Each pages still talks to it's own #ManagedBean.
<body">
<f:view>
<div id="container">
<h:form id="templateForm">
<div id="header">
<ui:include src="header.xhtml" />
</div>
<div id="wrapper">
<div id="firstId">
<ui:insert name="first"></ui:insert>
</div>
<div id="secondId">
<ui:insert name="second"></ui:insert>
</div>
<div id="inputMaskId">
<ui:insert name="inputMask"></ui:insert>
</div>
<div id="valtestId">
<ui:insert name="valtest"></ui:insert>
</div>
</div>
<div id="footer">
<ui:include src="footer.xhtml" />
</div>
</h:form>
</div>
</f:view>
</body>
We can use Layouts instead
include namespace
xmlns:p="http://primefaces.org/ui"
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header=
"Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for North" />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom"
resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for South" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header=
"Left" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for West" />
</p:layoutUnit>
<p:layoutUnit position="east" size="200" header=
"Right" resizable="true" closable="true" collapsible="true">
<h:outputText value="Layout content for Right" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Layout content for Center" />
</p:layoutUnit>
</p:layout>
This will render five panels