Monthly Archives: August, 2007

How to add a separator to your ComboBox

Someone recently asked on a Flex mailing list how to add a separator to a ComboBox dropdown similar to the ones that can be added to a Menu. Alex Harui’s answer was simple to use the code in Menu to do the same thing for ComboBox since this doesn’t come by default. So, I’ve put together an example using a separator. Its probably not the cleanest and hasn’t been fully tested, but, I gave it a try.

In this example, I use a custom dropDownFactory for ComboBox as well as a custom itemRenderer. In the ComboBox itemRenderer, I overrode commitProperties to create a separator when the “type” property in the data was “separator”. I also overrode updateDisplayList to size this separator depending on the size of your ComboBox itemRenderer. Finally, in my custom dropDownFactory, I am overriding mouseEventToItemRenderer and adding code that ignores mouse events if you try to select an itemRenderer with a separator in it. Here is the sample. Good luck!

Demo Example: comboBoxSeparatorExample.swf

Sample Files: comboBoxSeparatorExample.mxml,,, purpleLine.gif

Scroll automatically to the bottom of a Container or TextArea

Someone recently asked the question of how do I scroll to the bottom of a container whenever I add a child. The easy answer was to just specify:

vbox2.verticalScrollPosition = vbox2.maxVerticalScrollPosition;

However, this is only part of the answer. I figured that you would set the verticalScrollPosition on the childAdd event and you were done. But, when I tried this, it didn’t work. I found that when childAdd is triggered, the Container had not fully re-measured itself. Therefore, the maxVerticalScrollPosition that it returned was not correct. However, if you wait and do a callLater, the code works. Here’s the full example:

Demo: scrollExample.swf

Example Code: scrollExample.mxml

In addition to wanting to scroll automatically in a container, I have heard the question of “How do I scroll to the bottom of TextArea as the text is dynamically changing?” The immediate thought is to set the verticalScrollPosition of the TextArea in its “change” event. However, again, this doesn’t work. Instead, you need to use the valueCommit event. This event is triggered later than the change event when the component has already re-measured. So, your code will look like this:

<mx:TextArea id=”ta1″ text=”{ta2.text}” valueCommit=”ta1.verticalScrollPosition=ta1.maxVerticalScrollPosition” />

Demo: scrollExample2.swf

Example Code: scrollExample2.mxml

Getting ToolTips For a ButtonBar and ViewStack

When you have a ViewStack as the dataProvider for your NavBar (ButtonBar, ToggleButtonBar, TabBar etc.), the toolTips of the ViewStack’s children should automatically be the toolTips for the Buttons in your navigation bar. For example, if you have a ToggleButtonBar like this:

<mx:ToggleButtonBar id=”tbb3″ dataProvider=”{vs2}” />
<mx:ViewStack id=”vs2″ height=”200″ width=”220″>
<mx:Canvas id=”c51″ label=”Flash” backgroundColor=”0xFF0000″ toolTip=”red” />
<mx:Canvas id=”c52″ label=”DreamW” backgroundColor=”0x00FF00″ toolTip=”green” />
<mx:Canvas id=”c53″ label=”ColdFusion” backgroundColor=”0x000FF0″ toolTip=”blue” />

You should see the toolTip “red” when you mouse over the “Flash” button, “green” when you mouse over the “DreamW” button etc.

However, as someone reported on flexcoders last week, this is does not work if you set the toolTips in the ViewStack children dynamically at runtime. This is discussed in Flex Bug SDK-12183. To work around this bug, you need to reset the toolTips of your navigation bar’s children after you set the toolTips for the ViewStack children. I’ve provided an example below.

Demo : tbbExample.swf

Example Code: tbbExample.mxml

DataGrid headerStyle doesn’t override column styles

There is a bug in the Flex SDK where styles set for your DataGrid override any styles set using a column “headerStyle”. This bug is described in bug SDK-10900 in the Flex Public Bugbase. From the comments in the bug, I’m not sure that this will get fixed for our next release, so, I thought that I would post a workaround. The workaround is pretty simple, but, you have to use a custom headerRenderer. Here is an example of an Application displaying the bug: DGHeaderStyleBug.swf

The Application has the following simple code:

fontWeight: ‘bold’;
textAlign: ‘center’;
color: #0000FF;
<mx:DataGrid dataProvider=”{flatData}” headerStyleName=”headerCustomStyle”>
<mx:DataGridColumn headerText=”Product” dataField=”name” textAlign=”right” color=”red” />
<mx:DataGridColumn headerText=”Version” dataField=”version” />
<mx:DataGridColumn headerText=”Code Name” dataField=”codeName” textAlign=”right” />

From the code, you would think that the headers should all be blue, center aligned and bold. Unfortunately, the header styles got overriden by the styles like ‘color’ and ‘textAlign’ set in each of the DataGridColumns.

To solve this problem, use a custom headerRenderer that defines your styles. Here is an example of one:

package {
import mx.controls.Label;public class MyCustomHeader extends Label {

public function MyCustomHeader(): void
setStyle(‘fontWeight’, ‘bold’);
setStyle(‘textAlign’, ‘center’);
setStyle(‘color’, 0x0000FF);

Solution Demo: DGHeaderStyle.swf

Solution Code: DGHeaderStyle.mxml,

Flex Camp Presentations Posted

I’ve been away on vacation for the past week in Texas and Mexico… yee hah!

Anyways, an email went out from Mike Potter saying that the Flex Camp presentations were all posted. You can find them here: . So, if you didn’t get to enjoy the pizza, beer, free stuff and … of course the knowledge exchange, you are in luck.

Also, it looks like more Flex camps are being set up, you can find out about them by joining the Flex FaceBook Network. .

By the way, I got a free version of Flex Builder 2 with Charting for Mac and I don’t need it, so if someone writes me with a great explanation of why they love Flex (and those who work on the product 🙂 ), its yours.