'DataGrid'에 해당되는 글 3건
2009.06.23 09:57
DataGrid는 다음과 같이 간편하게 표형식의 데이터를 화면에 출력할 수 있습니다.


이런 DataGrid은 위의 코드에서 보실 수 있듯, DataGridColumn 을 이용하여 화면에 각 열을 생성하여 보여지게 됩니다. 데이터가 아무리 많이 들어오더라도 DataGridColumn이 지정되어 있지 않으면 출력되지 않죠. DataGridColumn은 가장 기본적으로 headerText, dataField 속성을 필요로 합니다.

headerText : DataGrid의 헤더(Header)에 출력될 문자열. 값이 지정되지 않을 경우 dataField의 값으로 사용합니다.
dataField : DataGrid에 입력된 데이터(DataProvider)에서 해당 열에 출력될 데이터를 지정.

위의 코드와 같이 MXML로 정의된 DataGridColumn의 정보(headerText 나 dataField, 혹은 넓이정보 등)를 변경하고자 한다면 어떻게 해야할까요? 방법은 여러가지일 수 있으나, 크게 본다면 1. DataGridColumn에 ID를 지정하여 해당 ID로 접근하거나 2. DataGrid의 columns 속성을 이용하여 DataGridColumn 모음을 받아와 처리하는 방법이 있을 수 있겠습니다.
이 포스트에서는 2번째 방법인 columns속성을 이용하는 것을 알아보도록 하겠습니다.

columns 속성은 DataGrid의 화면에 출력될 수 있는 하나 이상의 DataGridColumn들을 모아놓은 배열입니다. 이 배열에 담겨있는 DataGridColumn들을 수정하면 DataGrid의 모습도 바뀌게 된다는 것이죠.  특정 컬럼을 변경하고자 하면 이 배열의 해당 DataGridColumn에 대해 변경을 하면 반영이 되게 됩니다.

만약 위의 MXML처럼 ActionScript로 DataGridColumn을 설정하려 한다면 columns 속성에 직접 다음과 같이 DataGridColumn을 넣어주면 됩니다.

makeDataGridColumn 이라는 DataGridColumn 객체를 반환하는 메소드를 이용하여 DataGrid의  columns 속성에 원하는 DataGridColumn을 배열로 담아 넣어주게 되면 처음에 보셨던 MXML에서 DataGridColumn을 지정하는 것과 같이 처리할 수 있게 되죠.

마지막으로 원하는 컬럼의 headerText 를 변경하는 예제를 만들어보고 이 포스트를 끝내도록 하겠습니다.
우선 원하는 컬럼을 선택하는 용도로 사용할 ComboBox를 생성 후, 컬럼에 대한 정보를 columns 속성을 이용하여 ComboBox에 넣도록 하겠습니다.


거기에 TextInput 과 Button을 생성하여 변경하고자 하는 문자열을 입력받고 동작할 수 있게 changeLabel 메소드를 추가합니다.


완성된 코드 및 SWF 파일입니다. ;)


