为什么咆哮消息没有显示屏幕左侧使用通用布局



在我的项目中,有一个要求是,当我们将语言从英语更改为阿拉伯语时,所有布局都将显示在从右到左的位置。咆哮消息工作得很好,当我没有使用通用布局,但当我在页面的通用布局中添加这个东西时,它仍然只显示在右侧。。

源代码:

<!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

最新更新