안녕하세효~ 엄입니다.

리스트박스의 최소한의 기능을 하는 부분만 구현해 본겁니다.

코딩질 하다보면 ListBox 형태, 즉 목록이 박스 안에 나열되는... 그런것들이 꽤 자주 등장합니다.
컴포넌트가 아니라, 일반적으로 프로그래밍을 어떻게 하는지 보여드릴라고 준비했습니다.
스크롤러는 전에 맨들었던 SimpleSlider를 계속 이용하겠습니다.

전부터 맨들어 쓰던 방식인데, 3.0으로 다시 맨든거구요.  전체적으로 어떤 구조로 만들어져 있는지
파악해보시면 코딩질 하는데 약간이나마 도움이 되지 않을까 싶습니다.

as3.0에 아직 초보라서 3.0의 좋은 기능들을 잘 활용하지 못하니까, 여기선 이렇게 하면 더 좋다 뭐
그런 조언 좀 주시면 감사하겠습니다.

자 그럼 고고싱 합니다.


먼저 전에 만들었던 슬라이더는 ui 패키지에 넣어뒀구요. 거기서 참조해서 쓸겁니다.

그리고 리스트박스에 추가되는 Item은 일단 클래스 두갠데,
일부러 상위클래스라고 보여줄라고 SuperItem이라는 클래스를 만들었고,
하위 클래스로 하나 맨든건 TextItem 클래스입니다. 당연히 SuperItem을 상속했습니다.

다른 종류의 아이템을 맨들고자 한다면 SuperItem을 확장하면 되것죠 뭐.

그리고 fla에 document로 걸려있는 파일이 ListBox.as 입니다. 이 ListBox.as 를 리스트박스를 위한 하나의 View로
보시면 되것습니다.

ListBox가 아무래도 주요한 소스니까 좀 자세히 보겠습니다.

먼저 fla의 stage에 놓여 있는 무비클립들을 참조하게 될 것이고,
초기화부분이 있구요.
여기서 중요한건,

private var itemTarget:Array;
public function addItem(item:SuperItem):void
private function added_item_handler(evt:Event):void
private function autoAlign():void

이렇게 아이템을 관리하는 배열 하나와, 메서드 세개 입니다.

외부로 노출된건 addItem 하나구요. Item객체를 인수로써 받게 됩니다.
자 그럼 addItem 메서드를 볼까효

public function addItem(item:SuperItem):void
{
        itemTarget.push(item);
        item.serial = itemTarget.length;

        item.addEventListener(SuperItem.ADDED_ITEM, added_item_handler);
        item.addAtHolder(mcListBox.mcEmptyHolder);
}

만약 외부클래스에서 addItem()을 호출하게 되면, itemTarget에 item을 계속 배열에 쌓고,
아이템 하나하나의 관리를 위해 임의로 시리얼번호를 먹였습니다. 이 시리얼번호 먹이는 로직은
뭐 대충한겁니다.
그리고, 아이템이 화면에 그려졌다는걸 알리는 이벤트를 하나 걸어줍니다.
아이템이 이미지나 swf 등을 로드 하는 경우, 코디가 비동기화되기 때문이죠 뭐.
그리고, "거기다가 그려~~~~~~~~~~~~" 라는 의미로 addAtHolder()를 실행해서 해당하는 무비클립 안에
아이템을 그려줍니다.
다 그려지면 아이템이 이벤트를 날릴테니까 그쪽은 신경 안써도 되겠네요.



자 다음 단계
아이템이 그려지면, added_item_handler()가 실행되고, 여기서 autoAlign()을 실행해서 아이템을 정렬을 합니다.
그래야 화면에 이쁘게 보일테니깐,

인자 아이템이 어떻게 생겼나 좀 볼께염.








package
{
        import flash.display.MovieClip;
        import flash.events.EventDispatcher;

        public class SuperItem extends EventDispatcher
        {
                // 아이템 상수
                public static var ADDED_ITEM:String = "added_item";
                public static var SELECT_ITEM:String = "select_item";


                private var __target:MovieClip;
                private var __text:String;
                private var __serial:Number;

                public function SuperItem(str:String)
                {
                        text = str;
                }

                // 하위에서 구현
                  public function addAtHolder(mc:MovieClip):void
                {

                }


                public function set target(mc:MovieClip):void
                {
                        __target = mc;
                }
                public function get target():MovieClip
                {
                        return __target;
                }



                public function set serial(nNum:Number):void
                {
                        __serial = nNum;
                }
                public function get serial():Number
                {
                        return __serial;
                }



                public function set text(str:String):void
                {
                        __text = str;
                }
                public function get text():String
                {
                        return __text;
                }
        }
}

먼저 아이템을 만들 상위클래스 입니다. EventDispatcher를 상속해서 외부로 이벤트를 날릴 수 있게 합니다.
아이템이 그려졌다거나, 아이템을 선택했다거나 뭐 그런 이벤트가 있겠죠.
그리고 아이템이 가지고 있어야 하는 기본적인 공통 속성들을 정의합니다.
addAtHolder() 아이템에 따라 그려지는 방법이 다르기 때문에 하위에서 구현하도록 합니다.

이제 이 클래스를 상속해서 만든 TextItem을 볼께효






package
{
        import flash.display.MovieClip;
        import flash.events.Event;
        import utils.LinkageManager;
        public class TextItem extends SuperItem
        {
                private var linkage:String = "mcItem";
                public function TextItem(str:String)
                {
                        super(str);
                }

                public override function addAtHolder(mc:MovieClip):void
                {

                        target = LinkageManager.getMovieClip(linkage);
                        mc.addChild(target);
                        dispatchEvent(new Event(ADDED_ITEM));
                }

        }
}

뭐 간단하네요. addAtHolder만 구현해놨습니다. 화면에 붙이기 위한거죠 뭐.
LinkageManager는 전에 올린 강좌에 소스가 있습니다.
화면에 일단 그려지면 외부에다가 나 그려졌어~~~~~ 라고 알리고, 끝~ 입니다.


어라 설명 끝났네.
소스 올려드릴께요 ^^