I have done template in 3 steps:
Firstly i created a xhtml file with content that is common to all the pages:
AllComponentsTemplate.xhtml
<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://java.sun.com/jsf/facelets">
<head>
<title>State Transport Department- Work Schedule</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" type="text/css" href="../../CSS/CompleteTemplateCSS.css"/>
<link rel="stylesheet" type="text/css" href="../../CSS/templateCSS.css"/>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="menu">
<h:outputLabel class="welcomeNote" value="#{welcomeBean.fullname}" />
<ul class="ulForMyAccount"><li> <h:outputLabel value="My Account" id="mainAnchor"/>
<ul ><li> <a href="/webpages/ChangePasswordxhtml.xhtml" id="subAnchor" >Change my Password</a> </li> </ul></li></ul> </div>
<div class="contentBody">
<div class="menuTable">
<table class="templateBody" >
<tr>
<td class="navigationLink" > <ul><li>
<h:link value="Home" outcome="/webpages/NewWelcome.xhtml" rendered="#{welcomeBean.home}" class="mainLinks"/>
</li></ul> </td>
</tr> </table> </div> </div>
<div class="footer"></div>
</div> </body> </html>
Then i created a MainTemplate.xhtml page which i would be using in other pages as templates:
<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://java.sun.com/jsf/facelets">
<f:view>
<h:head>
<title>State Transport Department-Work Schedule</title>
</h:head>
<h:body>
<ui:include src="AllComponentsTemplate.xhtml"/>
<ui:insert name="informationBody"></ui:insert>
</h:body> </f:view> </html>
Then i added this template to my first page Trial.xhtml
<ui:composition 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://java.sun.com/jsf/facelets"
template="/webpages/templates/CompleteTemplate.xhtml">
<ui:define name="informationBody">
<h:form>
<h:commandButton id="allocateButton" value="Test Submit" action="#{empDutySchedBean.testMethod}"/>
</h:form>
</ui:define>
</ui:composition>
Note: trial.xhtml doesn't have a html, head, body tag.
Problem: till the MainTemplate.xhtml page, all the components including the link etc were perfectly visible. However after including the template into Trial.xhtml page, The My Account, Welcome label, Home naviagation link didn't appear.
Apart from this, all the css i applied for the webpage's background color appeared.
I dont know why. Help would be dearly appreciated. I am a beginner at coding.
Thank You! :)
Define your AllComponentsTemplate.xhtml as ui:composition as well it doesn't need html, head and body, and as AllComponentsTemplate.xhtml will be included, it doesn't need to add template attribute, or define sections.
If i were you I would set AllComponentsTemplate.xhtml as the main template it self with html, h:head and h:body, etc.., and let Trial.xhtml implement it.
Later on if you needed another pages to have a shared view, you go ahead and create AnotherComponentsTemplate.xhtml and let them implement it.
Refer this link it will help you as you are begineer.
http://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/
and considering your problem use h:head and h:body for all html tags as Najjar metioned in his answer.
Related
So, I've been looking for solutions to this for over an hour. I've checked path issues. I've checked syntax. I can't find any inherent issues. I'm sure it's an issue with the "link" tag since an internal stylesheet works just peachy. I am using a dynamic web project with Eclipse if that helps.
Here is the stylesheet (master.css):
#CHARSET "ISO-8859-1";
body{
background-color: #000000;
color: green;
}
And here is the the .xhtml file (main.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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<link type="text/css" rel="stylesheet" href="master.css"/>
</h:head>
<h:body>
<div style="border-width: 2px;
border-color: blue; border-style: solid;">
<ui:insert name="header">
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<br/>
<div style="border-width: 2px;
border-color: green; border-style: solid;">
<ui:insert name="content">
<ui:include src="body.xhtml" />
</ui:insert>
</div>
<br/>
<div style="border-width: 2px;
border-color: red; border-style: solid;">
<ui:insert name="footer">
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Here is the Hierarchy
I've also confirmed via the Windows File System that they are in the same directory.
Thank you for all of your help!
Since your CSS under the same parent as your main.xhtml file, try placing a forward-slash in your href attribute in your <link> tag. So:
<link type="text/css" rel="stylesheet" href="/master.css" />
I am trying to build a template with common header/footer.
for some reason,my other pages are not showing the template
My pages:
layout/layout.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h: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>
<meta charset="ISO-8859-1"/>
<title>Test</title>
<link href="../stylesheet/template.css" rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<div id="templateHearderDiv" class="templateHearder">
<h1> Test logo</h1>
</div>
<div id="content" class="contentBody">
<ui:insert name="content">
default content
</ui:insert>
</div>
<div id="templateFooterDiv" class="templateFooter">
<p> 2016-2017. All Rights Reserved</p>
</div>
</h:body>
</h:html>
CSS, stylesheet/template.css
#CHARSET "ISO-8859-1";
* { margin:0; padding:0; }
.templateHearder{
background: #FFCF75;
height: 10%;
}
.contentBody{
}
.templateFooter{
height: 10%;
background: #FFCF75;
}
.contentBody{
margin-left: 20%;
margin-right: 20%;
}
.logoFont{
font-family: "Impact";
padding-top: 10px;
}
home.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/layout/layout.xhtml">
<ui:define name="content">
<h2>This is page1 content</h2>
</ui:define>
</ui:composition>
home.xhtml is my welcome page, when i see that page the template is not shown.
Any clue?
The problem was servlet mappings in web.xml.
Understanding their significance.
We need default servlet handler(depends on the server).
The default servlet helps listing out directories,static resources etc.
I missed default servlet mappings and for that reason the template was not loaded.
Basically, I have a set of prime faces commandButtons in a primeFaces toolBar, and I am trying to set the background color of the buttons using an external style sheet to no avail. it does work to add in-line styling saying 'style="background-color:blue;"'. Any help is appreciated thank you.
html Code:
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<link type="text/css" rel="stylesheet"
href="../resources/css/homePage.css" />
</h:head>
<h:body>
<div class="headline">
<h1 align="center">Web Project Example</h1>
</div>
<h:form enctype="multipart/form-data">
<p:toolbar>
<f:facet name="left">
<p:commandButton value="About Me" />
<p:commandButton value="Current Projects" />
</f:facet>
<f:facet name="right">
<p:commandButton value="Example 3" />
<p:commandButton value="Example 4" />
</f:facet>
</p:toolbar>
</h:form>
<p>Example text</p>
</h:body>
</html>
Style sheet:
body {
margin:0px;
}
.headline {
float:left;
width:100%;
background-color:black;
color:white;
}
.ui-toolbar {
background-color:black;
border:none;
color:white;
}
.ui-button {
background-color:blue;
}
Your own stylesheet has to be included last (after Primefaces includes its own styles dynamically) in order to override the standards, so try
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="../resources/css/homePage.css" />
</f:facet>
</h:head>
If it does'ent work try putting it inside <body> instead.
I'm working on a project using JSF/Facelets. I want to do some CSS changes on my View XHTML, but nothing happen when i deploy my web application in my Tomcat Server. I've tried many tricks but i've got the same result.
Anyway, here's my "styles.css" :
body { width: 750px; }
#header
{
width: 100%;
font-size: 36px;
font-weight: bold;
line-height: 48px;
background-color: navy;
color: white;
}
#footer
{
width: 100%;
font-weight: bold;
background-color: navy;
color: white;
}
And this is the main template "Template.html" including "Header.html" and "Footer.html", where i put my "styles.css" using the tag :
<!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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<h:outputStylesheet name="css/styles.css" />
<!-- i've also tried this one, using the "library" attribute -->
<!--
<h:outputStylesheet library="css" name="styles.css" />
-->
</head>
<h:body>
<h:panelGroup id="page" layout="block">
<h:panelGroup id="header" layout="block">
<ui:insert name="header">
<ui:include src="Header.html" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="container" layout="block">
<h:panelGroup id="content" layout="block">
<ui:insert name="content">CONTENT</ui:insert>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup id="footer" layout="block">
<ui:insert name="footer">
<ui:include src="Footer.html" />
</ui:insert>
</h:panelGroup>
</h:panelGroup>
</h:body>
</html>
Anf finally here's my "Main.xhtml" which include the template "Template.html" :
<?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">
<ui:composition 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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich" template="Template.html">
<h:body>
<ui:define name="content">
<h:form>
<h:inputText title="inputText"></h:inputText>
<h:commandButton value="OK"></h:commandButton>
</h:form>
</ui:define>
</h:body>
</ui:composition>
Thanks in advance :)
The <h:outputStylesheet> (and <h:outputScript>) requires a <h:head>, but you've there a <head>. Fix it accordingly.
<h:head>
<h:outputStylesheet name="css/styles.css" />
</h:head>
Further, you need to ensure that the css/styles.css file is been placed in the /resources subfolder of the public webcontent.
WebContent
|-- resources
| `-- css
| `-- styles.css
:
As to your attempt to use the library attribute, be careful with this, using library="css" isn't entirely correct in this context. See also: What is the JSF resource library for and how should it be used?
Add resources folder under the WebContent
and inside resources create css folder
then access the files like this
h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" under h:head section that you did not add
The image posted below is taken from a word document. I need create a similar one in HTML. Which tags should i use to help structure same way you see it below. Discard the fonts/colors tags.
As James Black said, MS Word or Open office can save the document as an html file automatically for you. From file save as and then choose web page.
Anyway if you want to do it manually then it isn't a single tag that you'll end up using. I just did a quick mock up for you which closely resembles your image.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invoice Title</title>
</head>
<body>
<div id="main">
<div id="header">
<div>Shipment # </div>
<div>Invoice # </div>
<div><h2>CUSTOMER PO </h2></div>
</div>
<div id="content">
<div style="text-align:center;" ><h1>PACKAGING LIST </h1> </div>
<div style="padding-top:50px;"><h2>Motion detectors consisting of the following,</h2> </div>
<div id="items" style="padding-top:40px;"> 1. P/N Auro</div>
</div>
<div id="footer">
<div id="items" style="padding-top:200px;"><strong> Distributor</strong></div>
</div>
</div>
</body>
</html>
Hope that helps
http://www.w3schools.com/
Just learn some basic tags, maybe some CSS if you want to make it pretty.