目录
本章描述了XHTML组件集。
介绍XHTML组件集的目地是，使已存在的Web页面可以简单的移植(port)到ZUML。最终目标是，所有有效的XHTML页面即为有效的ZUML页面。所有的servlet就像平常一样处理提交的表单。
因此，已存在的XHTML页面可以享受ZUML页面拥有的最强大优点，丰富用户界面。这种丰富性可以用两种方式实现。第一种，你可以嵌入Java代码来动态操纵XHTML组件。第二种，你可以为已存在的页面添加off-of-shelf XUL 组件，就像为XUL页面添加XHTML。
[性能考虑]：如果HTML标签部分是静态的，则最好使用Native命名空间，就像在性能提示(Performance Tips)一章中描述的那样。
下面为一个简单但典型的Web页面。
<html>
<head>
<title>ZHTML Demo</title>
</head>
<body>
<h1>ZHTML Demo</h1>
<ul id="ul">
<li>The first item.</li>
<li>The second item.</li>
</ul>
<input type="button" value="Add Item""/>
<br/>
<input id="inp0" type="text"/> +
<input id="inp1" type="text"/> =
<text id="out"/>
</body>
</html>
将其以zhtml为扩展名[52]，则ZK加载器会将此页面作为ZUML页面解释。然后，org.zkoss.zhtml.Html，org.zkoss.zhtml.Head及其它的实例被创建。换言之，我们在服务器端创建了一个XHTML 组件树。然后ZK将它们成为(renders)规则的XHTML页面并送回浏览器，就像我们为任何ZUML页面做的那样。
作为一个ZUML页面，它可以嵌入任何Java代码，且在服务器执行它们，如下。
<html xmlns:zk="http://www.zkoss.org/2005/zk">
<head>
<title>ZHTML Demo</title>
</head>
<body>
<h1>ZHTML Demo</h1>
<ul id="ul">
<li>The first item.</li>
<li>The second item.</li>
</ul>
<input type="button" value="Add Item" zk:onClick="addItem()"/>
<br/>
<input id="inp0" type="text" zk:onChange="add()"/> +
<input id="inp1" type="text" zk:onChange="add()"/> =
<text id="out"/>
<zscript> void addItem() {
Component li = new Raw("li");
li.setParent(ul);
new Text("Item "+ul.getChildren().size()).setParent(li);
}
void add() {
out.setValue(inp0.getValue() + inp1.getValue());
}
</zscript>
</body></html>
在上面的例子中，我们使用了ZK命名空间指定onClick属性。这是必须的，因为XHTML本身有一个相同名称的属性。
注意Java代码是运行在服务器的。因此，不同于嵌入HTML页面的JavaScript， 你可以直接在服务器访问任何资源。例如，你可以打开一个数据库的连接，并获取数据来填充特定的组件。
<zscript>
import java.sql.*;
void addItem() {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:Fred";
Connection conn = DriverManager.getConnection(url,"myLogin", "myPassword");
...
conn.close();
}
</zscript>
[52] 若你想将所有的XHTML页面变为ZUML页面,可以将.html扩展名映射到DHtmlLayoutServlet。参考the Developer's Reference的附录A(Appendix A)获取细节。