2 Replies Latest reply on Jul 17, 2007 5:57 PM by cookiePie

    Adding Custom Components Programmatically

    cookiePie
      I feel as though I'm overlooking something simple here. Rather than using states, I'm controlling my layout through script functions. For example, button1 creates component1 and places it in its respective container. Component1 is therefore created within the script block, then added to the predefined container (via addChild).

      Now that I've completed my layout functionality I want to start building the actual components with which the user will interact. For the sake of modularity I want these to be custom components, and I believe they need to be added programmatically. I swapped out the existing placeholder code for the "orderForm" component:

      //create the order form
      var orderForm:HBox = new HBox();
      orderForm.width = 600;
      //style it
      orderForm.setStyle("backgroundColor", 0xf9f8ed);
      orderForm.setStyle("borderColor", 0xdcd9be);
      orderForm.setStyle("borderWidth", 1);
      orderForm.setStyle("borderStyle", "solid");
      orderForm.height = 60;
      orderForm.name="orderForm";
      var label:Label = new Label();
      label.text = "Order Form";
      orderForm.addChild(label);
      //add it to its designated container
      orderArea.addChild(orderForm);
      orderFormButton.label="Hide Order";

      with some pretty shady code that I made up. It was something like "var orderForm : OrderForm = new OrderForm();". Now I know that's incorrect because I haven't created a new object and certainly haven't defined a constructor for it, but I'm wondering how this can be done inside a script function.

      Additionally, if I create the component with MXML and hide it, it doesn't have the intended behavior. It still takes up space as a hidden component, and upon becoming visible, it doesn't reside in the proper area (despite my attempts to place it dynamically).

      Does anyone have any insights here?

      Thanks.
        • 1. Re: Adding Custom Components Programmatically
          ntsiii Level 3
          That line is ok:
          var orderForm : OrderForm = new OrderForm();".

          It does create a new Orderform object that you can ad to your container.

          What is not working?

          On the second problem, to toggle the display of a component like you are trying, you pretty much need to use a Canvas container. You can fiddle with the includeInLayout property but normal layout containers have their own ideas.

          What do you mean by "doesn't reside in the proper area "?

          Tracy
          • 2. Re: Adding Custom Components Programmatically
            cookiePie Level 1
            Tracy,

            You're right, it does work. I realized that when I created the component I named it the same as the variable - orderForm vs. OrderForm. Upon renaming and rebuilding I have no problems.

            Ignore the 2nd comment, that's more rambling than anything else.

            Thanks!