EDIT : another solution Updating ui:defined form content from Master template (JSF & Primefaces)
In the first place, sorry for my english, I am one of these damn mono laguage french.
I have this classic error : javax.faces.FacesException: Cannot find component with identifier ":formWaitingList" referenced from "formInscription:validerButton".
I know why this is happening but I don't know how to fix it.
I have a connexion form in the footer. I want to update a commandButton rendered in the page rankMe.xhtml. This page define the ui:composition "content" of the template.xhtml.
When I am on the page with the commandbutton i have no error and the rendering work perfectly. But when i am on another page like index.xhtml (whitch define the content of the template.xhtml too), Glassfish throw this exception, and I guess it is totaly standard cause the other content (rankMe.xhtml) is not load into the actual view.
How can I avoid this exception ? I could duplicate my commandbutton in all page and hide if the user is not on the actual rankMe.xhtml page but it's not a clean way too me.
Thanks
Here the code :
template.xhtml :
<h:body>
<ui:insert name="content" >
</ui:insert>
<ui:insert name="footer" >
<ui:include src="../template/footer.xhtml"></ui:include>
</ui:insert>
</h:body>
footer.xhtml :
<h:body>
<h:form id="formInscription">
<p:commandButton id="validerButton" update=":formWaitingList" ajax="true"/>
</h:form>
</h:body>
index.xhtml:
<h:body>
<ui:composition template="/template/template.xhtml">
<ui:define name="content">
Lorem ipsum ...
</ui:define>
</ui:composition>
</h:body>
rankMe.xhtml :
<h:body>
<ui:composition template="/template/template.xhtml">
<ui:define id="rankMe" name="content">
<h:form id="formWaitingList">
<h:commandButton id="Join"
rendered="#{connexion.connected}"
value="Join"/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
Two very simple solutions come to mind:
One solution would be to wrap your content part in an p:outputPanel and update it instead of your formWaitingList:
<p:outputPanel id="globalPanel>
<ui:define name="content">
Lorem ipsum ...
</ui:define>
</p:outputPanel>
Second solution would be to duplicate your p:commandButton just two times in the same footer.xhtml with different rendered values:
<p:commandButton id="validerButton" update=":formWaitingList" ajax="true" rendered="#{conditionIfYouAreInTheRankMeView}"/>
<p:commandButton id="validerButtonBis" update="otherThingYouWantToUpdateOrEvenNoUpdate" ajax="true" rendered="#{conditionIfYouAreNotInTheRankMeView}"/>
Related
I have written a template page for using in every page.In this template includes a left div a haed div and a footer.So central is for my forms.But forms are viewing below of footer.How to solve this layout problem.Here is my using of template
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Hakkında</title>
</h:head>
<body>
<ui:composition template="/templates/mainTemplate.xhtml">
<h:form>
Some components
</h:form>
</ui:composition>
</body>
Add in template space for body
<ui:insert name="body">Default Body</ui:insert>
and redefine it in your view (page)
<ui:define name="body">
<h:form id="homeForm">
<!-- your components -->
</h:form>
</ui:define>
I have template like here:
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
i add menu navigation:
<h:form id="form">
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/pages/template/header.xhtml" />
</ui:insert>
<f:ajax render="ContentLoader">
<h:commandLink actionListener="#{contentPage.setPage('/pages/first.xhtml')}" value="About Us" />
<h:commandLink actionListener="#{contentPage.setPage('/pages/login.xhtml')}" value="Contact Us" />
</f:ajax>
</div>
<h:panelGroup id="ContentLoader" >
<div id="content">
<ui:insert name="content" >
<ui:include src="#{contentPage.page}" />
</ui:insert>
</div>
</h:panelGroup>
</div>
</h:form>
links are working fine, but i have problem with redirect content by useing <h:commandButton action="link"> which is in content
how can i fix this problem?
maybe it's something wrong with my layout?
or how to correctly redirect from content to another content, useing buttons which are in contents?
As to your concrete problem, it's likely caused by the combination <ui:include src="#{...}"> and a view scoped bean. This construct works only if you upgrade to at least Mojarra 2.1.18. Otherwise, the view scoped bean will fail to restore and be newly recreated and therefore the default value of #{contentPage.page} will be considered when any form actions inside the page are to be decoded. Upgrading to at least Mojarra 2.1.18 should fix your problem. You can get it at http://javaserverfaces.java.net. It's currently already at 2.1.25.
As to your concrete functional requirement, using command links/buttons for plain page-to-page navigation is a poor practice. You should be using output links/buttons for this.
<h:button value="navigate" outcome="link" />
or
<h:link value="navigate" outcome="link" />
I am trying to include an xhtml which is on another domain (on the same server) inside my .xhtml.
The sample code is the following
<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>
<h:outputStylesheet library="css" name="style.css" target="body" />
</h:head>
<h:body>
<p:layout id="page" fullPage="true">
<!-- North -->
<p:layoutUnit position="north" size="10%"
style="border: none !important">
</p:layoutUnit>
<!-- South -->
<p:layoutUnit position="south" size="5%" collapsible="true" gutter="0">
<h:outputText value="South unit Content." />
</p:layoutUnit>
<!-- West -->
<p:layoutUnit position="west" size="200" header="Menu"
collapsible="true" effect="slide" styleClass="menuBar">
<h:form id="form1">
<p:panelMenu>
<p:submenu label="Students">
<p:menuitem value="page1" update=":centerpanel"
actionListener="#{layoutController.setNavigation('page2.xhtml')}" />
<p:menuitem value="page2" update=":centerpanel"
actionListener="#{layoutController.setNavigation('http://localhost:8080/externalsite/newpage.xhtml')}" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<!-- Center -->
<p:layoutUnit id="center" position="center">
<h:panelGroup id="centerpanel" layout="block">
<ui:include id="include" src="#{layoutController.navigation}" />
</h:panelGroup>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
So basically in the center layout unit I am trying to include the external .xhtml (which is on the same domain however).
JSF templates can be included only, if they are available within the same classloader.
If you want to embed an external page into your page, you need to user iframe.
For example:
<iframe src="http://www.primefaces.org/showcase/ui/home.jsf"/>
allows you to embed PrimeFaces showcase withing your page.
This is not possible. With the ui:include Tag you can only include Code Snippets from other xhtml files. What you are trying to do is accessing Code from another domain, but what you see in the final web app is only the generated HTML and Javascript Code. You cannot work with that in your application, as you have no access to the sourcecode.
I need to create a layout like this but with all the containers on separated files, like:
top.xhtml
<p:layout fullPage="true">
<p:layoutUnit position="north" header="#{support.applicationTitle}">
<h:form>
<p:menubar>
<p:menuitem value="Quit" icon="ui-icon-close" action="#{userController.logOut()}" />
</p:menubar>
</h:form>
</p:layoutUnit>
Without the </p:layout> because it will be close on my footer.xhtml like:
<p:layoutUnit position="south" header="© 2012 - 2012 PORTAL DE IDEIAS">
</p:layoutUnit></p:layout>
I have tried with both files but I get a error telling me that I need to close the layout tag, what is correct, but how can I solve my problem? Is this the best approach for a template? And another problem is that the layout tag require a center layoutUnit
This is indeed not the right approach. Your template has to be XML well formed. I suggest to create a master template file instead if all you want is to only specify the center unit.
Taking the example on the showcase site, that should look like this:
/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"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="Top unit content." />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
<h:outputText value="South unit content." />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
<h:form>
<ui:include src="../templates/themeMenu.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">
<h:outputText value="Right unit content." />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">Put default content here, if any.</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Note the <ui:insert> in the center unit.
The template client can then just look like this:
/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"
xmlns:p="http://primefaces.org/ui"
>
<ui:define name="content">
<p>Here goes your view-specific content.</p>
</ui:define>
</ui:composition>
which you open by http://example.com/contextname/page.xhtml.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
If you're looking for live open source examples of advanced Facelets templating, you may find OmniFaces showcase app useful.
I have a problem with the JSF-2.0 templating mechanism. I implement some snippet that are
included to template file. But one of my snippet contains dynamic content.
I do not get an error. But nothing is replaced in my snipplet!
The result do only contain "No link list could be found" string. Do anybody know why?
Thanks
The snippet code
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<div>
<ui:insert name="linkList">No link list could be found</ui:insert>
</div>
© MyCompany
</ui:composition>
The template code
...
<div class="footer">
<ui:insert name="footer">Footer</ui:insert>
</div>
...
The side where specify the template content
...
<ui:define name="footer">
<ui:include src="/snippets/footer.xhtml" />
</ui:define>
...
<ui:define name="linkList">
link structure for the footer
</ui:define>
The following line you have in snippet is -
<ui:insert name="linkList">No link list could be found</ui:insert>
is for templating and it should be in the template.
Include the snippet in the same way you have included the footer. Using
<ui:include src="snippet.xhtml" />