Flex Accordion with CanvasButtonAccordionHeader

运行环境：FlexBuilder

SDK      ：2.0.1 Hotfix 3

功能      ：该项目主要是实现分组里面的信息列表，有如QQ好友的名单列表

 

 

---

简要说明：

    整个项目的组建简历在一个panel上，在里面添加一个VAccordion，AccordionItem.mxml文件定义每个AccordionItem，每个Item里面有四个元素：title，image，description，PicDescribe

   这个项目主要难在定义style，因为要实现点击每个子信息后，都会扩展开来，显示里面的图片和其它文字信息，为此需要对Accordion的header进行定义(header.mxml)，header以CanvasButtonAccordionHeader为容器，目的是为方便设置它的背景颜色渐变效果，同时也可以随意添加其它组建；另外还要添加一个HBox以显示图片和其它文字信息。

   这个项目还设计我上一篇文章说的 定义Box 背景颜色的渐变效果。

   有一点要说明的是：CanvasButtonAccordionHeader是FlexLib的组建，这个FlexLib需要自己下载并添加到自己的项目中，下载网址是：http://code.google.com/p/flexlib/wiki/ComponentList，添加方法见：http://www.en-d.cn/?p=124

 

   本项目是参考Doug的项目：http://dougmccune.com/blog/2007/09/22/nifty-flex-accordion-menu-like-on-applecom/

 

---

运行效果：

 

---

 

项目代码：

AppleAccordionExample.mxml

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" xmlns:flexlib="http://code.google.com/p/flexlib/"layout="vertical" viewSourceURL="srcview/index.html"><mx:Style>Application {backgroundGradientColors: #FFFFFF, #FFFFFF;backgroundGradientAlphas: 1, 1;vertical-align: middle;horizontal-align: center;}VAccordion { headerHeight: 80; vertical-gap: 5; background-alpha:0; open-duration:500; border-style:none; padding-bottom:5; header-style-name: gradientHeader; cornerRadius: 5;}.gradientHeader { upSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); overSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); downSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); disabledSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); selectedUpSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); selectedOverSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); selectedDownSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); selectedDisabledSkin:ClassReference('flexlib.skins.EnhancedButtonSkin'); font-family:Arial; cornerRadii: 10, 10, 10, 10; borderColors: #BAC2CF, #BAC2CF; overBorderColors: #BAC2CF, #BAC2CF; selectedBorderColors: #FFFFFF, #FFFFFF; borderThickness: 2; borderAlpha: 1; /* fillColors: #FFFFFF, #FFFFFF; fillAlphas: 1, 1; fillColorRatios: 255,0; */ overFillColors: #BAC2CF,#FFFFFF; overFillAlphas: 1, 1; overFillColorRatios: 0,169; selectedFillColors: #BAC2CF,#FFFFFF; selectedFillAlphas: 1,1; selectedFillColorRatios: 0,169; fillColors: #BAC2CF,#FFFFFF; fillAlphas: 1,1; fillColorRatios: 0,169; /* selectedCornerRadii:10,10,0,0; */}Panel { borderStyle: solid; borderColor: #b7babc; corner-radius:10; borderAlpha: 1; roundedBottomCorners: true; headerHeight: 24; highlightAlphas: 0, 0; headerColors: #b1b7c4, #8392ab; titleStyleName: "mypanelTitle"; border-thickness-left:1; border-thickness-right:1; border-thickness-top:0; border-thickness-bottom:-5; border-thickness:1; }.mypanelTitle { color: #ffffff; fontSize: 12;}</mx:Style><mx:Panel title="Essentials"><flexlib:VAccordion id="accordion" headerRenderer="Header"headerLocation="above" width="200" resizeToContent="true" ><AccordionItem title="iTunes 7" image="@Embed('assets/essentials_itunes20070611.png')"description="Music. Movies. TV Shows. Podcasts." PicDescribe="很酷呐？"/><AccordionItem title="QuickTime"image="@Embed('assets/essentials_quicktime20070611.png')" description="Enjoy crystal clear video with H.264 support." PicDescribe="WOW，Cool"/><AccordionItem title="Widgets"image="@Embed('assets/essentials_widgets20070611.png')"description="Amazing widgets for your Mac OS X Dashboard."PicDescribe="帅乎？" /><AccordionItem title="Safari 3 Public Beta"image="@Embed('assets/essentials_safari20070611.png')"description="The world's best browser. Now on Windows, too." PicDescribe="无敌了！"/><AccordionItem title="Movie Trailers"image="@Embed('assets/essentials_trailers20070703.png')"description="The latest previews. Many in gorgeous high-def."PicDescribe="哈哈。。。" /></flexlib:VAccordion></mx:Panel></mx:Application>

 

