java 如何在运行时更新 JSF 组件的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7663296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update the style of a JSF component at runtime
提问by webingeniuz
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.
如何在运行时更新 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);
}
回答by BalusC
You can just use EL expressions in the styleand styleClassattributes. You can use the conditional operator ?:in EL to print different strings based on a boolean condition.
您可以只在style和styleClass属性中使用 EL 表达式。您可以使用?:EL 中的条件运算符根据布尔条件打印不同的字符串。
E.g.
例如
<h:someComponent styleClass="#{bean.show ? 'show' : 'hide'}" />
with this getter
有了这个吸气剂
public boolean isShow() {
return show;
}
and this CSS
和这个 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.
请注意，以上仍然将组件呈现给客户端，因此您可以使用纯 JavaScript 切换可见性。
Or, if you actually want to show/hide it entirely server side, then you could use the renderedattribute for this instead. It also just accepts EL expressions:
或者，如果您真的想在服务器端完全显示/隐藏它，那么您可以使用该rendered属性来代替。它也只接受 EL 表达式：
<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.
您只需要记住，当 this 求值时false，该组件根本不存在于客户端，因此您将无法使用纯 JavaScript 或 Ajax 再次显示它。当使用 Ajax 显示它时，您需要重新渲染它的父组件。
Updatebased 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 .cssfile which is much easier to maintain and keeps your bean and view from specific CSS clutter.
根据您的新代码片段进行更新，这不是正确的方法。为此，您不应将组件绑定到 bean。您还应该在其自己的.css文件中定义 CSS 样式，这样更易于维护并使您的 bean 和视图免受特定 CSS 混乱的影响。
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
和这个 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.
您只需要在 bean 的（post）构造函数或 action（listener）方法中相应地设置这些布尔值。
