AMF3 기반의 옥션 Open API Beta 론칭

RIA을 통한 Open API 지원을 위해 옥션에서는 AMF3 기반의 Open API를 개발 중에 있습니다. 요 몇일전(^^) 조용히 3개의 API를 Beta 버전으로 론칭을 했습니다.

아직은 제대로된 도움말도 없지만… 바로 사용이 가능하도록 간략한 샘플들을 포함해서 Action Script 3 라이브러리를 제공하고 있습니다. 이 라이브러리는 완전한 Open Source로 개발을 진행하고 있으며, 개발을 진행 중인 라이브러리 소스 및 샘플 소스는 http://code.google.com/p/as3-fxapi-lib-auction 에서 얻을 수 있습니다.

이를 통해 옥션의 다양한 Open API를 RIA 개발에서 활용 할 수 있는 폭이 훨씬 넓어질 것으로 생각됩니다. 그리고 기존의 Web Service 형태의 Open API를 이용하는 것보다 AMF3 기반의 새로운 Open API는 기존 대비 30%이상 처리 속도가 빠른 것으로 측정되어 경쟁있는 Application 개발에 도움을 줄 것입니다.

향후 계획에는 sliverlight에 대한 지원도 포함되어 있어서 RIA 분야에서 더욱 폭넓게 활용 될 것으로 기대됩니다.

페이징 대신 무한 스크롤

긴 목록(list)를 보여 주는 인터페이스로 Web에서는 Paging 처리가 일반적이었지만, 목록을 구성하는 데이타의 속성에  따라서는 이 보다는 전체 목록을 자연 스럽게 스크롤링해서 볼 수 있는 인터페이스가 좀 더 편리합니다. 예를 들면, 구글 리더(Google Reader)나  네이트 메일의 편지함 등이 그렇습니다.

첫페이지가 나타나고 목록을 보다가 스크롤바를 내리면 페이징없이 자연스럽게 계속 목록의 끝까지 볼 수 있는 방식이죠. 보통은 AJAX를 통해 많이 구현하고 있습니다. 이를 Data Grid에 구현해 보면 이렇습니다.

실제 작동 방식은

- 처음 페이지가 로드되면 한 페이지 분량의 데이타를 읽어서 Data Grid의 dataProvider에 채웁니다.
- 사용자가 데이타를 더 보기 위해 스크롤 바를 내려서.. 목록의 90% 지점 이하로 내리면 다음 페이지의 데이타를 읽어서 기존 dataProvider에 추가(‘addItme’)해 줍니다.

여기서 살펴 볼 것

- DataGrid의 스크롤(’scroll’) 이벤트 처리
- DataGrid의 dataProvider의 데이타 변경 이벤트를 멈추기

 

<mx:DataGrid dataProvider="{_result}" scroll="scrollResult(event)"
x="10" width="350" height="298" id="tblResult" editable="false" y="36">
....
....
</mx:DataGrid> 

1. DataGrid의 ’scroll’ 이벤트 처리

DataGrid의 스크롤바를 이동하면 ’scroll’ 이벤트가 발생합니다.

private function scrollResult(e:ScrollEvent) : void {
    if (this._totalItemCnt > this._loadedCnt &&
        true == this.btnStartLoad.enabled &&
        ScrollEventDirection.VERTICAL == e.direction && 0 < e.delta) {

        if (0.9 * this.tblResult.maxVerticalScrollPosition < e.position)
            this.doLoad(this._loadedPageIdx + 1);
    }
}

’scroll’ 이벤트는 수평 이동과 수직 이동이 있으며 파란색으로 표시된 라인의 direction을 통해서 이를 알 수 있습니다. delta는 스크롤 바가 이동한 거리를 나타내며, 수직 스크롤바의 경우 아래로 내리면 양수(+) 값을, 올라가면 음수(-) 값을 가집니다.

보라색으로 표시된 라인에서 e.position은 스크롤바의 thumb(마우스로 찍어서 움직일 수 있는 부분)의 위치를 가리킵니다. 실제 값은 DataGrid의 maxVerticalScrollPosition 값에 대해서 상대적입니다. 이것은 화면의 점 좌표와는 다른 것입니다.

 

2. dataProvider의 변경 이벤트 조절

DataGrid의 dataProvider로 지정된 ArrayCollection 변수는 그 내용이 변경되면 DataGrid에 반영됩니다. 한 번에 전체 목록을 변경한다면 괜찮겠지만, 기존 목록에 항목을 하나씩 추가해야 하는 경우에는 추가 싯점 마다 이벤트가 발생하므로 많은 항목을 추가하는 경우엔 문제가 됩니다.

그래서 항목을 변수에 추가하는 동안에는 DataGrid로 변경 이벤트를 보내지 않았다가, 항목 추가가 끝나는 순간에 반영하도록 조절 할 필요가 있습니다.

[Bindable]
private var _result:ArrayCollection;
....
....
this._result.disableAutoUpdate();
var beginIdx:uint = this._loadedCnt;
for (var i:uint = 0; i < this._pageSize; i++) {
    var listItem:Array = new Array(3);
    ....
    ....
    this._result.addItem(listItem);
}
this._result.enableAutoUpdate();

DataGrid의 dataProvider로 설정된 ArrayCollection 변수에 항목을 추가하기 전에 disableAutoUpdate()’를 호출하여 변경 이벤트를 중지 시킵니다. 모든 항목이 추가된 이후 다시 변경 이벤트를 자동적으로 발생시키도록 ‘enableAutoUpdate()’를 호출합니다.

 

* Example Source Code : endlessScroll.zip

ASP.NET 기반의 Flash Remoting

Flash Remoting (AMF3를 활용한) 서버로 .NET 기반의 솔루션을 사용한다면

생각해 볼 수 있는 구성

- WebOrb
- Flourine Fx

우리는  ’Flourine Fx’를 선택했다. 이유는… Free / Support .NET Framework 1.1 ~ 3.5 (최초 개발 당시 우리 플랫폼은 .NET 1.1 기반이었고, 지금은 3.5) 

 

특징

- 진짜 빠르다.
- 좀 많이 쉽다.
- Flex 뿐만 아니라 Silverlight도 사용 가능하다!!