开发者

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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