태터데스크 관리자

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

태터데스크 메시지

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

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

5. XML데이터와 아이템렌더러 컴포넌트를 이용한 데이터그리드에서 멀티로우 표현

예제4를 보면 뭔가 아쉬운 점이 남는다. , 각 컬럼마다 일일이 아이템렌더러를 써주는 것이 번거롭게 느껴지며, 데이터를 HTTPService로 가져오면 어떻게 예제4와 같이 데이터를 만들어 주는가 하는 고민을 하게 만든다. 그래서 그런 고민을 덜어주고자 예제5는 보너스로 넣었다.


예제5는 실행해보면 그림4와 같이 동일하게 실행된다. 다만 다른 점은 아이템렌더러를 공통컴포넌트로 사용하였고, 데이터는 XML데이터를 HTTPService로 불러왔다는 것이다.


HTTPService에서 리스트4와 같이 multidata.xml을 불러온다. multidata.xml record엘리먼트가 한 해의 분기별 실적을 표현한다.


그리고 이 xml을 불러와서 데이터 그리드에 바인딩할 때는 어떤 컬럼명을 화면에 보여줄 것인지를 넘겨주어야 한다. 이것을 propertyName이라는 바인딩 변수를 통해서 아이템렌더러에 전달해준다. 리스트3은 아이템렌더러로서 propertyName에 대한 setter, getter함수를 구현했고, set data()함수를 통해 받은 데이터 객체의 속성값을 mydata[propertyName].p1 식으로 나타낸다.

 

[예제5] RDExam3_5.mxml

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

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

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

    creationComplete="my_hs.send()"

    backgroundColor="#FFFFFF">

    <mx:Style>

        global {font-size:11}

    </mx:Style>

    <mx:Script>

        <![CDATA[

            import mx.controls.Alert;

            import mx.rpc.events.FaultEvent;

            import mx.rpc.events.ResultEvent;

           

            private function resultHD(event:ResultEvent):void {

                myGrid.dataProvider = event.result.result_set.record;

            }

            private function faultHD(event:FaultEvent):void {

                mx.controls.Alert.show(event.fault.message);

            }

        ]]>

    </mx:Script>

    <mx:HTTPService id="my_hs" url="multidata.xml" result="resultHD(event)" fault="faultHD(event)"/>

    <mx:DataGrid id="myGrid" headerHeight="50" variableRowHeight="false"

        width="450" height="300" horizontalGridLines="true" horizontalGridLineColor="#CCCCCC">

        <mx:columns>

            <mx:DataGridColumn headerText="년도" dataField="year" />

            <mx:DataGridColumn headerText="구분" dataField="division">

                <mx:itemRenderer>

                    <mx:Component>

                        <local:RDExam3_5Renderer propertyName="division"/>

                    </mx:Component>

                </mx:itemRenderer>

            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="1분기" dataField="q1">

                <mx:itemRenderer>

                    <mx:Component>

                        <local:RDExam3_5Renderer propertyName="q1"/>

                    </mx:Component>

                </mx:itemRenderer>            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="2분기" dataField="q2">

                <mx:itemRenderer>

                    <mx:Component>

                        <local:RDExam3_5Renderer propertyName="q2"/>

                    </mx:Component>

                </mx:itemRenderer>            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="3분기" dataField="q3">

                <mx:itemRenderer>

                    <mx:Component>

                        <local:RDExam3_5Renderer propertyName="q3"/>

                    </mx:Component>

                </mx:itemRenderer>            </mx:DataGridColumn>

            <mx:DataGridColumn headerText="4분기" dataField="q4">

                <mx:itemRenderer>

                    <mx:Component>

                        <local:RDExam3_5Renderer propertyName="q4"/>

                    </mx:Component>

                </mx:itemRenderer>         

            </mx:DataGridColumn>

        </mx:columns>       

    </mx:DataGrid>    

</mx:Application>

 

 

[리스트3] RDExam3_5Renderer.mxml

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

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalGap="0">

<mx:Script>

    <![CDATA[

        [Bindable] private var _propertyName:String;

        public function set propertyName(p:String):void {

            this._propertyName = p;

        }

        public function get propertyName():String {

            return this._propertyName;

        }

        [Bindable] private var mydata:Object;

        public override function set data(value:Object):void {

            mydata = value;

        }

    ]]>

</mx:Script>

    <mx:Label text="{mydata[propertyName].p1}" width="100%" height="20" textAlign="center"/>

    <mx:HRule width="100%"/>                   

    <mx:Label text="{mydata[propertyName].p2}" width="100%" height="20" textAlign="center"/>

</mx:VBox>

 

 

[리스트4] multidata.xml

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

<result_set>

       <record>

             <year>2006</year>

             <division>

                    <p1>계획</p1>

                    <p2>실적</p2>             

             </division>        

             <q1>

                    <p1>90</p1>

                    <p2>80</p2>               

             </q1>       

             <q2>

                    <p1>80</p1>

                    <p2>70</p2>               

             </q2>       

             <q3>

                    <p1>100</p1>

                    <p2>60</p2>               

             </q3>       

             <q4>

                    <p1>80</p1>

                    <p2>100</p2>              

             </q4>       

       </record>

       <!-- 중략 -->

</result_set>

 

 

[그림5] XML과 아이템렌더러를 이용한 멀티로우 데이터그리드 구현


Posted by okgosu