RichFaces学习(三)---- Input Components

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 自动提交更新了模型值。