您的位置:首页 > Web前端 > JavaScript

JSF —— 以编程方式访问用户界面组件

2013-11-25 21:44 253 查看
目录:
Facelets页面:hello.xhtml
hello.xhtml的支撑bean
下面是经修改的Facelets页面:hello.xhtml
修改commandButton的action属性
程序在运行,发生了什么?
Facelets页面:hello.xhtml

3个用户界面组件:InputText、OutputText和CommandButton。用户在输入字段(InputText)中输入文本值并单击按钮(CommandButton)时,就用输入字段中输入的文本值更新出字段(OutputText)。

<htmlxmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core">
<h:head>

<title>hello.xhtml</title>
</h:head>
<h:body>

<h:form>

<h:inputText
/>

<h:commandButtonvalue="Click Me!"/>

<h:outputText
value="Hello!"
/>

</h:form>
</h:body>
</html>
创建动作方法,用编程方式获取inputText组件的值,并设置outputText字段的值。这个动作方法应放在“支撑”bean中,支撑bean也会包含每个用户界面组件的实例。
 
hello.xhtml的支撑bean

@ManagedBean(name="backing_hello")

@RequestScoped
publicclass Hello {

private HtmlInputText
inputText;

private HtmlOutputText
outputText;

public
void setInputText(HtmlInputText inputText) {

this.inputText = inputText;

}

public HtmlInputText getInputText() {

return
inputText;

}

public
void setOutputText(HtmlOutputText outputText) {

this.outputText = outputText;

}

public HtmlOutputText getOutputText() {

return
outputText;

}
}
 
下面是经修改的Facelets页面:hello.xhtml

现在绑定了在支撑bean中声明的用户界面组件实现。这样就可以用编程方式访问页面中使用的实际组件。如果页面上的用户界面组件没有绑定到支撑bean中的组件实例(像以前一样),那么在请求时仍然会创建用户界面组件树,但是实例化组件和用户界面组件无关。

<h:form>

<h:inputText 
binding="#{backing_hello.inputText}"/>

<h:commandButtonvalue="Click Me!"/>

<h:outputText
value="Hello!"
binding="#{backing_hello.outputText}"/>
</h:form>
 
动作方法commandButton_action()
单击按钮时,outputText的值被设置为inputText组件中输入的值。

public String commandButton_action(){

outputText.setValue(inputText.getValue());

return
"success";
}
 
修改commandButton的action属性

设为引用动作方法的方法表达式,从而确保单击按钮时会调用动作方法commandButton_action()。

<h:commandButtonvalue="Click Me!"action="#{backing_hello.commandButton_action}"/>
 
程序在运行,发生了什么?

用户发出查看页面hello.xhtml的初始非回传请求。Faces控制器Servlet创建一个UIViewRoot组件,并把它保存到FacesContext中,从而处理请求。然后,重定向到Facelets页面:hello.xhtml。Facelets页面的执行造成UIViewRoot被子组件填充(成为一棵树),还使这些组件在添加到组件树渲染到客户端。然后,用户看到渲染的带有输入字段、按钮、输出字段(初始值为"hello")的页面。组件树被保存下来供后续请求使用。
用户把文本值(“Hello
JSF!”)输入到输入字段,然后单击“Click Me!”按钮,使得回传请求提交给JSF应用程序。程序又一次进入初始的创建/恢复阶段,但是这次恢复了以前保存的树。然后在应用请求值阶段中使用值“Hello
JSF!”更新服务器端InputText组件。由于没有验证和转换错误,也没有更新模型bean的属性(因为没有用组件的value属性对它进行值绑定),因此顺利到达调用应用程序阶段。在这个阶段中调用动作方法commandButton_action(),然后把inputText组件的值应用到outputText组件的值上。后续的渲染响应阶段渲染当前组件的状态并返回给用户。因为没有创建处理从动作方法返回的"success"值的导航规则,所以渲染的是同一个页面。
 
为了更好地理解用编程方式对用户界面组件进行处理,可以添加一个调用,在动作方法执行的时候把输入字段变成只读。

outputText.setValue(inputText.getValue());
inputText.setReadonly(true);
return"success";
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息