0

issue creating dynamic tabs via controller #1

asked 2013-05-06 14:57:32 +0800

bbrand gravatar image bbrand
98 3

updated 2013-05-07 09:31:37 +0800

I am trying to create tabs dynamically and am running into issues. The container TAB is created but the contents of that TAB is empty, while it should contain another TAB.

ZUL:

<?xml version="1.0" encoding="UTF-8"?>

<zk xmlns="&lt;a href=" http:="" www.zkoss.org="" 2005="" zul"="">http://www.zkoss.org/2005/zul"> <window id="mainWindow" width="100%" height="100%" apply="controller.test">

    <borderlayout>
        <!-- header frame -->
        <north title="Dynamic Tabs" vflex="true">
            <grid id="headerFrame" fixedLayout="true" width="100%" height="100%" >
                <columns>
                    <column label="" width="50px"/>
                    <column label=""/>
                </columns>
                <rows>
                    <row>
                        <label value="Add tab"/>
                        <button id="addButton"/>
                    </row>
                </rows>
            </grid>
        </north>
        <!-- map frame -->
        <south id="planFrame" size="90%" vflex="true">
            <tabbox id="tabHolder">
                <tabs/>
            </tabbox>
        </south>
    </borderlayout>    
</window>

</zk>

Controller:

package controller;

import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.util.Composer; import org.zkoss.zk.ui.util.GenericForwardComposer; import org.zkoss.zul.Button; import org.zkoss.zul.Label; import org.zkoss.zul.South; import org.zkoss.zul.Tab; import org.zkoss.zul.Tabbox; import org.zkoss.zul.Tabpanel; import org.zkoss.zul.Window; // public class test extends GenericForwardComposer implements Composer {

Window mainWindow;
Button addButton;
South planFrame;
Tabbox tabHolder;
int i = 0;

@Override
public void doAfterCompose(Component comp) throws Exception {
    super.doAfterCompose(comp);
    addButton.setDisabled(false);
}

public void onClick$addButton(Event event) {
    //
    Tab rmTab = new Tab("a new tab " + ++i);
    rmTab.setParent(tabHolder.getTabs());
    //
    Tabpanel rmTabpanel = new Tabpanel();
    rmTabpanel.setParent(tabHolder.getTabpanels());
    rmTab.setSelected(true);
    //
    // now add a tabbox to that tab
    Tabbox rmBox = new Tabbox();
    rmTabpanel.appendChild(rmBox);
    // and a tab
    Tab yearTab = new Tab("Year");
    yearTab.setParent(rmBox.getTabs());
    Tabpanel yearTabpanel = new Tabpanel();
    yearTabpanel.appendChild(new Label("tab year 1"));
    yearTabpanel.setParent(rmBox.getTabpanels());
    yearTab.setSelected(true);

}

}

I have been over this code a lot of times and cannot find my error. Anybody?

thanks

delete flag offensive retag edit

Comments

you are not initializing the Tabs of rmBox which is null by default.

gganassin ( 2013-05-06 15:09:42 +0800 )edit

Sorry for the late reply, but this fixed it!! thanks!

