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>
Related
I'm having a problem using template that has another nested template within it.
I get
java.io.FileNotFoundException
at org.apache.naming.resources.DirContextURLConnection.getInputStream(DirContextURLConnection.java:403)
I have this basic template :
(./resources/css/template.xhtml)
<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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="stylesheet.css"/>
<title><ui:insert name="title"> Facelets template </ui:insert></title>
</h:head>
<h:body>
<div id="top" class="top_content">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
and templateLogin which "inherits" template :
(./resources/css/templateLogin.xhtml)
<ui:composition 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"
template="./resources/css/template.xhtml">
<ui:define name="title">
Some title
</ui:define>
<ui:define name="top">
<div id="top">
...code here
</div>
</ui:define>
</ui:composition>
and I have welcome file which is welcome file of the web application which uses templateLogin:
<ui:composition 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"
template="./resources/css/templateLogin.xhtml">
<ui:define name="title">
Welcome title
</ui:define>
As I said, I get file not found exception. When I define as template template.xhtml for the welcome file , there's no error. It's as it doesn't see templateLogin.xhtml in the specified path, but it's definetely there.
Any ideas? Thanks.
Get rid of the leading period in your template paths. The leading period makes it relative to the current folder of the template client. If the template path starts with / then it becomes absolute to the web content root.
Thus, so:
template="/resources/css/template.xhtml"
and
template="/resources/css/templateLogin.xhtml"
Unrelated to the concrete problem, there are 2 problems with those paths:
Template files are not CSS files.
Template files are not supposed to be publicly accessible.
Put them in /WEB-INF folder. E.g.
template="/WEB-INF/templates/layout.xhtml"
and
template="/WEB-INF/templates/login.xhtml"
See also:
Which XHTML files do I need to put in /WEB-INF and which not?
Well if i look to your code then i see some strange things. Your main template is located in
resources/css Thats fine. But then your other template is also located in /resources/css
In your include you say:
template="./resources/css/template.xhtml"
So you suggest that it is in /resources/resources/css and yes the file is not there.
So trie in your include this:
template="template.xhtml"
I don't know where your templateLogin.xhtml is but also here pay attention to your include
Use:
#{request.contextPath}/resources/css/default.css
I would like to use a Facelets template within another template. Currently I have a "base" template that so far has been enough for all pages I've done. It has a top and a content area.
The top has logo, menu, login/logout functionality, while the content area shows, well, the content.
Now I need to do another page (to hold user profile information) where I'd like to have a menu to the left and show result to the right. This page shall be inserted in the base template content area.
Is it possible to create a new template which defines those two areas (profile_left and profile_content) and somehow still use the base template?
I see no reason why I couldn't just copy the code in the base template and add the new "defines" that I want (profile_left and profile_content), but I still wonder if it's possible to keep using the original base template.
You can extend from templates as deep as you want. It's not true that you can extend from only one template or something as you seem to think.
For example:
/WEB-INF/templates/base.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"
>
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content"><ui:insert name="content">Default content</ui:insert></div>
<div id="footer">Footer</div>
</h:body>
</html>
/WEB-INF/templates/profile.xhtml
<ui:composition template="/WEB-INF/templates/base.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"
>
<ui:define name="content">
<div id="profile_left"><ui:insert name="profile_left" /></div>
<div id="profile_right"><ui:insert name="profile_right" /></div>
</ui:define>
</ui:composition>
/user.xhtml
<ui:composition template="/WEB-INF/templates/profile.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"
>
<ui:define name="title">User profile</ui:define>
<ui:define name="profile_left">
Profile left.
</ui:define>
<ui:define name="profile_right">
Profile right.
</ui:define>
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
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 been playing with JSF and have a project working that has a header/footer/navigation/content
panels. The project, however, goes from page 1 to page 2, etc., with each page having a different layout. How can I create a reusable template that keeps the same look and feel from page to page, i.e., header/footer/navigation stay the same, but content is updated?
This sounds like a classic case of a master template. In such a template you put everything that's common to all pages and then your actual pages reference this template and "fill in the blanks". In a way it's the reverse of the also classic include.
E.g.
/WEB-INF/templates/masterTemplate.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"
>
<h:head>
<title>
<ui:insert name="title">Some title</ui:insert>
</title>
</h:head>
<ui:include src="header.xhtml"/>
<h:body>
<ui:insert name="content" />
</h:body>
<ui:include src="footer.xhtml"/>
</html>
A page uses this as follows, e.g.
/hello.xhtml
<ui:composition template="/WEB-INF/templates/masterTemplate.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"
>
<ui:define name="title">hello</ui:define>
<ui:define name="content">
Hi, this is the page
</ui:define>
</ui:composition>
I can't figure out how to include a piece of HTML (say a little table) in each of the pages of my web app.
Say this is the table I want to include, so I made a template:
<?xml version ... ?>
<!DOCTYPE ...">
<html xmlns="... all the required namespaces ...">
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
then I have the code that uses it:
<?xml version ...?>
<!DOCTYPE ...">
<html xmlns="... all required namespaces ...">
<body>
<h3>Will this be displayed?</h3>
<ui:composition template="tableTemplate.xhtml">
<h4>Will this?</h4>
</ui:composition>
</body>
</html>
the page that I get on the browser is:
<html xmlns ...>
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
so there is the table but all the rest is missing!
In the master template, you need to use <ui:insert> to declare the place where the template definitions will be inserted.
template.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">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="body">Default body</ui:insert>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</h:body>
</html>
In the template client, you need to use <ui:define> to define the template definitions which are to be inserted in the places declared in the template.
page.xhtml
<ui:composition template="template.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">
<ui:define name="title">
Define your page title here
</ui:define>
<ui:define name="body">
<h3>Define your body content here</h3>
<p>Blah blah</p>
</ui:define>
</ui:composition>
No HTML around <ui:composition> is necessary. They will be ignored anyway. Just don't put any HTML there, that's only waste of space and confusing for yourself.
When you open page.xhtml in the browser, the following will end up in the rendered output:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Define your page title here</title>
</head>
<body>
<h3>Define your body content here</h3>
<p>Blah blah</p>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
TRY
<ui:include src="tableTemplate.xhtml"/>
and in your tableTemplate.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
put your template here
</ui:composition>