이번 시간에는 지난 호에서 익힌 UI 플러그인의 실제 구현을 중요 컴포넌트를 중심으로 살펴볼 것이다. 이를 통해 Ajax 응용 프로그램에서 활용될 수 있는 다양한 컴포넌트를 살펴보고 웹2.0의 핵심인 매쉬업(Mash-up)을 구현하는 방법을 소개한다.

달력 플러그인(Plug-in)은 화면에 날짜를 표시하는 컴포넌트로 기본 플러그인은 아니지만 다양한 프로그램에서 많이 이용되는 컴포넌트이다.

달력 플러그인 구현
달력 플러그인을 표시하기 위한 XML은 <리스트 1> 과 같다.

지난 시간에 설명한 것처럼 UI 플러그인을 구현하기 위해서는 먼저 component와 selectbox 라이브러리를 추가하고 component를 상속 받은 객체를 생성한다. 이어서 생성자, callClass, applyClass를 구현해야 한다. 그럼 이제 각각의 세부 구현을 살펴보자.

calendar 생성자의 세부 구현
calendar Class의 생성자 부분 구현은 <리스트 3>과 같다.

Calendar 플러그인의 실질적인 생성자는 callClass이므로 받은 인자를 그대로 callClass로 넘긴다. 이렇게 생성자를 사용하는 경우는 Script단에서 직접 사용할 때일 뿐이고, 파서(Parser)에서는 var classID = new WebSquare.uiplugin.clanendar();와 같은 작업만 해주고 applyClass에서 callClass를 부른다.

callClass 세부 구현
callClass는 Calendar 객체를 초기화하는 함수로 다음과 같은 작업을 진행한다.

- 내부에서 사용할 변수를 초기화한다.
- HTML 객체를 생성하고 초기화한다.
- 휴일 데이터를 조회한다.
- 현재일을 조회한다.
- 달력을 처리하는 데 필요한 이벤트(Event)를 생성한다.



Calendar의 상단에 있는 년/월 선택 콤보박스를 표현하기 위해 this.yearSelect = new WebSquare.uiplugin.selectbox( "yearSelect", "width:65px", yearItemArr, yearAttributeList, null, null, yearEvent, "", "", "","","","","");와 같이 selectbox 플러그인을 이용한다. 또한 달력의 날짜를 이동하고 선택하기 위한 각종 이벤트를 처리하기 위해 WebSquare.event.addListener 및 WebSquare.event.addUserEvents를 이용한다. 이벤트 처리에 대한 상세 내용은 마소 10월호의 4회 내용을 참고하자.