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?
Related
I'm in the same situation of continuation of pressing button twice
This is the template
<?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://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SXGA</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body style="zoom: 1;">
<h:panelGroup layout="block" styleClass="wrapper" id="wrapper">
<ui:insert name="header">
<ui:include src="/secured/template/commonHeader.xhtml" />
</ui:insert>
<ui:insert name="content">
<ui:include src="/secured/template/commonContent.xhtml" />
</ui:insert>
<ui:insert name="footer">
<ui:include src="/secured/template/commonFooter.xhtml" />
</ui:insert>
</h:panelGroup>
</h:body>
</html>
This is the header
<?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://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>
<title>commonHeader</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="header">
<ui:include src="/secured/template/commonMenu.xhtml" />
</ui:insert>
</h:body>
</html>
This is the Menu
<?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://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>
<title>commonMenu</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition>
<p:megaMenu orientation="horizontal" style="margin-top:20px">
<p:submenu label="Gestione Rapporti" icon="ui-icon-check">
<p:column>
<p:submenu label="TV.1">
<p:menuitem value="TV.1.1" url="#" />
<p:menuitem value="TV.1.2" url="#" />
</p:submenu>
<p:submenu label="TV.2">
<p:menuitem value="TV.2.1" url="#" />
<p:menuitem value="TV.2.2" url="#" />
<p:menuitem value="TV.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<p:submenu label="Autorizzazione Flussi" icon="ui-icon-document">
<p:column >
<p:submenu label="Sports.1">
<p:menuitem value="Sports.1.1" url="#" />
<p:menuitem value="Sports.1.2" url="#" />
</p:submenu>
<p:submenu label="Sports.2">
<p:menuitem value="Sports.2.1" url="#" />
<p:menuitem value="Sports.2.2" url="#" />
<p:menuitem value="Sports.2.3" url="#" />
</p:submenu>
</p:column>
</p:submenu>
<!-- <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" /> -->
<f:facet name="options">
<!--
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
-->
<h:form>
<p:button value="Logout" outcome="#{loginBean.doLogout()}" id="iconOnly" icon="ui-icon-power" title="Icon Only" />
</h:form>
</f:facet>
</p:megaMenu>
</ui:composition>
</h:body>
</html>
This is the tipical page
<?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://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>SXGAWEB</title>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
</h:head>
<h:body>
<ui:composition template="/secured/template/commonTemplate.xhtml">
</ui:composition>
</h:body>
</html>
Before I was using
<h:form>
<h:commandLink action="#{loginBean.doLogout}" value="Logout" />
</h:form>
or
<h:form>
<h:commandButton value="Avanti" action="#{loginBean.doLogout}" styleClass="btn btn-primary"/>
</h:form>
All the problem started using PrimeFaces.
With BalusC suggestion continuation of pressing button twice i have solved more or less.
<p:button ... outcome="otherViewId" />
I can't understand the real problem. Is related with templating or in general is related with the normal usage of JSF.
In https://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790 a possible solution is the use of OmniFaces or the same script from Prime Faces http://showcase.omnifaces.org/scripts/FixViewState
A possible solution is mentioned here
how to fixe twice needed click inside JSF page?
And
h:commandButton/h:commandLink does not work on first click, works only on second click
Where the solution is the script.
I have also read
commandButton/commandLink/ajax action/listener method not invoked or input value not updated
and
Which XHTML files do I need to put in /WEB-INF and which not?.
I am new to stackoverflow and also this my very first question to this forum so if i am doing something wrong when i am posting here please let me know.
my question related to primefaces i tried with lot of solution but nothing work for me.
i am using...
jsf 2.2.4
primefaces 5.2
tomcat 8
below code is the my template.xhtml
it's located on /templates/template.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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html" id="fview">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page template with PrimeFaces</title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<p:layout fullPage="true" resizeTitle="resize"
style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true"
showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0"
style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:head>
And below code is my home.xhtml
it's located on pages/home.xhtml
<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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="../templates/template.xhtml">
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
Hello world! Welcome to a page derived from a template
</ui:define>
when i run my application request successfully go to the controller and return. But browser come up with alert
> / UI Layout Initialization Error
The center-pane element does not exist.
The center-pane is a required element.
If any one know the proper answer for my question please help me.
Thanks in advance.
Your components and tags structure is all wrong. Here is how it should look.
<!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:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<f:view encoding="UTF-8" contentType="text/html">
<ui:insert name="metadata" />
<h:head>
<title>Page template with PrimeFaces</title>
</h:head>
<h:body>
<ui:debug />
<p:layout fullPage="true" resizeTitle="resize" style="background-color:#FFFFFF;">
<p:layoutUnit position="north" size="68" id="north">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" id="west" resizable="false" size="225">
<ui:include src="menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" id="centerLayout">
<h:form id="mainForm">
<p:messages autoUpdate="true" id="msgs" showDetail="true" showSummary="true" />
<ui:insert name="content" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="0" style="width:0px; display:none;" id="east">
</p:layoutUnit>
<p:layoutUnit position="south" resizable="true" id="south">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
The main mistake: layout and content belong in body, not head.
Title and meta tags must be in head.
Template can't use f:metadata. The client view can. See f:metadata doc.
Define content type and encoding in f:view.
There is no id attribute in f:view.
By the way I don't recommend using ui:debug. It evaluates all the properties it can see, and sometimes provokes undesirable side-effects.
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>
I am trying but figure out how to use p:panelMenu
for some reason I am unable to make a submenu item expanded like the showcase example http://www.primefaces.org/showcase/ui/panelMenu.jsf
This is my jsf example:
<!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:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panelMenu style="width:300px">
<p:submenu label="Non-Ajax Menuitem">
<p:menuitem value="Delete" ajax="false" icon="ui-icon-close" />
</p:submenu>
</p:panelMenu>
</h:form>
</h:body>
Any idea what I am missing here ?
Thanks
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