프로젝트를 하다가 가끔씩 마주치는 이슈가 있는데
그것은 바로 DeepLinking 기능이다.
Flex에서 최종산출물이 swf로 떨어지기 때문에 JSP와 같이 GET 방식의 주소를 통해 정해진 인자를 주소로 보내면 특정 페이지로 바로 접근하는 방법을 찾던도중 DeepLinking이란 기능을 알게 되었다.
물론 이것은 JSP 처럼 별다른 연산 없이 바로 접근 할 수 있는게 아니라 그저 Flex가 내부적으로 브라우져 주소입력창에 어떤 내용을 넣었는지 확인 할 수 있는 그런 기능일 뿐이다.
그래도 이것이 어딘가 싶어서
연구를 하다가 또 놀라운 사실을 접하게 되었는데 알고 보니 Flex의 단독기능이 아니라 JavaScript와 SWF 상호간의 ExternalInterface를 이용한 콤비네이션이었을 뿐이었고 나처럼 빌더를 쓰지않고 EditPlus로 개발하는 사람으로써는 그런 JavaScript를 구축하는데 꽤나 시간이 많이 소요된다는 점에서 조금 실망하지 않을 수 없었다.
그래서 나는 이 방법을 피하고 싶어 꽤나 요리조리 피해 클라이언트 들에게 이렇게 하면 어떻겠냐 저렇게 하면 어떻겠냐라고 하다가 이번엔 좀 제대로 걸려서 천상 이 DeepLinkg을 만들어야할 상황에 온김에 포스팅도 같이 고고.

아무튼 일단 빌더로 구축된 Flex 산출물 중에 history라는 디렉토리가 자동으로 생성된다는 사실을 알고 있을텐데 그 안에 보면 history.js 파일이 있다.
그 안에 보면 BrowserHistory = (funtion() { .......}) 하는 형식으로 짜여진 함수를 볼 수 있을 것이다.
그 안에 있는 내용이 DeepLinking과 관련 된 내용들이다.
(사실 Javascript는 문외한이라 잘 모르지만 통밥으로 느낄 수 있다!!)

뭐... 잘 살펴보면 "#" 이라는 구분자로 주소와 파라미터를 구분 한다는 것도 알 수 있고
그 파라미터를 Flex에서 가져갈 수 있게끔 리턴도 해준다.

일단 이런 내용은 빌더로 프로젝트를 하나 구축하면 자동으로 생성되므로 확인 할 필요가 없다.
Javascript는 알아서 만들어주니 걱정은 덜고 Flex에서 코딩을 어찌할지가 문제로구나.

이런 예제 소스는 여기저기 많다.
http://www.flexlive.net/?p=84 여기서는 샘플코드를 다운로드 해줄 수 있게 해준다.
http://labs.adobe.com/wiki/index.php/fl ··· _linking 여기는 Adobe Lab

Google에서 이것저것 검색하면 많이 나오므로 걱정하지말고 두드려라 그럼 열릴것이니.

자. 그렇다면 어떤 어떤 클래스를 import를 해야하는지 알아보자.

DeepLinking을 하려면 IBrowserManager 와 BrowserManager 두개의 클래스가 필요하다.
IBrowserManager를 주로 사용하는데 이 클래스는 결국 인터페이스 클래스이므로 Construct를 하기위해서는 BrowserManager.getInstance() 메서드가 필요하다.

var browserManager:IBrowserManager = BrowserManager.getInstance();

이런식으로 Construct를 해준다.
그럼 이제 주소표시줄의 내용을 가져오고 싶은데 그렇게 하려면 이벤트리스너를 등록해줘야한다.
BrowserChangeEvent 클래스가 있는데 여기에서 URL_CHANGE 이벤트를 받을 수 있게 해주면
주소표시줄에 # 이하의 파라미터가 있으면 이벤트가 발생하게 된다.(없으면 발생하지 않는다.)

그래서 간단하게 개념 정리를 하자면 이렇다.
Application이 initialize하게 되면 IBrowserManager를 Construct를 시키고
BrowserChangeEvent.URL_CHANGE 이벤트를 등록한다.

이벤트가 발생하면 파라미터값이 있는 것이므로 이벤트 핸들러에서 파라미터 값에 맞는 액션을 취해주면 된다.

결국 Flex소스 자체에는 큰 액션이 없다.
JavaScript가 하는 일을 그저 BrowserManager가 받아서 처리 해주는 일 뿐이다.
간단하게 소스를 짜면 아래와 같은 로직이 될것이다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml initialize="initializeHandler()">
<mx:Script>
        <![CDATA[
        import mx.controls.Alert;
        import mx.managers.IBrowserManager;
        import mx.managers.BrowserManager;
        import mx.events.BrowserChangeEvent;

        private var browser:IBrowserManager;

        private function initializeHandler():void
        {
            // IBrowserManager 생성
            browser = BrowserManager.getInstnace();
            browser.addEventListener(BrowserChangeEvent.URL_CHANGE, urlChangeHandler);
        }
       
        private function urlChangeHandler(event:BrowserChangeEvent):void
        {
            Alert.show("파라미터 : " + browser.fragment);
        }
        ]]>
</mx:Script>
</mx:Application>

간단하게 이런식으로 파라미터를 받아와 DeepLinking 할 수 있게 코딩을 할 수 있다.
하지만 프로젝트 초반에 이런 기획이 없이 개발에 들어가면 나중에 소스를 죄다 뜯어 고쳐야할 소지가 짙으므로
미리 이런 기능이 필요한지, 아닌지에 대하여 논의를 하고 설계를 해야할 것이다.
물론 이런 반쪽뿐인 DeepLinking 기능이지만 그래도 이만하면 Flex도 할만큼 한게 아닐는지;;