Force component to redraw it's focus
I'm having one more "How do I" question :) Suppose I have a component and want to change it's focus color at runtime. Here's an example for you (I've excluded any buttons and such to prevent component from losing it's focus, cause in that case it changes it's color perfectly):
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script><![CDATA[
private function init():void {
//putting focus inside needed component
focusTest.setFocus();
focusTest.setSelection(0, 0);
// creates a new Timer
var minuteTimer:Timer = new Timer(1000, 30);
// designates listeners for the interval and completion events
minuteTimer.addEventListener(TimerEvent.TIMER, onTick);
minuteTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
// starts the timer ticking
minuteTimer.start();
}
public function onTick(event:TimerEvent):void {
// displays the tick count so far
trace("tick " + event.target.currentCount);
if (focusTest.getStyle('focusColor') != 0x008CEA) {
focusTest.setStyle('focusColor', 0x008CEA);
} else {
focusTest.setStyle('focusColor', 0xFF0000);
}
//Update everything somehow :)
}
public function onTimerComplete(event:TimerEvent):void {
trace("Time's Up!");
}
]]></mx:Script>
<mx:TextInput id="f开发者_JAVA技巧ocusTest"/>
</mx:Application>
What do I have: The timer is ticking. The property is changing (you can see that, e.g. while switching tabs in your browser .. just catch the right state, when the color is changed).
What do I want: How to make this focus to be redrawn without magic (I've tried all the methods, starting with "validate
", I've tried calling updateDisplayList()
on entire application, I've tried to call styleChanged
... aggrrh .. I'm out of ideas :)).
Any thoughts?
Any help, as usual, is greatly appreciated :)
If you use themeColor
and focusTest.drawColor(true)
it works fine. You have to use drawFocus() for it to recolor, and I dont think focusColor is a Flex 3 setStyle attribute (only used in Flex 4).
Tricky to spot, because if you use incorrect setStyle/getStyle attributes Flex does not throw any errors, it just ignores them!
if (focusTest.getStyle('themeColor') != 0x008CEA) {
focusTest.setStyle('themeColor', 0x008CEA);
} else {
focusTest.setStyle('themeColor', 0xFF0000);
}
focusTest.drawFocus(true);
Full Code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script><![CDATA[
private function init():void {
//putting focus inside needed component
focusTest.setFocus();
focusTest.setSelection(0, 0);
// creates a new Timer
var minuteTimer:Timer = new Timer(1000, 30);
// designates listeners for the interval and completion events
minuteTimer.addEventListener(TimerEvent.TIMER, onTick);
minuteTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
// starts the timer ticking
minuteTimer.start();
}
public function onTick(event:TimerEvent):void {
// displays the tick count so far
// displays the tick count so far
trace("tick " + event.target.currentCount);
if (focusTest.getStyle('themeColor') != 0x008CEA) {
focusTest.setStyle('themeColor', 0x008CEA);
} else {
focusTest.setStyle('themeColor', 0xFF0000);
}
focusTest.drawFocus(true);
//Update everything somehow :)
}
public function onTimerComplete(event:TimerEvent):void {
trace("Time's Up!");
}
]]></mx:Script>
<mx:TextInput id="focusTest" width="222"/>
</mx:Application>
精彩评论