explorers’ club

Awhile back I had developed (as many of you may have already) a Panel subclass. Basically I needed a way to add buttons to the titleBar area much like the mx:TitleWindow has the close button. The end result being something very similar to a Window’s Explorer window (not IE). Well if you have tried this, then you know it is not as simple as just saying titleBar.addChild().

A developer’s initial approach may be to override updateDisplayList and createChildren to insert child components inside the titleBar. This was my initial take on it. But this is flawed in that you are…

1. …unnecessarily overriding methods not generally associated with this area of the Panel. UpdateDisplayList in a nutshell is used to update child components. In terms of mx:Panel, generally child components are what a developer sticks inside the content area. CreateChildren is again something generally associated with child components. Basically these methods are the wrong place to insert items in the titleBar area.
2. The other flaw in this is that it inefficiently/unnecessarily renders your new titleBr assets. For instance, you want to add 3 buttons to the Panel’s content area. Now let’s assume that the Panel will remain a fixed width and height. So not including calls to these methods during pre-child attachment phases, we are calling these methods 3 times each per button.

I should probably start prefacing my posts with a disclaimer that they are simply guess-timations on the flex framework as I haven’t done any true performance testing and/or benchmarking on my findings. But what testing I have done has yielded positive results. So what I am really trying to say is, correct me if I am wrong.

After doing some peeking into how Panel (not TitleWindow) does the close button logic, I found that it isn’t really tapping the aforementioned methods. The only time it was really calling the createChildren method was to attach the titleBar to its rawChildren and the subsequent children of the titleBar. No layout, sizing, etc was really being handled in this method. More about this later….

Firstly I wanted to be able to make my Panel subclass scalable in that I could have one guy with 3 buttons in the titleBar and then another with one. Also I wanted to be able to attach functionality on the instance’s buttons rather than have a class with hardcoded click listeners. So I just made a simple public method addTitleBarButton (value:Button = null):Button. This method basically takes/creates a button, adds it to an array, then adds it to the titleBar. Lastly it returns the button in case you need to do more to it later on. Just doing this though will not display the items added. You need to resize and reposition them as well. Onto a bit about rawChildren.

Panel’s titleBar is considered a rawChild. So it is not really counted in the displayList (at least directly). This is also true of alot of the skins associated with the container’s borders. When Panel needs to update its borders and titleBar, it does so via LayoutChrome. So this would be an ideal place to add some logic to any new titleBar assets. Now you can get those newly added buttons from that array I mentioned earlier. Then by cycling through the array and getting some x, y, width and height info we can see the new title buttons inside the titlebar area. All without even touching the createChildren or updateDisplayList.

docs – link
source – link
example – link