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～