Как обновить стиль компонента 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

Вы можете просто использовать выражения EL в атрибутах style и styleClass.Вы можете использовать условный оператор ?: в EL для печати различных строк на основе логического условия.

Например:

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

с этим геттером

public boolean isShow() {
    return show;
}

иэтот CSS

.show {
    display: block;
}

.hide {
    display: none;
}

Обратите внимание, что приведенное выше по-прежнему отображает компонент на стороне клиента, поэтому вы сможете переключать видимость с помощью простого JavaScript.

Или, если вы действительно хотитепоказать / скрыть это полностью на стороне сервера, тогда вы можете использовать для этого атрибут rendered.Он также просто принимает выражения EL:

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

Нужно только иметь в виду, что при оценке false этот компонент вообще не присутствует на стороне клиента, поэтому вы не будетевозможность показать это снова, используя простой JavaScript или Ajax.Когда вы показываете его с помощью Ajax, вам нужно перерисовать его родительский компонент.

---

Обновление на основе вашего нового фрагмента кода, это не правильный путь.Для этого вам не следует связывать компонент с компонентом.Вы также должны определить стили CSS в своем собственном файле .css, который намного проще поддерживать и который сохраняет ваш компонент и вид из определенного беспорядка CSS.

Например (я случайно предполагаю, что стили зависят от некоторого состояния ошибки / успеха)

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

Вы просто должны установить эти логические значения соответственно в конструкторе компонента (post) или методе action (listener).