좋은 하루 보내세요~ ;)
신고
Creative Commons License
Creative Commons License
Favicon of http://dbilove.com/tt BlogIcon 블랜즈 | 2009.06.23 14:07 신고 | PERMALINK | EDIT/DEL | REPLY
항상.. Flex Component에서 많이 배웠는데.. 직접 트랙백도 해주시고..^^
감사합니다..^^ 덕분에 좋은 기능 알게 되었습니다...
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.23 14:13 신고 | PERMALINK | EDIT/DEL
덧글 감사합니다 ;)
좋은 하루 되세요!
네오랑 | 2009.06.23 18:06 신고 | PERMALINK | EDIT/DEL | REPLY
오~~~감사합니다~~~ID 로 접근했었지만, 뭔가 찜찜한 기분이 들었었는데...
속이 뚫리는 기분이네요~~감사합니다...
앞으로도 자주 오겠습니다...잘 부탁드립니다~~
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.24 11:23 신고 | PERMALINK | EDIT/DEL
ID로 접근하는 것도 하나의 방법입니다만,
동적으로 생성되었을 때는 곤란하니까 해당 객체에서 원하는 것들을 받아내는 식으로 접근하시면 편리하실 겁니다. ;)
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2009.06.24 07:38 신고 | PERMALINK | EDIT/DEL | REPLY
아~ 멋쩌라~ 저런 방법이~
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.24 11:24 신고 | PERMALINK | EDIT/DEL
ㅎㅎ 형님 ㅋㅋ
Favicon of http://adnaru.com BlogIcon 희희덕덕 | 2009.06.25 14:07 신고 | PERMALINK | EDIT/DEL | REPLY
우와 정말 멋진정보네요~
재밌게 잘 읽고갑니다.
감사합니다~ ㅋㅋ 조만간 뵈어야죠!
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.26 00:11 신고 | PERMALINK | EDIT/DEL
네~ 다음주에 뵈어요~ ;)
Favicon of http://blackiz.tistory.com BlogIcon Blackiz | 2009.07.02 15:48 신고 | PERMALINK | EDIT/DEL | REPLY
헛, 어느새 사진이 바뀌셨네요. ㅎㅎ
이번에 캠프에서 못뵈서 아쉽습니다. ㅋ
토요일에 !!
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.07.02 18:11 신고 | PERMALINK | EDIT/DEL
저도 못가서 너무 아쉽다는.. ㅜㅜ
남석이 | 2009.07.15 05:16 신고 | PERMALINK | EDIT/DEL | REPLY
어떤 브라우져를 쓰시는지... 자동으로 안티엘리어싱처리가 되는 건지.. 가독성이 떨어지네요. 전 크롬과 익스6를 쓰고 있습니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.07.15 09:56 신고 | PERMALINK | EDIT/DEL
파폭을 쓰고 있습니다.
다른 브라우저를 거의 안써서 테스트를 못해봤네요.
한번 테스트해보겠습니다.

혹 ClearType 설정되어있으신지요?
기본폰트로 '맑은 고딕'을 쓰고 있어서 ClearType 설정되어 있지않으시면 이쁘게 안보이십니다 ^^;
네오랑 | 2009.07.20 18:06 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요??
질문을 어디에 해야할지 몰라서 여기에 글을 남깁니다..

웹에서 경로설정을 위해 Directory 창을 띄우고 선택하게 하고 싶은데요...
어떻게 하면 좋을지 몰라서 질문 올립니다.

웹에서는 보안 정책때문에 flash.filesystem 패키지를 사용못한다고 하더라구요..
방법을 찾고 있는데, 잘 검색이 않되서 이렇게 염치불구하고 여쭤봅니다..

방법이 뭐가 있을까요?? 답변 부탁드립니다..

그럼, 즐거운 하루보내세요~
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.07.22 18:30 신고 | PERMALINK | EDIT/DEL
폴더선택창은 안되는 것으로 알고 있습니다. 저도 잘 모르겠네요 ^^;;
도움이 못되어서 죄송합니다.
알려주세요 ! | 2014.11.10 16:17 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.04.22 14:21
Flex 의 DataGrid 는 상당히 유용한 컴포넌트입니다. 표 형태의 데이터를 출력하기 참 좋거든요.
이때 출력된 데이터중에 어떤 한 데이터를 출력하여 그 데이터에 대해서 작업을 해야할 때가 있습니다.
예를 들어 게시판의 글을 클릭하여 그 글을 보고자 하는 App를 작성한다고 합시다.

이때 보통 아래의 소스와 같이 DataGrid의 click 이벤트를 이용합니다.



click="clickEventHandler(event)" 라고 정의하여 해당 DataGrid 가 클릭되었을때 clickEventHandler() 메소드를 호출하게 됩니다.
이 해당 메소드는 다음과 같이 정의하였습니다.


하지만 위의 처리방식에는 문제가 있습니다.
clickEventHandler() 메소드에서 DataGrid의 selectedItem 속성을 이용하여 선택된 아이템에 접근하게 되는데, 만약 아무런 값이 없는 곳을 클릭한다면 어떻게 될까요? 이 때도 click 이벤트는 발생하게 되어 clickEventHandler() 메소드가 호출되겠지만, 선택된 아이템이 없으니 selectedItem 은 null 이 되게 됩니다. 그렇기에 위의 소스 6번째 줄의 selectedItem.url에서 에러가 발생하게 됩니다.
(헤더를 클릭해도 에러가 납니다. -- 추가)

물론 try catch 문을 이용하여 에러처리를 하면 됩니다만, 발생할 것이 예상되는 에러를 예외처리한다는 것은 그리 권장할 만한 방법이 아닙니다.

