JSF Chapter05

1.       a4j: 提供了页面级的 Ajax 支持，也就是框架级的基本控制； rich: 提供了控件级的 Ajax 支持、布局控件以及客户端控件。

 

 

2.       使用 <rich:inplaceInput>

1)      defaultLabel 属性，可以点击该属性以编辑控件的值；

2)      对于控件值的修改只是在 Browser 上的行为，不会向 Server 传递任何数据；

3)      showControls 属性用来控制是否显示 Save/Cancel 按钮；

4)      controlsHorizontalPosition 和 controlsVerticalPosition 用来控制 Save/Cancel 的位置；

5)      也可以使用自定义的控制器 Control ，只需要在体中加入一个 <f:facet> ，像这样：

<rich:inplaceInput id="inputEmail" value="#{inplaceInputBean.email}"

defaultLabel="Click to edit email" showControls="true"

controlsVerticalPosition="bottom"

controlsHorizontalPosition="left">

<f:facet name="controls">

<button onclick="#{rich:component('inputEmail')}.save();" type="button">

Save

</button>

<button onclick="#{rich:component('inputEmail')}.cancel();" type="button">

Cancel

</button>

</f:facet>

</rich:inplaceInput>

 

6)       一旦自定义 Control 被启用，那么 showControls 属性也就隐式地被启用了。

7)       控件也提供了一些特定事件给 <a4j:support> 的，当控件状态改变的时候，这些事件就会被调用来发送 Ajax Request 。

• oneditactivation ：当激活 edit 状态的时候，会触发 Ajax Request ；

• oneditactivated ：当控件变为 edit 状态后，会触发 Ajax Request ；

• onviewactivation ：当激活 view 状态的时候，会触发 Ajax Request ；

• onviewactivated ：当控件状态变为 view 状态后，会触发 Ajax Request （这个最常用）。

 

 

 

3.       使用 <rich:inplaceSelect>

1)       用法及属性与 <rich:inplaceInput> 非常相似，也包括 defaultLabel 、 showControls 、 controlsHorizontalPosition 等属性；

2)       与标准 JSF 的选择类控件相同，使用 <f:selectItem> 和 <f:selectItems> 传递选项；

3)       也可以像 <rich:inplaceInput> 用 <f:facet> 使用自定义 Control 。

 

 

4.       使用 <rich:suggestionbox>

1)       当在 Input Field 里输入值的时候，控件会向 Server 发送 Request ， Server 上的特定 Listener 被调用。该 Listener 根据输入值，返回一个建议值的集合。

2)       suggestAction 指定用于返回建议值范围的 Listener ，该 Listener 的名字不限，但应该满足以下两点：

· 具有一个 Object 类型的参数，代表输入的内容，这个 Object 实际上应该是一个 String 对象；

· 返回一个集合对象，代表建议的值范围，集合的类型应该是 <h:dataTable> 能够接受的。

例如： public ArrayList <State> suggest (Object value)

 

3)       只要 Listener 满足以上格式要求即可运行，至于返回什么值作为建议范围，则应该由用户编程实现。注意返回的是实际对象的集合，而不是 SelectItem 的集合。

4)       <rich:suggestionbox> 并不提供输入框，因此需要使用 for 属性指定一个现有的输入框。

5)       像 <h:dataTable> 一样，拥有 var 属性作为元素引用的名字， String 类型；也通过 <h:column> 设置每列的显示信息。

6)       列顺序是可以灵活改变的。默认情况下，被选中的建议值的第一列会被取出来作为输入框的值。当然，也可以使用 fetchValue 属性来指定某一列作为输入框的值。

7)       fetchValue 属性可以接受各种插入值，比如 fetchValue="#{state.name} – #{state.capital}" 。

8)       minChars 属性用来设置可以产生 Ajax Request 的最小字符数。

9)       eventsQueue 和 requestDelay 属性与之前遇到的功能相同。

10)   nothingLabel 用来显示没有查找到建议范围的情况。

 

【疑问】

