User:MontyPan/Ch07

Control Viible of Components

Seeing is believing. -- Idiom

In lots situations, we need to show some components or make them disappeared. The most intuitional way is set visible attribute. The other way is set if attribute or you can use @template in MVVM architecture. But there are many differences between these solutions no matter life cycle or usage. We will use cardview.zul in [TodoZK] for example to discuss.

The logic of cardview.zul

In cardview.zul, we will check if query string exist ws parameter or not. If there is ws parameter in query string, that means end user specify a workspace (this logic is written in SidebarVM.java). Thus, vm.milestones will not be null and we can check the value to decide show workspace layout or not.

if attribute

ZK will calculate the condition of if attribute to decide the component which has if need to build or skip. In [ToDoZK] we use this solution:

<hlayout children="@load(vm.milestones)" if="${vm.milestones != null}">
    <template name="children" var="milestone">
        <!-- milestone's content -->
    </template>
</hlayout>

If vm.milestones is null, Hlayout will not exist in component tree after the ZUL loading, you can't access or control it anymore.

visible attribute

The visible attribute is used for control the component is visible or not.

<hlayout children="@load(vm.milestones)" visible="@load(vm.milestones ne null)">
    <template name="children" var="milestone">
        <!-- milestone's content -->
    </template>
</hlayout>

The remarkable difference between if and visible is Hlayout will be built and existed in component tree. After ZUL loading, you can operate the component as you wish. In the same reason, Hlayout and it's child components will occupy the system resource -- even end user can't find them.

@template binding

The original usage of @template binding is not control the component is visible or existed. We use it for decide which Template will be use dynamically in MVVM. You can get more detail information in ZK documents: "[Template Binding]" and "Children Binding: Combine with Dynamic template".

We can use this character to approach the effect of if and visible:

<hlayout children='@load(vm.milestones) @template(vm.milestones ne null ? "visible" : "empty")'>
    <template name="visible" var="milestone">
        <!-- milestone's content -->
    </template>
    <template name="empty" />
</hlayout>

ZK will choice empty template when vm.milestones is null. There is nothing in empty template, so nothing will be shown.

The good part of this solution is there is no component in Hlayout when using empty template. Hence it will use less system resource but still can access Hlayout component in follow-up operation.

But the bad part:

• You can only use it in MVVM architecture and the component which set children of model attribute.
• If the condition of @template change all the time (notify change vm.milestones), the performance of component attach/detach will slower than visible.

By the way, you can't use MVVM binding on if attribute:

<hlayout children="@load(vm.milestones)" if="@load(vm.milestones ne null)">
    <template name="children" var="milestone">
        <!-- milestone's content -->
    </template>
</hlayout>

The reason is MVVM binding act after ZUL loading, at that time if no longer be processed.

How to choice?

• General situation: use visible with no doubt.
• If component will not change the visible status after ZUL loading: we recommend using if.
• In MVVM architecture, if you need to refresh the component's content you can estimate @template solution.