태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
김대중 전 대통령 서거 추모글 남기기

예제로 배우는 Flex2009.04.20 02:45

2. 라디오버튼 아이템렌더러를 이용한 설문통계 기능 구현

이번에는 라디오버튼을 이용하여 설문지에서 선택한 값의 합계를 구하는 애플리케이션을 구현해보자.


라디오버튼은 한 컬럼당 5개로 VRule컴포넌트로 분리되어 구성하였으며 이는 HBox로 감싸주었다. 라디오버튼은 들어오는 값(data.CheckNum)을 각 숫자와 비교하여 자신의 번호와 맞으면 선택되도록 하였다.


그리고 합계를 위해서 데이터그리드의 creationComplete이벤트에서 calTotal()이라는 함수가 호출되어 데이터그리드 컬럼의 라디오버튼이 가지는 값을 합계를 구한다. 또한 아이템렌더러의 라디오버튼을 클릭할 때 마다 부모의 calTotal()함수를 호출하여 즉시 합계가 계산되도록 하였다.


예제1과는 달리 예제2 RendererVO를 쓰지 않고 {}연산자를 사용하여 Object를 만들었다. 이 부분은 여러분들이 RendererVO같은 클래스를 만들어서 작동되는 코드로 만들어 보길 바란다.

 


[예제2] RDExam3_2.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

    width="450" height="370" verticalScrollPolicy="off" horizontalScrollPolicy="off"

    backgroundColor="#FFFFFF">

    <mx:Style>

        global { font-size:12}

    </mx:Style>

    <mx:Script>

        <![CDATA[

            [Bindable]

            public var initDG:Array = [

                {No:1,  Name:'Test1',  CheckNum:1},

                {No:2,  Name:'Test2',  CheckNum:2},

                {No:3,  Name:'Test3',  CheckNum:3},

                {No:4,  Name:'Test4',  CheckNum:4},

                {No:5,  Name:'Test5',  CheckNum:5},

                {No:6,  Name:'Test6',  CheckNum:5},

                {No:7,  Name:'Test7',  CheckNum:4},

                {No:8,  Name:'Test8',  CheckNum:3},

                {No:9,  Name:'Test9',  CheckNum:2},

                {No:10, Name:'Test10', CheckNum:1}               

            ];   

            [Bindable] public var totalData:String = "Total : ";

            public function calTotal():void {

                var totNum:uint = 0;

                for(var i:uint=0; i<initDG.length; i++) {

                    totNum += initDG[i].CheckNum;

                }

                totalData = "Total : " + totNum;

            }

        ]]>

    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}" width="450" height="250" creationComplete="calTotal()">   

        <mx:columns>

            <mx:DataGridColumn dataField="No"/>

            <mx:DataGridColumn dataField="Name"/>

            <mx:DataGridColumn width="300"  dataField="CheckNum"

                editable="true" sortable="false"

                rendererIsEditor="true">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:HBox width="100%"  height="18" horizontalAlign="center"

                            horizontalGap="0"  verticalGap="0"

                            paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"

                            borderStyle="none" horizontalScrollPolicy="off" verticalScrollPolicy="off"

                            >

                        <mx:Script>

                            <![CDATA[

                                private function checkRadioHandler(event:Event):void {

                                    var outObj:Object = event.currentTarget.parent.outerDocument;

                                    var idx:uint = outObj.myGrid.selectedIndex

                                    outObj.initDG[idx].CheckNum = event.currentTarget.value;

                                    outObj.myGrid.selectedIndex = idx;

                                    this.lbl.text = event.currentTarget.value;

                                    outObj.calTotal();

                                }

                            ]]>

                        </mx:Script>                           

                            <mx:RadioButtonGroup id="rg"/>

                                <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="5" selected="{5==data.CheckNum}" click="checkRadioHandler(event)"/>

                                <mx:VRule width="1" height="100%"/>                            

                                <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="4" selected="{4==data.CheckNum}" click="checkRadioHandler(event)"/>

                                <mx:VRule width="1" height="100%"/>

                                <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="3" selected="{3==data.CheckNum}" click="checkRadioHandler(event)"/>

                                <mx:VRule width="1" height="100%"/>

                                <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="2" selected="{2==data.CheckNum}" click="checkRadioHandler(event)"/>

                                <mx:VRule width="1" height="100%"/>                            

                                <mx:RadioButton label="" labelPlacement="bottom" groupName="rg" width="100%" value="1" selected="{1==data.CheckNum}" click="checkRadioHandler(event)"/>

                                <mx:VRule width="1" height="100%"/>                            

                                <mx:Label id="lbl" width="100%" textAlign="center" text="{data.CheckNum}"/>

                        </mx:HBox>

                    </mx:Component>                        

                </mx:itemRenderer>

            </mx:DataGridColumn>               

        </mx:columns>       

    </mx:DataGrid>    

    <mx:HBox width="650" horizontalAlign="center">

        <mx:Label text="{totalData}" id="totalLbl"/>       

    </mx:HBox> 

</mx:Application>

 

  

[그림2] 라디오버튼 아이템렌더러를 이용한 설문통계 기능


 

Posted by okgosu

티스토리 툴바