1 Reply Latest reply on Dec 1, 2011 10:17 AM by Flex harUI

    document, parentDocument and parent

    like_it

      Hi All ,

       

      I have a basic question regarding flex regarding document, parentDocument and parent.

       

      Lets assume we have following 3 mxml files

      1)  ParentApplication.mxml

       

      2) Child1.mxml

       

       

       

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

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

                   xmlns:s="library://ns.adobe.com/flex/spark"

                   creationComplete="group1_creationCompleteHandler(event)"

                   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

            <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

            <fx:Script>

                  <![CDATA[

                        import mx.events.FlexEvent;

       

                        protected function group1_creationCompleteHandler(event:FlexEvent):void

                        {

                              trace('Hi1');

                        }

       

                  ]]>

            </fx:Script>     

      </s:Group>

       

      3) Child2.mxml

       

      As shown above child2.mxml never changes, so I would be changing only the parentapplication.mxml and child1.mxml as below

       

      Scenario 1:

       

      In this case, we would load child2.mxml  from child1.mxml directly.

       

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

      <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" minWidth="955" minHeight="600" xmlns:parentDomainExample="parentDomainExample.*">

            <fx:Script>

                  <![CDATA[

                        import mx.core.IVisualElement;

                        import mx.events.FlexEvent;

       

                       

       

                  ]]>

            </fx:Script>

            <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

            <parentDomainExample:Child1 id="hi"/>

      </s:Application>

       

      1) ParentApplication.mxml

       

       

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

      <s:VGroup 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="400" height="300" xmlns:parentDomainExample="parentDomainExample.*">

       

            <fx:Script>

                  <![CDATA[

                        import mx.events.FlexEvent;

                       

                        import spark.components.Button;

                       

       

                  ]]>

            </fx:Script>

       

            <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

            <parentDomainExample:Child2/>

           

           

      </s:VGroup>

       

      2) Child1.mxml

       

      In this case, if we inspect the child2’s object in child1.mxml (I have put a debug point in the creation complete of child2.mxml)

       

      1. this.parent= parentDomainExample.Child1 (@857c0a1)
      2. this.parentDocument = parentDomainExample.Child1 (@857c0a1)          
      3. this.document= parentDomainExample.Child1 (@857c0a1)         

       

       

      Scenario 2:

      In this case, we would load child2.mxml dynamically in child1.mxml from parentapplication.mxml

       

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

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

                           xmlns:s="library://ns.adobe.com/flex/spark"

      creationComplete="application1_creationCompleteHandler(event)"

                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:parentDomainExample="parentDomainExample.*">

            <fx:Script>

                  <![CDATA[

                        import mx.core.IVisualElement;

                        import mx.events.FlexEvent;

       

                        protected function application1_creationCompleteHandler(event:FlexEvent):void

                        {

                              var o:IVisualElement=new Child2();

                              hi.addElement(o);

                              trace('hi');

                        }

       

                  ]]>

            </fx:Script>

            <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

            <parentDomainExample:Child1 id="hi"/>

      </s:Application>

       

       

      1) ParentApplication.mxml

       

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

      <s:VGroup 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="400" height="300" xmlns:parentDomainExample="parentDomainExample.*">

       

            <fx:Script>

                  <![CDATA[

                        import mx.events.FlexEvent;

                       

                        import spark.components.Button;

                       

       

                  ]]>

            </fx:Script>

       

            <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

           

           

      </s:VGroup>

       

      2) Child1.mxml

       

      In this case, if we inspect the child2’s object in child1.mxml (I have put a debug point in the creation complete of child2.mxml)

       

      1. this.parent = parentDomainExample.Child1 (@820f0a1)               
      2. this.parentDocument = parentDomainExample.ParentApplication (@80810a1) 
      3. this.document= parentDomainExample.ParentApplication (@80810a1)

       

      Scenario 3

      In this case, we have a VGroup in child1 , where we would add Child2 object .

       

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

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

                           xmlns:s="library://ns.adobe.com/flex/spark"

                           creationComplete="application1_creationCompleteHandler(event)"

                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:parentDomainExample="parentDomainExample.*">

            <fx:Script>

                  <![CDATA[

                        import mx.core.IVisualElement;

                        import mx.events.FlexEvent;

       

                        protected function application1_creationCompleteHandler(event:FlexEvent):void

                        {

                              var o:IVisualElement=new Child2();

                              hi.child1Group.addElement(o);

                              trace('hi');

                        }

       

                  ]]>

            </fx:Script>

            <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

            <parentDomainExample:Child1 id="hi"/>

      </s:Application>

       

      1) ParentApplication.mxmml

       

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

      <s:VGroup 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="400" height="300" xmlns:parentDomainExample="parentDomainExample.*">

       

            <fx:Script>

                  <![CDATA[

                        import mx.events.FlexEvent;

                       

                        import spark.components.Button;

                       

       

                  ]]>

            </fx:Script>

       

            <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

            </fx:Declarations>

            <s:VGroup id="child1Group">

                  <s:Button label="Create Child" click="button1_clickHandler(event)"/>

            </s:VGroup>

           

      </s:VGroup>

       

      2) Child1.mxml

       

      In this case, if we inspect the child2’s object in child1.mxml (I have put a debug point in the creation complete of child2.mxml)

       

      1. this.parent = spark.components.VGroup (@80eb479)   
      2. this.parentDocument = parentDomainExample.Child1 (@80eb0a1)         
      3. this.document = parentDomainExample.Child1 (@80eb0a1)       

       

      In all the cases document , parentDocument and parent object values are different

       

      Can some one explain how is this possible (specially parentDocument) or what is the algo for assigning these values to any display object.

       

      Thanks

        • 1. Re: document, parentDocument and parent
          Flex harUI Adobe Employee

          A document is an MXML file.  The document and parentDocument properties are attempting to manage the tree of MXML files in your app.  When you create something dynamically in AS it gets the document property of the main application.  I’m not a big fan of that strategy, but those are the rules.