|
|
(3 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
| {{ZKDevelopersGuidePageHeader}} | | {{ZKDevelopersGuidePageHeader}} |
| | | |
− | __TOC__
| |
| == Overview == | | == Overview == |
| Namespaces and Component Sets is the fundamental for ZK to co-work with other UI framework. | | Namespaces and Component Sets is the fundamental for ZK to co-work with other UI framework. |
Line 7: |
Line 6: |
| To allow mix two or more component sets in the same ZUML page, ZK uses XML namespaces to distinguish different sets of components. For example, the namespace of XUL is [http://www.potix.com/2005/zul/ http://www.zkoss.org/2005/zul], and that of XHTML is [http://www.w3.org/1999/xhtml http://www.w3.org/1999/xhtml]. | | To allow mix two or more component sets in the same ZUML page, ZK uses XML namespaces to distinguish different sets of components. For example, the namespace of XUL is [http://www.potix.com/2005/zul/ http://www.zkoss.org/2005/zul], and that of XHTML is [http://www.w3.org/1999/xhtml http://www.w3.org/1999/xhtml]. |
| | | |
− | On the other hand, most pages uses only one component set. To make such pages easier to write, ZK determines the default namespace based on the extension. For example, the <tt>xul</tt> and <tt>zul</tt> extensions imply the XUL namespace. Therefore, developers need only to associate ZUML pages with a proper extension, and then don't need to worry about XML namespace any more. | + | On the other hand, most pages uses only one component set. To make such pages easier to write, ZK determines the default namespace based on the extension. For example, the <code>xul</code> and <code>zul</code> extensions imply the XUL namespace. Therefore, developers need only to associate ZUML pages with a proper extension, and then don't need to worry about XML namespace any more. |
| | | |
− | == Standard Namespaces ==
| |
− | As stated before, each set of components is associated with an unique namespace. However, developers might develop or use additional components from 3<sup>rd</sup> party, so here we list only the namespaces that are shipped with the ZK distribution.
| |
| | | |
− | | + | {{ZKDevelopersGuideHeadingToc}} |
− | {| border="1" | |
− | ! <center>Namespaces</center>
| |
− | | |
− | |-
| |
− | | <tt><nowiki>http://www.potix.com/2005/zul</nowiki></tt>
| |
− | | |
− | The namespace of the XUL component set.
| |
− | | |
− | |-
| |
− | | <tt><nowiki>http://www.w3.org/1999/xhtml</nowiki></tt>
| |
− | | |
− | The namespace of the XHTML component set.
| |
− | | |
− | |-
| |
− | | <tt><nowiki>http://www.zkoss.org/2005/zk</nowiki></tt>
| |
− | | |
− | The ZK namespace. It is the reserved namespace for specifying ZK specific elements and attributes.
| |
− | | |
− | |-
| |
− | | <tt><nowiki>http://www.zkoss.org/2005/zk/native</nowiki></tt>
| |
− | | |
− | The Native namespace. It is the reserved namespace for specifying inline elements.
| |
− | | |
− | Refer to the [[Work_with_HTML_Tags | Work with HTML Tags]] section for details.
| |
− | | |
− | |-
| |
− | | <tt>native:''URI-of-another-namespace''</tt>
| |
− | | |
− | Alternative way to specify the Native namespace. With the Native namespace, a XML element in a ZUML page denotes that it shall be sent to the browser directly rather than becoming a ZK component
| |
− | | |
− | Refer to the [[Work_with_HTML_Tags | Work with HTML Tags]] section for details.
| |
− | | |
− | |-
| |
− | | <tt><nowiki>http://www.zkoss.org/2005/zk/client</nowiki></tt>
| |
− | | |
− | [since 5.0.0]
| |
− | | |
− | The namespace for ZK client-side widgets. It is used to specify the properties and listeners of a widget (at the client).
| |
− | | |
− | See also
| |
− | * [http://docs.zkoss.org/wiki/Client_Side_Programming Client Side Programming]
| |
− | * [http://docs.zkoss.org/wiki/ZK5:_Client_Computing_with_ZUML ZK5: Client Computing with ZUML]
| |
− | | |
− | |-
| |
− | | <tt><nowiki>http://www.zkoss.org/2005/zk/annotation</nowiki></tt>
| |
− | | |
− | The Annotation namespace. It is the reserved namespace for specifying the annotations.
| |
− | | |
− | However, you rarely need to use this namespace directly. Rather, use <tt>@{whatever_annotation}</tt> instead.
| |
− | Refer to the [[Annotations | Annotations]] section for details
| |
− | |}
| |
− | It is optional to specify namespaces in ZUML pages, until there are conflicts. ZK determined which namespace to use by examining the extension of a ZUML page. For the .<tt>zul</tt> and .<tt>xul</tt> extensions, the namespace of XUL is assumed. For <tt>html</tt>, <tt>xhtml</tt> and <tt>zhtml</tt>, the namespace of XHTML is assumed.
| |
− | | |
− | == Mix With Another Markup Language ==
| |
− | | |
− | To mix with another markup language, you have to use <tt>xmlns</tt> to specify the correct namespace.
| |
− | | |
− | <source lang="xml" >
| |
− | <window xmlns:h="http://www.w3.org/1999/xhtml">
| |
− | <h:div>
| |
− | <button/>
| |
− | </h:div>
| |
− | </window>
| |
− | </source>
| |
− |
| |
− | For the XHTML components, the <tt>onClick</tt> and <tt>onChange</tt> attributes are conflicts with ZK's attributes. To resolve, you have to use the reserved namespace, <tt>http://www.zkoss.org/2005/zk</tt>, as follows.
| |
− | | |
− | <source lang="xml" >
| |
− | <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>
| |
− | </source>
| |
− | | |
− | * <tt>xmlns="http://www.w3.org/1999/xhtml"</tt> specifies a namespace called <tt>http://www.w3.org/1999/xhtml</tt>, and use it as the default namespace.
| |
− | * <tt><html></tt> specifies an element called <tt>html</tt> from the default namespace, i.e., <tt>http://www.w3.org/1999/xhtml</tt> in this example.
| |
− | * <tt>xmlns:x="[http://www.potix.com/2005/zul http://][http://www.potix.com/2005/zul www.zkoss.org/2005/zul]"</tt> specifies a namespace called [http://www.potix.com/2005/zul http://www.zkoss.org/2005/zul], and use x to represent this namespace.
| |
− | * <tt><x:window/></tt> specifies an element called <tt>window</tt> 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 <tt>onClick</tt> attribute is a ZHTML's attribute to specify JavaScript codes to run at the browser. On the other hand, the <tt>zk:onClick</tt> is a reserved attribute for specify a ZK event handler.
| |
− | | |
− | Notice that the namespace prefix, <tt>zk</tt>, is optional for the <tt>zscript</tt> 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 <tt>window</tt> 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.
| |
− | | |
− | <source lang="xml" >
| |
− | <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">
| |
− | </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 <tt>zul.xsd</tt> under the <tt>dist/xsd</tt> directory in the ZK binary distribution.
| |
− | | |
− | == Quiz ==
| |
− | #When will we have to care about namespace and different component sets?
| |
− | #What namespaces are defined by ZKoss?
| |
− | #Which namespace is implied by <tt>xul</tt> and <tt>zul</tt> extensions?
| |
| | | |
| | | |
| {{ ZKDevelopersGuidePageFooter}} | | {{ ZKDevelopersGuidePageFooter}} |