Mix With Another Markup Language"
From Documentation
Maya001122 (talk | contribs) m (Created page with '{{ZKDevelopersGuidePageHeader}} To mix with another markup language, you have to use <tt>xmlns</tt> to specify the correct namespace. <source lang="xml" > <window xmlns:h="htt…') |
m (correct highlight (via JWB)) |
||
| Line 1: | Line 1: | ||
{{ZKDevelopersGuidePageHeader}} | {{ZKDevelopersGuidePageHeader}} | ||
| − | To mix with another markup language, you have to use < | + | To mix with another markup language, you have to use <code>xmlns</code> to specify the correct namespace. |
<source lang="xml" > | <source lang="xml" > | ||
| Line 11: | Line 11: | ||
</source> | </source> | ||
| − | For the XHTML components, the < | + | For the XHTML components, the <code>onClick</code> and <code>onChange</code> attributes are conflicts with ZK's attributes. To resolve, you have to use the reserved namespace, <code>http://www.zkoss.org/2005/zk</code>, as follows. |
<source lang="xml" > | <source lang="xml" > | ||
| Line 37: | Line 37: | ||
</source> | </source> | ||
| − | * < | + | * <code>xmlns="http://www.w3.org/1999/xhtml"</code> specifies a namespace called <code>http://www.w3.org/1999/xhtml</code>, and use it as the default namespace. |
| − | * < | + | * <code><html></code> specifies an element called <code>html</code> from the default namespace, i.e., <code>http://www.w3.org/1999/xhtml</code> in this example. |
| − | * < | + | * <code>xmlns:x="[http://www.potix.com/2005/zul http://][http://www.potix.com/2005/zul www.zkoss.org/2005/zul]"</code> specifies a namespace called [http://www.potix.com/2005/zul http://www.zkoss.org/2005/zul], and use x to represent this namespace. |
| − | * < | + | * <code><x:window/></code> specifies an element called <code>window</code> from the name space called [http://www.potix.com/2005/zul http://][http://www.potix.com/2005/zul www.zkoss.org/2005/zul]. |
| − | In this example, the < | + | In this example, the <code>onClick</code> attribute is a ZHTML's attribute to specify JavaScript codes to run at the browser. On the other hand, the <code>zk:onClick</code> is a reserved attribute for specify a ZK event handler. |
| − | Notice that the namespace prefix, < | + | Notice that the namespace prefix, <code>zk</code>, is optional for the <code>zscript</code> element, because ZHTML has no such element and ZK has enough information to determine it. |
| − | Also notice that you have to specify the XML namespace for the < | + | Also notice that you have to specify the XML namespace for the <code>window</code> component, because it is from a different component set. |
=== Auto-completion with Schema === | === Auto-completion with Schema === | ||
| Line 58: | Line 58: | ||
</source> | </source> | ||
| − | In addition to downloading from [http://www.zkoss.org/2005/zul/zul.xsd http://www.zkoss.org/2005/zul/zul.xsd], you can find < | + | In addition to downloading from [http://www.zkoss.org/2005/zul/zul.xsd http://www.zkoss.org/2005/zul/zul.xsd], you can find <code>zul.xsd</code> under the <code>dist/xsd</code> directory in the ZK binary distribution. |
{{ ZKDevelopersGuidePageFooter}} | {{ ZKDevelopersGuidePageFooter}} | ||
Latest revision as of 10:36, 19 January 2022
This documentation is for an older version of ZK. For the latest one, please click here.
To mix with another markup language, you have to use xmlns to specify the correct namespace.
<window xmlns:h="http://www.w3.org/1999/xhtml">
<h:div>
<button/>
</h:div>
</window>
For the XHTML components, the onClick and onChange attributes are conflicts with ZK's attributes. To resolve, you have to use the reserved namespace, http://www.zkoss.org/2005/zk, as follows.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:x="[http://www.potix.com/2005/zul http://www.zkoss.org/2005/zul]"
xmlns:zk="http://www.zkoss.org/2005/zk">
<head>
<title>ZHTML Demo</title>
</head>
<body>
<script type="text/javascript">
function woo() { //running at the browser
}
</script>
<zk:zscript>
void addItem() { //running at the server
}
</zk:zscript>
<x:window title="HTML App">
<input type="button" value="Add Item"
onClick="woo()" zk:onClick="addItem()"/>
</x:window>
</body>
</html>
xmlns="http://www.w3.org/1999/xhtml"specifies a namespace calledhttp://www.w3.org/1999/xhtml, and use it as the default namespace.<html>specifies an element calledhtmlfrom the default namespace, i.e.,http://www.w3.org/1999/xhtmlin this example.xmlns:x="http://www.zkoss.org/2005/zul"specifies a namespace called http://www.zkoss.org/2005/zul, and use x to represent this namespace.<x:window/>specifies an element calledwindowfrom the name space called http://www.zkoss.org/2005/zul.
In this example, the onClick attribute is a ZHTML's attribute to specify JavaScript codes to run at the browser. On the other hand, the zk:onClick is a reserved attribute for specify a ZK event handler.
Notice that the namespace prefix, zk, is optional for the zscript element, because ZHTML has no such element and ZK has enough information to determine it.
Also notice that you have to specify the XML namespace for the window component, because it is from a different component set.
Auto-completion with Schema
Many IDEs, such Eclipse, supports auto-completion if XML schema is specified as follows.
<window 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">
In addition to downloading from http://www.zkoss.org/2005/zul/zul.xsd, you can find zul.xsd under the dist/xsd directory in the ZK binary distribution.