태터데스크 관리자

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

태터데스크 메시지

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

예제로 배우는 Flex2009.04.20 01:46

렌더러의 사용

렌더러(renderer)는 그 의미를 알고보면 사용하기가 쉽다. 렌더러의 render라는 의미는 화면에 그려준다는 것이다. 그래서 플렉스에서 렌더러는 화면에 객체를 그려줄 때 사용하는 또 다른 객체라는 의미이다


1. 렌더러의 개념

예를 들어 true, false값을 가지는 데이터가 있을 때 렌더러를 사용하면 글자 그대로 보여주지 않고 체크박스나 라디오박스, 콤보박스 등 사용자가 원하는 모양으로 데이터를 보여줄 수가 있다


[그림1] true/false값을 가지는 데이터를 데이터그리드의 itemRenderer를 사용하여 CheckBox, RadioButton, ComboBox등의 다양한 데이터로 보여주고 있다. [예제1]은 그 소스코드로서 DataGrid의 각 컬럼의 itemRenderer의 속성에 CheckBox, RadioButton, ComboBox를 사용하고 있음을 알 수 있다.


 [그림1]다양한 모양 렌더러의 사용 예 (RDExam01.mxml 실행 결과)


 [예제1] RDExam01.mxml

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

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

       <mx:Script>

             <![CDATA[

                    import mx.collections.ArrayCollection;

                    [Bindable] private var data_ac:ArrayCollection = new ArrayCollection([

                           {no:1, data:true},

                           {no:2, data:false},

                           {no:3, data:false},

                           {no:4, data:true}                      

                    ]);

             ]]>

       </mx:Script>

       <mx:DataGrid dataProvider="{data_ac}" width="450" height="100%">

             <mx:columns>

                    <mx:DataGridColumn dataField="no" headerText="번호"/>

                    <mx:DataGridColumn dataField="data" headerText="Data">

                           <mx:itemRenderer>

                                 <mx:Component>

                                        <mx:CheckBox selected="{data.data}"/>

                                 </mx:Component>

                           </mx:itemRenderer>

                    </mx:DataGridColumn>

                    <mx:DataGridColumn dataField="data" headerText="Data">

                           <mx:itemRenderer>

                                 <mx:Component>

                                        <mx:HBox>

                                              <mx:RadioButton selected="{data.data}"/>

                                        </mx:HBox>

                                 </mx:Component>

                           </mx:itemRenderer>

                    </mx:DataGridColumn>

                    <mx:DataGridColumn dataField="data" headerText="Data">

                           <mx:itemRenderer>

                                 <mx:Component>

                                        <mx:ComboBox selectedIndex="{data.data == true? 0 : 1}">

                                              <mx:dataProvider>

                                                     <mx:Object label="true" data="true"/>

                                                     <mx:Object label="false" data="false"/>                                              

                                              </mx:dataProvider>

                                        </mx:ComboBox>

                                 </mx:Component>

                           </mx:itemRenderer>

                    </mx:DataGridColumn>

             </mx:columns>

       </mx:DataGrid>

</mx:Application>

 

[예제1]을 보고 렌더러에 대한 기본적인 개념은 파악했을 것이라 생각한다. 그럼 이제부터 렌더러를 편리하게 사용하기 위한 방법을 살펴보도록 하자.

 

Posted by okgosu