0

composite component help [closed]

asked 2013-03-04 11:31:33 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8
http://emrpms.blogspot.in...

updated 2013-04-01 11:10:59 +0800

jimyeh gravatar image jimyeh
2047 1 4
ZK Team

Hi

I am trying to use zk composite component pattern.

My objective is from the client(ZUL), i will be passing comma separated string, which in turn the composite component will create buttons for that.

I have achieved the result, but i do not know how to fire event on each button click.

Here is the composite comp zul file

<groupbox id="item" width="100%" closable="false" sclass="item" >
<caption id="titleCaption" sclass="title"/>
<hlayout>
    <image id="labelImage" sclass="image" />
    <button id="button1" ></button>
    <div sclass="desc-div">
        <label id="descLabel" sclass="desc" />
    </div>
</hlayout>

</groupbox>

Here is the class for that

package org.zkoss.zul;

import org.zkoss.zk.ui.Executions; import org.zkoss.zk.ui.IdSpace; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.event.EventListener; import org.zkoss.zk.ui.event.Events; import org.zkoss.zk.ui.ext.AfterCompose; import org.zkoss.zk.ui.select.Selectors; import org.zkoss.zk.ui.select.annotation.Listen; import org.zkoss.zk.ui.select.annotation.Wire;

public class ImageLabel extends Div implements IdSpace, AfterCompose {

@Wire
private Image labelImage;

@Wire
private Label descLabel;

@Wire
private Caption titleCaption;

@Wire
private Button button1;

private String buttons;

@Wire
private Groupbox item;

public ImageLabel() {
    Executions.createComponents("ImageLabel.zul", this, null);
    Selectors.wireComponents(this, this, false);
    Selectors.wireEventListeners(this, this);
    labelImage.setWidth("20px");
    labelImage.setHeight("20px");
    Messagebox.show(" " + this.button1.getLabel());
}

@Override
public void afterCompose() {
    Messagebox.show("dddd " + this.buttons);
    Button bt1 = new Button();
    bt1.setLabel("save");
    bt1.setParent(item);
    bt1.setVisible(true);
    bt1.addForward("onClick", this, "onButtonsClick", "save");

    Button bt2 = new Button();
    bt2.setLabel("cancel");
    bt2.setParent(item);
    bt2.setVisible(true);
    bt2.addForward("onClick", this, "onButtonsClick", "cancel");
    /* Events.postEvent("onButtonsClick", this, null); */
}

public String getTitle() {
    return titleCaption.getLabel();
}

public void setTitle(String title) {
    this.titleCaption.setLabel(title);
}

public String getButtonCaption() {
    return titleCaption.getLabel();
}

public void setButtonCaption(String title) {
    this.button1.setLabel(title);
}

public String getButtons() {
    return buttons;
}

public void setButtons(String buttons) {
    this.buttons = buttons;
}

public String getDescription() {
    return descLabel.getValue();
}

public void setDescription(String description) {
    this.descLabel.setValue(description);
}

@Listen("onClick = #button1")
public void submitTitleUpdate() {
    Events.postEvent("onLabelEdit", this, null);

}

}

Here is the zul file which calls the above composite component

<?page title="Auto Generated index.zul"?>

<window title="Hello World!!" border="normal" width="200px" apply="org.zkoss.bind.BindComposer" viewmodel="@id('vm') @init('org.zkoss.zul.PatientCaseDatesCRUDVM')">

<label value="You are using: ${desktop.webApp.version}" />
<imageLabel buttonCaption="asdasdsa" title="test" buttons="save,cancel"  onButtonsClick="@command('onButtonsClick')" onLabelEdit="@command('onActivate')"
    description="this is description!!">
</imageLabel>

</window>

Here is the VM

package org.zkoss.zul;

import org.zkoss.bind.annotation.Command;

public class PatientCaseDatesCRUDVM {

@Command
public void onActivate() {
    Messagebox.show("i am inside");
}


@Command
public void onButtonsClick()
{
    Messagebox.show("Buttons click");
}

}

Now if the user click either save or cancel button, i am able to get that event in the VM.

But i do not know which button is clicked.

I saw the following url

But it is not available for CE Version

So what is the alternate method to get which button is clicked

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by Senthilchettyin
close date 2013-04-07 14:35:07

Comments

Any help please.... ?

Senthilchettyin ( 2013-03-05 10:10:08 +0800 )edit

Any help please.... ?

Senthilchettyin ( 2013-03-08 06:05:03 +0800 )edit

