Flex Spark List with custom scroll bar and itemrenderer

I recently had a request for some help on skinning a Flex 4 Spark List with a custom scroll bar and item renderers. Even though the skinning process has gotten much easier with Flex 4 and the Spark components there is still a learning curve and a few things that are either learned through a lot of trial and error or by having someone point it out to you. Hopefully with this post I will be able to save some other Flex developers the "trial and error" route.

This is the comp of the list that needed to get created. Nothing to complicated at first glance,the standard Spark scroll bar needs to get replaced and a custom itemrenderer will be needed for the list.

So how does one go about turning the image above into a functioning Spark List,follow along.

Step 1 – Prep the skin pieces

The scroll bar track and thumb from the comp need to be turned into assets that we can use in the Spark skin. The itemrenderer can be completely done with code. If you are familiar with Photoshop turn off the surrounding layers,select the thumb and track,respectively,and then do a 'copy merged' and paste each as a new image. Save them as transparent PNG's that can be embedded into the Flex swf.

Step 2 – Create the Spark Skins

Three skins will be required for this task,one for the thumb,the track and the vertical scroll bar (right click,view source on the swf at the bottom to view all the source code).

The track and thumb skins simply embed the pngs that we created in step 1.

The track skin:

<s:BitmapImage source="@Embed('assets/scroll-track.png',scaleGridLeft='2',scaleGridTop='5',scaleGridRight='12',scaleGridBottom='275')" 
				   left="0"  top="0" right="0" bottom="0" />

And the thumb skin:

<s:BitmapImage source="@Embed('assets/scroll-thumb.png',scaleGridLeft='1',scaleGridRight='13',scaleGridBottom='97')" 
				   left="0"  top="0" bottom="0" right="0" />

In both cases we use the scale nine attributes to make sure the graphic scales cleanly in the horizontal and vertical directions.

The scroll bar skin sets the skins class for the track and thumb buttons to the new skins we have created.

<s:Button id="track" top="0" bottom="0" right="0"  width="15"
		  focusEnabled="false"
		  skinClass="com.dgrigg.skins.VScrollBarTrackSkin" />

<s:Button id="thumb" width="14"
		  focusEnabled="false" visible.inactive="false"
		  skinClass="com.dgrigg.skins.VScrollBarThumbSkin"   />

That's it for skin creation.

Step 3 – Styling via CSS

Once the skins are created the next step is creating a css file to get the List component to look the way we want. Using css selectors we can tell the List to use the new skin class we have created for the vertical scroll bar on the list. The 'fixedThumbSize' style tells the scroll bar if it should adjust the size of the thumb based on the list length. In this case we want the thumb to always be the same size so it gets set to 'true'. We have also used CSS to turn off the horiztontal scroll bar,sometimes with custom item renderers the horizontal scroll bar will make an appearance when you don't want it to.

s|List 
{
	contentBackgroundAlpha:.5; 
	contentBackgroundColor: #000000;
	borderColor:#000000;
}

s|List #scroller 
{
	horizontalScrollPolicy: off;
}

s|List s|VScrollBar {
	skinClass: ClassReference("com.dgrigg.skins.VScrollBarSkin");
	fixedThumbSize:true;
}

Remember to load the style sheet into the main application class and the new pimped list is ready to go.

Step 4 – ItemRenderer creation

The final step in bring the comp to life is creating the ItemRenderer. Fortunately Flex 4 has made this very easy. Navigate to the package you want to create the renderer in and then right click and select 'New/MXML Item Renderer'. A basic item renderer will be created that you can begin working with. Here is the code for the item renderer we will be using.

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
			xmlns:s="library://ns.adobe.com/flex/spark" 
			xmlns:mx="library://ns.adobe.com/flex/mx" 
			autoDrawBackground="false" height="85" width="385">
<fx:Script>
	<![CDATA[
		
		override public function set data(value:Object):void 
		{
			super.data = value;
			
			if (value)
			{
				titleLbl.text = data.title;
				contentLbl.text = data.text;
				titleLbl.visible = true;
				contentLbl.visible = true;
				readLbl.visible = true;
			}
			else
			{
				titleLbl.text = "";
				contentLbl.text = "";
				titleLbl.visible = false;
				contentLbl.visible = false;
				readLbl.visible = false;
			}
			
		}
	]]>
</fx:Script>
<s:states>
	<s:State name="normal" />
	<s:State name="hovered" />
	<s:State name="selected" />
</s:states>

<s:Rect left="0" right="0" top="0" bottom="0">
	<s:fill>
		<s:SolidColor color.selected="0x383c40" color.normal="0x23252a" color.hovered="0x383c40"
					  alpha.selected="0.8" alpha.hovered="0.5" alpha.normal="0.8" />
	</s:fill>
</s:Rect>

<s:Label id="titleLbl" 
		 x="15" y="15" 
		 width="370" color="0xffffff"/>

<s:Label id="contentLbl" 
		 x="15" y="30" 
		 width="370" height="30" 
		 color="0xeeeeee" fontSize="11"  />

<s:Label id="readLbl" 
		 x="15" y="65" 
		 color="0x336699" color.selected="0xCCCCCC" 
		 text="READ MORE" fontSize="11"/>

<s:Line left="0" right="0" bottom="0" width="1">
	<s:stroke>
		<s:SolidColorStroke color="0x000000"/>
	</s:stroke>
</s:Line>

</s:ItemRenderer>

A few things to note in the itemrenderer code. First,the 'autoDrawBackground' attribute on the ItemRenderer base class is set to 'false'. This turns off the? selected/rollover/hover background that normally gets drawn and displayed. The s:Rect instance is used with the state selectors on the color attribute to create custom rollover color/alpha combinations. The normal list will allow you to change the color but you can't tweak the alpha so this is your best option. Second,the 'set data' method was overwritten in order to set the values of the various labels. This is a must step for pretty much any custom item renderer. The overwritten method does a small check to see if the incoming value exists,if not the labels get hidden. This is always a good practice to prevent empty rows from appearing in the list.

Wrap up

That's it. A custom scroll bar and item renderer in four steps. No rocket science,just a little Flex know how. You can view the source code?here.

转载：http://dgrigg.com/blog/2010/07/06/flex-spark-list-with-custom-scroll-bar-and-itemrenderer/