에러가 발생하지 않으면 Alert 창이 떠야하지만, 에러가 발생해서 Alert 창이 뜨지 않습니다. debug 용 flash player 를 설치하신 분은 다음의 에러메세지를 보실 수 있습니다.
TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.
 at ClickTest/clickEventHandler()
 at ClickTest/__myDG_click()
 

이런 경우 실제 필요한건 아이템을 선택하는 것이지 DataGrid를 선택하는 것이 아닙니다.
이럴때 사용하기 좋은 이벤트가 바로 itemClick 이벤트 입니다.

itemClick event 
유저가 컨트롤내의 아이템을 클릭했을 때에 dispatch됩니다.
ListEvent.ITEM_CLICK 정수는,itemClick 이벤트에 관한 ListEvent object의 type property의 값을 정의합니다. 이 이벤트는, 컨트롤내의 가시 아이템 위에서 유저가 마우스를 클릭한 것을 나타냅니다.
출처 : flexdocs.kr

click 이벤트 대신 itemClick 이벤트를 이용하여 동일한 어플을 만든다면 위와 같은 문제는 해결되게 됩니다.
(Flex 3는 아닙니다만, Flex 2 에서는 DataGrid의 Header를 클릭해도 itemClick 이벤트가 발생됩니다. 완전히 해결은 안되는군요. 의견주신 유영상님 감사드립니다. - 추가) 
아래는 최종 샘플코드입니다.





더블클릭시 사용할 수 있는 itemDoubleClick 이벤트도 있으니 참고하시길 바랍니다.

ps. 쓰다보니 또 길어졌네요.. 별 내용 아닌데.. ㅜㅜ
신고
Creative Commons License
Creative Commons License
시드 | 2008.04.22 15:27 신고 | PERMALINK | EDIT/DEL | REPLY
('' ) 모른척 ~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.22 17:15 신고 | PERMALINK | EDIT/DEL
ㅋㅋㅋㅋ
Favicon of http://sunyoungheo.tistory.com BlogIcon 다롱냥 | 2008.04.24 15:50 신고 | PERMALINK | EDIT/DEL | REPLY
오오.. 오킹
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.25 11:18 신고 | PERMALINK | EDIT/DEL
이제 itemClick 사용해보셈~
상후 | 2008.05.24 10:21 신고 | PERMALINK | EDIT/DEL | REPLY
제가찾던건데 감사합니다 잘쓰겟습니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.26 12:56 신고 | PERMALINK | EDIT/DEL
네~ 찾아와주셔서 감사합니다. ;)
지나가다 | 2009.02.04 10:56 신고 | PERMALINK | EDIT/DEL | REPLY
아이템이 클릭되면 한줄이 선택되잖아요..

그 선택되는 거 자체를 막아버리고 싶을 땐 어떻게 해야 하나요.

clickEndalbed 이런거도 없고 ㅠㅠ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.02.04 14:39 신고 | PERMALINK | EDIT/DEL
선택 못하도록 할때에는 selectable 속성을 false 로 주시면 됩니다. ;)
arang | 2009.09.16 21:09 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요.

이제 막 플렉스 입문한 초보입니다. 즐겨찾기 해놓고 자주 들러 참고하고 있습니다.

다름이 아니라 한가지 질문이 있어서 그러는데요...

DG에서 컬럼 하나만 선택하는 방법은 없나요?

예를 들면 위의 예제에서 제목(title 란)컬럼을 누르면 내용이 보이게 하고, 이름컬럼을 누르면 회원 정보가 뜨듯이 각 컬럼마다 클릭 이벤트를 따로 주고 싶은 경우가 있어서요 ^^)
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.09.17 13:51 신고 | PERMALINK | EDIT/DEL
DataGrid에 itemClik 이벤트에서 rowIndex와 columnIndex 가 있습니다. columnIndex가 실제 클릭된 컬럼의 인덱스를 의미하거든요.
DataGrid의 column 속성을 읽어 보시면 컬럼들이 눈에 보이는 순서대로 인덱싱 되어있으므로 이용해보시는 것도 좋겠네요.
Favicon of http://singblog.net BlogIcon sing | 2009.10.08 23:35 신고 | PERMALINK | EDIT/DEL | REPLY
플렉스로 메뉴를 만들려고 하는데 너무 안되서 이렇게 검색검색 하다가
님 블러그까지 왔는데 잠깐보시구요 도움좀 부탁드립니다..
2틀동안 참 많이 해맸습니다..

