如何在运行时更新JSF组件的样式 [英] How to update the style of a JSF component at runtime

问题描述

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

How to update the style of a JSF component at runtime, I must clarify that I want to change the position of the component and in some cases hide it.

<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);        
}

推荐答案

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

You can just use EL expressions in the style and styleClass attributes. You can use the conditional operator ?: in EL to print different strings based on a boolean condition.

例如

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

与此吸气剂

public boolean isShow() {
    return show;
}

和此CSS

.show {
    display: block;
}

.hide {
    display: none;
}

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

Note that the above still renders the component to the client side, so you would be able to toggle the visibility using plain JavaScript.

或者，如果您实际上想完全在服务器端显示/隐藏它，则可以使用rendered属性代替.它还只接受EL表达式:

Or, if you actually want to show/hide it entirely server side, then you could use the rendered attribute for this instead. It also just accepts EL expressions:

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

您只需要记住，当此值评估为false时，该组件根本就不在客户端中，因此您将无法使用纯JavaScript或Ajax再次显示该组件.使用Ajax显示它时，您需要重新渲染其父组件.

You only need to keep in mind that when this evaluates false, then this component is not present in the client side at all, so you won't be able to show it again using plain JavaScript or Ajax. When showing it using Ajax, you need to re-render its parent component instead.

更新，这不是正确的方法.您不应该为此将组件绑定到Bean.您还应该在自己的.css文件中定义CSS样式，该样式更易于维护，并使bean和视图免受特定CSS的干扰.

Update based on your new code snippet, this is not the right way. You should not bind the component to the bean for this. You should also define CSS styles in its own .css file which is much easier to maintain and keeps your bean and view from specific CSS clutter.

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

E.g. (I randomly guess that the styles are dependent on some kind of error/success state)

<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的(后)构造函数或action(侦听器)方法中相应地设置这些布尔值即可.

You just have to set those booleans accordingly in bean's (post)constructor or action(listener) method.

这篇关于如何在运行时更新JSF组件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！