Over a million developers have joined DZone.

Basic Flex List Row Item Styling

·

Styling is one of those things in Flex that you could write 1,000 different posts on and never quite cover it all. Even more specific is styling the data you see in lists and DataGrids. This tutorial is about how to change the styleName property of list items in a Flex list depending on the data in the List.

Below [see link at bottom of the page] you can see an example of what we are going to create. It is a very simple application. Most of the items in the list have black text but there are two with special colors. All of the items have their text color set in css. You can check it out and get the source code by right clicking on the application below or going straight to the source.

Well, let's get started. The first piece is simply setting up the application with a list. The code below shows that we have our base application and a List that takes up the entire area.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="200">
<mx:List
width="100%" height="100%">
</mx:List>
</mx:Application>

Next up we add in an event handler on the application creationComplete. It just calls the init function, which will also be added in the main Script tag. Inside the Script tag we add a private variable for the array of data we are going to use for our List. Then we have the init function which initializes our data. You can see that the objects being added have two properties, name and style. The style property is, of course, the one we are going to use to decide what the style is on our rows. The last thing we need to do for this block of code is set the dataProvider on our list. You can also set the labelField to "name" if you would like to see some results after this step.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="200"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var movies:ArrayCollection;

private function init():void
{
movies = new ArrayCollection();
movies.addItem({name:"Pan's Labyrinth", style:"BlackMovie"});
movies.addItem({name:"Stargate", style:"BlackMovie"});
movies.addItem({name:"Ghostbusters", style:"RedMovie"});
movies.addItem({name:"Fargo", style:"GreenMovie"});
movies.addItem({name:"Predator", style:"BlackMovie"});
}
]]>
</mx:Script>
<mx:List
dataProvider="{movies}" labelField="name"
width="100%" height="100%" >
</mx:List>
</mx:Application>

We now need to create the item renderer which will update its own styleName to the value in the "style" property of the data. You should create a new Flex Component named "StyleClassRenderer" and base it off of Label. Inside our component we are simply going to override the set data function. Inside the overridden function we set the super value and then check if the value is not null. If it is not null we just set the styleName property to the value in "style". We also need set the text value to the "name". That is all there is to it. The new component code is below. And we also have to update our List to use the item renderer which is, also, below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Label
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public override function set data(value:Object):void {
super.data = value;
if(value) {
this.text = value.name;
this.styleName = value.style;
}
}
]]>
</mx:Script>
</mx:Label>
<mx:List
dataProvider="{movies}"
width="100%" height="100%"
itemRenderer="StyleClassRenderer">
</mx:List>

Now, if you run the application you'll notice we still don't really have any custom styling. Well this is because we haven't added the styles to our application. Inside the main application tag we add a Style tag which is where we put our css. I also added a little bit of styling to the default Application and List. The main thing to notice in the code below is the three classes for our different styles. The tag code follows.

<mx:Style>
Application { font-size: 22; }
List {background-color: #DDDDDD; roll-over-color: #BBBBBB; selection-color: #BBBBBB;}
.BlackMovie { color: #000000; }
.RedMovie { color: #8E2800; }
.GreenMovie { color: #5CAA2F; }
</mx:Style>

That is pretty much it. Nothing left to do but show the entire code for the Application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="200"
creationComplete="init()">
<mx:Style>
Application { font-size: 22; }
List {background-color: #DDDDDD; roll-over-color: #BBBBBB;
selection-color: #BBBBBB;}
.BlackMovie { color: #000000; }
.RedMovie { color: #8E2800; }
.GreenMovie { color: #5CAA2F; }
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var movies:ArrayCollection;

private function init():void
{
movies = new ArrayCollection();
movies.addItem({name:"Pan's Labyrinth", style:"BlackMovie"});
movies.addItem({name:"Stargate", style:"BlackMovie"});
movies.addItem({name:"Ghostbusters", style:"RedMovie"});
movies.addItem({name:"Fargo", style:"GreenMovie"});
movies.addItem({name:"Predator", style:"BlackMovie"});
}
]]>
</mx:Script>
<mx:List
dataProvider="{movies}"
width="100%" height="100%"
itemRenderer="StyleClassRenderer">
</mx:List>
</mx:Application>

This is a powerful method of updating the styles of a particular item in a List of DataGrid or an entire row. I would, however, suggest using the data itself to decide the type of style instead of having a string in the data decide it. With that being said I hope you found some use in today's tutorial. If you have any questions feel free to drop a comment or head over the forums.

Topics:

Published at DZone with permission of Charlie Key. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}