Image not being included in webpage when using component composition

Question

I am starting to work with ZK framework and I am currently stuck trying to display images in my page from the first chapters of the ZK essentials documentation where you create an example UI by using composition of different .zul files from the main .zul file index.zul . Here is how the code looks like:

The main index.zul

<?link rel="stylesheet" type="text/css" href="~./style.css"?>
<zk>
    <custom-attributes org.zkoss.zul.image.preload="true"/>
    <borderlayout hflex="1" vflex="1">
        <north vflex="min" border="none">
            <include templateURI="~./zul/banner"/>
        </north>
        <west width="260px" border="none" collapsible="true" splittable="true" minsize="300">
            <include templateURI="~./zul/sidebar.zul"/>
        </west>
        <center id="mainContent" autoscroll="true">
            <include templateURI="~./zul/main.zul"/>
        </center>
        <south border="none">
            <include templateURI="~./zul/footer.zul"/>
        </south>
    </borderlayout>
</zk>

A component banner.zul

<div hflex="1" sclass="banner">
    <hbox hflex="1" align="center">
        <a href="http://www.zkoss.org/">
            <image src="~./img/zklogo.png" width="90px" />
        </a>
        <div width="400px">
            <label value="Application Name" sclass="banner-head" />
        </div>
        <hbox hflex="1" vflex="1" pack="end" align="end">
            Anonymous
        </hbox>
    </hbox>
</div>

The relevant file structure of my project looks like this:

I am able to do the composition since my page actually displays the elements that I defined in the component .zul files. Here is the image:

The problem is that images do not appear. I inspected the page and images are not even in the source code of the page.

No errors or warning are shown in the server console when loading the page.

But, if I include the image directly in index.zul instead of using composition, the image are displayed perfectly and, of course, image files are included in source code of the page (the elements you see when inspecting element in the browser):

Modified index.zul:

<?link rel="stylesheet" type="text/css" href="~./style.css"?>
<zk>
    <custom-attributes org.zkoss.zul.image.preload="true"/>
    <borderlayout hflex="1" vflex="1">
        <north vflex="min" border="none">
            <image src="~./img/zklogo.png" width="90px" />
            <include templateURI="~./zul/banner"/>
        </north>
        <west width="260px" border="none" collapsible="true" splittable="true" minsize="300">
            <include templateURI="~./zul/sidebar.zul"/>
        </west>
        <center id="mainContent" autoscroll="true">
            <include templateURI="~./zul/main.zul"/>
        </center>
        <south border="none">
            <include templateURI="~./zul/footer.zul"/>
        </south>
    </borderlayout>
</zk>

And now I see this in the page:

I hope that someone can explain me why image are being displayed when being included directly in the top component, but not working when they are included in a component. I do not know what I am doing wrong.

I am using Java 8, ZK 8.6.0.1 CE (build: 2018112010) and Spring Boot

Answer 1

So, I am solving my own question. Correct me if I am wrong:

The feature of composing .zul files is reserved for ZK Enterprise Edition, which is proprietary software. Those features, are included in the ZK library zuti.jar, that you could find outdated on the Internet.

Answer 2

The main issue I see in your code is that you encounter a small trap with the <include> component. <include> requires the src attribute to target the included page.

The include component will accept arbitrary named attributes, and pass them to the included page. In this case, you are creating empty includes (empty because they don't have the src="..." attribute, with arbitrary named parameters which use the "templateURI" name.

The templateURI name is specific to the <apply> shadow element, which can also be used for composition, and have different properties than include. (In short, the apply element will inject components directly in the outer page, while include will create a separate execution context for the inner page)

In regard to availability: <include> is in the base (open source) ZK packages <apply> is part of the ZK EE (enterprise edition) suite of addons (zuti.jar) specifically.

Also, it looks like your include to banner.zul is missing the .zul:

<include templateURI="~./zul/banner"/>
<include src="~./zul/banner.zul"/>

Hope that clarifies it :)