ZK Developer's Guide/ZK in Other Environments/XML Output/Three Steps to Generate XML Output with a ZUML Page

This documentation is for an older version of ZK. For the latest one, please click here.

1. Uses the XML component set (http://www.zkoss.org/2007/xml).
2. Maps the file extension to ZK Loader
3. Maps the file extension to the XML component set

Use the XML Component Set, http://www.zkoss.org/2007/xml

The XML component set (aka., the XML language, in ZK terminology) is used to generate XML output. Unlike the XUL or XHTML component sets, all unknown tags in a ZUML page are assumed to belong the Native namespace (http://www.zkoss.org/2005/native) rather than throwing an exception. ZK generates them directly to the output without instantiating a ZK component for each of them.

The following is an example that generates the SVG output. It looks very similar to the XML output you want to generate, except you can use zscript, EL expressions, macro components and other ZK features.

 <?page contentType="image/svg+xml;charset=UTF-8"?>
 <svg width="100%" height="100%" version="1.1" xmlns="[http://www.w3.org/2000/svg http://www.w3.org/2000/svg]"
 xmlns:z="[http://www.zkoss.org/2005/zk http://www.zkoss.org/2005/zk]">
     <z:zscript><![CDATA[
     String[] bgnds = {"purple", "blue", "yellow"};
     int[] rads = {30, 25, 20};
     ]]></z:zscript>
     <circle style="fill:${each}" z:forEach="${bgnds}"
         cx="${50+rads[forEachStatus.index]}"
         cy="${20+rads[forEachStatus.index]}"
         r="${rads[forEachStatus.index]}"/>
 </svg>

The generated output will be

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
	version="1.1">
	<circle style="fill:purple" cx="80" cy="50" r="30">
	</circle>
	<circle style="fill:blue" cx="75" cy="45" r="25">
	</circle>
	<circle style="fill:yellow" cx="70" cy="40" r="20">
	</circle>
</svg>

where

• The content type is specified with the page directive. For SVG, it is image/svg+xml. The xml processing instruction (<?xml?>) and DOCTYPE of the output are also specified in the page directive. Refer to the Developer's Reference for more about the page directive.
• All tags in this example, such as svg and circle, are associated with a namespace (http://www.w3.org/2000/svg) that is unknown to ZK Loader. Thus, they are assumed to belong the Native namespace. They are output directly rather than instantiating a ZK component for each of them. Refer to the Native Namespace section int the '''ZUML with the XUL Component Set''' chapter for more about the Native namespace.
• To use zscript, forEach and other ZK specific features, you have to specify the ZK namespace (http://www.zkoss.org/2005/zk).

Maps the File Extension to ZK Loader

To let ZK Loader process the file, you have to associate it with the ZK Loader in WEB-INF/web.xml. In this example, we map all files with the .svg extension to ZK Loader:

 <servlet-mapping>
     <servlet-name>zkLoader</servlet-name>
     <url-pattern>*.svg</url-pattern>
 </servlet-mapping>

Maps the File Extension to the XML Component Set

Unless the file extension is .xml, you have to associate it with the XML component set (aka., the XML language) explicitly in WEB-INF/zk.xml. In this example, we map .svg to the XML component set:

 <language-mapping>
     <language-name>xml</language-name>
     <extension>svg</extension>
 </language-mapping>

where xml is the language name of the XML component set (http://www.zkoss.org/2007/xml). Thus, when ZK Loader parses a file with the .svg extension, it knows the default language is the XML component set.