GIS Developer

추가해야할 이벤트는 많으면서 또 짐작하기 어렵고.. 시간이 없으니.. 일단 정리를 하여.. 추후 까막까막해져 혼란이 없으면 하는 바램에서 사용자 정의 이벤트를 추가하는 방법에 대해 정리를 해봅니다..

먼저 이벤트 처리 함수(이벤트 핸들러 함수)로 전달될 객체에 대한 클래스를 정의합니다.. 아래는 예입니다..

package geoservice.events
{
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class XrMapMouseEvent extends Event
    {
        public static const XRMAP_MOUSE_DOWN_EVENT:String 
                = "mapMouseDownEvent";
        public static const XRMAP_MOUSE_UP_EVENT:String 
                = "mapMouseUpEvent";
        public static const XRMAP_MOUSE_CLICK_EVENT:String 
                = "mapMouseClickEvent";
        public static const XRMAP_MOUSE_DBLCLICK_EVENT:String 
                = "mapMouseDblClickEvent";
        public static const XRMAP_MOUSE_MOVE_EVENT:String 
                = "mapMouseMoveEvent";
  
        public var mapX:Number;
        public var mapY:Number;
        public var mouseEvent:MouseEvent;
  
        public function XrMapMouseEvent(type:String, mouseEvent:MouseEvent, 
            mapX:Number, mapY:Number, bubbles:Boolean=false, 
            cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);

            this.mapX = mapX;
            this.mapY = mapY;
            this.mouseEvent = mouseEvent;
        }

        override public function clone():Event
        {
            return new XrMapMouseEvent(type, mouseEvent, mapX, mapY, 
                bubbles, cancelable);
        }
    }
}

하나의 이벤트 클래스에서 총 5개 종류의 이벤트를 책임지고 있습니다.. 만약 클래스 하나가 단 하나의 이벤트만을 책임진다면 생성자에서 type 인자는 필요치 않고 super를 호출할때 첫번째 인자 를 바로 값으로 지정해 주면 됩니다.

다음으로 이벤트를 발생시켜 주는 코드입니다..

parent.dispatchEvent(
    new XrMapMouseEvent(XrMapMouseEvent.XRMAP_MOUSE_DOWN_EVENT, e,
        coordMapper.V2W_X(mouseX), coordMapper.V2W_Y(mouseY)
    )
);

이벤트가 발생되는 적절한 위치에 위의 코드가 존재하면 되며.. 위의 코드는 XRMAP_MOUSE_DOWN_EVENT라는 한 종류의 이벤트를 발생시키는 코드입니다..

이제 마크업(MXML)쪽에서 이벤트를 인식하도록 하기 위한 메타 태그의 정의를 추가합니다..

[Event(name="mapMouseDownEvent", type="geoservice.events.XrMapMouseEvent")]
[Event(name="mapMouseUpEvent", type="geoservice.events.XrMapMouseEvent")]
[Event(name="mapMouseClickEvent", type="geoservice.events.XrMapMouseEvent")]
[Event(name="mapMouseDblClickEvent", type="geoservice.events.XrMapMouseEvent")]
[Event(name="mapMouseMoveEvent", type="geoservice.events.XrMapMouseEvent")]

public class XrMap extends UIComponent
{
    ....

여기까지가 사용자 정의 이벤트를 추가하기 위한 전부이고.. 다음은 이 사용하는 쪽의 코드입니다.. addEventListener를 사용해 이벤트를 추가해도 되고.. 아니면 마크업쪽에서 이벤트를 추가해도 됩니다..

마크업 쪽의 방법만을 살펴보면 다음과 같습니다.. 흔히 일반적인 컴포넌트에 대한 이벤트를 정의하는 것과 동일합니다..

