Ext JS와 VCL
VLC(Visual Component Library)은 볼랜드Borland 사에서 1995년에 델파이를 개발하면서 설계한 윈도우 프로그래밍 라이브러리입니다.  VCL을 윈도우 플랫폼의 데스크탑 애플리케이션 개발에 있어서 공통적으로 빈번하게 사용되는 요소들을 미리 만들어 두고 필요할 때마다 쉽게 이용할 수 있도록 해서 개발자들로 하여금 반복적인 작업을 빠르고 쉽게 처리할 수 있도록 하는 라이브러리입니다. 

Ext JS 는 이러한 메커니즘을 도입하여 철처하게 컴포넌트 중심의 컴포넌트를 지향하는 프레임웍으로 설정해 가고 있습니다.  그리고 Ext JS의 VCL은 델파이의 VCL과 마찬가지로 컴포넌트들로 구성하는데 필요한 몇 가지 클래스들이 상속 개념에 의해 계층구조로 잘 정의되어 있는 객체지향 클래스들의 그룹이라고 말 할 수도 있습니다.

 
TComponent Class in Delphi

TComponent Class in Delphi



Ext JS는 델파이의 이런 컴포넌트 중심의 컴포넌트 지향적인 구조와 동일하며 각각의 컴포넌트들은 윈도우 프로그래밍에 필요한 컴포넌트들 처럼 웹에서 이와 동일하게 프로그래밍 할 수 있도록 특정 기능들을 잘 포장하고 있습니다.

Ext JS의 VCL은 기본적으로 Ext.Component 클래스를 상속받는 객체라고 정의할 수 있습니다.  그래서 Ext JS에서는 JavaScript에서 간단한 코드 몇 줄을 이용하여 마치 레고 조각을 하나씩 맞춰서 결과를 완성하듯이 컴포넌트들의 속성과 이벤트 조작을 통해서 쉽게 웹 애플리케이션을 완성할 수 있습니다.

델파이가 데스크탑 프로그래밍 개발을 위한 컴포넌트 기반의 프로그래밍 구조를 적립시켰다면 이러한 데스크탑의 프로그래밍의 경헙을 웹으로 옮기는 시도를 바로 Ext JS가 진행하고 있습니다.


Ext JS 의 비시각적 컴포넌트
Visual Component Library라는 이름 때문에 Ext JS 가 갖는 VCL 안에 포함된 컴포넌트들이 모두 시각적인 특성을 갖는다고 생각할 수도 있을 것이다.  하지만 Ext JS는 많은 비시각적인 컴포넌트도 상당히 많습니다.  Ext JS 3.0과 함께 발표한 Design Preview 에서 볼 수 있듯이 시각적인 컴포넌트는 폼을 디자인 타임뿐 아니라 브라우저 내에 런 타임 시에 우리가 볼 수 있는 컴포넌트를 말합니다.  그리고 비시각적인 컴포넌트란 런 타임에는 브라우저상에 표시되지 않는 컴포넌트를 말합니다. 예를 들면 Ext.util.TaskRunner나 Ext.data 패키지와 같은 컴포넌트가 대표적인 것들입니다.

일반적으로 프로그래밍 언어에서는 컴포넌트보다 클래스라고 이해하고 사용을 하지만 Ext JS 프레임워크가 갖는 사상은 컴포넌트의 개념을 가지고 접근을 합니다.


Component 계층 구조와 주요 클래스들
Ext JS의 비주얼 컴포넌트들은 객체 지향 언어의 상속 개념에 의해 계층 구조를 이루는 여러 클래스들로 구성되며 다음의 그림이 비주얼 컴포넌트의 기복적인 계층 구조를 보여 줍니다.

 
[그림 첨부 : 컴포넌트 계층 구조]

위의 그림을 바탕으로 각 클래스들의 특징과 기능에 대해서 좀더 상세히 알아보기로 하겠다.


Ext.Component
클래스 다이어그램에서 알 수 있듯이 비주얼 컴포넌트에서 가장 상위 단계의 클래스는 Ext.Component이다. Ext.Component는 Ext JS에서 비주얼 컴포넌트들의 최상위 선조 클래스로서 VCL 계층 구조 안에 포함되어 있는 모든 클래스의 공통적인 특성과 기능을 가지고 있다.  

Ext.Component의 주요 역할은  Ext 의 모든 컴포넌트들은 Component의 서브 클래스로 자동적으로 생성, 렌더링, 소멸의 Ext.Component Life Cycle(생명주기)을 적용 받고 Ext.Observable 클래스를 상속받아 컴포넌트의 동작을 위한 일관된 이벤트 제어, 관리, 동작 모델을 제공한다.  좀더 자세한 사항은 다음에서 구체적으로 살펴본다. [계속..]


Ext.Component의 기본구조
Ext.Component의 구조는 Config Options, Public Properties, Public Methods, Public Events 의 4가지로 이루어 진다. 고도의 사용자 정의를 통해 Component를 설정하기 위한 Config Options 과 Component 에 지정된 Public Events 이 것은 흔히 말하는 Custom Event 모델을 통해 컴포넌트에 이미 정의되어져 있다.  그외 컴포넌트의 주요 변수와 메소드로 구분되어진다.

 
[그림 컴포넌트 내부 구성도]



Configuration Option Object
Config 속성들은 컴포넌트의 생명주기(Life Cycle)인 생성, 렌더링, 소멸 시 컴포넌트가 동작하게 될 일련의 과정을 정의하는 오브젝트이다. 

이 오브젝트에는 관심 있게 봐야 할 것은 모든 컴포넌트들의 공통 속성인 xtype 속성의 도입이다.  xtype 속성은 한 컴포넌트를 다른 컴포넌트와 구별하는데 사용될 수 있고 DOM의 관점에서 본다면 id 속성과 같다. 

그래서 당연한 애기지만 컴포넌트의 xtype속성 값은 다른 것들과 중복 되지 않는 유일한 값이어야 한다.

생성과 소멸을 위한 속성은 data, plugins, ptype, stateEvents, stated, stateful, tplWriteMode, xtype 정도이고 그 밖의 대부분은 컴포넌트의 외형적인 설정을 위한 렌더링 시점에서 필요한 속성들이 대부분이다.

Public Properties
컴포넌트의 표시 및 활성 상태, DOM 엘리먼트, Configuration Option, Node 관계, 렌더링 상태 등을 참조할 수 있는 변수를 나타낸다.

Public Methods
생성자와 소멸자를 포함하고 DOM 접근 방식과 일관된 컴포넌트 접근 모델, 표시 및 활성상태, 렌더링 속성 변경 등 컴포넌트의 기초적인 동작 구현의 집합이다.

Public Events
이 이벤트들은 Ext.util.Observable 이벤트 모델을 통하여 Ext.Component 클래스에 정의된 사용자 이벤트로 컴포넌트의 생명주기에서 발생하는 일련의 세세한 과정마다의 이벤트를 등록하여 컴포넌트마다 유일한 동작 방식을 정의할 수 있게 된다.



신고
Posted by Rhio.kim
TAG ,