Блог

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

Вы можете просто использовать выражения EL в атрибутах style and 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;
}
  

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