이번 연재에서는 웹 화면을 구성하는 UI 플러그인(Plug-in)의 구조를 설명하고 실제 구현 방법을 살펴본다. 이를 통해 컴포넌트의 구조를 중점적으로 이해하고 지난 시간에 살펴본 소스 파싱 부분에서 UI 플러그인을 어떻게 연동할 수 있는지를 확인할 수 있다.

Ajax 프레임워크(Framework)에서 웹 화면을 구성하는 각종 컴포넌트를 UI 플러그인이라고 한다. 이러한 컴포넌트는 플러그인 구조를 가져 추가 컴포넌트를 시스템에 추가할 수 있도록 구성된다.

UI 플러그인의 개념 및 구조
이러한 UI 플러그인은 Ajax 프레임워크에서 기본 스펙(Spec)으로 사용하는 Xforms의 User Interface Control(Form Control)을 비롯해 차트, 그리드와 같은 확장 컴포넌트 및 써드 파티(3rd Party)에 의해 공급되는 써드 파티 플러그인, 그리고 사용자가 직접 추가할 수 있는 사용자 정의 컴포넌트 등으로 구성된다. 상세한 분류 및 구성 컴포넌트는 <그림 1>과 같다.

이러한 플러그인은 플러그인 엔진을 통해 웹 화면에 그려지는데 써드 파티 및 사용자 정의 플러그인을 지원하기 위해 모든 플러그인은 몇 가지 표준을 준수하도록 구성되어야 한다. 그 표준은 다음과 같다.

- 플러그인은 Component라는 클래스를 상속 받는다.
- 필수 구현 함수인 applyClass, callClass를 구현한다.
- 써드 파티 및 사용자 정의 플러그인은 환경 설정 파일에 객체 이름, namespace, source경로, 클래스 이름을 설정해야 한다.

엔진과 플러그인 관련 객체 사이의 관계를 나타내면 <그림 2>와 같다.



먼저 Component에 대해 알아보자. Component는 플러그인의 최상위 객체로 UI 플러그인을 관리하고 표현하기 위한 attribute와 method를 가지고 있다. Component의 클래스 다이어그램은 <그림 3>과 같다.



Component의 주요 함수에 대한 기능은 <표 1>과 같다.