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

Question

我在将 Flex 3.5 的应用程序迁移到 Flex 4.5 时遇到问题。应用程序中设置样式时，char样式无法正确应用，仍使用columnChart默认样式。但是当我将 fx:Style 声明移动到 ColumnchChartModule 时，字符样式就可以工作。有人可以帮我解释一下为什么样式继承被破坏了吗？

顺便说一句：当我在应用程序中定义按钮样式时，按钮样式似乎有效。

下面是我的测试代码：

           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;
}