0

Showing a component depending on a boolean expression

asked 2010-11-04 04:48:16 +0800

Konsumierer gravatar image Konsumierer
33

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.

delete flag offensive retag edit

6 Replies

Sort by » oldest newest

answered 2010-11-04 05:23:36 +0800

Bobzk gravatar image Bobzk
428 1 5

<label value="is shown" visible="true" />

or

<label value="is shown" visible="false" />

but having said the above, I have never tried it on a "label" only a "window"

link publish delete flag offensive edit

answered 2010-11-04 09:27:20 +0800

Konsumierer gravatar image Konsumierer
33

updated 2010-11-04 10:05:18 +0800

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}" />

link publish delete flag offensive edit

answered 2010-11-04 10:02:48 +0800

twiegand gravatar image twiegand
1807 3

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

link publish delete flag offensive edit

answered 2010-11-04 10:09:41 +0800

Konsumierer gravatar image Konsumierer
33

twiegand,

thanks for your reply. The way you do it, I know. But I don´t like it.

link publish delete flag offensive edit

answered 2010-11-04 10:58:39 +0800

robertpic71 gravatar image robertpic71
1275 1

updated 2010-11-04 10:59:15 +0800

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

link publish delete flag offensive edit

answered 2010-11-05 03:34:38 +0800

Konsumierer gravatar image Konsumierer
33

updated 2010-11-05 03:36:32 +0800

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?

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-11-04 04:48:16 +0800

Seen: 426 times

Last updated: Nov 05 '10

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