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="focusTest"/>
</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 :)

回答1:

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>

来源：https://stackoverflow.com/questions/5405881/force-component-to-redraw-its-focus

标签

apache-flex

focus

redraw