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-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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 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);
}
}
}
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 )editHi 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 ?
Where did you put your ZKAddon.xml?
Based on my previous post, it can be defined in lang-addon as follows:
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>
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
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 )editAsked: 2013-03-04 11:31:33 +0800
Seen: 173 times
Last updated: Apr 04 '13
Source code of page dosen't change when usinge an Include
How can i pass parameter to a composite component
EL in a forEach @command not working?
Different template for each grid row
Cardlayout animation is broken
Grid RowRender slow using 6.5.1 and sizable=true
setVisible(false), component will load or not
Any help please.... ?
Senthilchettyin ( 2013-03-05 10:10:08 +0800 )editAny help please.... ?
Senthilchettyin ( 2013-03-08 06:05:03 +0800 )editNow 6.5.2 is released. is this feature available ?
Senthilchettyin ( 2013-03-26 10:05:53 +0800 )editHi 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