플렉스로 이쁜 메뉴를 만들려고 합니다..

http://www.nosmoke.or.kr/

여기 사이트처럼요..

플렉스 빌더를 설치하고 메뉴 모양만 비슷하게...
http://expertfo.cafe24.com/4nonsmokers/menu/menu_Pro.html

이렇게 간단하게 만들었는데요

궁금한것이 위 제가 만든페이지에서 보조메뉴를 클릭했을때

새로운 페이지로 링크를 걸고 싶은데 그게 안됩니다...
님처럼 어떤 항목을 클릭햇을때 새창으로 다른페이지가 떠야하는데
저도 함수를 써서 했는데 안되네요...흑

아래 보죠메뉴 클릭했을때 링크를 할수 있는 방법 좀 부탁드립니다...
혹여나 http://www.nosmoke.or.kr/

여기사이트의 메뉴는 플래쉬로 만든것이겠죠???
플렉스로도 만들수있을것 같은데 도움좀 부탁드립니다..


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="15" cornerRadius="20" height="149" x="173" y="57">
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;

public function link2():void{
var urlRQ:URLRequest = new URLRequest();

urlRQ.url= "http://naver.com";
navigateToURL(urlRQ, "_new");
}

private function menuHandler(event:MenuEvent):void{
//Alert.show("Label: " + event.item. @label + "\n" +
// "Data: " + event.item. @data, "Clicked menu item");
var urlRQ:URLRequest = new URLRequest();

urlRQ.url= "http://naver.com";
navigateToURL(urlRQ, "_new");
}
]]>
</mx:Script>
<mx:MenuBar y="10" id="myMenuBar" labelField="@label" width="468" height="43" horizontalCenter="-10" fontSize="15" cornerRadius="5" textAlign="center">
<mx:XMLList>
<menuitem label="NonSmokers">
<button label="테스트" click="link2();"/>
<menuitem label="소개" itemClick="link2();"></menuitem>
<menuitem label="업데이트" click="menuHandler(event);"></menuitem>
</menuitem>

<menuitem label="금연정보">
<menuitem label="새소식"/>
<menuitem label="금연의 필요성"/>
<menuitem label="금연보건소"/>
</menuitem>

<menuitem label="정보교환">
<menuitem label="금연일기"/>
<menuitem label="금연 성공사례"/>
<menuitem label="금연 상담"/>
</menuitem>

<menuitem label="추천제품">
<menuitem label="쇼핑몰"/>
</menuitem>

<menuitem label="커뮤니티">
<menuitem label="사는이야기"/>
<menuitem label="의견좀"/>
</menuitem>
</mx:XMLList>
</mx:MenuBar>
</mx:Application>
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.10.09 01:18 신고 | PERMALINK | EDIT/DEL
새로운 창을 띄우는 것은 navigateToURL 를 이용하시면 되겠고, 서브메뉴에 클릭시에 navigateToURL 를 이용하도록 구현하면 됩니다. 단, navigateToURL 에 두번째 파라미터로 어떻게 띄울지 설정할 수 있으니 Livedocs 를 참고하시기 바랍니다.
참고로, 메뉴 같은 것은 Flex 보다는 flash 로 만들어서 사용하시는 것이 더 깔끔합니다. 저도 프로젝트 수행시에 위와 같은 메뉴는 Flash 로 제작하여 SWFLoader를 이용해 불러서 사용했습니다.

그리고 덧글을 너무 길게 달아주시면 곤란하니, 덧글의 소스는 지워주시면 감사하겠습니다. 이메일로 보내주시면 답변드리고 있으니 다음 부터는 장문의 질문의 경우 이메일로 보내주세요 ;)
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2007.11.20 15:56
다음의 포스팅은 Peter Ent 블로그Coloring the Background of Cells 포스트의 검쉰 맘대로 해석판입니다.
말이 안되게 타이프 해놓은 것도 있으니(ㅡㅡ;) 그러려니... 하여 주세요 ;)

아래의 결과물은 해당 포스트의 소스를 빌드하여 올려보았습니다.

")//]]>


위의 예제는 총 5개로 되어 있습니다만, 4개만 설명 합니다.
1. 아이템렌더러(itemRenderer)를 이용하여 특정컬럼의 배경색을 바꾸기 (itemRenderer Tab)
2. 컬럼에 직접 배경색을 지정하기 (backgroundColor Tab)
3. drawColumnBackground function을 재정의하여 배경색에 alpha 값을 주기 (backgroundAlpha Tab)
4. drawRowBackground function을 재정의하여 row에 배경색을 주기 (Custom Row Background Tab)



