zk开发中关于forward属性的那点事

一,什么是forward

forward属性是zk提供的一个事件转发特性,
该特性将自身的某个原始事件转发到指定的目标组件上
或者将自身的onClick事件转发给另外一个事件


二,forwrd的格式

forward属性可以定义为如下格式

 

1#,forward="target_event_expr"

2#,forward="oringal_event=target_event_expr"

 

1.1-----如果未指定oringal_event原始事件,默认为onClick事件
           所以第1种的完整写法是forward="onClick=target_event_expr",


1.2-----第二种格式,你可以随意定义原始事件
           例如:<button forward="onMouseOver=onSavePosition"/>
                 <button forward="onBlur=targetId.onClick"/>
          第二种方式是一个通用格式,但大部分情况下我们使用的是onClick事件,
          所以提供了格式1,方便我们的开发

 

1.2.1------target_event_expr是一个表达式,这个表达式也有几种写法:

                1#,event-name

                2#,target-id.event-name

                3#,id1/id2/id3.event-name

                4#,${el-expr}.event-name

 

三,forward的目标是谁?

 在上例子中
 <button forward="onMouseOver=onSavePosition"/>
 onSavePosition是谁的事件呢?
 而<button forward="onSavePosition"/>中onSavePosition事件又是谁的呢?

 

 在这两个例子中,都不属于以下类型,以下三种都指定了目标组件

 

 1#,target-id.event-name

 2#,id1/id2/id3.event-name

 3#,${el-expr}.event-name


 event-name前未指定目标组件,那么zk如何处理???

 

 在zk的组件创建阶段,组件创建完毕后,有这么一段代码
 ComponentsCtrl.applyForward(child, childInfo.getForward());(zk5.0.6 UiEngineImpl 743行)
 该代码的作用是应用forward表达式,创建EventListener监听器,由此我们还可以知道forward其实
 与comp.addEventListener差不多的
 然后我们找,找到我们感兴趣的代码,
 然后我找到了AbstractComponent的ForwardEventListener
 的onEvent方法(zk5.0.6 AbstractComponent 2973行)

 

	public void onEvent(Event event) {
	final Object[] info = (Object[])_auxinf.forwards.get(_orgEvent);
	if (info != null)
		for (Iterator it = new ArrayList((List)info[1]).iterator();
		it.hasNext();) {
			final Object[] fwd = (Object[])it.next();
			Component target = resolveForwardTarget(fwd[0]);
			if (target == null) {
				final IdSpace owner = getSpaceOwner();
				if (owner instanceof Component) {
					target = (Component)owner;
				} else {
					//Use the root component instead
					for (target = AbstractComponent.this;;) {
						final Component p = target.getParent();
						if (p == null)
							break;
						target = p;
					}
				}
			}
			//bug #2790393 Forward event listener shall be called immediately
			//(since 3.6.2) change from postEvent to sendEvent to
			//make forward event deterministic
			Events.sendEvent(
				new ForwardEvent((String)fwd[1], target, event, fwd[2]));
		}
	}

 

 

 为了方便理解,我解释一下关键代码的意思,假如转发到的目标target组件为空,首先检测该组件的所属命

名空间是否为一个组件, 如果是一个组件类型,那么设置该命名空间为目标组件,反之将循环迭代获取,直至获取该组件的根组件,即root component


 那么上面我们产生的疑问就豁然开朗了,

 那么实际开发中我们需要注意什么

 

 1,首先在mvc模式开发中,controller(use或apply指定的类)最好建立在forward组件所属的命名空间上

 2,如果没有命名空间,那么将controller(use或apply指定的类)放在root component

 

四,传递参数


 1,forward="target_event_expr"

 2,forward="oringal_event=target_event_expr"


 其中target_event_expr目标事件表达式,有四个类型

 

 1#,event-name

 2#,target-id.event-name

 3#,id1/id2/id3.event-name

 4#,${el-expr}.event-name

 

 这四种类型的event-name也可以使用()号,像方法一样也可以有参数,这个参数可以是el表达式,

 

 a,<button forward="onSomeEvent(${2+2})"/>
 b,<label id="compId"/><button forward="onBlur=onSomeEvent(compId)"/>
 b,<button forward="onBlur=compId.onSomeEvent(&quot;你好我是参数&quot;)"/>

 

 在事件方法中onSomeEvent(Event event){
       event.getData();//返回传递的参数
 }

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值