I have a page that uses a template
<ui:composition template="/WEB-INF/facelets/templates/clientPage.xhtml">
I was hoping to only render the compatibility view for this particular page using the meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
The tag does not work unless I add it to the root template page. Is there a way I can add it to specific pages that use the template.
Declare an <ui:insert> in the master template at the desired location:
clientPage.xhtml
<!DOCTYPE html>
<html ...>
...
<h:head>
<ui:insert name="head-meta" />
...
</h:head>
...
</html>
Extend the master template with another master template:
i18ClientPage.xhtml
<ui:composition template="/WEB-INF/facelets/templates/ie8ClientPage.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<ui:define name="head-meta">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</ui:define>
</ui:composition>
Finally let those template clients use this master template instead.
Related
I am trying to integrate the ICEFaces ACE component library in my project. I've the following view:
<!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">
<head>
<h:outputStylesheet library="org.icefaces.component.skins"
name="rime.css" />
<f:loadBundle basename="resources.application" var="msg" />
<title>
<h:outputText value="#{msg.templateTitle}" />
</title>
</head>
<body>
<div id="content">
<h:form>
<ace:dataTable var="user" value="#{userBean.users}"
paginator="true" rows="50" selectionMode="multiple">
<ace:column headerText="users">
<ace:row>#{user}</ace:row>
</ace:column>
</ace:dataTable>
</h:form>
</div>
</body>
</html>
Unfortunately apparently there is no JavaScript / CSS loaded, so the components are not displayed properly. Moreover, the server logs this:
ICEfaces configured for view /index.xhtml but h:head and h:body components are required
Is this related?
You need to use JSF <h:head> and <h:body> components instead of plain HTML <head> and <body>. This way JSF and any JSF component library will be able to programmatically auto-include CSS/JS resources in there.
E.g.
<!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"
>
<f:loadBundle basename="resources.application" var="msg" />
<h:head>
<title>#{msg.templateTitle}</title>
</h:head>
<h:body>
...
</h:body>
</html>
Note that this way you also don't need that <h:outputStylesheet> anymore.
See also:
One or more resources has the target of 'head' but not 'head' component has been defined within the view
Unrelated to the concrete problem, you'd better declare resources.application as <resource-bundle> in faces-config.xml, so that you don't need to repeat it over all views. Also note that you don't necessarily need <h:outputText> over all place. The <head> and all of above also indicates that you're learning JSF based on a JSF 1.x targeted tutorial instead of a 2.x targeted one. Make sure that you're using the right resources to learn.
I read somewhere that the Facelet Tag Libraries URI's changed from http://java.sun.com/jsf/* to http://xmlns.jcp.org/jsf/*, so that means the new namespaces applies only for the new specification(JSF 2.2) or they can or should be used in older versions like 2.0, 2.1 or 1.x?
for example:
Library Old URI New URI
Composite Components http://java.sun.com/jsf/composite http://xmlns.jcp.org/jsf/composite
Faces Core http://java.sun.com/jsf/core http://xmlns.jcp.org/jsf/core
HTML_BASIC http://java.sun.com/jsf/html http://xmlns.jcp.org/jsf/html
JSTL Core http://java.sun.com/jsp/jstl/core http://xmlns.jcp.org/jsp/jstl/core
Facelets Templating http://java.sun.com/jsf/facelets http://xmlns.jcp.org/jsf/facelets
EDIT
To make the question more understandable nothing like a snippet of code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css" title="Style" href="theme/stylesheet.css" />
</h:head>
<h:body>
<h:form id="form1" styleClass="form">
<h:inputText id="text1" styleClass="inputText"></h:inputText>
</h:form>
</h:body>
</html>
The previous code would be valid for JSF 2.0? notice the taglibs:
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
Thanks.
From what I've seen here : http://www.oracle.com/webfolder/technetwork/jsc/xml/ns/index.html, the canonical names for the large majority of taglibs stays http://java.sun.com/
However, as stated, you can use the new URIs since they created an alias.
I'm very new to JSF and I have some problem using JSF template. The code of the template newTemplate.xhtml) looks 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" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
<h:form>
<h:commandButton id="test" value="Test" action="/jsf/newTemplateClient.xhtml"/>
</h:form>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
</html>
Start page called index1.xhtml looks 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">
<body>
<ui:composition template="/WEB-INF/newTemplate.xhtml">
<ui:define name="title">
TEST
</ui:define>
</ui:composition>
</body>
</html>
Finally template client page (called newTemplateClient.xhtml):
<ui:composition template="/WEB-INF/newTemplate.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="content">
Some content in newTemplateClient.xhtml
</ui:define>
</ui:composition>
Here is the behaviour of the application:
Application starts (address bar says localhost:8080/WebTEST/) and the layout and content is displayed properly,
I click on the 'Test' button and the content of newTemplateClient.xhtml is also displayed properly (address changes to: localhost:8080/WebTEST/faces/index1.xhtml),
I click again 'Test' button and the content is displayed but I loose the layout like there is no css style applied (no colors and formatting). Now the address bar says: localhost:8080/WebTEST/faces/jsf/newTemplateClient.xhtml
The template file is located in WEB-INF folder, the newTemplateClient.xhtml is located in jsf folder.
I know it's probably some simple thing but I really ran out of ideas what might be the cause of this problem.
To repeat my comment, the problem is that the relative URL in the CSS links resolves to a different absolute URL after you leave the index page. However, there is a nice JSF tag you can use instead of the raw link to solve your problem: use <h:outputStylesheet library="css" value="default.css"> instead of <link href=...>.
I'm working on a web solution using myfaces and primefaces. We have several pages in our solution, and some of the get this mystical error myfaces not defined because there is a javascript file that is not included on the page, namely the jsf.js file:
<script type="text/javascript" src="/driwkraft-hig/javax.faces.resource/jsf.js.xhtml?ln=javax.faces&stage=Development">
The error occurs when clicking on certain commandlinks on the page, where the generated javascript has been set to onClick="myfaces.oam.submitForm...
Now, I understand that this is something that the JSF framework adds to the page based on some mystical criteria which I fail to understand. There are pages that appear to be equal with regards to what elements are used, and it succeeds on one and fails on the other.
I have tried to create a test-file where I copied content of one of the failing pages and then removed parts until it would work to figure out what was the source of the problem, but this did not give me anything. My next hunch is that it might be some configuration-error somewhere. But I am completely and utterly blank as to where to start.
I understand I should probable add some code or xml in to this question, but I cannot post the entire solution so I think it is best to do so upon request. Would the web.xml be useful? How about the faces-config.xml?
Any guidance and thoughts are much appreciated!
Edit - adding template
<?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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:insert name="metadata" />
<h:head>
....
<title>
<ui:insert name="title">
....
</ui:insert>
</title>
</h:head>
<h:body>
....
<ui:insert name="content">
....
</ui:insert>
...
</h:body>
</html>
Edit - adding template client
<!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"
xmlns:dp="http://java.sun.com/jsf/composite/dapsys">
<ui:composition template="/templates/default.xhtml">
<ui:define name="title">TITLE</ui:define>
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="customerId" value="#{CustomerController.customerId}">
</f:viewParam>
<f:viewParam name="edit" value="#{CustomerController.edit}">
</f:viewParam>
<f:viewParam name="activeTab" value="#{CustomerController.activeTab}">
</f:viewParam>
</f:metadata>
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
</html>
It's auto-included if there's a <h:head> in the template which automatically renders CSS/JS dependencies from UIViewRoot#getComponentResources() which are added via #ResourceDependency annotation on the JSF component.
Those problem symptoms suggests that there's no <h:head> in the template, but a plain <head>. Therefore JSF is unable to auto-include CSS/JS resource dependencies which in turn causes this JS error.
To fix this problem, just make sure that there's a <h:head> instead of <head> in the template.
<!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> <!-- Look here. -->
<title>Blah</title>
</h:head>
<h:body>
<h1>Blah</h1>
<p>Blah blah.</p>
</h:body>
</html>
I am using JSF to render an HTML page. I design the page like it :
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
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" />
<meta name="language" content="fr" />
<title><ui:insert name="title">My app</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:include src="/header.xhtml"/>
</div>
<h:panelGroup id="center" layout="block" >
<ui:insert name="center"/>
</h:panelGroup>
<div id="bottom">
<ui:include src="/footer.xhtml"/>
</div>
</h:body>
This template has some "client" pages, like this one :
<ui:composition 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"
template="/layouts/master.xhtml">
<ui:define name="center">
<ui:define name="title"><h:outputText value="#{myBean.description}"/></ui:define>
<ui:include src="#{myBean.url}"/>
</ui:define>
In the client, i have to add meta information in the header. It would be great if we have tag like outputScript or outputStylesheet which can be set everywhere in the document and rendered in the html "head" tag.
I have found nothing to do this. Is there a way to add tag in the header when i am in this situation ?
Thank you !
The <h:outputStylesheet> is always automatically relocated to <h:head>, so you don't need to worry about this. For <h:outputScript>, which is by default rendered at the same line as where it's been declared, you can just set the target attribute to head, this way it will automatically be relocated to the <h:head> as well.
<ui:define name="center">
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
For other HTML head meta information, whenever necessary for some reason, you could just declare another <ui:insert>.
<h:head>
<ui:insert name="htmlhead" />
</h:head>
which you can use as follows
<ui:define name="htmlhead">
<meta ... />
</ui:define>
See also:
How to reference CSS / JS / image resource in Facelets template?