This post originated from an RSS feed registered with Web Buzz by Manish Jethani. Original Post: Container chrome Feed Title: Manish Jethani Feed URL: http://feeds.feedburner.com/manish/artima Feed Description: Software. RIA. Flex. Latest Web Buzz Posts Latest Web Buzz Posts by Manish Jethani Latest Posts From Manish Jethani

If you’re developing your own components in Flex, sooner or later you’ll end up having to deal with the concept of container chrome. This is especially true for developers implementing layout logic in their own custom containers, but even if you’re just writing a simple MXML component, it helps to understand how Flex distinguishes between “children” and “chrome.”

What is “chrome?”

It’s easier to understand what is not chrome.

<mx:Panel title="Search">
    <mx:TextInput />
    <mx:Button label="Go" />
</mx:Panel>

Here’s a Panel titled “Search” containing one TextInput and one Button labelled “Go.”

All child movie clips of the Panel except the TextInput and the Button are considered to be the Panel’s chrome.

What other child movie clips does the Panel have? Well, the title bar for one (it says “Search”). Then there’s the white background. If the contents don’t fit in the available space, the Panel sprouts scrollbars to enable the user to scroll. All these extra movie clips are created and managed by the Panel and its superclasses internally, and they’re known as the container’s chrome.

How is chrome different?

The main characteristic of a piece of chrome is that it is created and managed entirely by the container’s implementation. The UI developer never explicitly adds or directly manipulates the chrome. In the above example, you can feel free to add or remove the TextInput and the Button, either at design time via MXML or dynamically using ActionScript code, but the title bar is something the Panel offers very little control over.

Another difference is when you have scrollbars: only the children scroll, not the chrome.

OK, why do I need to know this?

A lot of new developers may expect to be able to iterate over “all” the children of a container using the getChildAt and numChildren APIs in the View class.

for (var i = 0; i < panel.numChildren; i++)
    trace(panel.getChildAt(i) + "");

Too bad. You don’t get a reference to the Panel’s title bar, even though it’s a “child” of the Panel… because really it’s not a child, it’s chrome.

How do I access the chrome then?

The only way to access a container’s chrome is by using API exposed by the container. For example, in the DividedBox, the dividers can be accessed using the getDividerAt method. The Panel, on the other hand, does not expose its title bar, so there’s no way to access and manipulate it directly (low-level hacks aside).

So again, how can I iterate over all the children of a container?

In Flex 1.5 you can’t. In 2.0… wait.