#java #jsf
#java #jsf
Вопрос:
Как обновить стиль компонента 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);
}
Комментарии:
1. Будет ли использование логического свойства и a
rendered="#{bean.yourBooleanProperty}"
для вас вариантом? То же самое можно сделать с позициями.2. Я пробовал этот способ, но безуспешно.
3. Можете ли вы предоставить более подробную информацию? Пожалуйста, имейте в виду, что в некоторых старых реализациях JSF были проблемы с логическими свойствами, и поэтому вам может потребоваться превратить его в
String
свойство (значения"true"
или"false"
). — Также обратите внимание, что вам необходимо повторно отобразить свой компонент. Или все должно выполняться только на клиенте?4. Я добавил фрагмент представления и компонент
5. И мне нужно управлять им со стороны сервера.
Ответ №1:
Вы можете просто использовать выражения 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).
Комментарии:
1. Извините, я не могу сразу перелететь к вам, чтобы своими глазами увидеть, что именно выходит из строя. Не могли бы вы более подробно описать «не работает»?
2. Работает EL для styleClass, но он не применяет настройки стиля к компоненту, а только генерирует значение html.
3. Итак, вы тоже новичок в CSS? Он должен генерировать либо
class="success"
илиclass="error"
. Это должно сработать, если у вас есть.success {}
.error {}
объявления and в какомstyle.css
-либо файле, который вы включаете как<link rel="stylesheet" href="style.css" />
в HTML<head>
.4. Файл css имеет соответствующие классы и загружается, но не применяет стиль к компоненту.
5. Вам нужно проверить с помощью Firebug’s «Inspect Element», что именно не удалось. Откройте страницу во Friefox (с установленным плагином Firebug) и щелкните правой кнопкой мыши ту часть, которая представлена,
<h:outputText>
а затем выберите опцию Проверить элемент . Теперь Firebug должен отображаться со всеми назначенными объявлениями CSS в правой части. Вам необходимо проверить, существуют ли ваши определенные стили и не были ли они переопределены другими стилями (например, собственными стилями PrimeFaces).