Pig Development

I came across a snag that took me by surprise while developing our Band Beast Administration. The admin has several views and forms in it and they all basically have the same logic, but different visuals. I write base classes all the time in my Flash development, but hadn’t attempted to do this with MXML components in Flex. I wrote my base component that would handle common logic and display common visuals and then I created my first component that would extend this base class. The MXML looks like this:

ChildView.mxml – extends BaseView

This works fine and when adding this component to my Application, it looked and worked the same as my base class. The next logical step, or so I thought, would be to start adding my visual elements in the MXML of my sub component.

When compiling, I got an unexpected error:

Error: Multiple sets of visual children have been specified for this component (base component definition and derived component definition).

So this means I can extend a MXML component, but I can’t add visual components to it? Seems strange to me; why else would you extend a component? After researching, I found out that allowing this approach was a hot debate when developing Flex Builder and Adobe ultimately decided not to allow this procedure. Instead, they suggest you use what they call ‘Component Templating’. To do this you must first wrap the visual children inside of your sub component inside a tag in your MXML. You can call this tag whatever you want but in this example I called it ’subComponents’.

Notice you’ll get the following error inside of Flex Builder

Error: Could not resolve subComponents to a component implementation

This is because you need to declare ’subComponents’ in your base component. At this point, ’subComponents’ is an array that holds all of the display children in your sub component. We need to declare this variable in our base class as well as create our Setter function so its value will be set.

our BaseClass – extends Canvas

Now we’ve killed our error and Flex is happy. Lastly, we need to actually add these children to the stage by writing a function that fires on the ‘creationComplete’ event in our base class.

Now we’ve successfully extended a MXML component. This may sound like a ‘work around’, but in the end it makes sense. Plus the cool part is that now we can add these sub components inside a styled or skinned container — hence the title ‘Component Templating’.