Flex 4의 Spark 계열 DropDownList는 List를 확장한 컴포넌트이다. Flex 3에서 ComboBox와 유사하게 사용할 수 있다.

 

DropDownList는 DropDownBase대신 List를 서브클래스로 한 것이 커다란 변화이다. 이렇게 된데에는 Iwo Banas라는 사람이 기존 Gumbo의 FxComboBox을 더욱 확장이 가능하고 내부적으로 독립화된 구조의 필요성에 대한 제안을 반영한 결과이다. 이에 따라 DropDownList는 dropDown 스킨 부분을 더이상 가지지 않고 List의 dataGroup 스킨을 사용하게 되었다.

 

DropDownList 컴포넌트의 기능 및 디자인 스펙을 보고 싶다면 아래 글을 보기 바란다. 이 글만 잘봐도 DropDownList에 내부구현 및 사용방법에 대해 어느정도 이해할 수 있을 것이라 생각한다.

 

http://opensource.adobe.com/wiki/display/flexsdk/Spark+DropDownList

 

또한 API에 대한 자세한 내용은 아래 글을 참고한다.

http://livedocs.adobe.com/flex/gumbo/langref/spark/components/DropDownList.html

 

DropDownList를 사용하는 방법은 Peter deHaan의 블로그만 봐도 쉽게 학습할 수 있다.

나는 이 블로그에서 DropDownList를 언급한 글들만 골라서 사용해 보았다. Flex 3와 달라 약간 생소하지만 놀라운 스킨 적용의 확장성에 매력을 느끼게 될 것이다. 아래에서 소개하는 4개의 큰 제목을 누르면 해당 포스트로 이동한다.

 

Setting a content background color on a Spark DropDownList control in Flex Gumbo

 

이 예제는 DropDownList를 이용하는 매우 간단한 예제로 DropDownList의 DropDown되는 리스트의 배경색을 바꾸는 것이다.

 

 

Setting the symbol color on the Spark DropDownList control in Flex 4

 

 

이 예제도 그 전 예제와 비슷한 난이도의 예제로 DropDownList의 Symbol의 색을 변경하는 예제이다.

 

 

Creating a tile layout Spark DropDownList control in Flex Gumbo

 

 

이 예제는 DropDownList의 커스텀 스킨을 적용하는 방법을 보여주고 있다. 블로그에 있는 커스텀 스킨은 Gumbo버전이라 작동을 잘 안하는데 스킨은 아래 것을 받아 해보길 바란다. Peter deHaan의 예제에서 PopUp을 사용했는데 Flex 4부터는 PopUpAnchor로 바뀌었다.

 

List에 보여지는 아이템이 원래 DropDownList의 기본 Skin인 spark.skins.DropDownListSkin과 달라진 점은 PopupAnchor의 DataGroup를 VerticalLayout으로 지정하는데 여기서 사용한 Layout은 HorizontalLayout이라는 점이 다르다. 게다가 위치도 아래표시가 아니라 우측에 표시되도록 했다. 이처럼 스킨부분에서 모든 Layout을 수정할 수 있도록 한 것이 Flex 4 컴포넌트의 컨셉이다. 이것은 Flex 3의 단점을 잘 극복한 부분중에 하나이다.

 

조금 더 재미있게 바꿔보자. Application과 DropDownSkin을 아래 코드로 바꿔보자.

 

 

스킨만 바꿨을 뿐인데...(갑자기 어느 광고가 생각남.. ㅋ)

위 프로그램 처럼 DropDownList의 스킨을 바꿀 수 있다. 그것도 아주 쉽게~~

 

 

Displaying images in a Spark DropDownList control in Flex Gumbo

 

방금 예제에서 DropDownList의 스킨을 바꾸는 것을 보여주었다. 그럼 DropDownList에 이미지도 보여줄 수 있을까? 당근 아주아주 쉽게 할 수 있다.

 

 

여기에서 사용된 BitmapImage는  spark.primitives.* 패키지에 포함되는 것으로 Group을 확장한 Graphic내에 넣을 수 있다. Graphic에 넣을 수 있는 것중에는 <Rect>, <Path>, <Ellipse>등도 포함한다. 관련 내용은 아래 링크를 참고한다.

 

http://livedocs.adobe.com/flex/gumbo/langref/spark/primitives/package-detail.html

 

 

정리하며

지금까지 Flex 4의 Spark DropDownList에 대해서 살펴보았다. Flex 3와 달리 Flex 4에서는 스킨 적용시 ActionScript 3.0 기반이 아닌 MXML이라 직관적이고 편리하게 할 수 있다는 것이 큰 매력이였다. 또한 기능도 매우 확대되었다. Spark 컴포넌트라면 이와 같은 방법으로 스킨을 적용할 수 있다는 것을 이해하는 것이 중요하겠다.


테스트 환경 : Flash Builder 4 + Flex SDK 4

Flash Builder 는 아래 링크에서 다운 받자.

http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026 

글쓴이 : 지돌스타(http://blog.jidolstar.com/567)

+ Recent posts