0 Replies Latest reply on Feb 13, 2012 9:48 PM by duoduoin

    style inheriting issue when module include a chart.

    duoduoin

      I meet a problem when migrate the application for flex 3.5 to flex 4.5. The char style cannot be apply correctly when set the style in application, it still use columnChart default style. But when I move the fx:Style declaration to ColumnchChartModule, the char style works. Could you help me to explain why the style inheriting is broken?

       

      Below is my test code:

       

      <?xml version="1.0"?>

      <!-- Simple example to demonstrate the PieChart control. -->

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     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%"/>

      </s:Application>

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

      <?xml version="1.0" encoding="utf-8"?>

      <s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"

                 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>

      </s:Module>