1. 아이템 렌더러(itemRenderer)를 이용하여 특정 컬럼의 배경색을 바꾸기 
   (itemRenderer Tab 참고)
사용자 삽입 이미지

특정 Cell의 배경색을 바꾸려면 아이템렌더러(itemRenderer)가 필요합니다.
아이템렌더러(itemRenderer)는 데이터그리드(Datagrid)의 전체에 적용하거나 특정 컬럼에 적용이 가능합니다만,
아래의 아이템렌더러(itemRenderer) 예제에는 Year 컬럼에만 적용하도록 하겠습니다.

간단하게 Label을 상속받아 updateDisplayList function을 재정의 하여서
Year의 값을 판단(Year의 값이 2000년 이전이면 파란색, 2000년 이후이면 녹색) 하여
Label에 파란색 또는 녹색의 사각형을 그려 배경색을 나타내고 있습니다.

<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[

      import flash.geom.Matrix;
      import flash.display.GradientType;
      import flash.display.Graphics;

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
        super.updateDisplayList(unscaledWidth,unscaledHeight);

        var m:Matrix = new Matrix();
        m.createGradientBox(unscaledWidth,unscaledHeight);

        var g:Graphics = graphics;
        var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);

        g.clear();
        g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
        g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
        g.endFill();
      }
    ]]>
  </mx:Script>
</mx:Label>

아래는 AS Class 로 동일하게 만들어본 아이템 렌더러입니다.
package
{
  import flash.geom.Matrix;
  import flash.display.GradientType;
  import flash.display.Graphics;
  import mx.controls.Label;

  public class ColoredBackgroundItemRenderer extends Label
  {
    public function ColoredBackgroundItemRenderer()
    {
      super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList(unscaledWidth,unscaledHeight);

      var m:Matrix = new Matrix();
      m.createGradientBox(unscaledWidth,unscaledHeight);

      var g:Graphics = graphics;
      var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);

      g.clear();
      g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
      g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
      g.endFill();
    }
  }
}



2. 컬럼에 직접 배경색을 지정하기
   (backgroundColor Tab 참고)


사용자 삽입 이미지


단지 컬럼의 모든 Cell에 배경색을 지정하고 싶은 것이라면 아이템 렌더러를 만들 필요는 없습니다.
아래와 같이 데이터그리드(Datagrid) 컬럼에 있는 backgroundColor 속성을 이용하면 쉽게 가능합니다.

<mx:DataGridColumn headerText="Make" backgroundColor="0xCC0000" dataField="col1"/>

0xCC0000은  빨강색() 입니다. backgroundColor Tab에서 Make 컬럼에 적용되어 있습니다.
backgroundColor="red" 같은 경우도 가능합니다.



3. drawColumnBackground function을 재정의하여 배경색에 alpha 값을 주기
   (backgroundAlpha Tab 참고)

사용자 삽입 이미지


데이터그리드(Datagrid) 컬럼은 투명도(Alpha)를 주는 속성이 없습니다.
하지만  데이터그리드(Datagrid)에 있는 drawColumnBackground function을 재정의하여 투명도를 줄 수 가 있습니다.
데이터그리드(Datagrid)를 상속받아서 만든 Class에서 아래와 같이 drawColumnBackground function을 재정의 합니다.

override protected function drawColumnBackground(s:Sprite, columnIndex:int, color:uint, column:DataGridColumn):void
{
  super.drawColumnBackground(s,columnIndex,color,column);

  var background:Shape = Shape(s.getChildByName(columnIndex.toString()));
 
  if( background )
  {
    background.alpha = 0.5;
  }
}

하지만 위의 코드에서는 투명도가 0.5로 하드코딩 되어 있으므로 권장할 만한 코드가 안됩니다.
그래서 다음과 같이 Class 내에 투명도를 저장할 변수 columnBackgroundAlpha를 정의합니다.

public var columnBackgroundAlpha:Number = 1;

그리고 재정의한 drawColumnBackground function의 코드를 변수 columnBackgroundAlpha에 의해
투명도를 변경할 수 있도록 다음과 같이 수정합니다.