AccordionItem.mxml

 

<?xml version="1.0" encoding="utf-8"?><mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"width="100%" height="140" borderStyle="solid" styleName="filled"borderThickness="0" verticalAlign="middle" horizontalAlign="center" showEffect="Fade" shadowDirection="center"verticalScrollPolicy="off" horizontalScrollPolicy="off"><mx:Style> .filled { border-style: solid; border-thickness: 0; border-skin: ClassReference("border.SimpleGradientBorder"); fill-colors: #FFFFFF,#BAC2CF; drop-shadow-color: #BAC2CF; corner-radius: 10; drop-shadow-enabled: true; } .PicDescribe {font-weight: normal;color: #666666;font-size: 16;} </mx:Style><mx:Script><!--[CDATA[[Bindable]public var description:String;[Bindable]public var image:*;[Bindable]public var title:String;[Bindable]public var PicDescribe:String; ]]--></mx:Script><mx:Image source="{image}" /><mx:Label text="{PicDescribe}" styleName="PicDescribe"/></mx:HBox>

 

header.mxml

<?xml version="1.0" encoding="utf-8"?><CanvasButtonAccordionHeaderxmlns="flexlib.containers.accordionClasses.*" xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:filters="flash.filters.*"verticalScrollPolicy="off" horizontalScrollPolicy="off"mouseOver="fakeMouseClick(event)"><mx:Script><!--[CDATA[/** * This gets called for every MOUSE_OVER event. All we do is dispatch a CLICK event * and we can trick the Accordion into thinking the header was clicked. */private function fakeMouseClick(event:MouseEvent):void {var clickEvent:MouseEvent = new MouseEvent(MouseEvent.CLICK, true, false, event.localX, event.localY);dispatchEvent(clickEvent);}]]--> </mx:Script><mx:Style>.mainBox {padding-top:10;padding-left:10;padding-right:10;vertical-gap:0;}.title {font-weight: bold;color: #333333;font-size: 16;}.description {font-weight: normal;color: #666666;font-size: 12;}</mx:Style><mx:VBox styleName="mainBox" width="100%" height="100%"><mx:Label text="{data.title}" styleName="title"width="100%" /><mx:Text text="{data.description}" styleName="description"width="100%" height="100%" selectable="false" /></mx:VBox><!--<filters><filters:DropShadowFilter angle="90" alpha=".1" blurX="0" distance="3" /></filters>--></CanvasButtonAccordionHeader>

 

SimpleGradientBorder.as

package border{ import flash.display.*; import flash.geom.*; import flash.utils.*; import mx.core.EdgeMetrics; import mx.skins.halo.HaloBorder; import mx.utils.ColorUtil; import mx.utils.GraphicsUtil; public class SimpleGradientBorder extends HaloBorder { private var topCornerRadius:Number; // top corner radius private var bottomCornerRadius:Number; // bottom corner radius private var fillColors:Array; // fill colors (two) private var setup:Boolean; // ------------------------------------------------------------------------------------- // private function setupStyles():void { fillColors = getStyle("fillColors") as Array; if (!fillColors) fillColors = [0xFFFFFF, 0xFFFFFF]; topCornerRadius = getStyle("cornerRadius") as Number; if (!topCornerRadius) topCornerRadius = 0; bottomCornerRadius = getStyle("bottomCornerRadius") as Number; if (!bottomCornerRadius) bottomCornerRadius = topCornerRadius; } // ------------------------------------------------------------------------------------- // override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); setupStyles(); var g:Graphics = graphics; var b:EdgeMetrics = borderMetrics; var w:Number = unscaledWidth - b.left - b.right; var h:Number = unscaledHeight - b.top - b.bottom; var m:Matrix = verticalGradientMatrix(0, 0, w, h); g.beginGradientFill("linear", fillColors, [1, 1], [0, 255], m); var tr:Number = Math.max(topCornerRadius-2, 0); var br:Number = Math.max(bottomCornerRadius-2, 0); GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, tr, tr, br, br); g.endFill(); } }}