虽然也包含 bypassUpdates 属性，但测试了一下， true 和 false 的效果似乎一样。用 PhaseListener 检测了一下，虽然都会产生 Ajax Request ，并且经历完整 JSF 生命周期，但输入框所对应的 managed bean 的属性值似乎并未改变。网上有国外的新闻组说 3.3.1GA 版的 <rich:suggestionbox> 的 bypassUpdates 属性存在 bug ，等待后续修正。

 

 

5.       使用 <rich:comboBox>

1)       这个控件是一个客户端 的建议控件，它会预先 render 整个值列表。

2)       <rich:comboBox> 的建议值列表不是从 Server 的 suggestAction 的得来，而是从 <f:selectItem> 和 <f:selectItems> 指定的完整值列表里得来。

3)       另一个指定建议值来源的方法是使用 suggestValues 属性，该属性接受 managed bean 的实际对象的集合，注意这里不是 SelectItem 的集合。

4)       也同样拥有 defaultLabel 等属性。

5)       directInputSuggestions 属性设为 true 时，建议值将直接出现在输入框里。

 

 

6.       使用 <rich:inputNumberSlider> 和 <rich:inputNumberSpinner>

1)       maxValue 和 minValue 设置取值范围；

2)       step 设置步进单位；

3)       enableManualInput 设置是否启用手动输入，默认为 true ；

4)       showInput 设置是否显示输入值；

【疑问】

在 <rich:inputNumberSpinner> 框里，按回车键会引发页面提交，很奇怪。

 

 

7.       使用 <rich:calendar>

1)       dataPattern 设置时间日期格式，比如： yyyy-MM-dd hh:mm a

2)       值类型应为 java.util.Date 。
昨天对于 rich: 的输入类控件还存有几个疑问，今天用几个小例子，试了一下，清楚了不少。特补充进来，以防忘记。

 

 

1.      <rich:inplaceInput> 的 onXXXXXX 类属性
 

1）   这些属性包括：

· oneditactivation ：当激活 edit 状态的时候，会触发 Ajax Request ；

· oneditactivated ：当控件变为 edit 状态后，会触发 Ajax Request ；

· onviewactivation ：当激活 view 状态的时候，会触发 Ajax Request ；

· onviewactivated ：当控件状态变为 view 状态后，会触发 Ajax Request 。

· onchange 、 onblur 、 onkeyup 、 onkeydown 等。

              在 <rich:inplaceInput> 发生状态改变或用户做某个操作的时候，这些属性是用来指定哪些 Ajax Javascript 代码会被调用。例如，

             

2）   但是上面这些属性，并不会引发 Ajax Request 。如果想要引发 Ajax Request 仍然需要 <a4j:support> 的支持。将上面那些 onxxxxxx 属性名传到 <a4j:support> 的 event 属性，才能引发 Ajax Request 。但是由于 <rich:inplaceInput> 输入方式的特殊性，即使设置某些 onxxxxxx 属性名到 <a4j:support> 的 event 属性，在发生相应 DHTML 事件的时候， <a4j:support> 也无法感知到。比如： onkeyup 。

我开始曾打算用 “onkeyup” 或 “onblur” 作为 event 属性值来相应引发 Ajax Request ，但是无法成功，换了 “onchange” 和 “onviewactivated” ，就 OK 了。

 

我本来想像下面这样，通过 onkeyup 引发 Ajax Request ：

<rich:inplaceInput value="#{user.userName}" defaultLabel="User Name" showControls="true" layout="block">

<a4j:support event="onkeyup" actionListener="#{user.upperCaseUserName}" reRender="out1" ajaxSingle="true" bypassUpdates="true"></a4j:support>

</rich:inplaceInput>

 

但是没有效果，原因是 <rich:inplaceInput> 在编辑状态，产生的 onkeyup 只能引起 <rich:inplaceInput> 的 onkeyup 属性定义的 Javascript 代码，比如：

<rich:inplaceInput value="#{user.userName}" defaultLabel="User Name" showControls="true" layout="block" onkeyup=”alert(‘Typing…’)” >

</rich:inplaceInput>

 

于是我换了另一个事件， onchange ：

<rich:inplaceInput value="#{user.userName}" defaultLabel="User Name" showControls="true" layout="block">

