Normally I have my jsf page 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:c="http://java.sun.com/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/jsf/template.xhtml">
<ui:define name="content">
<!-- Content Header -->
<section class="content-header">
</section>
<!-- Main content -->
<section class="content">
<h:form>
<div>
<div>
<div>
<div>
<div >
<h:outputText value="Hello World!"/>
</div>
</div>
</div>
</div>
</div>
</h:form>
</section>
</ui:define>
As you noticed, I have a template.xhtml which I import on each jsf page. Below is my template.xhtml.
<!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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<f:view>
<h:head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/jsfdefault.css" />
</h:head>
<h:body>
<div class="outer-container">
<div class="inner-container">
<div class="main" style="min-height: 500px">
<div style="width:100%;border: none;">
<ui:include src="/jsf/menu.xhtml"></ui:include>
</div>
<div class="content" style="width: 100%; margin-top:-8px;">
<ui:insert name="content">
</ui:insert>
</div>
<div class="clearer"></div>
</div>
</div>
</div>
</h:body>
</f:view>
</html>
Now I want to modify my template.xhtml. I will check if role = Professor, I will call specific template (templateForProfessor.xhtml) and if role = student, I will call another template (templateForStudent.xhtml). I am not sure where to place the if condition. Glad if you can provide a sample.
templateForProfessor.xhtml
<!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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<f:view>
<h:head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<link type="text/css" rel="stylesheet" href="# {request.contextPath}/css/jsfdefault.css" />
</h:head>
<h:body>
<div class="outer-container">
<div class="inner-container">
<div class="main" style="min-height: 500px">
<div style="width:100%;border: none;">
<ui:include src="/jsf/menu.xhtml"></ui:include>
</div>
<div class="content" style="width: 100%; margin-top:-8px;">
<ui:insert name="content">
</ui:insert>
</div>
<div class="clearer"></div>
</div>
</div>
</div>
</h:body>
</f:view>
</html>
templateForStudent.xhtml
<!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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/css/default.css" />
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="top" position="north" >
<div>
<h:form>
<div>
<div style="float: right;">
</div>
</div>
</h:form>
</div>
</p:layoutUnit>
<p:layoutUnit id="bottom" position="south" >
</p:layoutUnit>
<p:layoutUnit id="left" position="west">
<ui:insert name="leftContent">
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="right" position="east">
<ui:insert name="rightContent">
</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center" size="0">
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
Related
I am using primefaces as a framework to use autocomplete.
If I only use primefaces without composition it works well.
<!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://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"> <h:head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <h:outputStylesheet name="css/materialize.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Template</title> </h:head> <h:body class="blue-grey lighten-4"> <ui:include src="cabecalho.xhtml" />
<h:messages id="erromsg" fatalClass="alert alert-danger" errorClass="alert alert-danger" infoClass="alert alert-info" warnClass="alert alert-warning" />
<ui:insert name="corpo" />
<ui:include src="/rodape.xhtml" /> <h:outputScript name="js/jquery-2.1.1.js" /> <h:outputScript name="js/mask/jquery.inputmask.bundle.js" /> <h:outputScript name="js/mask/phone.js" /> <h:outputScript name="js/mask/phone-be.js" /> <h:outputScript name="js/mask/phone-ru.js" /> <h:outputScript name="js/materialize.js" /> <script>
//Select
$(document).ready(function() {
$('select').material_select();
});
//Carosel $('.carousel.carousel-slider').carousel({ fullWidth : true, }); autoplay();
function autoplay() { $('.carousel').carousel('next'); setTimeout(autoplay, 4500); }
//Menu-Mobile $(".button-collapse").sideNav(); //Dropdown $(".dropdown-button").dropdown();
$(document).on("ready",function(){
$(".ui-paginator-first.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-last.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-next.ui-state-default.ui-corner-all").addClass("btn");
$(".ui-paginator-prev.ui-state-default.ui-corner-all").addClass("btn");
});
</script> </h:body> </html>
I am using materialize as my framework to front end.
my test page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Title</title>
</h:head>
<h:body>
<ui:composition template="_template.xhtml">
<ui:define name="corpo">
<div class="container">
<p:autoComplete id="autocomplete"
value="#{manterProdutoBean.descMarca}"
completeMethod="#{manterProdutoBean.completeMarca}"
forceSelection="true" required="true"
requiredMessage="Informe a marca!" maxResults="3">
<p:ajax event="query" />
</p:autoComplete>
<br />
<p:outputLabel value="Max Results(5):" for="acMaxResults" />
<p:autoComplete id="acMaxResults" maxResults="5"
value="#{manterProdutoBean.descMarca}"
completeMethod="#{manterProdutoBean.completeText}">
<p:ajax event="query" />
</p:autoComplete>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
When I am using composition, my completemethod is never call.
Could you help me, please?
Sincerely,
Guys thanks for your help! I found the solution! I had imported 2 jquery, one from primefaces and other from materialize! I disabled materialize jquery and it started to working! Thanks for all !
I want to ask a question that i have a master template like this
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Login</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include src="header.xhtml" id="header"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
<ui:insert name="bottom">
<ui:include src="footer.xhtml" id="footer"/>
</ui:insert>
</div>
</h:body>
</html>
On my each page i am using something like this
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>City Setup</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<h:form id="cityReviewform">
......
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Now what is happening that because of the ui;composition my tile attribute is now working on each page, because ui:composition discard every tag outside of it. Now on each page i have a title of Login(i.e of master template). So i want to ask that how can i do this that on each page, its own title shown instead of Login(master tempalte title)?
Thanks
In the template client, everything outside <ui:composition> is ignored. You need to change your template approach to provide an <ui:insert> for the title in the master template, so that it can be defined by an <ui:define> in the template client.
Master template:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title><ui:insert name="title">Login</ui:insert></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include id="header" src="header.xhtml"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content" />
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include id="footer" src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Template client:
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="title">City Setup</ui:define>
<ui:define name="content">
<h:form id="cityReviewform">
...
</h:form>
</ui:define>
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
I have created a basic JSF template called Template.xhtml. This template is then being used by the page TestPage.xhtml. In my TestPage.xhtml i have only used the <ui:define> tag to override the pages title. Therefore, I would have expected the rest of the templates content to be displayed the same. However, only the header and footer of the template are being displayed.
Template.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:ace="http://www.icefaces.org/icefaces/components"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ice="http://www.icesoft.com/icefaces/component"
>
<h:head>
<title><ui:insert name="title"></ui:insert></title>
<link href="#{request.contextPath}/resources/css/Template.css" rel="stylesheet"/>
</h:head>
<h:body>
<header id ="header">
<ui:insert name="header">
<h1>OAG Reference Data</h1>
</ui:insert>
</header>
<section id="container">
<ui:insert>
<section id="sidebar">
<ui:insert name="sideBar">
<h:form>
<ace:menu type="sliding" zindex="2">
<ace:submenu label="Carrier">
<ace:menuItem value="General Carrier Data" />
<ace:menuItem value="Contact Info" />
<ace:menuItem value="Alliance Membership" />
</ace:submenu>
</ace:menu>
</h:form>
</ui:insert>
</section>
<section id="content">
<ui:insert name="content">
<h1>Content</h1>
</ui:insert>
</section>
</ui:insert>
</section>
<footer id ="footer">
<ui:insert name="footer">
<h1>Footer#{bundle['application.defaultpage.footer.content']}</h1>
</ui:insert>
</footer>
</h:body>
</html>
TestPage.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html 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:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<ui:composition template="WEB-INF/templates/Template.xhtml">
<ui:define name="title">
Test Title
</ui:define>
<ui:define name="content">
Test Content
</ui:define>
</ui:composition>
</html>
Does anybody know why the footer and header sections are being displayed as part of the template, but why the other content and sidebar sections are not (despite me not overriding them).
Thanks.
You need to put <ui:insert name="Container"> instead of <ui:insert> in the "container" section.
The content is not shown because the ui insert tag has no name
so you can't refer to it.
I am using primefaces v4.0. I have an f:event listener={..} type=preRenderView set in my xhtml. The listener method is also called correctly,but this listener method performs Navigation using Navigation handler. What is observe is that after the navigation is complete and the 2nd page is loaded, the menus of the second page are not showing as expected. Seems there is some css/js not loading. Below is my xhtml template which has the menu code.
<?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:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
>
<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>CBB-Questionnaire</title>
</f:facet>
<link type="text/css" rel="stylesheet" href="#{resource['css:template.css']}" />
</h:head>
<h:body >
<p:tooltip />
<div class="qestDiv" >
<div class="header">
<h:form id="homeform">
<p:menubar >
<p:submenu label="Questionnaire" icon="ui-icon-document" >
<p:menuitem value="Technology Outsourcing" action="TechQuestionnaireForOutSrc"
icon="ui-icon-document" id="TECHQ1"
actionListener="#{usersession.questSelectedSetInSession}"/>
</p:submenu>
</p:menubar>
</h:form>
</div>
<div class="content">
<div class="centerpane">
<div class="pageContent">
<ui:insert name="pageContent" />
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</h:body>
</html>
page1.xhtml is below navigates to page2.xhtml
<ui:composition template="/WEB-INF/templates/template.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"
>
<ui:define name="pageContent" >
<f:event listener="#{techQOutSrcbean.checkSubmissionStatusAndNavigate}" type="preRenderView" />
</ui:define>
</ui:composition>
page2.xhtml
<ui:composition template="/WEB-INF/templates/template.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"
>
<ui:define name="pageContent" >
</ui:define>
</ui:composition>
When page2.xhtml loads it is supposed to show the menus defined in teh template as i am using facelets. But the menus in page2 loads, but it is loaded as
Below is the html source which tells that the js is not loaded on the page where the menu is loaded incomplete.
<!-- taken from the page where menu loads properly -->
<meta http-equiv="X-UA-Compatible" content="EmulateIE8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CBB-Questionnaire</title><link href="/QuestionaireWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" rel="stylesheet" type="text/css"><link href="/QuestionaireWeb/faces/javax.faces.resource/primefaces.css?ln=primefaces&v=4.0" rel="stylesheet" type="text/css"><script src="/QuestionaireWeb/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=4.0" type="text/javascript"></script><script src="/QuestionaireWeb/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&v=4.0" type="text/javascript"></script><script src="/QuestionaireWeb/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=4.0" type="text/javascript"></script><link href="/QuestionaireWeb/faces/javax.faces.resource/css/template.css" rel="stylesheet" type="text/css">
<!-- taken from the page where js/css does not load properly fro the menu -->
<meta http-equiv="X-UA-Compatible" content="EmulateIE8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CBB-Questionnaire</title><link href="/QuestionaireWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" rel="stylesheet" type="text/css"><link href="/QuestionaireWeb/faces/javax.faces.resource/css/template.css" rel="stylesheet" type="text/css">
I want to implement JSF page with AJAX. This is the code of the JSF page:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> Settings Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Application Settings" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_application_settings.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsdiv" style="width:350px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:panelGrid columns="2">
<h:panelGroup>User Session Timeout</h:panelGroup>
<h:panelGroup>
<h:selectOneMenu value="#{ApplicationController.settingValue('SessionTTL')}">
<f:selectItem itemValue="one" itemLabel="Option one" />
<f:selectItem itemValue="two" itemLabel="Option two" />
<f:selectItem itemValue="three" itemLabel="Option three" />
<f:selectItem itemValue="custom" itemLabel="Define custom value" />
<f:ajax render="input" />
</h:selectOneMenu>
<h:panelGroup id="input">
<h:inputText value="#{ApplicationController.settingValue('SessionTTL')}" rendered="#{bean.type == 'custom'}" required="true" />
</h:panelGroup>
</h:panelGroup>
<h:panelGroup>Maximum allowed users</h:panelGroup>
<h:panelGroup>#{ApplicationController.settingValue('MaxUsersActive')}</h:panelGroup>
</h:panelGrid>
</div>
<div id="settingslayer" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:400px">
</div>
<div id="settingspanel" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
</h:body>
</html>
When I load the page I get this error:
One or more resources have the target of "head", but no "head" component has been defined within the view.
This is the code of the header:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<title>Settings Center</title>
<link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- / END -->
</html>
The Ajax is not working and this error message appears when I load the page. Maybe I'm missing something to add. How I can fix the code?
Best wishes
Peter
Well, I guess you need to edit your header.xhtml like this
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
<title>index</title>
<h:head>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen"/>
<script>....
</script>
</h:head>
Make sure that you use <h:head> - and not <head>.
Try to put <ui:composition> inside <html> and around its content in header.xhtml.