Wednesday, March 14, 2007

Specifying children for derived MXML containers can be done at only one place

Error: Multiple sets of visual children have been specified for this component (component definition and component instance). is thrown by Flex when developers attempt to define children at two different places for a container. Suppose we have MyFirstBox extending HBox as follows: MySecondHBox.mxml
   <mx:HBox mx="">

      <mx:Button label="Button in declaration"/>
And we are trying to use MyFirstBox in another container like this


      <mx:Button label="Button in Instance" />

Flex throws the exception because it finds that in the declaration as well as in the instance inside the application child buttons are being added. This may be very easy to catch but where it bites is when we are trying to create a hierarchy of MXML components. Suppose we try to create a second HBox derived from MyFirstBox as follows MySecondHBox.mxml
  <MyFirstHBox xmlns="*" mx="">

    <mx:Button label="Button in derived comp" />

This is also not allowed as it falls under the same category and Flex throws the same exception. The workaround is to define children only in the leaf derived class. Any solution?


chubbard said...

Yes this sucks big time. Why is that a problem? Just add all the components to the container.

I'm trying to create a reusable panel. It's almost like plain old panel, but I'd like to render an image in the header.

You can't do it with CSS or skins. I tried using a canvas and doing it with CSS and backgroundImage. No can do, there is no way to position your image like in real w3c CSS. Tried drawing it one myself, but graphics object doesn't allow you to paint a background at a specific location.

Ok so I went real low tech with a special container that has an image and text placed in the right place. And, wham I ran into this problem.

I gotta tell ya Flex/Flash might look all fancy and stuff, but underneath it's not even close to being as clean as Java2D or Swing. Ugghh. I could've done this in 15 minutes with Swing by overriding the paint method.

Seb said...

stumbled upon this ..
it describes a solution.. not suuuper easy, but feasible.