Now 6.5.2 is released. is this feature available ?

Senthilchettyin ( 2013-03-26 10:05:53 +0800 )edit
1

Hi Benbai

Thank you very much.Yes it works well. Just for new comers, i created tutorial on my blog here.

Thanks a lot for helping me in this subject.

Senthilchettyin ( 2013-04-01 10:54:10 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted
2

answered 2013-03-27 07:27:12 +0800

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

Hi Senthil,

The code below works well for me with ZK 6.5.0 CE

test.zul:

<?component name="imageLabel" extends="window" class="test.ImageLabel"?>
<zk>
    <div apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('test.CompositeTestVM')">
        <imageLabel buttons="save,cancel"
            onButtonsClick="@command('buttonsClick')" />
    </div> 
</zk>

CompositeTestVM.java

package test;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.event.ForwardEvent;
import org.zkoss.zul.Button;

public class CompositeTestVM {
    @Command
    public void buttonsClick (@ContextParam(ContextType.TRIGGER_EVENT) ForwardEvent event) {
        System.out.println("buttons click " + event.getData());
        System.out.println("buttons click " + event.getOrigin().getTarget());
        System.out.println("buttons click " + ((Button)event.getOrigin().getTarget()).getLabel());
    }
}

ImageLabel.zul

<zk>
    <window id="win" />
</zk>

ImageLabel.java

package test;

import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.ext.AfterCompose;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Button;
import org.zkoss.zul.Window;

public class ImageLabel extends Window implements AfterCompose {
    @Wire
    Window win;
    private String _buttons;
    public ImageLabel() {
        Executions.createComponents("ImageLabel.zul", this, null);
        Selectors.wireComponents(this, this, false);
        Selectors.wireEventListeners(this, this);
    }
    public void afterCompose() {
        System.out.println("afterCompose");
        updateButtons();
    }
    public void setButtons (String buttons) {
        _buttons = buttons;
    }
    public void updateButtons () {
        win.getChildren().clear();
        for (String btn : _buttons.split(",")) {
            Button button = new Button(btn.trim());
            button.addForward("onClick", this, "onButtonsClick", btn.trim());
            button.setParent(win);
        }
    }
}
link publish delete flag offensive edit

Comments

How i can define this component in Language Addon as explained in the following post http://books.zkoss.org/wiki/ZKDeveloper'sReference/UIComposing/CompositeComponent

Senthilchettyin ( 2013-04-01 12:58:26 +0800 )edit
0

answered 2013-04-01 13:25:08 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8
http://emrpms.blogspot.in...

Hi Benbai

Sorry to reopen this. I tried to define my new component in the language addon file as per this link

As per my example here, i created the following addon file

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

<language-addon> <addon-name>myaddon</addon-name>

<language-name>xul/html</language-name>
<component>
    <component-name>header</component-name>
    <extends>Div</extends>
    <component-class>org.zkoss.zul.Header</component-class>
</component>

</language-addon>

Then i add the reference in zk.xml file as follows

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

<zk> <device-config> <device-type>ajax</device-type> <timeout-uri>/timeout.zul</timeout-uri> </device-config>

<language-config>
    <addon-uri>/ZKAddon.xml</addon-uri>
</language-config>

</zk>

Now when run the index.zul file, it giving error such component definition not found. So where i am going wrong ?

link publish delete flag offensive edit
0

answered 2013-04-04 11:51:45 +0800

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

updated 2013-04-04 11:55:24 +0800

Where did you put your ZKAddon.xml?

Based on my previous post, it can be defined in lang-addon as follows:

  1. Create WEB-INF/my-addon.xml as below:

    <language-addon>
    <addon-name>myaddon</addon-name>
    <language-name>xul/html</language-name>
    <component>
        <component-name>imageLabel</component-name>
        <component-class>test.ImageLabel</component-class>
        <extends>window</extends>
    </component>
    </language-addon>
    
  2. Add it in zk.xml as below:

    <zk>
    <language-config>
        <addon-uri>/WEB-INF/my-addon.xml</addon-uri>
    </language-config>
    </zk>
    

then it should work

link publish delete flag offensive edit

Comments

Yes. It is working fine for me. actually it is lower case and upper case problem. Now i have resolved. <extends>Div</extends> it should be div only

Senthilchettyin ( 2013-04-07 14:34:51 +0800 )edit

Question tools

Follow
2 followers

RSS

Stats

Asked: 2013-03-04 11:31:33 +0800

Seen: 169 times

Last updated: Apr 04 '13

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