I'm trying to add a set of custom styles to a component, following the patten 
in the developers guide, unfortunately it only seems to work if I use a 
styleName to set the new styles - trying to set them as defaults for the 
class doesn't.

Take the attached two files, drop them in a directory and compile them. I've 
tried 2.0.1 hf 1, h3 and 3 beta 2 all with the same result:
The first <TestStyleComponent> gets the defaults hard coded into it in 
classConstruct() rather than those given in the TestStyleComponent style.
The second <TestStyleComponent> correctly gets the styles from the .foo style, 
however.

Can anyone see why the first one doesn't work ?

TestStyle.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; 
        xmlns="*"  
        backgroundColor="#EDEBE0"
        width="100%" height="100%" >

        
        <mx:Style>
                TestStyleComponent{
                        /*this doesn't work
                        */
                        fooBackGround:#00ffff;                                  
        
                        dayNamesFontSize:"24";
                        dayNamesFontColor:#ff00ff;      
                }
                .foo {
                        fooBackGround:#ff00ff;                                  
                
                        dayNamesFontSize:"36";                  
                }
        </mx:Style>
        
        <TestStyleComponent/>
        
        <TestStyleComponent styleName="foo" />

</mx:Application>


TestStyleComponent.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; 
        width="100%" height="100%">
        <mx:Metadata>
                /**  
                * the background color of the day name text - this does not 
work when set in 
CSS
                * do in MXML instead.
                */
                
[Style(name="fooBackGround",type="uint",format="Color",inherit="no")]
                /**  
                * the color of the day name text
                */
                
[Style(name="dayNamesFontColor",type="uint",format="Color",inherit="no")]
                /**  
                * the font size of the day name text
                */
                
[Style(name="dayNamesFontSize",type="Number",format="Length",inherit="no")]
        </mx:Metadata>
        <mx:Script>
                <![CDATA[
                import mx.controls.TileList;
                import mx.styles.*;
                
                import flash.utils.getDefinitionByName;
                
                // ---------------------------------- 
                // custom styles
                // ----------------------------------
                private var bFooBackGroundChanged:Boolean = true;
        private var bDayNamesFontColorChanged:Boolean = true;
        private var bDayNamesFontSizeChanged:Boolean = true;
                
                                // Define a static variable.
        private static var classConstructed:Boolean = classConstruct();
    
        // Define a static method.
        private static function classConstruct():Boolean {
            // If there is no CSS definition for our style, 
            // then create one and set the default value.

            if (!StyleManager.getStyleDeclaration("TestStyleComponent"))
            {
                var newStyleDeclaration:CSSStyleDeclaration = 
                    new CSSStyleDeclaration();
                newStyleDeclaration.setStyle("dayNamesFontSize", 12);
                
                newStyleDeclaration.setStyle("dayNamesFontColor", 0x000000);
                    
                newStyleDeclaration.setStyle("fooBackGround", 0xffffff);
                
                StyleManager.setStyleDeclaration("TestStyleComponent", 
newStyleDeclaration, true);
            }
            return true;
        }
                
                override public function styleChanged(styleProp:String):void {
            super.styleChanged(styleProp);

            // Check to see if style changed. 
            if (styleProp=="dayNamesFontSize") 
            {
                bDayNamesFontSizeChanged=true; 
                invalidateDisplayList();
                return;
            }
            if (styleProp=="dayNamesFontColor") 
            {
                bDayNamesFontColorChanged=true; 
                invalidateDisplayList();
                return;
            }
            if (styleProp=="fooBackGround") 
            {
                bFooBackGroundChanged=true; 
                invalidateDisplayList();
                return;
            }
        }
        
        override protected function updateDisplayList(unscaledWidth:Number,
                unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            // Check to see if style changed.and apply it
            if (bDayNamesFontSizeChanged==true){
                t.setStyle('fontSize',getStyle('dayNamesFontSize'));
                bDayNamesFontSizeChanged=false;
            }
            if (bDayNamesFontColorChanged==true){
                var x=getStyle('dayNamesFontColor');
                t.setStyle('color',getStyle('dayNamesFontColor'));
                bDayNamesFontColorChanged=false;
            }
            if (bFooBackGroundChanged==true){
                var xx=getStyle('fooBackGround');
                t.setStyle('backgroundColor',getStyle('fooBackGround'));
                bFooBackGroundChanged=false;
            }
        }
                
                ]]>
        </mx:Script>
        
        <mx:HBox id="t" width="100%">           
                <mx:Repeater width="100%" 
                        id="titlesContainer">
                        <mx:dataProvider>
                                <mx:Array>
                                         <mx:Object label="Monday"/>
                                         <mx:Object label="Tuesday"/>
                                         <mx:Object label="Wednesday"/>
                                         <mx:Object label="Thursday"/>
                                         <mx:Object label="Friday"/>
                                         <mx:Object label="Saturday"/>
                                         <mx:Object label="Sunday"/>
                                </mx:Array>
                        </mx:dataProvider>
                        <mx:Text text="{titlesContainer.currentItem.label}"/>
                </mx:Repeater>          
        </mx:HBox>
         
        <mx:TileList columnCount="7" id="monthView"
                width="100%" height="100%"/>
</mx:VBox>      
-- 
Tom Chiverton

****************************************************

This email is sent for and on behalf of Halliwells LLP.

Halliwells LLP is a limited liability partnership registered in England and 
Wales under registered number OC307980 whose registered office address is at St 
James's Court Brown Street Manchester M2 2JF.  A list of members is available 
for inspection at the registered office.  Any reference to a partner in 
relation to Halliwells LLP means a member of Halliwells LLP.  Regulated by The 
Solicitors Regulation Authority.

CONFIDENTIALITY

This email is intended only for the use of the addressee named above and may be 
confidential or legally privileged.  If you are not the addressee you must not 
read it and must not use any information contained in nor copy it nor inform 
any person other than Halliwells LLP or the addressee of its existence or 
contents.  If you have received this email in error please delete it and notify 
Halliwells LLP IT Department on 0870 365 8008.

For more information about Halliwells LLP visit www.halliwells.com.

Reply via email to