I am trying to apply some CSS on a web page that is using a templates composed of subtemplates. I have taken a template from primefaces and tried to decompose as much as I can into 2 sub templates : commonFooter.xhtml and commonHeader.xhtml. Then I have assembly them in template.xhtml and I want to use this template.xhtml in my pages.
However, I did not succeed (following this tutorial https://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/).
Here is the expected result when I do not explode my template.xhtml into two sub-templates
But the result is this one:
and Here is the code:
commonHeader.xhtml
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:body>
<ui:composition>
<p:layoutUnit id="top" position="north" size="50">
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:menuitem value="Quit" url="#" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</p:layoutUnit>
</ui:composition>
</h:body>
</f:view>
</html>
commonFooter.xhtml
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:body>
<ui:composition>
<p:layoutUnit id="bottom" position="south" size="60">
Bottom Content
</p:layoutUnit>
<p:layoutUnit id="left" position="west" size="300" resizable="true" closable="false" collapsible="true" header="Options" minSize="200">
<p:accordionPanel>
<p:tab title="Menu 1">
<br />
<p:calendar mode="inline" navigator="none"/>
<br />
</p:tab>
<p:tab title="Menu 2">
<h:outputText value="Menu 2 Content" />
</p:tab>
<p:tab title="Menu 3">
<h:outputText value="Menu 3 Content" />
</p:tab>
<p:tab title="Menu 4">
<h:outputText value="Menu 3 Content" />
</p:tab>
</p:accordionPanel>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
</p:layoutUnit>
</ui:composition>
</h:body>
</f:view>
</html>
template.xhtml
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<h:outputStylesheet library="css" name="/showcase.css" />
<h:outputStylesheet library="css" name="/sh.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
body {
background-color: #FFFFFF;
}
</style>
</h:head>
<h:body>
<ui:composition>
<p:layout fullPage="true" >
<!-- <div id="header">
<ui:insert name="header" >
<ui:include src="/WEB-INF/templates/commonHeader.xhtml" />
</ui:insert>
</div> -->
<ui:insert name="header" >
<ui:include src="/WEB-INF/templates/commonHeader.xhtml"/>
</ui:insert>
<!--
<div id="content">
<ui:insert name="content" >
<ui:include src="/WEB-INF/templates/commonContent.xhtml" />
</ui:insert>
</div> -->
<ui:insert name="footer" >
<ui:include src="/WEB-INF/templates/commonFooter.xhtml"/>
</ui:insert>
</p:layout>
<script language="javascript" src="resources/js/sh.js"></script>
<script language="javascript">
SyntaxHighlighter.all();
</script>
</ui:composition>
</h:body>
</html>
and my page is:
<?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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet library="css" name="/showcase.css" />
<h:outputStylesheet library="css" name="/sh.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
body {
background-color: #FFFFFF;
}
</style>
</h:head>
<h:body>
<ui:composition template="WEB-INF/templates/template.xhtml"/>
</h:body>
</html>
Edit:
To be more precise, the path of the css is not important here because it works when the template is in one piece. The problem I think is that dissociating the template into two separate entities and then assembly it has broken the primefaces presentation.
Thanks to another tutorial I found the way to use the tags composition include etc from jsf. I did not used them well
First you need to create simple templateFooter.xhtml and templateHeader.xhtml as followed with no html tag, but with a ui:composition tag:
<ui:composition
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">
<p:layoutUnit id="top" position="north" size="50">
<p:menubar>
<p:submenu label="Satisfact'IT" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:menuitem value="Quit" url="#" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</p:layoutUnit>
</ui:composition>
Then we need to create a page template.xhtml that will use our templateXXXXX.xhtml. This page needs to have an html tag because it will be used by your page that will be directly seen by the user. Thus you need to use the tag ui:include (which will import your templateXXX.xhtml) into a tag ui:insert. You will have something like that:
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<h:outputStylesheet library="css" name="/showcase.css" />
<h:outputStylesheet library="css" name="/sh.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
body {
background-color: #FFFFFF;
}
</style>
</h:head>
<h:body>
<p:layout fullPage="true" >
<ui:insert name="header" >
<ui:include src="commonHeader.xhtml" />
</ui:insert>
<ui:insert name="footer" >
<ui:include src="commonFooter.xhtml" />
</ui:insert>
</p:layout>
<script language="javascript" src="resources/js/sh.js"></script>
<script language="javascript">
SyntaxHighlighter.all();
</script>
</h:body>
</html>
And then to call you page in for exemple index.xhtml juste write:
<ui:composition template="WEB-INF/templates/template.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"
/>
I have not find yet the way to easily change it when I am in the index.xhtml, but I will keep you updated !
Related
I'm using an old version of Primefaces (3.5) in my project and I'm struggling with a problem for 2 days now. The problem is the following:
I have a template, in which I insert an UI. In this UI, I have a TabView, in which I include an xhtml.
I need to check if some inputText fields, set as required, were left blank after a tab change, and if they were, a message must appear under those fields. For that, I'm using <p:message> but it's not working and I can't find the reason. I inspected the page, and found out that the <p:message> field is not being rendered... and I've tried everything and googled for solutions, but to no avail.
Any ideas on how to solve this? (check the above example with <p:message for="test_name" />)
Thanks!
Template Code:
<!DOCTYPE html>
<html xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<meta http-equiv="refresh" content="#{session.maxInactiveInterval};url=#{disclaimer.currentURLincludingQueryString}"/>
</f:facet>
<link rel="shortcut icon" type="image/x-icon"
href="/alt-ui/resources/images/favicon.ico" />
<h:outputStylesheet library="css" name="alt.css" />
<title><ui:insert name="head_title">
<h:outputText value="ALT" />
<ui:repeat value="#{breadcrumbBean.breadcrumbList}" var="breadcrumb">
|<h:outputText value="#{breadcrumb.value}" />
</ui:repeat>
</ui:insert>
</title>
</h:head>
<h:body>
<f:view>
<h:outputScript library="js" name="Common.js" />
<h:outputScript library="js" name="ModalDialog.js" />
<div id="main_header">
<p:graphicImage library="images" name="Logo.png" alt="Logo" />
<div id="alt_header">
<h:outputText value="Remote Services" />
</div>
</div>
<h:form id="mainForm" enctype="multipart/form-data">
#{disclaimer.checkConfirm()}
<div id="center">
<p:messages id="main_msg" showDetail="true" autoUpdate="true" severity="error, fatal" />
<ui:insert name="main-content">center</ui:insert>
</div>
<div id="footer">
<div id="footer_content">
<ui:insert name="footer-content"/>
</div>
</div>
<p:growl id="template_growl" showDetail="false" autoUpdate="true" sticky="true" severity="info, warn"/>
</h:form>
</f:view>
</h:body>
</html>
Page XHTML:
<?xml version="1.0" encoding="utf-8"?>
<ui:composition xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets" template="/pages/templates/main_template.xhtml">
<ui:define name="head_title">
<h:outputtext value="#{msg['zynx.test.details.title']}" />
</ui:define>
<ui:define name="main-content">
<p:tabview id="test_tabview" styleclass="rustabview" cache="true" binding="#{zynxtestdetails.tabview}" activeindex="#{zynxtestdetails.activeindex}">
<f:attribute name="enablevalidation" value="#{zynxtestdetails.firsttabchange}" />
<p:ajax event="tabchange" listener="#{zynxtestdetdetails.ontabchange}" immediate="true" />
<p:tab id="tabmetadata" title="#{msg['zynx.test.tab.data.heading']}">
<p:panelgrid columns="1" styleclass="rustabpanel">
<ui:include src="tabtestdata.xhtml" />
</p:panelgrid>
</p:tab>
</ui:define>
</ui:composition>
TabTestData.xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">
<p:panelGrid id="dataDefinition" columns="5" columnClasses="alignTop,,,alignTop,alignTop">
<h:outputText styleClass="ui-widget-header2" value="#{msg['zynx.test.tab.data.headline']}" />
<p:spacer />
<p:spacer />
<p:spacer />
<p:spacer />
<p:outputLabel value="#{msg['zynx.test.tab.data.name']}" for="test_name" />
<p:inputText id="test_name" value="#{dynamicTestData.name}" size="50" required="true" disabled="#{zynxTestDetails.TestActive()}" validator="#{zynxTestDetails.validateName}" onchange="setTestChangedForBackAction()" />
<p:message for="test_name" />
</p:panelGrid>
</ui:composition>
I have a problem.
I'm making a website with the layout of PrimeFaces, which loads a page in the center when I click on any menu item on the left, but when I use the theme of BootsFaces (<bnu: panel ....> </bnu: panel>, page load in the center but it is not another load, when I do not use the theme, everything works fine but the panel shown in plain text without style look = "success" for example.
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:bnu="http://bootsfaces.net/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Page</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false" >
<h1>PAGE</h1>
</p:layoutUnit>
<p:layoutUnit position="west" size="195" header="Panel" resizable="true" closable="false" collapsible="true" >
<h:form id="form" >
<p:menu>
<p:menuitem id="abc" value="Inicio" action="#{bean.page0()}" update=":content:pcenter" />
<p:submenu label="ABC" >
<p:menuitem id="X1" value="CC1" action="#{bean.page1()}" update=":content:pcenter"/>
<p:menuitem id="X2" value="CC2" action="#{bean.page2()}" update=":content:pcenter"/>
<p:menuitem id="X3" value="CC3" action="#{bean.page3()}" update=":content:pcenter"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Welcome user" >
<h:form id="content">
<p:panel id="pcenter">
<ui:include src="#{bean.page}.xhtml" />
</p:panel>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<h:outputText value="South unit content." />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I try this and not show the style look="success" but show the title
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>
I try this, and the same
<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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</ui:composition>
And try this, working but after not load the pages in the center when click elements of left menu
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
</head>
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>
Actually, each of the three versions work. I've created a project based on your XHTML pages, and it runs flawlessly. Both with and without the PrimeFaces Bootstrap theme. So my best guess is there's a problem with your project setup.
I recommend you check out my example from https://github.com/stephanrauh/BootsFaces-Examples/tree/master/PrimeFacesLayout and try to find the difference to your project.
I'm using PF 4.0 and I'm trying to use templating and dialog. This is my template:
<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<p:growl for="message" id="msg" showDetail="true" />
<p:layout id="page" fullPage="true">
<!-- North -->
<p:layoutUnit position="north" size="150px" style="border: none !important">
<h:form id="menutoolbar">
<p:toolbar>
[...]
</p:toolbar>
</h:form>
</p:layoutUnit>
<!-- Center -->
<p:layoutUnit position="center" style="border: none !important">
<ui:insert name="content">Center of page</ui:insert>
</p:layoutUnit>
<!-- South -->
<p:layoutUnit position="south" collapsible="false" gutter="0">
<ui:insert name="status"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I'm using the template to render another page:
<?xml version="1.0" encoding="UTF-8"?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<f:metadata>
<f:viewParam name="id_file" value="#{csvDetalleBean.idFile}" />
</f:metadata>
<ui:composition template="./baseTemplate.xhtml">
<ui:define name="content">
<h:form id="tableform" prependId="false">
<p:dataTable id="detalle" value="#{csvDetalleBean.tableModel}" var="row" selection="#{csvDetalleBean.selectedRows}">
[...columns definition...]
</p:dataTable>
</h:form>
</ui:define>
<ui:define name="status">
<h:form id="statusform">
<p:panel id="panel" header="Status" style="margin-bottom:10px;">
[...controls definitions...]
</p:panel>
<p:poll interval="20" async="true" update="panel" />
</h:form>
</ui:define>
<p:dialog header="Dialog" widgetVar="respuestasDialog" resizable="false" appendToBody="true">
<p:dataTable id="respuestas" value="#{transactions.rows}" var="trRow">
<p:column headerText="Confirmation number">
<h:outputText value="#{trRow.get('confirmation_nm')}" /> hola
</p:column>
</p:dataTable>
</p:dialog>
</ui:composition>
</h:body>
</html>
The point is that I cannot show the dialog because it is not rendered at all. I think the point is the composition tag, I've already tried to put the dialog outside the composition, with same results.
What's the correct way to put components outside the layout? Of course don't want to put the dialog inside the template.
Thank you very much!
I am writing a simple page using JSF and Primefaces.
This is my template:
<?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:ui="http://java.sun.com/jsf/facelets">
<h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" header="North - header" style="font-size: 15px;">
<h:form>
<ui:include src="header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" header="West - menu" style="font-size: 15px;">
<h:form>
<ui:include src="menu.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Center - content" style="font-size: 15px;">
<ui:insert name="content"/>
</p:layoutUnit>
<p:layoutUnit position="east" header="East - nothing" style="font-size: 15px;">
</p:layoutUnit>
<p:layoutUnit position="south" header="South - footer" style="font-size: 15px;">
<ui:include src="footer.xhtml"/>
</p:layoutUnit>
</p:layout>
</h:head>
<h:body>
</h:body>
</html>
I have made simple menu:
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition>
<p:menu>
<p:submenu label="Main">
<p:menuitem value="Show main" action="glowna?faces-redirect=true"/>
<p:menuitem value="Show resultPage" action="resultPage?faces- redirect=true"/>
<p:menuitem value="Pictures" action="obrazek?faces-redirect=true"/>
</p:submenu>
</p:menu>
</ui:composition>
</h:body>
</html>
And now: I wanted to add some content to "content" unitlayout. I made simple page which uses the template below. If I add to the menuitem action like: action="glowna", when I click that item while my page is running, all the template is shown but without header part.
The left, right, center and footer part is shown properly, but header disappears.
However, if I add to the action atribute faces-redirect=true (action="glowna?faces-redirect=true") everything works fine.
This is my content page: glowna.xhtml
<?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:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition template="template.xhtml"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h1>Oto zawartość strony głownej - content</h1>
<p:growl id="growl" showDetail="true"/>
<p:panelGrid columns="1">
<p:inputText value="#{user.imie}" required="true"/>
<p:inputText value="#{user.nazwisko}" required="true"/>
<p:commandButton value="Show it!" actionListener="#{user.click}" update="growl"/>
</p:panelGrid>
</ui:define>
</ui:composition>
</h:body>
</html>
Anyone knows why?
Be grateful for ansewers :)
I'm using JSF2 with Primefaces3.4.2 I have created a layout in layoutComplex.xhtml as below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>PrimeFaces - ShowCase</title>
</f:facet>
<h:outputScript library="js" name="jscolor.js" target="head" />
<script type="text/javascript">
function handleValidateRequest(xhr, status, args) {
//alert("");
//jscolor.addEvent(window, 'load', jscolor.init);
}
</script>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="left" position="west" size="300" resizable="true"
closable="true" collapsible="true" header="Options" minSize="200">
<h:form>
<p:slideMenu style="width:235px;margin-left:-3px;margin-top:-6px;"
id="tree">
<p:submenu label="Product" icon="ui-icon-play">
<p:menuitem value="test color picker"
update=":centerContentPanel " action="#{navigationBean.doNav}"
oncomplete="handleValidateRequest(xhr, status, args)"
icon="ui-icon-arrow-4-diag">
<f:param name="urlParam" value="colorPicker" />
</p:menuitem>
</p:submenu>
</p:slideMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
<h:form id="centerContentPanel">
<ui:include src="#{navigationBean.pageName}.xhtml" />
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
Yes,I can dynamically change the source of centerContentPanel without refreshing the whole page and just the centerContentPanel i.e for on click of menuitem present in the layoutComplex.xhtml,and then the colorPicker page's content will be displayed in the centerContenPanel. But issue is: I added a colorpicker.js in the layoutComplex.xhtml head and hope it can work when update centerContent, but actually, it's not working ..
but after refresh all page by press F5 ,it works fine as I expected. Why? How can i fix this?
Following is colorPicker.xhtml:
<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:p="http://primefaces.org/ui">
<h:outputScript library="js" name="jscolor.js" target="head" />
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
</ui:composition>
and NavigationBean.java
package com.singtel.eshop.control;
import java.io.IOException;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
#SessionScoped
#ManagedBean
public class NavigationBean {
private String pageName = "blank";
public NavigationBean() {
}
public void doNav() {
String urlStr = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("urlParam");
this.pageName = urlStr;
}
public String getPageName() {
return pageName;
}
public void setPageName(String pageName) {
this.pageName = pageName;
}
}
You should call the jscolor.init after ajax call too. Seems like it is being called right after page load and needs to be called after your ajax call or inside your component. You can achieve this by calling jscolor.init in your colorPicker.xhtml file like this.
<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:p="http://primefaces.org/ui">
<h:outputScript library="js" name="jscolor.js" target="head" />
<script>
jscolor.init;
</script>
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
</ui:composition>