Flex Spark List with custom scroll bar and itemrenderer
来源:互联网 发布:手机淘宝降价提醒设置 编辑:程序博客网 时间:2024/06/08 00:56
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', scaleGridTop='5', 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/
- Flex Spark List with custom scroll bar and itemrenderer
- Flex List Control with Editable InputText ItemRenderer
- Custom Left Fast Scroll Bar自定义左侧快速滚动条
- A List itemRenderer using States and Transitions
- Flex itemRenderer
- Scroll bar
- Flex List 用嵌入的ItemRenderer实现CheckBox选中功能
- Flex中List自己定义itemrenderer渲染问题的解决
- Create custom Task List and Forms in SharePoint 2010 with Visual Studio 2012
- Break the list items Inheritance permission and custom the permission with ItemAdded Event
- Flex DataGrid 内联 itemRenderer
- Flex Tutorial - Image ItemRenderer
- Flex ItemRenderer CheckBox Sample
- flex DataGrid自定义 itemrenderer
- flex 内联 itemRenderer《一》
- flex datagrid column itemRenderer
- flex DataGrid自定义 itemrenderer
- DIV SCROLL BAR
- Qt Meta-Object System
- vim的taglist插件的使用和配置
- rtp proxy,media proxy超高效媒体服务器开发技术
- DES/3DES/AES区别
- 让IE6也支持max-width/height和min-width/height(完美解决方案)
- Flex Spark List with custom scroll bar and itemrenderer
- Log4j.properties配置详解
- redis命令学习
- 线程范围类的共享数据
- 特殊场合
- 保护眼睛的电脑设置
- java之静态(static)总结
- 安卓应用自动化测试工具
- Django groundwork在Django1.4以上的版本的问题解决 .