backgroundAlpha = columnBackgroundAlpha;

외부에서 투명도는 아래와 같이 변경 할 수 있습니다.

<local:ColoredBackgroundDataGrid columnBackgroundAlpha="0.3" ... >



4. drawRowBackground function을 재정의하여 row에 배경색을 주기
   (Custom Row Background Tab 참고)

사용자 삽입 이미지

특정 컬럼이 아닌 한 줄(row)의 배경색을 바꾸려면 데이터그리드(Datagrid)를 상속받은 Class에서
아래와 같이 drawRowBackground function을 재정의 하여 배경색을 바꿀 수 있습니다.

year의 값이 2000년 이전이면 오렌지색, 2000년 이후면 흰색, 값이 없으면 녹색으로 출력하도록 하였습니다.

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
  var dp:ArrayCollection = dataProvider as ArrayCollection;
  var item:Object;

  if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex);

  if( item != null && item.year < 20000 ) color = 0xFF8800;
  else if( item != null && item.year>= 2000 ) color = 0xFFFFFF;
  else color = 0x00CC00;

  super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}

하지만, 위의 코드는 색깔과 기준값들이 하드코딩되어 있어 권장할만한 코드가 못됩니다.
이 때, 배경색으로 쓰일 색을 외부에서 따로 구현할 수 있도록 하여 해결하도록 하겠습니다.

외부의 function을 쓰기 위해 Class에 아래와 같이 속성을 하나 추가하겠습니다.

public var rowColorFunction:Function;

그리고 아래와 같이 color값을 위에서 만든 Function에서 받아올 수 있도록 하여 줍니다.

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint,dataIndex:int):void
{
  if( rowColorFunction != null )
  {
    var dp:ArrayCollection = dataProvider as ArrayCollection;
    var item:Object;
   
    if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex);

    color = rowColorFunction( item, rowIndex, dataIndex, color );
  }
 
  super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}

그리고 아래와 같이 rowColorFunction에 외부의 function을 지정하여 주고,

<local:ColoredBackgroundDataGrid rowColorFunction="determineColor" ... >

지정된 determineColor function은 아래와 같이 정의합니다.

private function determineColor( item:Object, rowIndex:int, dataIndex:int, oldColor:uint ) : uint
{
  if( item == null ) return 0x00CC00; // green are empty rows
  if( item.year< 2000 ) return 0xFFCC00;
  else if( item.year >= 2000 ) return 0xFFFFFF;
}

이제 정의 하였던 Class 외부에서 rowColorFunction에 알맞는 function을 정의하여 배경색을 변경 할 수 있게 되었습니다.
신고
Creative Commons License
Creative Commons License
Favicon of http://www.dalyong.com/ BlogIcon 달룡이네집 | 2007.11.20 22:35 신고 | PERMALINK | EDIT/DEL | REPLY
컬러를 볼때만해도 신기하고 재미있긴 한데..아래 알파벳을 보면서..머리가 살짝..아파오는군요..눈도 돌아가고..ㅎㅎ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2007.11.21 14:44 신고 | PERMALINK | EDIT/DEL
저도 매번 보지만 친해지지가 않아요 ^^;
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2007.11.29 11:08 신고 | PERMALINK | EDIT/DEL | REPLY
어제 봤던 거네요~~ Gradient에 관련된 자료 찾다가 우연히 봤었는데....
이미 한글로~~ 멋집니다.
좋은 자료 감사해요
박스농사 | 2008.03.31 19:34 신고 | PERMALINK | EDIT/DEL | REPLY
오른쪽위의 사진은 주최측의 농간입니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.03.31 21:57 신고 | PERMALINK | EDIT/DEL
안놀아줬더니 디게 심심했던 모양이네 ㅋㅋㅋㅋ
박스농사 | 2008.04.02 14:09 신고 | PERMALINK | EDIT/DEL | REPLY
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.02 18:25 신고 | PERMALINK | EDIT/DEL
좀 한가해지면 놀아줄께요 ㅋ
영희 | 2008.06.03 14:51 신고 | PERMALINK | EDIT/DEL | REPLY
검쉰님 블로그에는 데이터 그리드에 관한 자료가 많네요^^ 좋은 자료 구경 하고 갑니다~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.03 16:53 신고 | PERMALINK | EDIT/DEL
전에 찾았던 자료인데, 도움이 많이 될 것 같아서 (허접하게) 번역하여 올렸습니다.
도움이 되셨으면 좋겠네요 ;)
방문 감사합니다.
엠씨 | 2008.09.16 15:43 신고 | PERMALINK | EDIT/DEL | REPLY
좋은자료 감사합니다...
색깔 넣는부분이 필요해서 요기 소스를 참고해서 만들어 봤는데요..
예를 들어 마지막행의 색깔을 바꾸겠다...했을때
그리드의 크기보다 데이터의 양이 많을경우 색깔이 바뀌지 않더라구요....(스크롤바가 생겨서 스크롤링한경우)
그리드를 리사이즈해서 데이터row보다 커질경우엔 색깔이 바뀌고요...
혹시 이문제 접하신적이 있으신지....?
색깔바껴서 좋아하고 있다가 다시 머리를 싸매기 시작했네요..ㅠ.ㅠ;
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.09.16 17:03 신고 | PERMALINK | EDIT/DEL
화면에 보이지 않는 부분이라서 그런듯 합니다.
정확하지는 않지만 DataGrid의 컨테이너의 creationPolicy 값을 조정해보세요 ^^;
(아닐 가능성 90%)
박대호 | 2009.11.25 13:46 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요 ?

