ZUML"

From Documentation
(45 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
=Overview=
 
  
There are two ways to compose UI: XML-based approach and pure-Java approach. Here we describe XML-based approach. For pure-Java approach, please refer the next chapter.
+
There are two ways to compose UI: XML-based approach and pure-Java approach. Here we will describe XML-based approach. For pure-Java approach, please refer to the next chapter.
  
The declaration language is called ZK User Interface Markup Language (ZUML). It is based on XML. Each XML element instructs the ZK Loader which component to create. Each XML attribute describes what value to be assigned to the created component. Each XML processing instruction describes how to process the whole page, such as the page title. For example,
+
The declaration language is called ZK User Interface Markup Language (ZUML). It is based on XML. Each XML element instructs ZK Loader to create a component. Each XML attribute describes what value to be assigned to the created component. Each XML processing instruction describes how to process the whole page, such as the page title. For example,
  
 
<source lang="xml">
 
<source lang="xml">
Line 14: Line 13:
 
where the first line specifies the page title, the second line creates a root component with title and border, and the third line creates a button with label and an event listener.
 
where the first line specifies the page title, the second line creates a root component with title and border, and the third line creates a button with label and an event listener.
  
This chapter is about the general use of ZUML. For a complete reference, please refer to [[ZK_ZUML_Reference|ZUML Reference]].
+
'''Auto-completion with Schema'''
  
=Basic Rules=
+
When working with a ZUML document, it is suggested to use [http://www.zkoss.org/product/zkstudio.dsp ZK Studio] since it provides a lot of features to simplify editing, such as ''content assist'' and ''visual editor'.
  
If you are not familiar with XML, please take a look at [[ZK Developer's Reference/UI Composing/ZUML/XML Background|XML Background]] first.
+
If you prefer not to use ZK Studio, you could specify the XML schema in a ZUML document as shown below. Many XML editors works better, such as when with auto-complete, if XML schema is specified correctly.
  
==A XML Element Represents a Component==
+
<source lang="xml" >
 
+
<window xmlns="http://www.zkoss.org/2005/zul"
Each XML element represents a component, except special elements like &lt;zk&gt; and &lt;attribute&gt;. Thus, the following will cause three components (window, textbox and button) being created when ZK Loader processes it.
+
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 lang="xml">
 
<window>
 
  <textbox/>
 
  <button/>
 
</window>
 
 
</source>
 
</source>
 +
 +
The ZUL schema can be downloaded from [http://www.zkoss.org/2005/zul/zul.xsd http://www.zkoss.org/2005/zul/zul.xsd]. In addition, you can find <tt>zul.xsd</tt> under the <tt>dist/xsd</tt> directory in the [[ZK Installation Guide/ZK Background/The Content of ZK Binary Distribution|ZK binary distribution]].
  
In additions, the parent-child relationship of the created components will follow the same hierarchical structure of the XML document. In the previous example, window will be the parent of textbox and button, while textbox is the first child and button is the second.
+
This section is about the general use of ZUML. For a complete reference, please refer to [[ZUML_Reference|ZUML Reference]].
 
+
{{ZKDevelopersReferenceHeadingToc}}
==A XML Attribute Assigns a Value to a Component's Property or Event Listener==
 
 
 
==The Text among Elements Is Label Component or Property's Value==
 
 
 
==A XML Processing Instruction Specifies the Page-wide Information==
 
 
 
=Component Set and File Extension=
 
 
 
=Create Components from ZUML Document=
 
 
 
=Version History=
 
Last Update : {{REVISIONYEAR}}/{{REVISIONMONTH}}/{{REVISIONDAY}}
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
 
 
 
{{ZKDevelopersReferencePageFooter}}
 
{{ZKDevelopersReferencePageFooter}}

Revision as of 01:11, 19 September 2011

There are two ways to compose UI: XML-based approach and pure-Java approach. Here we will describe XML-based approach. For pure-Java approach, please refer to the next chapter.

The declaration language is called ZK User Interface Markup Language (ZUML). It is based on XML. Each XML element instructs ZK Loader to create a component. Each XML attribute describes what value to be assigned to the created component. Each XML processing instruction describes how to process the whole page, such as the page title. For example,

<?page title="Super Application"?>
<window title="Super Hello" border="normal">
    <button label="hi" onClick='alert("hi")'/>

where the first line specifies the page title, the second line creates a root component with title and border, and the third line creates a button with label and an event listener.

Auto-completion with Schema

When working with a ZUML document, it is suggested to use ZK Studio since it provides a lot of features to simplify editing, such as content assist and visual editor'.

If you prefer not to use ZK Studio, you could specify the XML schema in a ZUML document as shown below. Many XML editors works better, such as when with auto-complete, if XML schema is specified correctly.

 <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">

The ZUL schema can be downloaded from http://www.zkoss.org/2005/zul/zul.xsd. In addition, you can find zul.xsd under the dist/xsd directory in the ZK binary distribution.

This section is about the general use of ZUML. For a complete reference, please refer to ZUML Reference.



Last Update : 2011/09/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.