FLEX DataGrid의 한계를 넘자

Flex 프로젝트를 해오면서 datagrid는 선택이 아닌 필수로 사용해오고 있다

하지만 미려함으로 인해 무거운 Flex에서 대량의 데이터를 datagrid 로 출력하기엔 무리가 있다.

그래서 고안한 알고리즘이

대량의 데이터를 blazeds로 받아와 사용자의 브라우져 위에 있는 FLEX가 모두 처리하는것이 아닌

현재 사용자가 보고 있는 페이지의 데이터만을 서버에서 보내주고

클라이언트쪽에서는 사용자의 이벤트를 받아 즉각즉각 받아오는 형태로

클라이언트의 리소스와 퍼포먼스를 잡는 방법을 생각해보았다.

spring에서 쿼리를 돌려 약 컬럼수14개의 약 15만여건의 데이터를 적절히 가져와 List에

담고 있고 이후 지정된 메서드가 사용자의 이벤트에 맞춰 해당 페이지를 List에서 sublist하여

계속해서 전달하는 방식이다.

전달은 하되 클라이언트측에서는 스크롤된 안보는 페이지에 대해서 적절히 삭제가 들어가게 되고

전체적으로는 1~200 라인정도만을 유지하여 사용자에게 보여준다.

초기개발시 스크롤 이벤트를 잡아 개발하였더니 이건 완전 ㅠ

구현은 어느정도 되나 스크롤의 모양도 엉망.. 이벤트도 씹히기 일수고 영 불안한 모습이었다.

이후 FLEX4에 새로 추가된 컬렉션타입인 AsyncListView의 createPendingItemFunction 이벤트를

이용하여 개발하니 사용자의 이벤트나 현재 보고 있는 페이지의 계산이 훨씬 쉬워졌고

이벤트가 씹힌다거나 하는 현상도 전무하다 싶이 하였다.

사용중인 리모트클래스와 결합하고 콘트롤형태로 다시개발 새 프로젝트에 끼워넣고 있는데

퍼포먼스라던가 자원효율등 어느측면에서도 꽤 생각외로 괜찮다.

일단 dataprovider에 그냥 넣었으면 이미 뻗었을 양의 데이터들을 아주 부드럽고

자연스럽게 뿌려주고 있으니.. 대박 ㅇㅅㅇ

콘트롤을 프레임워크형태의 모음집에 넣어 상용프로그램에 실제 사용중이므로 공개할수는 없고

개발 당시 참고 하였던 관련 사이트들을 링크해본다.

Flex3 에서 사용시에는 Flex4 SDK open source에 있는 AsyncListView 클래스와 관련 클래스들을

그대로 가져가 약간의 변경후 사용하면 별문제 없이 Flex3에서도 동작은 한다.

하지만 그렇게 띄워보고 나서야

아 Flex3와 Flex4의 속도차이가 이런것이었구나 라고 느끼게 되었다는...



개발 참고 사이트

http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/

http://lightsblue.com/examples/flex/PagingRemoteDataWithIList/

http://lightsblue.com/examples/flex/PagingRemoteDataWithIList/srcview/index.html

http://help.adobe.com/en_US/flex/using/WS2c2b6b5d2efbc2ce-17a157741258e87ac50-8000.html



ps. 서버에서는 Spring 컨테이너를 이용