dynamically creating ids of macro components using arguments - zk

Question

I am trying to create two grids which perform exactly the same function without having to duplicate the code of the code for the grid twice. So, I decided to use a macro component. But, I am not sure how to create the ids of the components in the macro component dynamically. The code does the following:
The first grid(west region) has two rows with two textboxes. If I add "hello" to the first textbox in this grid then the value of the second textbox is also set to "hello".
The second grid(center region) has two rows with two textboxes. If I add "world" to the first textbox in this grid then the value of the second textbox is also set to "world"
The values of both textboxes in the first grid are now same i.e. "hello"
The values of both textboxes in the second grid are now same i.e. "world"
I created a zul file in which I use a macro component like so:
<?component name="mygrid1" macro-uri="grid1.zul" inline="true"?>
<zk>
<vbox hflex="1">
<borderlayout height="500px" width="500px">
<west size="50%">
<mygrid1 id="grid1" index="1" />
</west>
<center>
<mygrid1 id="grid2" index="2" />
</center>
</borderlayout>
</vbox>
</zk>
<zscript>
fillInDuplicateBox(String value, Textbox duplicateBox) {
if (!"".contentEquals(duplicateBox.value))
return;
duplicateBox.value = value;
}
</zscript>
</window>
Macro component is shown below:
<zk>
<vbox hflex="1">
<grid width="300px">
<rows>
<row> Box 1: <textbox id="${concat("newBox", arg.index)}" onChange="fillInDuplicateBox(${concat("newBox, arg.index)}.value, ${concat("duplicateBox", arg.index)})" hflex="1" /></row>
<row> Box 2: <textbox id="${concat("duplicateBox", arg.index)}" hflex="1" /></row>
</rows>
</grid>
</vbox>
</zk>
I also tried the following code to create the macro component
<zk>
<vbox hflex="1">
<grid width="300px">
<rows>
<row> Box 1: <textbox id="newBox${arg.index}" onChange="fillInDuplicateBox(newBox${arg.index}.value, duplicateBox${arg.index})" hflex="1" /></row>
<row> Box 2: <textbox id="duplicateBox${arg.index}" hflex="1" /></row>
</rows>
</grid>
</vbox>
</zk>
None of this works. I am not sure how to dynamically create the ids of the components in the macro component. The textbox ids of the first grid must be "newBox1", "duplicateBox1" and the textbox ids of the second grid must be "newBox2", "duplicateBox2"
Please point out if there is a better way of achieving this task.
Thanks,
Sony

Answer 1

I am not sure if it is possible to dynamically create ids like that, but I am pretty certain it would be better to avoid it. There are better ways to do this by avoiding the id problem altogether and to use data binding or event handling instead. Your example indicates the main purpose for each grid is to copy the value of one Textbox to a different Textbox - I imagine there is something bigger you are trying to achieve so let us know if this answer leads you to what you need or not.
I have simplified and expanded your sample to give two examples, the first uses the onChanging to immediately copy as you type. The second pair of boxes uses databinding.
<?component name="mygrid1" macro-uri="/grid1.zul" ?>
<zk>
<window>
<vbox hflex="1">
<mygrid1 id="grid1" myGridTitle="First" />
<mygrid1 id="grid2" myGridTitle="Another" />
</vbox>
</window>
</zk>
Here is the macro component in grid1.zul:
<zk>
<zscript><![CDATA[
String myBoundString = "initial value";
]]></zscript>
<vbox hflex="1">
<grid>
<rows>
<row>
<hbox><label value="${arg.myGridTitle}" /> Source</hbox>
<textbox id="originalText" hflex="1" onChanging="duplicateText.value = event.value" />
</row>
<row>
<hbox><label value="${arg.myGridTitle}" /> Source copies here:</hbox>
<textbox id="duplicateText" hflex="1" />
</row>
<row>
Bound to myBoundString:
<textbox id="boundText1" value="#{myBoundString}" hflex="1" />
</row>
<row>
Bound to boundText1:
<textbox id="boundText2" value="#{boundText1.value, load-when=boundText1.onChange}" hflex="1" />
</row>
</rows>
</grid>
</vbox>
</zk>
In the databinding example, you have to change "intial value" and then tab away before the binder updates boundText2. Also notice that the TextBoxes do have ids (boundText1 and boundText2) but that has no impact on achieving the expected functionality in multiple instances of the macro component.