如何在运行时更新 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'}" />

使用此 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 混乱的影响。

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

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

使用这些 getter

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 的（后）构造函数或操作（侦听器）方法中相应地设置这些布尔值。