?? 值變事件.htm
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建網頁 1</title>
</head>
<body>
<p>值變事件</p>
<div id="PageContent">
<table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table3">
<tr>
<td class="pagebody" vAlign="top">
<table style="CLEAR: both" cellSpacing="0" cellPadding="0" width="100%" border="0" id="table4">
<tr>
<td class="pagecontent" vAlign="top" width="100%">
<div class="wiki-content">
如果使用者改變了JSF輸入組件的值后送出窗體，就會發生值變事件（Value Change
Event），這會丟出一個javax.faces.event.ValueChangeEvent對象，如果您想要處理這個事件，有兩種方式，一是直接設定JSF輸入組件的valueChangeListener屬性，例如：<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
<div class="codeContent">
<pre class="code-java"><h:selectOneMenu value=<span class="code-quote">"#{user.locale}"</span>
onchange=<span class="code-quote">"<span class="code-keyword">this</span>.form.submit();"</span>
valueChangeListener=<span class="code-quote">"#{user.changeLocale}"</span>>
<f:selectItem itemValue=<span class="code-quote">"zh_TW"</span> itemLabel=<span class="code-quote">"Chinese"</span>/>
<f:selectItem itemValue=<span class="code-quote">"en"</span> itemLabel=<span class="code-quote">"English"</span>/>
</h:selectOneMenu></pre>
</div>
</div>
<p>
為了仿真GUI中選擇了選單項目之后就立即發生反應，我們在onchange屬性中使用了JavaScript，其作用是在選項項目發生改變之后，立即送出窗體，而不用按下提交按鈕；而valueChangeListener屬性所綁定的user.changeLocale方法必須接受ValueChangeEvent對象，例如：</p>
<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
<div class="codeHeader" style="BORDER-BOTTOM-STYLE: solid">
<b>UserBean.java</b></div>
<div class="codeContent">
<pre class="code-java"><span class="code-keyword">package</span> onlyfun.caterpillar;
<span class="code-keyword">import</span> javax.faces.event.ValueChangeEvent;
<span class="code-keyword">public</span> class UserBean {
<span class="code-keyword">private</span> <span class="code-object">String</span> locale = <span class="code-quote">"en"</span>;
<span class="code-keyword">private</span> <span class="code-object">String</span> name;
<span class="code-keyword">private</span> <span class="code-object">String</span> password;
<span class="code-keyword">private</span> <span class="code-object">String</span> errMessage;
<span class="code-keyword">public</span> void changeLocale(ValueChangeEvent event) {
<span class="code-keyword">if</span>(locale.equals(<span class="code-quote">"en"</span>))
locale = <span class="code-quote">"zh_TW"</span>;
<span class="code-keyword">else</span>
locale = <span class="code-quote">"en"</span>;
}
<span class="code-keyword">public</span> void setLocale(<span class="code-object">String</span> locale) {
<span class="code-keyword">this</span>.locale = locale;
}
<span class="code-keyword">public</span> <span class="code-object">String</span> getLocale() {
<span class="code-keyword">if</span> (locale == <span class="code-keyword">null</span>) {
locale = <span class="code-quote">"en"</span>;
}
<span class="code-keyword">return</span> locale;
}
<span class="code-keyword">public</span> void setName(<span class="code-object">String</span> name) {
<span class="code-keyword">this</span>.name = name;
}
<span class="code-keyword">public</span> <span class="code-object">String</span> getName() {
<span class="code-keyword">return</span> name;
}
<span class="code-keyword">public</span> void setPassword(<span class="code-object">String</span> password) {
<span class="code-keyword">this</span>.password = password;
}
<span class="code-keyword">public</span> <span class="code-object">String</span> getPassword() {
<span class="code-keyword">return</span> password;
}
<span class="code-keyword">public</span> void setErrMessage(<span class="code-object">String</span> errMessage) {
<span class="code-keyword">this</span>.errMessage = errMessage;
}
<span class="code-keyword">public</span> <span class="code-object">String</span> getErrMessage() {
<span class="code-keyword">return</span> errMessage;
}
<span class="code-keyword">public</span> <span class="code-object">String</span> verify() {
<span class="code-keyword">if</span>(!name.equals(<span class="code-quote">"justin"</span>) ||
!password.equals(<span class="code-quote">"123456"</span>)) {
errMessage = <span class="code-quote">"名稱或密碼錯誤"</span>;
<span class="code-keyword">return</span> <span class="code-quote">"failure"</span>;
}
<span class="code-keyword">else</span> {
<span class="code-keyword">return</span> <span class="code-quote">"success"</span>;
}
}
}</pre>
</div>
</div>
<p>
另一個方法是實作javax.faces.event.ValueChangeListener接口，并定義其processValueChange()方法，例如：</p>
<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
<div class="codeHeader" style="BORDER-BOTTOM-STYLE: solid">
<b>SomeListener.java</b></div>
<div class="codeContent">
<pre class="code-java"><span class="code-keyword">package</span> onlyfun.caterpillar;
....
<span class="code-keyword">public</span> class SomeListener <span class="code-keyword">implements</span> ValueChangeListener {
<span class="code-keyword">public</span> void processValueChange(ValueChangeEvent event) {
....
}
....
}
然后在JSF頁面上使用<f:valueChangeListener>卷標，并設定其type屬性，例如：
{code:borderStyle=solid}
<h:selectOneMenu value=<span class="code-quote">"#{user.locale}"</span>
onchange=<span class="code-quote">"<span class="code-keyword">this</span>.form.submit();"</span>>
<f:valueChangeListener
type=<span class="code-quote">"onlyfun.caterpillar.SomeListener"</span>/>
<f:selectItem itemValue=<span class="code-quote">"zh_TW"</span> itemLabel=<span class="code-quote">"Chinese"</span>/>
<f:selectItem itemValue=<span class="code-quote">"en"</span> itemLabel=<span class="code-quote">"English"</span>/>
</h:selectOneMenu></pre>
</div>
</div>
<p> 下面這個頁面是對 立即事件
中的范例程序作一個修改，將語言選項改以下拉式選單的選擇方式呈現，這必須配合上面提供的UserBean類別來使用：</p>
<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
<div class="codeHeader" style="BORDER-BOTTOM-STYLE: solid">
<b>index.jsp</b></div>
<div class="codeContent">
<pre class="code-java"><%@ taglib uri=<span class="code-quote">"http:<span class="code-comment">//java.sun.com/jsf/core"</span> prefix="f" %>
</span> <%@ taglib uri=<span class="code-quote">"http:<span class="code-comment">//java.sun.com/jsf/html"</span> prefix="h" %>
</span> <%@page contentType=<span class="code-quote">"text/html;charset=UTF8"</span>%>
<f:view locale=<span class="code-quote">"#{user.locale}"</span>>
<f:loadBundle basename=<span class="code-quote">"messages"</span> <span class="code-keyword">var</span>=<span class="code-quote">"msgs"</span>/>
<html>
<head>
<title><h:outputText value=<span class="code-quote">"#{msgs.titleText}"</span>/></title>
</head>
<body>
<h:form>
<h:selectOneMenu value=<span class="code-quote">"#{user.locale}"</span>
immediate=<span class="code-quote">"<span class="code-keyword">true</span>"</span>
onchange=<span class="code-quote">"<span class="code-keyword">this</span>.form.submit();"</span>
valueChangeListener=<span class="code-quote">"#{user.changeLocale}"</span>>
<f:selectItem itemValue=<span class="code-quote">"zh_TW"</span>
itemLabel=<span class="code-quote">"Chinese"</span>/>
<f:selectItem itemValue=<span class="code-quote">"en"</span>
itemLabel=<span class="code-quote">"English"</span>/>
</h:selectOneMenu>
<h3><h:outputText value=<span class="code-quote">"#{msgs.hintText}"</span>/></h3>
<h:outputText value=<span class="code-quote">"#{msgs.nameText}"</span>/>:
<h:inputText value=<span class="code-quote">"#{user.name}"</span>/><p>
<h:outputText value=<span class="code-quote">"#{msgs.passText}"</span>/>:
<h:inputSecret value=<span class="code-quote">"#{user.password}"</span>/><p>
<h:commandButton value=<span class="code-quote">"#{msgs.commandText}"</span>
action=<span class="code-quote">"#{user.verify}"</span>/>
</h:form>
</body>
</html>
</f:view></pre>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<p> </p>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -