Include a Page"
(Created page with "{{ZKDevelopersReferencePageHeader}} = apply (recommended)= If you are using ZK 8, we suggest you using [http://books.zkoss.org/zk-mvvm-book/8.0/shadow_elements/shadow_elements.h...") |
|||
Line 4: | Line 4: | ||
If you are using ZK 8, we suggest you using [http://books.zkoss.org/zk-mvvm-book/8.0/shadow_elements/shadow_elements.html <tt><apply></tt>] instead of <tt>Include</tt>. Comparing to <tt>Include</tt>, it has several advantages: | If you are using ZK 8, we suggest you using [http://books.zkoss.org/zk-mvvm-book/8.0/shadow_elements/shadow_elements.html <tt><apply></tt>] instead of <tt>Include</tt>. Comparing to <tt>Include</tt>, it has several advantages: | ||
# Doesn't consume extra memory. Because it's a shadow element, it doesn't create a corresponding component at the server side. | # Doesn't consume extra memory. Because it's a shadow element, it doesn't create a corresponding component at the server side. | ||
− | # Doesn't render an extra <div> surrounding its child components at the client-side. <tt>Include</tt> renders a <div> to enclose its child components. Sometimes the outer <div> breaks the layout. | + | # Doesn't render an extra <tt><div/></tt> surrounding its child components at the client-side. <tt>Include</tt> renders a <tt><div/></tt> to enclose its child components. Sometimes the outer <tt><div/></tt> breaks the layout. |
# Doesn't create an ID space. | # Doesn't create an ID space. | ||
# You can pass parameters dynamically. You can pass a parameter with data binding and bind to the parameter. When the parameter's value changes, the content will changed accordingly. | # You can pass parameters dynamically. You can pass a parameter with data binding and bind to the parameter. When the parameter's value changes, the content will changed accordingly. | ||
− | |||
= Include = | = Include = |
Revision as of 09:11, 19 September 2016
apply (recommended)
If you are using ZK 8, we suggest you using <apply> instead of Include. Comparing to Include, it has several advantages:
- Doesn't consume extra memory. Because it's a shadow element, it doesn't create a corresponding component at the server side.
- Doesn't render an extra surrounding its child components at the client-side. Include renders ato enclose its child components. Sometimes the outerbreaks the layout.
- Doesn't create an ID space.
- You can pass parameters dynamically. You can pass a parameter with data binding and bind to the parameter. When the parameter's value changes, the content will changed accordingly.
Include
Include allows you to include a ZUML page, a static page, a JSP page or the result of a servlet. For example,
<include src="another.zul"/>
<include src="another.jsp"/>
When including a non-ZUML page (such as JSP), the output of the page will be the content of the Include component. Thus, the output must be a valid HTML fragment.
When including a ZUML page, the components specified in the ZUML page will become the child components of the Include component.
For example, suppose we have two ZUL pages as follows:
<!-- first.zul -->
<include src="second.zul"/>
and
<!-- second.zul -->
<listbox>
<listitem label="foo"/>
</listbox>
Then, listbox
in second.zul
will become the child of include
in first.zul
.
If you prefer to create an independent page (Page), or want to include a page rendered by Richlet while the value of src ends with .zul or .zhtml, you could specify the mode with defer
(Include.setMode(String)). Then, include
won't have any child. Rather, an instance of Page will be created to hold the content of second.zul
or the content generated by Richlet. For more information, please refer to ZK Component Reference: include.
Classpath Web Resource Path
ZK provides a special path URL starting with ~./, it looks for a file under a folder starting with web in a web application's classpath, e.g. my-module.jar/web/. So it will get a file under the path among all included jar. You can specify such URL in a component path related attribute like:
<?component name="another" templateURI="~./another.zul" ?>
<zk>
<vlayout>
apply templateURI:
<apply templateURI="~./another.zul" />
component directive:
<another/>
image src:
<image src="~./zklogo.png" />
</vlayout>
</zk>
It can be used a default shared folder path. When you create a sub-module project, you can put some shared resources or reusable template zul files under this folder. Then, the main project can easily access them by this special URL.
Version History
Version | Date | Content |
---|---|---|