Monthly Archives: October, 2008

New CSS Selectors are supported in the Flex 4 trunk

It has been about a little over a week since the first check-ins for supporting descendant and id selectors were checked into the trunk. However, for a week, its been unusable unless you used the -keep compiler argument. As of build 3793, this functionality is turned on by default, so, you should be able to try out the newly supported CSS selectors. Pete Farland is the developer for this feature and I am testing it. Its definitely still in its alpha stages, but, feel free to give it a whirl.

Descendant Selectors: You can now specify styles for children of a container (at any level). In the following example, you will set styles for all Buttons within a Box or subclasses of either of these classes.

Box Button {  color: #DD0000;}

This will match :

– Buttons inside of a Box

– Buttons inside of a VBox or HBox

– CheckBoxes within a Box, VBox, or HBox

– Custom Components that extend Button that are inside a Box, VBox or HBox.

You can also do multiple level of descendants like:  Panel ViewStack Label { fontSize: 12; }

This will only match Labels inside a ViewStack that is inside a Panel.

ID Selectors: You can match a style to the id of a component.

#myRedComp { backgroundColor: #FF0000; }

The example above will match anything with an id of “myRedComp” and try to set its backgroundColor to red.

Combined Type and Class Selectors: While you could use type and class selectors in the past, you couldn’t use them together, now, you can.

Panel.startUpStyle { cornerRadius: 10; }

This style will match any Panel with a styleName set to “startUpStyle”.

You can also use any of these selectors in combination. Here are some other examples of supported selectors:

Button#submitButton { textDecoration: “underline”; }

TitleWindow Button#submitButton { textDecoration: “underline”; }

Application DateField.futureDateStyle {color: #746544; }

This feature is still under development and has had very little testing. You can see the current bugs or file new ones by searching under the feature “Styles” and look for the tag [Advanced CSS] in the subject. We’d love your feedback as to other selectors that you would like to see supported.

A feature that we are considering are type selectors associated with states. So, if you have something like:

Button:downState { fillColors: #FFFFFF; #FF0000;}

This would match any Button when it was in the currentState=’downState’. So far, this isn’t implemented in the build.

For more details on the feature, see the spec on our open source site:

http://opensource.adobe.com/wiki/display/flexsdk/CSS+Advanced+Selectors

How to set a ComboBox itemEditor dataProvider at runtime

On a forum (probably flexcoders), someone recently asked how to set the dataProvider for a ComboBox itemEditor at runtime. They wanted to set a different dataProvider for each of the ComboBoxes depending on their data. So, I decided to put this quick example together using a DataGrid with inline itemEditors that are ComboBoxes.

The DataGridColumn itemEditor that uses a ComboBox looks like this:

<mx:DataGridColumn dataField=”city” headerText=”Destination City” editorDataField=”
selectedItem”>
<mx:itemEditor>
<mx:Component>
<mx:ComboBox initialize=”outerDocument.addData(event)” />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>

In the ComboBox’s initialize handler, we are calling a function that will set its dataProvider. Her is what the function addData looks like:

public function addData(event:FlexEvent) : void
{
if(dg.dataProvider[dg.selectedIndex][‘country’] == “Italy”)
ComboBox(event.target).dataProvider = ItalianCities;
else
ComboBox(event.target).dataProvider = UKCities;

}

The function checks what the selected item, then, they set a dataProvider for the editor accordingly.

You can run the sample here: ComboBoxItemRendererSample.swf

In the example, click any row in the right side column to bring up the itemEditor that is a ComboBox.

Code: ComboBoxItemRendererSample.mxml