OperaMasks 新闻资讯中心 - 新闻详细信息

首页新闻 Apusic OperaMasks V2.3新特性一览

Apusic OperaMasks V2.3新特性一览

2009-09-17 由罗帆发表评论(1条) 有2323人浏览

Apusic OperaMasks V2.3在修复众多bug，最大保持向前兼容性的基础上，为提升用户体验，在很多方面作了改进。本文将就该版本的新特性进行详细的介绍：

1.提供统一的事件处理接口，提供更丰富的事件上下文

V2.3现在提供方式给一个组件添加AjaxAction事件，分别是EL方式，IoVC方式和编程方式。

EL方式

页面代码：

<w:textField jsvar="field">  
   <ajax:action event="onchange" action="#{bean.action }">
   </ajax:action>
</w:textField>

LiteBean代码：

public void action(FieldChangeEvent event) {
      System.out.println(event.getOldValue());
      System.out.println(event.getNewValue());
}

IoVC方式

页面代码：

<w:textField id="field"></w:textField>

LiteBean代码：

@Action(event="onchange", id="field")
private void fieldAction(FieldChangeEvent event) {
      System.out.println(event.getOldValue());
      System.out.println(event.getNewValue());
}

编程方式

页面代码：

<w:textField id="field">
</w:textField>

LiteBean代码：

@Bindprivate UITextField field;
public void action(FieldChangeEvent event) {
   System.out.println(event.getOldValue());
   System.out.println(event.getNewValue());
}
@BeforeRender
public void beforeRender(boolean isPostback) {
       if(!isPostback) {
            field.getAjaxEventHandler().addElBinding("onchange", "#{bean.action}", false);       }}

v2.3自定义了很多强类型事件比如 RowSelectEvent, FieldChangeEvent，方便用户直接通过事件上下文参数获取参数。

2. 更灵活的客户端校验方案

用户可自定义客户端校验的触发时机

属性validateBeforeSubmit可用来设置表单提交时是否进行客户端校验,属性validateEvents可用来设置校验触发的事件。如下

<w:form clientValidate="true" validateEvents="onchange, onfocus" validateBeforeSubmit="false">
    <w:textField required="true">        
      <f:validateLength minimum="3" maximum="6">
      </f:validateLength>
    </w:textField>
</w:form>

ajax:clientValidator增强

在ajax:clientValidator中除了可返回boolean类型，还可以返回String类型，如果返回String类型，那么该String将作为错误信息展现。

<w:form>
    <w:textField id="username">
        <ajax:clientValidator>
             if (value == 'admin')
                return "admin为系统预留账户，不可注册!";
             if (value == 'guest')
                return "guest已被注册，请选用其他账户!";
             return true;
        </ajax:clientValidator>
    </w:textField>
</w:form>

使用JavaScript代码触发校验

为构件声明一个"jsvar"属性，然后可用JavaScript代码使其进行校验，如

<w:form clientValidate="true" onsubmit="return field.validate()">
    <w:textField jsvar="field" required="true">
        <f:validateLength minimum="3" maximum="6">
        </f:validateLength>
    </textField>
</w:form>

3.统一的资源处理机制，方便用户扩展

资源依赖关系定义及引用

静态资源包括js,css,flash等的依赖关系在类路径中META-INF/resource/resource-dependences.xml文件中描述。如有需要用户可以自行定制自己的资源依赖关系。如下

<resource>
 <packages type="js">
  <package name="Ext.ux.scrolledTabPanel" file="/ext/ux/scrolledTabPanel.js">
   <requires name="Ext.Layout">
   </requires>
  </package>
 </packages>
 <packages type="css">
  <package name="Ext.ux.scrolledTabPanel"   file="/ext/skin/${skin}/yuiext/css/scrolledTabPanel.css">
  </package>
 </packages>
</resource>

在组件渲染类中即可引用定义的资源：

@ExtClass("Ext.ux.TabPanel")
@DependJSPackages("Ext.ux.scrolledTabPanel")
@DependCSSPackages("Ext.ux.scrolledTabPanel")
public class ScrolledTabLayoutRenderHandler extends TabLayoutRenderHandler {...}

皮肤制作及使用

META-INF/resource/skins.xml文件用于定义组件外观皮肤，如下

<skins>
 <skin id="black" file="/ext/skin/black/yuiext/css/xtheme-black.css">
     <displayName><![CDATA[Black]]></displayName>  
     <displayName locale="zh_CN"><![CDATA[Black]]></displayName>
     <authorName><![CDATA[Ext JS - JavaScript Library]]></authorName>
     <authorEmail><![CDATA[jack.slocum@yahoo.com]]></authorEmail>
 </skin>    ......</skins>

然后相对于META-INF/resource放置相关资源，就可以直接使用了。

4.易用的组件热键支持

添加ajax:keyBinding用于为组件添加热键绑定

<w:textField fieldLabel="TextField">
    <ajax:keyBinding key="A" action="#{testKeyBindingBean.show }" alt="true" />
</w:textField>
<w:form>
    <w:button value="submit" jsvar="btn" />
    <ajax:keyBinding target="document" key="F7" clientScript="btn.fireEvent('click');" />
</w:form>
<ajax:keyBinding target="document" key="F8,N1,1,B,C" action="#{testKeyBindingBean.submit }"    clientScript="return confirm('确认提交？');" />