在我的项目中,有一个要求是,当我们将语言从英语更改为阿拉伯语时,所有布局都将显示在从右到左的位置。咆哮消息工作得很好,当我没有使用通用布局,但当我在页面的通用布局中添加这个东西时,它仍然只显示在右侧。。
源代码:
<!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>
在构建视图期间,<ui:composition>
外部的任何都将被忽略。
在commonLayout.xhtml
主模板中,您应该在<h:head>
:中添加一个新的<ui:insert>
<h:head>
...
<ui:insert name="head" />
</h:head>
然后在模板客户端的<ui:composition>
中定义它:
<ui:composition template="...">
<ui:define name="head">
<style>.ui-growl{ #{msg['msg']}: 20px; }</style>
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
(顺便说一句,#{msg['msg']}
绝对不是自记录的;我自己也宁愿使用<html dir="#{direction}">
,这样你就可以使用例如html[dir='rtl'] .ui.growl
选择器)
另请参阅:
- 如何使用JSF 2.0 Facelets在XHTML中包含另一个XHTML