Flex 3 Advanced DataGrid Feature

그동안 개발에는 일반 DataGrid 만 사용해왔다.

하지만 마지막 개발중 Advanced DataGrid 에 대해 알았고 이놈 만만치 않은 놈이란걸 느꼈다.

우선 Adobe Lab 에서 소개하는 Advanced DataGird 의 특징은 아래와 같은것이 있다.
원문 링크

• 다중 Column 정렬 기능 ( multi column sorting interface )
  
  
• 행 단위 Formatting ( cell-level formatting functions )
  
  
• 계층적 보기 기능 ( tree view )
  
  
• 행 단위 선택 기능 ( cell selection )
  
  
• 열 수정 가능 ( custom rows )
  
  
• 행 Groupping ( column grouping )
  
  
• 합산 하기 및 Grid 출력하기 ( SummaryCollection and the PrintAdvancedDataGrid )
  

각 특징에 대한 예제도 압축으로 제공하던데.. 일단 글쓰는 지금은 소스를 확인해보기 전이라 어떤지 모르겠다.. 간혹 Flex 2 source 를 제공하는 경우도 있더이다.. 다운로드

google blog.. swf 도 못올린다..
외부에 올리고 link 하는 방법이 있기야 하겠지만.. 어디 이게 세계 최고의 blog 라 할 것인가;
하지만 국내 어느곳도 google 의 service 를 따라오지 못하기에 꾹 참고 나중을 생각해 그냥 쓴다..

실제 SWF 동작 화면은 위 예제 download link 를 통해 경험해 보기 바란다.

블로그는 이미지를 통해 써야겠다..

우선 다중 Column 정렬 기능 이다. Column Header 를 Ctrl 을 누른채 선택하면 된다.
예제파일 1,2 번에서 별다른 기능은 보이지 않았고 위 기능만 보였다.

간단히 source 를 살펴보니 1번 예제는 그냥 아무런 특징이 없는 일반적인 방법으로 data 를 binding 한 예제이고, ( 여기서 살펴볼것은 variableRowHeight="true" 이다. 이 속성 하나로 자동 data 줄바꿈이 가능하다. 기존 DataGrid 에서의 문제가 해결된 셈이다. )
2번 예제는 ActionScript 초기화 작업에서 정렬을 지정해주는 코드가 들어있다.



그다음이 계층적 보기 기능 이다. 이미지에서 보이듯이 다중 Column 정렬 기능또한 가능하다. 당연하지 않은가.. 여기서 사용한것도 Advanced DataGrid 이니까..
여기서 사용된 파일이 4번 file 이다.



그리고 행 단위 Formatting 기능. 그냥 DataGrid 에선 Label_Function 으로 입력될 Text 내용을 바꿨었고, Column 의 ItemRenderer 를 사용해 Text의 서식을 바꿨었는데.. 어떤 방식으로 행 단위 Formatting 을 지원하는지.. 궁금하다. source 를 열어봐야 알겠지.. 요건 5번 file




행 관련 또하나의 개선. 행 단위 선택 기능. Grid 의 Data를 이용한 별도의 작업이 필요할때 아주 요긴하게 쓰일것 같다. ( 예를 들면 특정 행의 data를 double click 한다던지.. cursor 를 over 한다던지 했을때 별도의 data 를 표시하는 등.. )
Ctrl 을 누른채 선택하면 복수 선택도 가능하다. 이건 6번 file



또하나의 멋진기능. 합산 하기 및 Grid 출력하기 중 합산 하기
기존의 DataGrid 에선 이 작업을 하려고 늘 database 에서 query 를 할 때 마지막 행에 별도의 data 를 계산하여 구겨 넣어야 했다. 완전 억지;
논리적인 데이터와 사람의 눈이 따로 놀았다 ㅎㅎ

예) 마지막에 미운오리새끼 취급을 받아야 하는 소계행을 보라..


하지만 Advanced DataGrid 에선 이렇게 멋지게 처리된다. 7번 file



