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"/>
Related
Here is the JSF code trying to display and navigate.
<!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">
<h:head>
<title>A Simple JavaServer Faces 2.0 View</title>
</h:head>
<h:body>
<h:form>
<h1>Images</h1>
<p><h:graphicImage library = "/images" name = "img_jsf.jpg"/>
<h:button value = "Proceed to page 2" outcomr = "gotopage2"/></p>
<p>Above the Main table</p>
<h:dataTable border="1" var="book"
value="#{catalogBean.bookList}">
<h:column>
<h:graphicImage url="#{book.imageLink}" height = "150" width= "150"/>
<h:link outcome="gotopage2">
<h:outputText value = "Proceed to page 2"/>
</h:link>
</h:column>
</h:dataTable>
</h:form>
Here is faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0"
>
<!-- Comments here, wow talk about hard to do this right.... -->
<navigation-rule>
<from-view-id>CatProdPage.xhtml</from-view-id>
<navigation-case>
<from-outcome>gotopage2</from-outcome>
<to-view-id>/storePage2.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Here is storePage2.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">
<h:head>
<title>Store Page2</title>
</h:head>
<ui:composition template="./../template/secondaryTemplate.xhtml">
<ui:define name="header">
<ui:include src="/common/header.xhtml" />
</ui:define>
<ui:define name="leftMenu">
<ui:include src="/common/leftMenu.xhtml" />
</ui:define>
<ui:define name="CatProdPage">
<ui:include src="CatProdPage.xhtml" />
</ui:define>
<ui:define name="page2">
<ui:include src="page2.xhtml" />
</ui:define>
</ui:composition>
</html>
This is the result of a snippet from "view source" on the page
<h1>Images</h1>
<p><img src="RES_NOT_FOUND" /><input type="button" onclick="window.location.href='/jsfreg/faces/store/storePage.xhtml'; return false;" value="Proceed to page 2" /></p>
<p>Above the Main table</p><table border="1">
<tbody>
<tr>
<td><img src="/jsfreg/resources/images/img_coreJsf.jpg" height="150" width="150" /><span>: This link is disabled because a navigation case could not be matched.Proceed to page 2</span></td>
</tr>
The core problem is that I can't get images to display and can't get static navigation to work.
I have tried moving the images/*.jpg folder to every possible location I can think of beneath the application root, under WEB-INF, etc.
I am using Glassfish 4 and Maven.
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>
Tried Mojarra - 2.0.8, 2.1.6 , MyFaces 2.0.11,2.1.5
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml" xmlns:f="java.sun.com/jsf/core" xmlns:h="java.sun.com/jsf/html" xmlns:ui="java.sun.com/jsf/facelets">
<body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</body>
</html>
The XML namespaces are invalid. You've removed the http:// prefix from them all. This is not right.
Here's a rewrite:
<!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>Page title</title>
</h:head>
<h:body>
<h:form>
<h:inputText id="name" value="#{helloBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
<h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
</h:form>
</h:body>
</html>
Note that you also forgot the <h:head> component. This generates a HTML <head> element which allows JSF to auto-include the necessary JS and CSS files. In case of <f:ajax>, the JSF-supplied jsf.js file needs to be (auto)included, otherwise you will face a JS error after the page is been loaded.
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
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?