[flexcoders] Changing color of the PopUpButton

[Alexander Farber]

Hello,

I have a working code for displaying red and black entries
in the list of a PopUpButton (depending on the card suit).

However I'm missing the minor last touch: when the user
selects a red entry in the list and I assign its value to the
PopUpButton's label, I don't know how to change label's color.

I've tried several things and searched web...

Here is my code, please try it out and you'll see the problem -

Thank you
Alex

--------------TestCase.mxml----------------

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; creationPolicy="all">
        <mx:Style>
                @font-face {
                        src:url("C:\\WINDOWS\\Fonts\\times.ttf");
                        fontFamily: myFont;
                        unicodeRange:
                                U+0020-U+0040, /* Punctuation, Numbers */
                                U+0041-U+005A, /* Upper-Case A-Z */
                                U+005B-U+0060, /* Punctuation and Symbols */
                                U+0061-U+007A, /* Lower-Case a-z */
                                U+007B-U+007E, /* Punctuation and Symbols */
                                U+0410-U+0451, /* cyrillic */
                                U+2660-U+266B; /* card suits */
                }
                List, Menu, CheckBox, Label, Button, PopUpButton {
                        fontFamily: myFont;
                        fontSize: 16;
                }
        </mx:Style>
        
        <mx:Script>
                <![CDATA[
                        import mx.controls.*;
                        import mx.events.*;

                        private var menu:Menu;
                        
                        private function createMenu():void {
                                var bids:Array = [{label: 'Pass'}];
                                for (var i:uint = 6; i <= 10; i++)
                                        for (var j:uint = 0; j < 5; j++)
                                                bids.unshift({label: i+'♠♣♦♥ 
'.charAt(j%5)});
                                
                                menu = new Menu();
                                menu.dataProvider = bids;
                                menu.itemRenderer = new 
ClassFactory(MyRenderer);
                                menu.selectedIndex = menu.dataProvider.length - 
1;
                                menu.addEventListener('itemClick', 
itemClickHandler);
                                
                                pub.popUp = menu;
                                pub.label = 
menu.dataProvider[menu.selectedIndex].label;
                        }
                        
                        private function itemClickHandler(event:MenuEvent):void 
{
                                var label:String = event.item.label;
                                trace("Selected: " + label);
                                pub.label = label;
                                // XXX how do you make the label red?
                                pub.close();
                                menu.selectedIndex = event.index;
                        }
                ]]>
        </mx:Script>
        
        <mx:Canvas width="100%" height="100%">
        </mx:Canvas>

        <mx:ApplicationControlBar width="100%">
                <mx:Spacer width="100%"/>
                <mx:CheckBox id="auto" label="Auto:"/>
                <mx:Button id="left" label="&lt;&lt;"/>
                <mx:PopUpButton id="pub" creationComplete="createMenu();" 
width="60"/>
                <mx:Button id="right" label="&gt;&gt;"/>
        </mx:ApplicationControlBar>
</mx:Application>

-------------MyRenderer.mxml ------------

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml";
verticalScrollPolicy="off" horizontalScrollPolicy="off"
implements="mx.controls.menuClasses.IMenuItemRenderer"
width="100%" height="100%">
        <mx:Script>
                <![CDATA[
                        import mx.events.*;
                        import mx.controls.*;

                        [Bindable]
                        private var color:uint;
                        
                        override public function set data(value:Object):void {
                                if(value != null) {
                                        super.data = value;
                                        lb.text = String(value.label);
                                        color = (lb.text.indexOf('♥') != -1 ||
                                                     lb.text.indexOf('♦') != 
-1) ? 0xFF0000 : 0x000000;
                                }
                                dispatchEvent(new 
FlexEvent(FlexEvent.DATA_CHANGE));
                        }
                        
                        // implement IMenuItemRenderer interface
                        private var _menu:Menu;
                        public function get menu():Menu { return _menu; }
                        public function set menu(value:Menu):void { _menu = 
value; }
                        public function get measuredBranchIconWidth():Number { 
return 0;}
                        public function get measuredTypeIconWidth():Number { 
return 0;}
                        public function get measuredIconWidth():Number { return 
0;}

                ]]>
        </mx:Script>
        <mx:Label id="lb" color="{color}" width="60"/>
</mx:Canvas>