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中的条件运算符?:根据布尔条件打印不同的字符串。

E.g。

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

使用此getter

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混乱。

E.g。（我随机猜测样式取决于某种错误/成功状态）

<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）方法中相应地设置这些布尔值。

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

1 个答案: