3 Replies Latest reply on Jun 16, 2011 4:01 AM by eprevot123

    How to add a visual component in a child component to it's parent?

    agile116@hotmail.com

      Hi All,

       

      I have two mxml files , GenericView.mxml and GenericChartView.mxml. GenericChartView.mxml is a  child of GenericView.mxml. (It starts with <local:GenericView>). In GenericChartView.mxml, it defines a chart component. When the state is "chartState", we want to add the chart  component to a component in it's parent. In flex  3, we use the following state definition to do it.

      <mx:State id="chartState" name="chartState">
                  <mx:AddChild relativeTo="{gridDividedBox1}">

                     <charts:GenericChart id="chart" width="100%" height="100%"/>

                  </mx:AddChild>
                  <mx:RemoveChild target="{dgMainGrid}"/>

      </mx:State>

       

      gridDivideBox1 is a mx:VDividedBox component in GenericView.mxml.

      <mx:VDividedBox  verticalGap="{this.defaultVDividedBoxGap}" id="gridDividedBox1" width="{mainContent.width}" height="100%"
                          horizontalScrollPolicy="off" verticalScrollPolicy="off"/>

       

      But how can we do it in flex 4 ?

        • 1. Re: How to add a visual component in a child component to it's parent?
          EvyatarBH Level 3

          Check the child component's properties "parentDocument", "outerDocument", "owner"...

          At least one of them should be a reference to what (I think) you need.

          • 2. Re: How to add a visual component in a child component to it's parent?
            agile116@hotmail.com Level 1

            But if I put the visual component outside of mx:State in GenericChartView.mxml, I got "Error: Multiple sets of visual children have been specified for this component (base component definition and derived component definition)."

             

            Please see my code snippet:

            GenericView.mxml

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

            <local:GenericModule
                xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"/>

                         <mx:VDividedBox  verticalGap="{this.defaultVDividedBoxGap}" id="gridDividedBox1" width="{mainContent.width}" height="100%"
                                horizontalScrollPolicy="off" verticalScrollPolicy="off">
                              
                                <advgrid:CFIAdvDataGrid width="{mainContent.width}" height="100%"
                                    id="dgMainGrid" headerWordWrap="true" excludeFrom="calendarState" />
                                   
                        </mx:VDividedBox>

            </local:GenericModule>

             

            GenericChartView.mxml

            <?xml version="1.0" encoding="utf-8"?>
            <local:GenericView
                xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"/>

               <local:states>
                    <mx:State id="chartState" name="chartState">
                        <mx:AddChild relativeTo="{gridDividedBox1}">
                            <charts:GenericChart id="chart" width="100%" height="100%" />
                        </mx:AddChild>
                        <mx:RemoveChild target="{dgMainGrid}"/>
                    </mx:State>
                    <mx:State id="treeDataGridState" name="treeDataGridState">
                    </mx:State>
                </local:states>

            </local:GenericView>

             

            See the <local:State/> section in GenericChartView.mxml. It is working in flex 3.5 to add chart to gridDividedBox1 in GenericView.mxml and remove dgMainGrid in GenericView.mxml as well. But in flex 4, I'm not sure how to do this by using the new state grammar, or any other way to do the same thing?

            • 3. Re: How to add a visual component in a child component to it's parent?
              eprevot123 Level 2

              I'm not sure to understand your problem, but I think you should do :

               

              <s:states>

                   <s:State id="charState" name="charState"/>

                   <s:State .... />

              </s:states>

               

              <mx:VDividedBox>

                   <charts:GenericChart includeIn="chartState"/>

              </mx:VDividedBox>