zul组件、zhtml组件、native组件的差异 _HTML/CSS

zul组件、zhtml组件、native组件的区别

一，所属命名空间不同

zul组件? xmls= http://www.zkoss.org/2005/zul

zhtml组件 xmlns:h=" http://www.w3.org/1999/xhtml "

native组件 xmlns:n=" http://www.zkoss.org/2005/zk/native "

二，组件类不同

zul组件? zul.jar下组件类

zhtml组件 zhtml.jar下组件类

native组件全部是zk.jar下的类org.zkoss.zk.ui.HtmlNativeComponent

三，事件处理EventHandler

?1，zhtml组件可以触发事件处理函数onSetting

?? <h:input? value="测试" type="button" forward="onSetting" xmlns:h=" http://www.w3.org/1999/xhtml"/ >

2， native组件不可以触发事件处理函数onSetting?

??? <n:input? value="测试" type="button" forward="onSetting" xmlns:n="native"/>

3，zul组件可以触发事件处理函数onSetting?

??? <button label="测试" id="btnSubmit" forward="onSetting"></button>
?

四，受管状态

所谓受管状态，全由个人杜撰，即所在命名空间保存其组件信息，可通过命名空间查找删除组件

1）结论

?? 1，zul组件? 与? zhtml组件? 是受所在命名空间管理的
?? 2，native组件不受所在命名空间管理

2）结论依据

? zul组件、zhtml组件、native组件有一个共同祖先 org.zkoss.zk.ui.AbstractComponent类
? 在zk5.06版中的AbstractComponent类的setId(543行)方法中有一行代码
? addToIdSpaces(this);（589行），意思是将当前组件添加到id命名空间中,
? 例如添加到window,page中，? 但在addToIdSpaces方法中有一段有趣的代码

Java代码

/**?Adds?to?the?ID?spaces,?if?any,?when?ID?is?changed. ?
?*?Caller?has?to?make?sure?the?uniqueness?(and?not?auto?id). ?
?*/??
private?static?void?addToIdSpaces(final?Component?comp)?{ ??
????final?String?compId?=?comp.getId(); ??
????if?(comp?instanceof?NonFellow?||?isAutoId(compId)) ??
????????return;?//nothing?to?do ??
??
????if?(comp?instanceof?IdSpace) ??
????????((AbstractComponent)comp).bindToIdSpace(comp); ??
??
????addFellow(comp,?getSpaceOwnerOfParent(comp)); ??
}??

	/** Adds to the ID spaces, if any, when ID is changed.
	 * Caller has to make sure the uniqueness (and not auto id).
	 */
	private static void addToIdSpaces(final Component comp) {
		final String compId = comp.getId();
		if (comp instanceof NonFellow || isAutoId(compId))
			return; //nothing to do

		if (comp instanceof IdSpace)
			((AbstractComponent)comp).bindToIdSpace(comp);

		addFellow(comp, getSpaceOwnerOfParent(comp));
	}

??? 这段有趣的代码?

Java代码

if?(comp?instanceof?NonFellow?||?isAutoId(compId)) ??
????return;?//nothing?to?do??

if (comp instanceof NonFellow || isAutoId(compId))
    return; //nothing to do

?? 意思是排除符合NonFellow接口的组件，排除由zk自动生成id的组件
?然后我查看了zul组件，zhtml组件，native组件，发现native组件HtmlNativeComponent实现了该接口
?如下：

Java代码

public?class?HtmlNativeComponent?extends?AbstractComponent?implements?DynamicTag,?Native?{ ??
?//................ ??
??
} ??
??
public?interface?Native?extends?NonFellow?{ ??
??
?//................ ??
??
?}???

public class HtmlNativeComponent extends AbstractComponent implements DynamicTag, Native {
 //................

}

public interface Native extends NonFellow {

 //................

 }

五，生成静态内容

zul页面代码

Xml代码

<?xml?version="1.0"?encoding="utf-8"?>??
<window??
?xmlns:w="client"?xmlns:n="native"?xmlns="http://www.zkoss.org/2005/zul"??
????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"??
????xsi:schemaLocation="http://www.zkoss.org/2005/zul?http://www.zkoss.org/2005/zul/zul.xsd"??
????apply="IndexController">??
????<h:input??value="测试"?type="button"?forward="onSetting"?xmlns:h="http://www.w3.org/1999/xhtml"/>??
????<n:input??value="测试"?type="button"?forward="onSetting"?xmlns:n="native"/>??
????<button?mold="os"?label="测试"???forward="onSetting"></button>??
</window>??

<?xml version="1.0" encoding="utf-8"?>
<window
 xmlns:w="client" xmlns:n="native" xmlns="http://www.zkoss.org/2005/zul"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"
    apply="IndexController">
    <h:input  value="测试" type="button" forward="onSetting" xmlns:h="http://www.w3.org/1999/xhtml"/>
    <n:input  value="测试" type="button" forward="onSetting" xmlns:n="native"/>
    <button mold="os" label="测试"   forward="onSetting"></button>
</window>

生成静态内容，与上面代码顺序一样

['zhtml.Widget','oW6Q1',{$onClick:true,prolog:'<input id="oW6Q1" value="测试" type="button"/>'},[]],

['zk.Native','oW6Q2',{prolog:'\n\t<input value="测试" type="button"/>'},[]],

['zul.wgt.Button','oW6Q3',{$onClick:true,prolog:'\n\t',label:'测试'},[],'os']]]]]);

从中我们可以看出：

1，从上面json格式的代码可以看出zhtml与native组件仅仅做了简单的处理，直接输出到prolog属性上

2，zul组件与zhtml组件都监听了onClick事件，$onClick:true，从而触发服务器端controller类的事件处理程序

实践：

由上可以知道，native组件无法getFellow得到，所以如果你这么做了，一定获得null，

但如果想获得native组件，有一个方法：

获得native组件附近的受管zhtml组件或zul组件然后通过这些组件的方法获得

1，如果父组件是native组件，getParent方法

2，如果子组件第一个组件是native组件 getFirstChild方法
,

3，如果子组件的第一个组件是native组件getLastChild方法，

4，如果相邻的上一个组件是native组件，getNextSibling方法

5，如果相邻的上一个组件是native组件，getPreviousSibling方法

6，当然你也可以使用链式方法获取native组件