How to update the style of a JSF component at runtime

Question

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

Answer 1

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.

E.g.

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

with this getter

public boolean isShow() {
    return show;
}

and this CSS

.show {
    display: block;
}

.hide {
    display: none;
}

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

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}" />

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.

---

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'}" />

with those getters

public boolean isShow() {
    return show;
}

public boolean isSuccess() {
    return success;
}

and this CSS

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

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

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