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"?> <CanvasButtonAccordionHeader xmlns="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(); } } }