Revision history [back]

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

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

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