如何在运行时更新JSF组件的样式

Question

如何在运行时更新JSF组件的样式,我必须澄清我想要更改组件的位置,并在某些情况下隐藏它.

<ui:define name="reverso" id="reverso" >
       <!-- Logo Estado Próspero -->
       <p:graphicImage value="./resources/oficiales/prospero.png" style="width: 90px; height: 50px;position: relative; left: 150px" />
       <h:form id="dataRfc">
            <h:outputText id="display_rfc" rendered="true" value="#{IDWizard.rfc}" binding="#{IDWizard.outRfc}" style="color: #333333;text-align:center;margin-top: 30px" />
       </h:form>
</ui:define>

public void setNoPersonal(String noPersonal) {
    this.noPersonal = noPersonal;
    this.outNombre.setValue(this.noPersonal);
    this.outNombre.setRendered(true); 
    this.outRfc.setStyle("text-align:left;color:red;margin-top:2px"); 
    //component.getAttributes().put("style", "color:red");
    this.outRfc.setRendered(true);        
}

Answer 1

您可以在style和styleClass属性中使用EL表达式.您可以使用?:EL中的条件运算符根据布尔条件打印不同的字符串.

例如

<h:someComponent styleClass="#{bean.show ? 'show' : 'hide'}" />

有了这个吸气剂

public boolean isShow() {
    return show;
}

而这个CSS

.show {
    display: block;
}

.hide {
    display: none;
}

请注意,上面仍然将组件呈现给客户端,因此您可以使用纯JavaScript切换可见性.

或者,如果您确实想要完全显示/隐藏服务器端,那么您可以使用该rendered属性.它也只接受EL表达式:

<h:someComponent rendered="#{bean.show}" />

您只需要记住,在进行此评估时false,该组件根本不存在于客户端,因此您将无法使用纯JavaScript或Ajax再次显示它.使用Ajax显示它时,您需要重新呈现其父组件.

根据您的新代码段进行更新,这不是正确的方法.您不应该将组件绑定到bean.您还应该在自己的.css文件中定义CSS样式,这样更容易维护,并使您的bean和视图保持特定的CSS混乱.

例如(我随机猜测样式取决于某种错误/成功状态)

<h:outputText id="display_rfc" value="#{IDWizard.rfc}" rendered="#{IDWizard.show}"
    styleClass="#{IDWizard.success ? 'success' : 'error'}" />

与那些吸气剂

public boolean isShow() {
    return show;
}

public boolean isSuccess() {
    return success;
}

而这个CSS

.success {
    text-align: center;
    color: #333333;
    margin-top: 30px;
}

.error {
    text-align: left;
    color: red;
    margin-top: 2px;
}

您只需在bean的(post)构造函数或action(listener)方法中相应地设置这些布尔值.