-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi there,
maybe this is a stupid question, but I cannot find anything in the documentation.
I want to show a component depending on the check-state of a Checkbox.
<checkbox id="chkTiming" label="show?" />
<label value="is shown" visible="WHAT HERE?" />
Is there a way to provide an expression like @{chkTiming.checked} that updates automatically?
Of course I could write some script to manually set the visible attribute, but I´m used to this mechanism from Flex and Tapestry and I think it´s quiet straightforward and less error-prone. Especially when you have multiple nested checkboxes.
Was that a joke? ;-)
I want to show the Label depending on the check-state of the Checkbox. I know of course that the visible attribute has to be boolean.
What i want to know is: is there a way to automatically update this boolean value through binding, so that when the checked attribute of the Checkbox changes, the visible attribute of the Label updates automatically, without writing any code.
I want it more or less to look like this, how it is possible in other GUI Frameworks:
<checkbox id="chkTiming" label="show?" /> <label value="is shown" visible="@{chkTiming.checked}" />
Konsumierer,
Perhaps the following will give you an idea:
<zk> <checkbox> <attribute name="onCheck"> theLabel.setVisible(!theLabel.isVisible()); </attribute> </checkbox> <label id="theLabel" visible="false" value="Now you see me" /> </zk>
Hope that helps.
Regards,
Todd
twiegand,
thanks for your reply. The way you do it, I know. But I don´t like it.
There are 2 ways:
Variant 1: add an extra load for the databinder
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./mywin"?>
<window id="mywin" border="none">
<checkbox id="chkTiming" label="show?" />
<label value="is shown" visible="@{chkTiming.checked, load-when=chkTiming.onClick}" />
</window>
Variant 2: the smarter way: use databinding for both components
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./mywin"?>
<window id="mywin" border="none">
<zscript>
boolean check = true;
</zscript>
<checkbox checked="@{check}" id="chkTiming" label="show?" />
<label value="is shown" visible="@{check}" />
</window>
In the most cases, there is need for the controller/model to know the state of the check - so it is no extra coding.
<checkbox checked="@{model.person.married}" label="Married?" />
<textbox visible="@{model.person.married}" value="@{model.person.marriagePartnerFirstName}">
...
/Robert
Thanks, robert!
That is more or less what I was looking for. It works for the Checkbox.
Now I tried to show a component depending on the value of a textbox:
<zscript>
boolean nameWritten = false;
public void nameChanging(Event event) {
InputEvent ie = (InputEvent) event;
nameWritten = ie.getValue().length() > 0;
}
</zscript>
<grid>
<rows>
<row>
Name
<textbox id="visualname" width="150px" hflex="1" onChanging="nameChanging(event)">
</textbox>
</row>
<row visible="@{nameWritten}">
Upload file
<hbox>
<button id="upload" label="Chose file"
upload="true,maxsize=25000,native" />
</hbox>
</row>
</rows>
</grid>
Do you have an idea, why this doesn´t work?
Asked: 2010-11-04 04:48:16 +0800
Seen: 429 times
Last updated: Nov 05 '10