当模块包含图表时，Flex样式继承问题

Question

我在将应用程序从flex 3.5迁移到flex 4.5时遇到了一个问题。在应用程序中设置样式时，无法正确应用字符样式，它仍然使用columnChart默认样式。但是，当我将fx:Style声明移到ColumnchChartModule时，char样式就起作用了。有人能帮我解释一下为什么风格继承被打破了吗？

BTW：当我在应用程序中定义按钮样式时，按钮样式似乎起作用了。

下面是我的测试代码：

           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .c01 {
        fill: #0D7393;
        areaFill: #0D7393;
    }

    .c02 {
        fill: #A1B26B;
        areaFill: #A1B26B;
    }
    .c03 {
        fill: #C4843D;
        areaFill: #C4843D;
    }
    .c04 {
        fill: #5A4736;
        areaFill: #5A4736;
    }
    .c05 {
        fill: #994C34;
        areaFill: #994C34;
    }
    .c06 {
        fill: #649DA2;
        areaFill: #649DA2;
    }
    .c07 {
        fill: #D66D2B;
        areaFill: #D66D2B;
    }
    .c08 {
        fill: #C8E8B0;
        areaFill: #C8E8B0;
    }
    .c09 {
        fill: #6BB9D3;
        areaFill: #6BB9D3;
    }

    mx|ColumnChart {
        chartSeriesStyles: c01, c02, c03, c04, c05, c06, c07, c08, c09;
    }

    s|Button{
        color: red;
    }
</fx:Style>
<s:layout>
    <s:VerticalLayout />
</s:layout>
<mx:ModuleLoader url="ColumnChartModule.swf" width="100%" height="100%"/>

----------------------------------------ColumnChartModule.mxml

       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Script><![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Revenue:1200, Expenses:500},
            {Month:"Feb", Revenue:1200, Expenses:550},
            {Month:"Mar", Revenue:1240, Expenses:475},
            {Month:"Apr", Revenue:1300, Expenses:600},
            {Month:"May", Revenue:1420, Expenses:575},
            {Month:"Jun", Revenue:1400, Expenses:600},
            {Month:"Jul", Revenue:1500, Expenses:600},
            {Month:"Aug", Revenue:1600, Expenses:750},
            {Month:"Sep", Revenue:1600, Expenses:735},
            {Month:"Oct", Revenue:1750, Expenses:750},
            {Month:"Nov", Revenue:1800, Expenses:800},
            {Month:"Dec", Revenue:2000, Expenses:850}
        ]);

        private function onClick(): void{
            var columnChart:CSSStyleDeclaration = this.styleManager.getStyleDeclaration("mx|ColumnChart");
            var columnChart1:CSSStyleDeclaration = this.styleManager.getMergedStyleDeclaration("mx|ColumnChart");
            var columnChart2:CSSStyleDeclaration = this.styleManager.getStyleDeclaration("s|Button");

            trace(columnChart);
            trace(columnChart1);
            trace(columnChart2);
        }
    ]]></fx:Script>

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<s:Button label="GetChartStyle" click="onClick()" />
<s:Panel title="Floating Column Chart">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <mx:ColumnChart
        dataProvider="{expenses}"
        showDataTips="true">
        <mx:horizontalAxis>
            <mx:CategoryAxis
                dataProvider="{expenses}"
                categoryField="Month"/>
        </mx:horizontalAxis>
        <mx:series>
            <mx:ColumnSeries
                yField="Revenue"
                displayName="Revenue"/>
            <mx:ColumnSeries
                yField="Expenses"
                displayName="Expenses"/>
        </mx:series>
    </mx:ColumnChart>
</s:Panel>

Answer 1

在您的模块（即MyCustomModule.mxml）上放入此重写代码。

override public function get moduleFactory():IFlexModuleFactory{
 return FlexGlobals.topLevelApplication.moduleFactory;
}