java - 如何在运行时更新 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 中使用条件运算符 ?: 来根据 boolean 条件打印不同的字符串。

例如

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

用这个 setter/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 显示它时，您需要重新渲染它的父组件。

---

更新 根据您的新代码片段，这不是正确的方法。为此，您不应将组件绑定(bind)到 bean。您还应该在其自己的 .css 文件中定义 CSS 样式，这样更易​​于维护并使您的 bean 和 View 免受特定 CSS 困惑的影响。

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

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

用那些 setter/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 的(post)构造函数或 action(listener)方法中相应地设置这些 boolean 值。