8 Replies Latest reply on Oct 11, 2009 1:39 PM by SiHoop

    Containers problem

    SiHoop Level 1

      In the 3 files below I am trying to use a UIComponent to display an HBox. In the middle file (InstructorView.mxml) I cannot show  the HBox InstructorViewScore.mxml. However, if I uncomment

          //this.addChild(instructorViewScore);

      and comment out

          this.addChild(uic);

       

      it will work fine. Why can I not make this work byadding instructorViewScore to the UIComponent and then adding this.addChild(uic);

      How shouldI do this (I have to use a UIComponent as my full  project file includes one).

      Thank you!

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="vertical"  >
             <mx:Panel layout="vertical" width="100%" height="100%" >        
              <mx:TabNavigator width="100%" height="100%"  >
                  <mx:VBox label="Login">
                  </mx:VBox>
                  <mx:VBox label="Instructor">
                      <local:InstructorView/>
                  </mx:VBox>
              </mx:TabNavigator>
          </mx:Panel>
      </mx:Application>

       

      InstructorView.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" width="100%">
          <mx:Script>   
              <![CDATA[
      import mx.core.UIComponent;
      private var uic:UIComponent = new UIComponent();
      private var instructorViewScore:InstructorViewScore;

       

      private function init():void{
          instructorViewScore=new InstructorViewScore;
          uic.addChild(instructorViewScore);
          this.addChild(uic);
          //this.addChild(instructorViewScore);
      }
              ]]>
          </mx:Script>
      </mx:VBox>

       

      InstructorViewScore.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"    >
          <mx:VBox>
              <mx:Text   text="Total Correct"/>
          </mx:VBox>
      </mx:HBox>

        • 1. Re: Containers problem
          Gregory Lafrance Level 6

          UIComponent might be limited in what it can contain.

           

          Below I have made uic a Container, not a UIComponent.

           

          If this post answered your question or helped, please mark it as such.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" width="100%">
              <mx:Script>   
                  <![CDATA[
                      import mx.core.Container;
                     
                      private var uic:Container = new Container();
                      private var instructorViewScore:InstructorViewScore;

                      private function init():void{
                        instructorViewScore=new InstructorViewScore;
                        //uic.addChild(instructorViewScore);
                        this.addChild(uic);
                        this.addChild(instructorViewScore);
                      }
                  ]]>
              </mx:Script>
          </mx:VBox>

          • 2. Re: Containers problem
            SiHoop Level 1

            I think that only works if you leave uncommented the following line:

            this.addChild(instructorViewScore);

             

            However, this is still not using the uic to display the content. I cannot make your recommendation work.

            • 3. Re: Containers problem
              paul.williams Level 4

              UIComponent is not a container - you cannot just add children to it and expect them to display properly. You will need to extend UIComponent and add the necessary logic to size and position the children you add. You do this by overriding the updateDisplayList method in your subclass.

              1 person found this helpful
              • 4. Re: Containers problem
                SiHoop Level 1

                Thanks for the last comment--I can learn how to use updateDisplayList, but is there a better way for me to structure my code that will achieve my goal? I want to navigate to a page the involves a lot of visual elements that will be manipulated (that's why I need the UIContainer, to hold the visual elements) and at the bottom of the screen I want to include  a consistent navigation bar that I would like to keep in a separate class and import into the same screen.Is there a better way for me to think about organizing my code? I can get all of this to work in one large file, but I'm trying hard to learn how to break things into classes for simplicity.

                Thanks for your time!

                • 5. Re: Containers problem
                  paul.williams Level 4

                  I'm not clear on why you need UIComponent rather than using a container for this. How were you using UIComponent when you had one large file?

                  • 6. Re: Containers problem
                    SiHoop Level 1

                    I was originally using two main files. I had a display class that was a Sprite-- this was responsible for managing the majority of my visual elements, but I was advised to change it to a VBox when I ran into some problems. Everything went well until I tried to add navigation to the bottom of the screen. I attempted to make it a separate class and to add it to a UIComponent and to add the UIComponent to the VBox, but objects began moving around unpredicatably.

                    I have a tough time understanding which containers to use for my classes-- I think I find this to be one of the most difficult parts of Flex to understand. Maybe I should not be trying to add the navigation as a separet class? Any advice on how to conceptualize these files would be much appreciated.

                    • 7. Re: Containers problem
                      Gregory Lafrance Level 6

                      I think it is best to try and leverage the standard Flex containers as much as possible. Although I am a big fan of auto-layout, and thus minimizing the use of Canvas, in this case Canvas might just do the trick, especially if you use the bottom and verticalCenter constraint-based layout style properties.

                       

                      If this post helps, please mark it as such.

                      • 8. Re: Containers problem
                        SiHoop Level 1

                        Thank you! I got your reply on Friday afternoon and it worked without too much effort. A great start to my weekend!