      mapMouseDownEvent="map_mapMouseDownEventHandler(event)"
     mapMouseClickEvent="map_mapMouseClickEventHandler(event)"
     mapMouseDblClickEvent="map_mapMouseDblClickEventHandler(event)"
     mapMouseMoveEvent="map_mapMouseMoveEventHandler(event)"
     mapMouseUpEvent="map_mapMouseUpEventHandler(event)"/>

화면에 대한 전체 배경을 작은 이미지를 이용해 타일로 채우는 코드입니다.. 플래시의 동적 프로그래밍 언어의 특성이 유감없이 발휘되는…. 그래서 개인적으로는 다소 이해하기 어려웠던 내용입니다.. 뭐 여튼.. 코드를 살펴보기에 앞서 사용할 작은 이미지를 살펴보고.. 바로 코드를 살펴보도록 하겠습니다..

이제 첫번째 코드입니다..

[Embed(source="./assets/bg_logo.png")]
private var _bg_logo:Class;

private var _bg_logo_bitmap:Bitmap = new _bg_logo();

보시면.. 먼저 외부의 png 이미지 파일을 _bg_logo라는 클래스 타입으로 선언합니다.. 재밌는 액션스크립트 언어의 기능이라고 생각되는데요.. 데이터 자체를 클래스 타입으로 선언하고 재사용한다는 것.. 플래시의 태생이 멀티 미디어 저작툴이기 때문에 이런 개념을 도입한게 아닌가 싶습니다..

이렇게 선언된 클래스를 통해 바로 Bitmap 클래스 타입인 _bg_logo_bitmap 변수를 통해 생성시킵니다.. 와우!  이제 이렇게 만든 비트맵을 화면에 격자로 뿌려주는 코드는… 다음과 같습니다..

graphics.beginBitmapFill(_bg_logo_bitmap.bitmapData);
graphics.drawRect(0, 0, _width, _height);
graphics.endFill();

_width와 _height는 화면의 크기 정도라고 이해하시면 무리가 없습니다.. 제가 이 코드 꾸러미를 적용해서 얻은 결과 화면은 다음과 같습니다..

배열의 탈을 쓴 액션스크립트의 Array에 원소를 추가하고  삭제하는 매서드가 바로 splice라는 녀석인데.. 이 놈의 성질을 보다 명확히 파악하고 작업을 진행해야겠기에.. 정리를 해봅니다.

배열의 탈을 썼다는 의미는.. 아무리 봐도 이 Array는 배열이라고 하기 어려운 놈이라고 생각되기 때문입니다. 이 부분에 대해서는 다음 기회에 더 논하기로 하고… 이 Array에 원소를 중간에 추가하거나 중간의 원소를 삭제하는 매서드가 바로 splice입니다.

이 Array의 splice를 이용해 이떤 기능을 개발하고 있는데… 뭔가 작동이 제대로 의도하는 바대로 되지 않습니다.. Array에 대한 기본이 부족한 탓이기에 이 Array의 splice에 대해 살펴봅니다. 먼저 Array 타입의 변수에 다음과 같은 원소들이 담겨져 있다고 해 보겠습니다.

즉, 총 6개의 원소로 구성되어져 있으며 첫번째 원소는 배열 인덱스 0부터입니다. 이 초기 상태에서 다음과 같은 매서드를 호출하면…

v.splice(0, 0, 'a');

결과는 다음과 같습니다..

즉, 첫번째 자리에 a 값을 추가할 수 있습니다. 그리고 다시 초기 상태로 돌아가서… 다시 다음 코드를 호출하면..

v.splice(99, 0, 'a');

결과는 다음과 같습니다.

99번째 인자는 너무 커서 존재하지 않는 인자임에도 불구하고 인자하게도.. 가장 마지막에 a 값을 추가해 줍니다.. 그리도 또 다시 초기 상태로 돌아가서.. 다음 코드를 호출하면..

v.splice(2, 0, 'a');

결과는 다음과 같습니다.

2번째 인덱스 바로 앞에서 a 값이 추가됩니다..

이제.. 다시 초기 상태로 돌아가서 원소를 삭제하는 다음 코드를 실행해보면..

v.splice(2, 1);

결과는 다음과 같습니다..

정확히 지정한 2번 인덱스를 제거합니다.. 인덱스가 옳바르지 않을 경우 어떠한 에러도 발생하지 않고 원소들을 변경시키지 않습니다..

이제 정리가 끝났으니… 다시 코딩단으로……