How to style a flex list control


When your application contains a custom image as a background for the base container, or uses a color different from the regular basic gray, then adding a list control will make the list control stand out in the whole screen like an ugly duckling. And it can be very painful for the eye from the point of view of the end user. So what is the solution??? The solution is to play around with the background and border properties of the list control to make it merge with the general look and feel of your application.

Here is the sample code that I used to generate the screenshots below –

We basically have an application which contains an array with a few elements and a List control that is powered by the array.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
xmlns:vo=”*”
layout=”horizontal”
verticalAlign=”middle”
backgroundColor=”#EEEEEE”>

<mx:Array id=”arr1″>

<mx:String>Hello</mx:String>
<mx:String>one</mx:String>
<mx:String>two</mx:String>
</mx:Array>
<mx:List dataProvider=”{arr1}”  >

</mx:List>

</mx:Application>

Now the code as it is above will generate the list that stands out oddly from the rest of the screen.  Go ahead and tweak the value of the backgroundAlpha to different values between 1 and 0.  For beginners(like me), the backgroundAlpha controls the opacity of the color of the background from least to most. So a value of 1 means that the opacity is most, which means the background is opaque, and if you set to a color, it will look at its solid best.  On the other hand a value of 0 indicates that the background is least opaque i.e. it is transparent, and if you set a color to the background you will see that it begins to look more and more translucent as the backgroundAlpha value goes towards 0.

Look at the output image below with backgroundAlpha values 0.5,0.2 and 1. and backgroundColor – #45bc67. You will have to insert it like this – <mx:List dataProvider=”{arr1}” backgroundAlpha=”0.5″  >

backgroundAlpha property at various values

backgroundAlpha property at various values

I have combined three screenshots into one (ah, I am a little lazy), but as I said before, in the diagram you can see that the middle one with a alpha of 0.2 is more translucent than the one the extreme left with the value 0.5. And the one on the right is the least translucent for an alpha of 1.

One can also play around with the color of the individual items when the mouse hovers on them. This is the rollOver property and can be set to any 6 digit hex value.

See this screenshot with a rollOverColor of  #9aFFDE and a default rollOver color –

rollOverColor set to a custom value and default value

rollOverColor set to a custom value and default value

Other properties worth exploring –

background properties

backgroundAlpha, backgroundColor,backgroundDisabledColor,backgroundImage,backgroundSize.

border properties

borderColor,borderSides,borderSkin,borderStyle,borderThickness

Dont want the border nor the background at all? Want it to merge with the application background – remove all the background properties and just use backgroundSkin={null}

borderSkin value set to null

borderSkin value set to null

So go ahead and experiment with the various properties and tell me how it goes. Particularly do tell me what happens if you use the backgroundImage property, and what happens if you insert a 150px by 150px image over there…  🙂

Advertisements

About vatsalad

Hi, I'm Vatsala
This entry was posted in Adobe Flex, flex, How To... and tagged , , , , . Bookmark the permalink.