0

Can ZK not setStyle color of Label from black, to yellow, to black, to yellow?

asked 2010-10-13 22:42:15 +0800

Tessla gravatar image Tessla
330 2

I want to be able to set the style of a label from black, to yellow, to black, to yellow. I have not seen any means of doing this. The timer component does not appear to be appropriate for something like this as I want it so that when a user clicks on a button, then the label changes color from black to yellow, black to yellow.

What is the solution to this? Are there any?

delete flag offensive retag edit

11 Replies

Sort by ยป oldest newest

answered 2010-10-14 05:13:16 +0800

doumdoum gravatar image doumdoum
90 1

Hmm well, i don't see the problem. Use an autowirecomposer to get a reference on your label, add a onClick handler on the button and set the new style of the label based on whatever you want ( the style string that contain black or yellow, a boolean that indicate the state of label,...).

Check this if you don't know autowirecomposer .

link publish delete flag offensive edit

answered 2010-10-14 06:26:39 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Hi Tessla,
use component's setStyle() API to change style of component
Try this

<zk>
<window title="My First window" border="normal" height="150px" width="200px"> 
<label id="myLbl" value="Some Label">
</label>
<button id="myBtn" label="Change Color"> <attribute name="onClick">
<![CDATA[
    myLbl.setStyle("background:red");
]]>
</attribute>
</button>
</window>
</zk>

link publish delete flag offensive edit

answered 2010-10-14 08:42:03 +0800

Tessla gravatar image Tessla
330 2

updated 2010-10-14 08:45:58 +0800

The problem is that only changes the color once. I want to make it so that when the user clicks on the button, the user can visibly see the background turn red, after one second, turn a different color, after one second, turn back to red, after one second, etc. So that it is like a flashing indicator. From what I can see so for this does not appear to be possible?

In essense, Im trying to see if ZK can do this:

myLbl.setStyle("background:red");
-wait one second-
myLbl.setStyle("background:yellow");
-wait one second-
myLbl.setStyle("background:red");

(stops at red)

link publish delete flag offensive edit

answered 2010-10-14 10:36:39 +0800

mjablonski gravatar image mjablonski
1284 3 5
http://www.jease.org/

updated 2010-10-14 10:41:23 +0800

Hi,

you can use JQuery-Animations:

http://pastebin.com/uVYbQQPr

Needed to post the code to Pastebin because this forum messed up with the code...

Cheers, Maik

link publish delete flag offensive edit

answered 2010-10-17 00:43:39 +0800

Tessla gravatar image Tessla
330 2

What is the purpose of having the "xmlns:w="http://www.zkoss.org/2005/zk/client" and w:? It appears that the jquery doesnt work if I have already have a stylesheet defined for label.

Is there any alternative solution to this besides jquery?

link publish delete flag offensive edit

answered 2010-10-17 21:51:05 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Hi Tessla,
>>What is the purpose of having the "xmlns:w="http://www.zkoss.org/2005/zk/client" and w:?
It is explained in our client-side programming smalltalk here
>>It appears that the jquery doesnt work if I have already have a stylesheet defined for label.
I doubt that. Can you provide your sample code to reproduce this problem?
>>Is there any alternative solution to this besides jquery?
If not jquery you will have to code it in pure javascript and worry about your code browser compatibility. Otherwise using Timer component is your best bet.

link publish delete flag offensive edit

answered 2010-10-18 11:16:55 +0800

Tessla gravatar image Tessla
330 2

updated 2010-10-18 15:58:25 +0800

Using mjablonski's code snippet, how would I make it into a function? I would like to be able to write it something like this:

<zk>
<label id="thelabel" xmlns:w="http://www.zkoss.org/2005/zk/client" value="Please click me" w:onClick="executeChange()"/>
<zscript>
executeChange() {
jq(this.$f('labelid'))
.animate({'':''}, 500, function() <(this).css({color>)
.animate({'':''}, 500, function() <(this).css({color>)
.animate({'':''}, 500, function() <(this).css({color>)
})})});
}
</zscript>
</zk>

link publish delete flag offensive edit

answered 2010-10-19 05:27:17 +0800

RyanWu gravatar image RyanWu
533 2
about.me/flyworld

you almost did that

<zk>
<label id="thelabel" xmlns:w="http://www.zkoss.org/2005/zk/client" value="Please click me" w:onClick="executeChange()"/>
<script>
function executeChange() {
jq(this.$f('labelid'))
.animate({'':''}, 500, function() <(this).css({color>)
.animate({'':''}, 500, function() <(this).css({color>)
.animate({'':''}, 500, function() <(this).css({color>)
})})}); 
}
</script>
</zk>

link publish delete flag offensive edit

answered 2010-10-19 08:51:54 +0800

Tessla gravatar image Tessla
330 2

Getting a problem with the above code, it is what I want, but using the example says:

org.xml.sax.SAXParseException: The content of elements must consist of well-formed character data or markup.

link publish delete flag offensive edit

answered 2010-10-19 22:31:53 +0800

Tessla gravatar image Tessla
330 2

RyanWu? Someone?

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-10-13 22:42:15 +0800

Seen: 1,330 times

Last updated: Oct 19 '10

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