그다음은 위 특징 목록에는 없지만 ( 내생각엔 열 수정 기능 ( custom rows ) 가 이에 해당하지 않나 싶은데.. ) 예제엔 있는 제목 열 나누기 ( Custom Column Header 라고 말해야 하나; Divide Column Header 라고 말해야 하나..) 이것도 엑셀을 통한 화려한 표를 좋아하는 분들께는 좋은 소식이다. 예제 9번에 있다.



마지막은 어떤 기능인지 모르겠지만 아마도 합산 하기 및 Grid 출력하기 중 출력하기 관련 기능이지 않나 싶다. 10번 file



이상이다.

간단하게 Advanced DataGrid 의 특징을 알고 싶은 한국분이 계실까봐 정리를 한번 해봤다.
내가 그런 사람이었고 관련 자료를 한글론 찾을수가 없었기에..

Flex Setting width fixel & percentage for DataGrid Column

Flex 의 DataGrid Column .. 참 웃기다.

웃긴이유는 width 를 지정하는데 Percentage 와 Fixel 의 차이가 묘하기 때문이다.

우선 DataGrid 의 width 를 셋팅하는 방법은 두가지이다.

MXML 에서,
여기선 fixel Setting 밖에는 안된다. 원하는 fixel 을 설정하면 된다.

ActionScript 코드에서.
여기선 fixel 및 Percentage Setting 이 가능하다.
Fixel 은 그냥 원하는 컬럼에 원하는 수치를 입력하면 되고,
dgPrjBasicInfo.columns[3].width = "5";

Percentage 는 원하는 Column 에 DataGrid에 비례한 Fixel 을 입력해 주면 되겠다.
이것이 Adobe 에서 권고하는 Column 에 Percentage 로 width 를 적용하는 방법이다.
dgPrjBasicInfo.columns[5].width = dgPrjBasicInfo.width * 5 / 100;

그렇다면 원하는 취향대로 쓰면 될텐데 뭐가 문제일까?

Percentage 로 width 를 지정할때 부모객체인 DataGrid 에 width 가 지정되어 있다면 ActionScript 에서 적용하는 Column 의 Percentage width 는 적용되지 않는다.
예) mx:datagrid width="100%"

디버깅 찍어보면서 별짓을 다해봤지만 역시 안되더라.. 아직 스킬이 부족해서..

하지만 Flex 의 DataGrid Column 특성을 이해하면 조금 쉽게 문제를 해결할 수 있다.

MXML 에서 지정하는 Fixel 은 고정값이 아닌 초기값이다.

예를들어

mx:datagridcolumn textalign="center" headertext="프로젝트 코드" width="100"
mx:datagridcolumn textalign="center" headertext="프로젝트 명" width="300"
mx:datagridcolumn textalign="center" headertext="계약기간" width="200"


위와 같이 입력해 놓아도 Column 의 폭은 100 , 200 , 300 이란 각각의 값으로 고정되는것이 아니라 초기 Rendering 때 각 값으로 초기화만 될 뿐, 그 후 부모 Container 나 Browser 의 크기가 변함에 따라 비례적으로 width 가 자동으로 변한다.

결론은 Column 의 폭을 비례적으로 맞추기 위해 ActionScript 를 쓸 필요가 없다는 거다.

글이 쓰다 끊어져서 그런지 왼지 모르게 두서없이 느껴지네;;

그나저나 구글 블로그 언제쯤 제한없이 소스나 태그 적을수 있는거야;; HTML 직접 편집해도 안되고;

Flex DataGrid Column 자동 줄바꿈 처리

Flex DataGrid 의 Column 은 text 가 binding 될 시 자동으로 줄바꿈을 하지 않고, Column 의 width 만큼만 보여지고 나머지 text 는 가려지게 된다.



긴 text가 binding될 시 Column 의 폭은 변하지 않고, 그 안의 data 만 자동 줄바꿈되어 표시되도록 하고 싶을땐 2가지 설정을 해주어야 한다.



하나는 DataGrid 의 VariableRowHeight 속성이고,






다른 하나는 DataGridColumn 의 wordWrap 속성이다.



위 두 Option 을 설정해주면 더이상 text 가 짤리지 않는다.