저는 부산의 벤쳐 S/W회사의 대표이사 입니다.
영원님의 깔금하고 잘 정돈된, 정보 덕분에 많은 도움을 받고 있습니다.

저도 전공은 컴퓨터 공학이지만, 졸업 후 프로그램을 짜보지 않았습니다.
최근 Flex의 무한한 가능성에 반하여, 나이 50을 향해 가고 있는 지금
Flex관련 작은 프로젝트를 하게되어 직접 프로그램을 하고 있습니다.

다시 한번 영원님의 정보에 감사 드립니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.11.25 13:59 신고 | PERMALINK | EDIT/DEL
안녕하세요? 박대호대표이사님.
제 글이 도움이 되셨다니 상당히 기쁩니다. ;)
덧글 남겨주셔서 감사드리고, 질문할 것이 있으시다면 메일로 해주셔도 됩니다. ;)
부산지역에도 IT 업체가 많아져야 좋을텐데요 ;) 김해에서 대학을 다녀서 그런지 부산이시라니 친근감이 드네요 ㅎㅎ 좋은 하루 되시길.
박대호 | 2009.12.03 20:12 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.12.05 09:46 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요? 박대호 대표이사님 ;)
덧글은 잘 보았습니다. 우선 이메일과 전화번호가 남겨져 있어 승인은 하지 않았습니다. ^^; (봇들이 수집을 하기때문에 ^^:)

현재 모듈을 사용하시기 때문에 문제가 되는 듯 합니다. 모듈의 특성상 모듈이 언로드 되게되면 모듈이 가지고 있던 클래스도 같이 언로드 되게 되는데요, 이때 DataService 관련 클래스들도 같이 언로드되는듯 하네요. Application 에서 DataService 를 가지고 있도록 처리해보심 어떨까 싶네요. data management 로 개발한 경험이 없어서 관련 부분은 조언을 드리기가 어렵습니다. ^^;

어떤 에러가 나는지 에러메세지를 좀 보내주셔도 제가 찾아볼 수 있겠네요.
(이메일로 보낸 내용이나 주소가 잘못되었는지 반송되었더군요. 보실지 모르겠으나 덧글로 남겼습니다. )
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.12.05 14:08 신고 | PERMALINK | EDIT/DEL
지돌스타형 블로그에 올라온 글을 보니 메일주소를 잘못남겨주셨네요 ^^;;;
박대호 | 2009.12.10 23:37 신고 | PERMALINK | EDIT/DEL | REPLY
감사 합니다.
문제는 해결되엇는데,,,
심경쓰 주셔서 감사 합니다.
김선구 | 2009.12.24 09:47 신고 | PERMALINK | EDIT/DEL | REPLY
4번을 쓸려고 datagrid를 재정의했는데, dataprovider에 null 값이 들어가있어서 에러가났습니다.
dataprovider 에는 arraycollection 형태의 값이 들어가게 되있고요, datagrid선언부분은
<cp:myDatagrid ~~
<cp:columns>
<mx:datagridcolumn~
형식으로 되어있습니다..
김정환 | 2012.09.26 14:57 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
김정환 | 2012.10.05 13:12 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
prev"" #1 next