4 Replies Latest reply on Nov 4, 2007 12:26 AM by atta707

    How to build a design time container component

    KPE3000 Level 1
      I wonder how to create a new component which is able to act as a container for other components.
      Say we create a new MXML component with 2 controls, a label and a canvas. I then like to use this component in my application, and add new controls to the component canvas (design time).
      Is this possible with Flex 2, and what does it take.
      Any links, pointers and guidelines are welcome - thanks!
        • 1. Re: How to build a design time container component
          atta707 Level 2
          Sure, it's possible. You'll do this by creating a custom component; you do this by extending any existing Flex component. In this case you'll be extending your favorite container component, let's say canvas, and use Flex Build will show it in the Custom Components list at design time.

          In the Flex Builder help, please search and follow topics on how to create and use CUSTOM COMPONENTS.

          HTH.

          ATTA
          • 2. Re: How to build a design time container component
            Gregory Lafrance Level 6
            This code may help:

            ------------------------- MyLabelCanvas.mxml -------------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300">
            <mx:VBox id="myVBox">
            <mx:Label text="This is a test." />
            </mx:VBox>
            </mx:Canvas>

            -------------------------------- Test.mxml ------------------------------
            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*">
            <mx:Script>
            <![CDATA[
            import mx.controls.Label;
            public function addNewLabel():void{
            var newLabel:Label = new Label();
            newLabel.text = "This is a test of the emergency broadcast system.";
            myComp.myVBox.addChild(newLabel);
            }
            ]]>
            </mx:Script>
            <mx:VBox>
            <comp:MyLabelCanvas id="myComp"/>
            <mx:Button label="Add a Label" click="addNewLabel()"/>
            </mx:VBox>
            </mx:Application>
            • 3. Re: How to build a design time container component
              KPE3000 Level 1
              Thanks, for your answers. I'm not sure I explained myself clearly, so to make my point more clear, what I actually would like to do is to create a new Canvas (or similar container) component in MXML. I would then like to use this component in my application, and at design time (not runtime) I want to be able to drag any control and drop it on my new component (or inside the component container). Unfortunately my efforts so far always end up with a component that does not accept other controls to be dropped inside it.
              • 4. Re: How to build a design time container component
                atta707 Level 2
                Dragging a component in a container at design time is totally a different ball game than dragging them at run time. Which one you're interested in?

                Can you post some code? Just by you explanation I'm hoping you're extending mx.core.Container class for your custom container?

                ATTA