Flex组件之Accordion

    Flex里面有几个组件还没用过，最近正好没事，就都写写demo来使用一下，这个例子是在一本叫《Flex大师之路》的书上看到的，挺好的，决定写在这里备忘，方便以后查阅。

    Accordion导航有点类似一个折页，在每一页都包含一个子容器，每一次只显示一个页，也就是一个子容器。我们这个例子设定Accordion里面有三个子容器：FrmPersonalInfo，FrmSurvey，VConfirm。代码分别是：

 

FrmPersonalInfo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" label="个人信息"> <mx:FormItem label="姓名" horizontalAlign="center" width="100%"> <mx:TextInput id="pName" width="100%" /> </mx:FormItem> <mx:FormItem label="年龄" horizontalAlign="center" width="100%"> <mx:TextInput id="age" width="100%" /> </mx:FormItem> <mx:FormItem label="住址" horizontalAlign="center" width="100%"> <mx:TextInput id="address" width="100%" /> </mx:FormItem> </mx:Form>  

 FrmSurvey.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" left="20" right="20"> <mx:FormItem label="请选择您感兴趣的运动： "> <mx:RadioButtonGroup id="favSrv" /> <mx:RadioButton groupName="favSrv" id="bike" value="bike" label="自行车" /> <mx:RadioButton groupName="favSrv" id="tennis" value="tennis" label="网球" /> <mx:RadioButton groupName="favSrv" id="football" value="football" label="足球" /> </mx:FormItem> <mx:FormItem label="您每周运动的时间（小时）：" > <mx:HSlider thumbCount="2" minimum="0" maximum="40" values="[0,40]" labels="[0,20,40]" tickInterval="1" snapInterval="1" /> </mx:FormItem> </mx:Form>  

VConfirm.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" horizontalAlign="center" verticalAlign="middle"> <mx:Label text="调查须知" /> <mx:Text text="本调查的目的在于：XXXXXXXXXX" width="90%" /> <mx:HBox> <mx:RadioButtonGroup id="rgConfirm" /> <mx:RadioButton groupName="rgConfirm" id="agree" value="agree" label="同意" /> <mx:RadioButton groupName="rgConfirm" id="disAgree" value="disAgree" label="不同意" /> </mx:HBox> <mx:Button label="提交" /> </mx:VBox>  

 

    这里我们还希望扩展下Accordion的功能，在每个容器的头部添加个图标，显示该容器当前的状态是打开的还是关闭的。要自定义个headerRenderer，这里是DemoHeader类，他的父类是AccordionHeader，代码是：

 

DemoHeader.as

package views { import mx.containers.accordionClasses.AccordionHeader; import mx.controls.Image; public class DemoHeader extends AccordionHeader { [Embed("image/close.png")] private const InitIcon:Class; [Embed("image/open.png")] private const CloseIcon:Class; public const STATUS_NEW:String = "init"; public const STATUS_READ:String = "read"; private var _status:String; public function set status(varStatus:String):void { _status = varStatus; switch(_status) { case STATUS_NEW: statusIcon.source = InitIcon; break; case STATUS_READ: statusIcon.source = CloseIcon; break; } } public function get status():String { return this._status; } public function DemoHeader() { super(); } private var statusIcon:Image; override protected function createChildren():void { super.createChildren(); if(statusIcon==null) { statusIcon = new Image(); statusIcon.source = InitIcon; addChild(statusIcon); } } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth,unscaledHeight); statusIcon.setActualSize(unscaledHeight-6,unscaledHeight-6); statusIcon.move(unscaledWidth-statusIcon.width-3,(unscaledHeight-statusIcon.height)/2); } } } 

 

都写好之后，主页面程序是：

AccordionDeom.mxml:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" xmlns:views="views.*"> <mx:Script> <![CDATA[ import mx.events.IndexChangedEvent; import views.DemoHeader; import mx.controls.Alert; private function updateStatus(evt:IndexChangedEvent):void { var acc:Accordion = evt.currentTarget as Accordion; var accHeader:DemoHeader; for(var i:int=0 ; i<acc.numChildren ; i++) { accHeader = acc.getHeaderAt(i) as DemoHeader; if(i==acc.selectedIndex) { accHeader.status = accHeader.STATUS_READ; continue; } accHeader.status = accHeader.STATUS_NEW; } } ]]> </mx:Script> <mx:Accordion headerRenderer="views.DemoHeader" change="updateStatus(event)" id="accordSurvey" borderColor="blue" horizontalCenter="0" width="400" height="300" headerHeight="30" creationCompleteEffect="Dissolve"> <views:FrmPersonalInfo label="个人信息" id="frmPS" width="100%" height="100%" /> <views:FrmSurvey label="你的运动习惯" id="frmS" width="100%" height="100%" /> <views:VConfirm label="法律说明" width="100%" height="100%" id="frmConfirm" /> </mx:Accordion> </mx:Application>  

别忘了在根下新建个image的目录，把要用的png文件加到里面。

要全部工程文件的可以留言写下Emai～