<a4j:support event="onchange" actionListener="#{user.upperCaseUserName}" reRender="out1" ajaxSingle="true" bypassUpdates="true"></a4j:support>

</rich:inplaceInput>

运行的结果是，当编辑完毕，光标点击到输入框外边的时候， Ajax Request 被引发。原因应该是此时控件已经可以感知到 DHTML 事件了。

 

我又尝试了几个其他的 DHTML 事件，目前来看，与在 edit/view 相切换状态下，能够引发 Ajax Request 的只有那 4 个状态改变事件 oneditactivation 、 oneditactivated 、 onviewactivation 、 onviewactivated 。比如：

<rich:inplaceInput value="#{user.userName}" defaultLabel="User Name" showControls="true" layout="block">

<a4j:support event="onviewactivated" actionListener="#{user.upperCaseUserName}" reRender="out1" ajaxSingle="true" bypassUpdates="true"></a4j:support>

</rich:inplaceInput>

当输入框从 edit 状态切换回到 view 状态以后， Ajax Request 被自动引发。

 

 

2.      <rich:suggestionbox> 的 Ajax Request 问题
 

1）   问题的开端是，我想搞清楚在 suggestionbox 里面的值改变的时候，是否会引发 Ajax Request 提交；如果不会，如何实现这种自动提交。

 

2）   对于第一问，我做了一些测试，显示 suggestionbox 虽然会引发 Ajax Request ，并且经历 JSF 的完整生命周期，但是与其关联的输入框以及其他控件的值并不会被处理去更新模型值。道理现在还不太清楚，但可以推测引发 Ajax Request 是为了到 Server 去获取建议值范围，即引发 suggestionAction 监听器。但是经历了完整的 JSF 周期却没有更新模型值，这一点还有待进一步仔细考察。

 

3）   对于第二问，我曾经进入一个误区，以为 <rich:suggestionbox> 与输入框是两个分离的控件，要想实现通过选择建议值引发 Ajax Request 自动提交，需要给 <h:inputText> 加入一个 <a4j:support> ， 并将其 event 属性设置为 “onchange” 或 “onobjectchange” 。

<h:inputText id="xcvr" value="#{cellPhoneBean.currentXcvr}">

<a4j:support event="onchange" ></a4j:support>

</h:inputText>

结果是 event 设为 “onchange” 时，选择建议值时不会引发 Ajax Request ，而当光标点击输入框外边的时候， Ajax Request 自动提交。而当 event 设为 “onobjectchange” 时，什么也不会发生。原因在于输入框根本不支持 onobjectchange 这种 DHTML 事件， onobjectchange 是 suggestionbox 支持的 DHTML 事件。现在才想起来之前介绍 <a4j:support> 时，书上所说的， event 属性依赖于其所在控件支持的 DHTML 类型。

 

4）   于是变换思路，通过选择建议值引发 Ajax Request ，根源还应该是 <rich:suggestionbox> 。于是我在 <rich:suggestionbox> 里加入一个 <a4j:support> ，并将其 event 属性设为 “onobjectchange” 时，并未产生需要的效果。原因在于 onobjectchange 就好像 <rich:inplaceInput> 的 onkeyup 一样，也是 <rich:suggestionbox> 的一个属性，用来在选择对象变化的时候，引发自定义 Javascript 代码。

 

5）   最终将 <a4j:support> 的 event 属性设置为 “onselect” ，终于得到了想要的结果，在选择建议值的时候， Ajax Request 自动提交更新了模型值。

 

 

3.      总结
 

由以上问题，可以得到以下几点简单结论：


1）   <rich:> 控件也可以引发 Ajax Request ，比如 suggestionbox 向 Server 获取建议值。可以通过<a4j:>那四种控件的支持，引发页面提交。

2）   <a4j:support> 的 event 属性所能使用的范围，还要依赖于其父控件所能支持 DHTML 事件的范围。

 

目前还有一个不太明白的问题就是在 <rich:inputNumberSpinner> 里按回车键会引发 Ajax Request 更新模型值的问题
from:http://blog.csdn.net/gengv/archive/2009/06/08/4250351.aspx