I am using a page with ui:composition use on it 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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title></title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="title">#{faqAddUpdate.actionState} FAQ</ui:define>
<ui:define name="content">
<h:form id="faqAddUpdateForm" style="border-color: #000000;width: 960px;position: absolute;left: 150px;" prependId="false">
....
....
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
My layout.xhtml look 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="textext/javascript" src="ckeditor/ckeditor.js" >
<ui:insert name="script"></ui:insert>
</script>
<title>
<ui:insert name="title">Login</ui:insert>
</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 page i am using something like this
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="script"></ui:define>
<ui:define name="title">#{faqAddUpdate.actionState} FAQ</ui:define>
<ui:define name="content">
....
</ui:define>
</ui:composition>
This add javascript tag in my page head section.Now i want to ask if i want to add another .js file on my page. The i will have to define another ui:insert name="script" in my layout.xhtml page like this?
<script type="textext/javascript" src="js/1.js" >
<ui:insert name="script"></ui:insert>
</script>
<script type="textext/javascript" src="js/2.js" >
<ui:insert name="script"></ui:insert>
</script>
and so on. Or is there any trick that i define script tag in my layout.xhtml once and then on the basis of src attribute, i insert it on my ui:composition page?
Thanks
You do not have to do this using ui:inserts. Wherever you need to add a javascript file in your pages. Just add like this using resource API.
<h:outputScript library="javascript" name="1.js" target="head" />
For this create folder WebContent/resources/javascript and put that 1.js in javascript folder.
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<ui:insert name="title">Login</ui:insert>
</title>
<ui:insert name="script"></ui:insert>
</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>
and then in your page use something like this
<h:body>
<ui:composition template="./WEB-INF/templates/Review_Template.xhtml">
<ui:define name="title">FAQ Review</ui:define>
<ui:define name="script"><h:outputScript library="Javascripts" name="jquery-1.7.1.js"/> </ui:define>
<ui:define name="script"><h:outputScript library="Javascripts" name="1.js"/> </ui:define>
<ui:define name="content">
<h:form id="FaqGridForm" prependId="false" >
....
</h:form>
</ui:define>
</ui:composition>
</h:body>
And you Javascripts folder should be inside, resources folder, as mentioned by Ravi in his answer :)
Thanks
Related
In my project there is a requirement that when we change language from Engish to Arabic all layout will be displayed in right to left position.
growl message working fine when i didn't use common layout but when i add this thing in common layout of my page then its still showing right side only..
source code:
<!DOCTYPE html>
<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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.ui-growl{
#{msg['msg']}:20px;
}
</style>
</h:head>
<body>
<ui:composition template="/home/template/common1/commonLayout.xhtml">
<ui:define name="content">
<h:form id="myform">
<p:growl id="msgs" sticky="true" autoUpdate="true" />
<f:event listener="#{localeControllerBean.islang}" type="preRenderView" />
<p:outputLabel for="sname" value="#{msg['welcome.jsf']}"
styleClass="label" />
<p:inputText id="sname" value="#{sponsorBean.sponsor_name}"
required="true" requiredMessage="#{msg['welcome.jsf']}"
styleClass="input" />
<p:commandButton id="submit" value="Save" ajax="false"
action="#{sponsorBean.save}" style="margin-bottom:50px;"
update="msgs" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
Anything outside <ui:composition> is ignored during building the view.
In your commonLayout.xhtml master template you should add a new <ui:insert> inside <h:head>:
<h:head>
...
<ui:insert name="head" />
</h:head>
Then define it inside the <ui:composition> of your template client:
<ui:composition template="...">
<ui:define name="head">
<style>.ui-growl{ #{msg['msg']}: 20px; }</style>
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
(by the way #{msg['msg']} is absolutely not self-documenting; I'd myself also rather have used <html dir="#{direction}"> so that you can just use e.g. html[dir='rtl'] .ui.growl selector)
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Trying to use the JSF2 templates feature.The base.xhtml page looks like below
<?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>
<h:outputStylesheet name="test.css" library="style" target="head"/>
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header" >
<ui:include src="/layout/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content" >
???
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="/layout/footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
Trying to inherit this template into my page (testpage.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:body>
<ui:composition template="/layout/base.xhtml">
<ui:define name="content">
Default Page content!!!!
<h:outputText value="Foo bar" style="green"/>
</ui:define>
</ui:composition>
</h:body>
</html>
The test.css file is available under the folder webcontent/resources/style and the content of the css file is as follows
.green{
color:#0000FF;
}
Now the problem is when I try to run the testpage the stylesheet is adding into the page (with view source able to identify) but it is not reflecting in the UI.
Is anything wrong in the above code? Any help on this appreciated.
You should use styleClass attribute (equivalent to the class attribute of plain HTML)
Replace
<h:outputText value="Foo bar" style="green"/>
With
<h:outputText value="Foo bar" styleClass="green"/>
I have the following master template file for my JSF based pages :
<!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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="title">MyApp</ui:insert></title>
<h:outputStylesheet name="stylesheet.css" library="styles"/>
</h:head>
<h:body>
<div id="container">
<div id="header">
<ui:insert name="header">
// header content
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
</ui:insert>
</div>
</div>
</h:body>
</html>
In the head section, we have stylesheet.css. This stylesheet contains all my global styles which are common to all pages.
In the template client, I would like to add page specific stylesheet. So, I tried adding the following line in my template client page:
<ui:composition template="/pages/templates/template.xhtml">
<ui:define name="content">
<h:outputStylesheet name="indexPage.css" library="styles" target="head"/>
// body content
</ui:composition>
This, however, does not seem to add indexPage.css in the generated HTML's head section.
I am using Mojarra 2.1.2. Does it support the target attribute? I don't see it listed as one of the available in my autosuggest options in Eclipse.
In case it doesn't, how do I inject the additional page specific CSS while still using templates?
Add to your master template file inside head section new template content specially for css files linking:
<h:head>
<title><ui:insert name="title">MyApp</ui:insert></title>
<h:outputStylesheet name="stylesheet.css" library="styles"/>
<ui:insert name="css"/>
</h:head>
In template client page add page specific stylesheet like this:
<ui:composition template="/pages/templates/template.xhtml">
<ui:define name="css">
<h:outputStylesheet name="indexPage.css" library="styles"/>
</ui:define>
...
</ui:composition>
Instead of h:outputStylesheet coud be used <link rel="stylesheet" type="text/css" href="relative path to css file">.
Important that ui:insert for css in master template should be inside h:head.
I just had a similiar problem and a friend helped me.
The solution was to import the css in a subheader of a ui:composition
<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"
template="/template.xhtml"
>
<ui:define name="subheader">
<h:outputStylesheet library="css" name="my-style.css" />
</ui:define>
<ui:define name="content">
</ui:define>
</ui:composition>
Why do I lose all CSS and JS when I refresh page that has templating in JSF?
My Template :
<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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Facelets Template</title>
</h:head>
<h:body>
<div id="top" class="top">
<ui:insert name="top">
<h:form>
<h:commandButton value="Home" action="#{auth.goHome()}"/>
<h:commandButton value="Logout" action="#{auth.logout}"/>
</h:form>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
</html>
Child Page:
<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>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="/contentTemplate.xhtml" >
</ui:composition>
</h:body>
</html>
**GET http://localhost:11032/Integration/Common/resources/css/default.css 404 (Not Found) welcome.xhtml:5
GET http://localhost:11032/Integration/Common/resources/css/cssLayout.css 404 (Not Found)**
for start try to replace
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
(and the other css) with
<h:outputStylesheet name="css/default.css" target="head" /> (do same for the other css)
If that wont work you can try using #{facesContext.externalContext.requestContextPath}
<link href="#{facesContext.externalContext.requestContextPath}/css/default.css" rel="styleSheet" type="text/css"/>
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?