Hi everybody, I've two grids in a container. Each grid must be flexible, such as the container. I need to show only one grid at a time, because they show different kind of data, and I've thought to use the "visible" attribute to get it.

When I load the page, the first grid is 100% wide even if it has no elements to show: ok. Then I switch to second grid, that has no elements to show and it too is 100% wide: ok. Now I switch again to the first one, and it's 50% wide: not ok.

Here is some sample code.

flex_grid.zul

<?xml version="1.0" encoding="UTF-8"?>
<zk 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">
    <hlayout apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('eu.dedalus.pst.esercizio.FlexGridVM')"
         vflex="1">
        <button label="Switch grid" onClick="@command('doSwitchGrid')" />
        <grid hflex="1" vflex="1" emptyMessage="No elements in first grid"
            visible="@load(vm.firstGridVisible)">
            <columns>
                <column label="Name" hflex="1" />
                <column label="Surname" hflex="1" />
                <column label="Birthday" hflex="min" />
                <column label="City" hflex="min" />
                <column label="Note" hflex="2" />
            </columns>
        </grid>
        <grid hflex="1" vflex="1" emptyMessage="No elements in second grid"
            visible="@load(not vm.firstGridVisible)">
            <columns>
                <column label="Note" hflex="2" />
                <column label="City" hflex="min" />
                <column label="Birthday" hflex="min" />
                <column label="Surname" hflex="1" />
                <column label="Name" hflex="1" />
            </columns>
        </grid>
    </hlayout>
</zk>

FlexGridVM

public class FlexGridVM {
    private boolean firstGridVisible;

    @Init
    public void init() {
        firstGridVisible = true;
    }

    public boolean isFirstGridVisible() {
        return firstGridVisible;
    }

    public void setFirstGridVisible(boolean firstGridVisible) {
        this.firstGridVisible = firstGridVisible;
    }

    @Command
    @NotifyChange("firstGridVisible")
    public void doSwitchGrid() {
        firstGridVisible = !firstGridVisible;
    }
}

The sample is really clear I hope.

If you set a fixed width to the <hlayout>, the behaviour is the same.

If you use the <hbox>, surprisingly you will get 3 differents behaviour. 1. If you set a fixed width, i.e. hflex="1000px", or width="100%", the behaviour is the expected one 2. If you set hflex="1", the behaviour is the same of <hlayout> 3. If you set neither width nor hflex, each time you switch the visibility, the first grid width increases each time of the half of the previous free space (?!)

Now, I could solve my problem using <hbox width="100%"> but I'd prefer to use <hlayout>: is there a way to obtain the same result using it?
<hlayout> and <hbox> are supposed to behave identically in this context?
Is the <hbox> behaviour correct, or there's a bug (obviously case 3 is a bug)?

Thanx for your help,
Roberto

Hi everybody, I've two grids in a container. Each grid must be flexible, such as the container. I need to show only one grid at a time, because they show different kind of data, and I've thought to use the "visible" attribute to get it.

When I load the page, the first grid is 100% wide even if it has no elements to show: ok. Then I switch to second grid, that has no elements to show and it too is 100% wide: ok. Now I switch again to the first one, and it's 50% wide: not ok.

Here is some sample code.

flex_grid.zul

<?xml version="1.0" encoding="UTF-8"?>
<zk 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">
    <hlayout apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('eu.dedalus.pst.esercizio.FlexGridVM')"
         vflex="1">
        <button label="Switch grid" onClick="@command('doSwitchGrid')" />
        <grid hflex="1" vflex="1" emptyMessage="No elements in first grid"
            visible="@load(vm.firstGridVisible)">
            <columns>
                <column label="Name" hflex="1" />
                <column label="Surname" hflex="1" />
                <column label="Birthday" hflex="min" />
                <column label="City" hflex="min" />
                <column label="Note" hflex="2" />
            </columns>
        </grid>
        <grid hflex="1" vflex="1" emptyMessage="No elements in second grid"
            visible="@load(not vm.firstGridVisible)">
            <columns>
                <column label="Note" hflex="2" />
                <column label="City" hflex="min" />
                <column label="Birthday" hflex="min" />
                <column label="Surname" hflex="1" />
                <column label="Name" hflex="1" />
            </columns>
        </grid>
    </hlayout>
</zk>

FlexGridVM

public class FlexGridVM {
    private boolean firstGridVisible;

    @Init
    public void init() {
        firstGridVisible = true;
    }

    public boolean isFirstGridVisible() {
        return firstGridVisible;
    }

    public void setFirstGridVisible(boolean firstGridVisible) {
        this.firstGridVisible = firstGridVisible;
    }

    @Command
    @NotifyChange("firstGridVisible")
    public void doSwitchGrid() {
        firstGridVisible = !firstGridVisible;
    }
}

The sample is really clear I hope.

If you set a fixed width to the <hlayout>, the behaviour is the same.

If you use the <hbox>, surprisingly you will get 3 differents behaviour. 1. behaviour.

1. If you set a fixed width, i.e. hflex="1000px", or width="100%", the behaviour is the expected one 2. one
2. If you set hflex="1", the behaviour is the same of <hlayout> 3.
3. If you set neither width nor hflex, each time you switch the visibility, the first grid width increases each time of the half of the previous free space (?!)

Now, I could solve my problem using <hbox width="100%"> but I'd prefer to use <hlayout>: is there a way to obtain the same result using it?
<hlayout> and <hbox> are supposed to behave identically in this context?
Is the <hbox> behaviour correct, or there's a bug (obviously case 3 is a bug)?

Thanx for your help,
Roberto