bbrand ( 2013-05-27 19:26:34 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2013-05-28 21:59:38 +0800

bbrand gravatar image bbrand
98 3

Thanks to the excellent help of the responders above, here is the same example, but now working:

ZUL:

<?xml version="1.0" encoding="UTF-8"?>

<zk xmlns="&lt;a href=" http:="" www.zkoss.org="" 2005="" zul"="">http://www.zkoss.org/2005/zul"> <window id="mainWindow" width="100%" height="100%" apply="controller.test">

    <borderlayout>
        <!-- header frame -->
        <north title="Dynamic Tabs v2" vflex="true">
            <grid id="headerFrame" fixedLayout="true" width="100%" height="100%" >
                <columns>
                    <column label="" width="50px"/>
                    <column label=""/>
                </columns>
                <rows>
                    <row>
                        <label value="Add tab"/>
                        <button id="addButton"/>
                    </row>
                </rows>
            </grid>
        </north>
        <!-- map frame -->
        <south id="planFrame" size="90%" vflex="true">
            <tabbox id="mainTabBox">
                <tabs/>
                <tabpanels/>
            </tabbox>
        </south>
    </borderlayout>    
</window>

</zk>

And the Controller:

package controller;

import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.util.Composer; import org.zkoss.zk.ui.util.GenericForwardComposer; import org.zkoss.zul.Button; import org.zkoss.zul.South; import org.zkoss.zul.Tab; import org.zkoss.zul.Tabbox; import org.zkoss.zul.Tabpanel; import org.zkoss.zul.Tabpanels; import org.zkoss.zul.Tabs; import org.zkoss.zul.Window; // public class test extends GenericForwardComposer implements Composer {

Window mainWindow;
Button addButton;
South planFrame;
Tabbox mainTabBox;
int i = 0;

@Override
public void doAfterCompose(Component comp) throws Exception {
    super.doAfterCompose(comp);
    addButton.setDisabled(false);
}

public void onClick$addButton(Event event) {
    //
    // layout of the tab
    //
    // tabbox id=
    //      -> tabs
    //          -> tab id=
    //          -> tab id=
    //      -> toolbar
    //          -> toolbarbutton id=
    //          -> toolbarbutton id=
    //      -> tabpanels
    //          -> tabpanel
    //              -> grid id=
    //          -> tabpanel
    //              -> grid id=
    //          -> tabpanel
    //              -> grid id=
    //
    Tab rmTab = new Tab("View " + ++i);
    rmTab.setParent(mainTabBox.getTabs());
    //
    Tabpanel mainTabpanel = new Tabpanel();
    mainTabpanel.setParent(mainTabBox.getTabpanels());
    //
    // now add a tabbox for this tabpanel; this will contain the three time tabs
    //
    Tabbox editFrame = new Tabbox();
    editFrame.setParent(mainTabpanel);
    //
    // 
    Tabs editTabs = new Tabs();
    editTabs.setParent(editFrame);
    //
    Tab mTab = new Tab("Month " + i);
    mTab.setParent(editTabs);
    Tab qTab = new Tab("Quarter " + i);
    qTab.setParent(editTabs);
    Tab yTab = new Tab("Year " + i);
    yTab.setParent(editTabs);
    //
    Tabpanels editPanels = new Tabpanels();
    editPanels.setParent(editFrame);
    //
    Tabpanel mPanel = new Tabpanel();
    mPanel.setParent(editPanels);
    Tabpanel qPanel = new Tabpanel();
    qPanel.setParent(editPanels);
    Tabpanel yPanel = new Tabpanel();
    yPanel.setParent(editPanels);
}

}

Thanks to all for helping me out.

link publish delete flag offensive edit
0

answered 2013-05-20 06:27:06 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

change your tabHolder as below

<tabbox id="tabHolder">
    <tabs/>
    <tabpanels />
</tabbox>

and assign a tabpanels to rmBox before using it

...
new Tabpanels().setParent(rmBox)
yearTabpanel.setParent(rmBox.getTabpanels());
...

then it should work

link publish delete flag offensive edit
0

answered 2013-05-08 12:54:05 +0800

francishsiao gravatar image francishsiao
145 2

In your zul, there is a Tabs inside tabHolder

        <tabbox id="tabHolder">
            <tabs/>
        </tabbox>

ZK will automatically create a associate Tabs component as tabHolder's child at the Component Creation Phase.

But there are no Tabpanels as tabHolder's child, and no Tabs and Tabpanels as rmBox's children. So before you going to

xxx.setParent(tabHolder.getTabpanels());
yyy.setParent(rmBox.getTabs());
zzz.setParent(rmBox.getTabpanels());

you should create them and setParent :

    Tabpanels tabpanels1 = new Tabpanels();
    tabpanels1.setParent(tabHolder);
    xxx.setParent(tabHolder.getTabpanels());
    ..........

    Tabs tabs2 = new Tabs();
    tabs2.setParent(rmBox);
    yyy.setParent(rmBox.getTabs());
    .......

    Tabpanels tabpanels2 = new Tabpanels();
    tabpanels2.setParent(rmBox);
    zzz.setParent(rmBox.getTabpanels());
    ...........
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2013-05-06 14:57:32 +0800

Seen: 89 times

Last updated: May 28 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More