KR101330559B1 - 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치와 상기 프레임워크 장치를 이용한 웹 컨텐츠 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체 - Google Patents

Abstract

본 발명은 자바스크립트를 이용하여 프레임워크를 구성하고, 엑스엠엘(이하, XML이라 칭함) 문서를 이용하여 객체화 및 재사용성을 높이고 디자인 부분과 로직 부분을 분리하도록 함으로써 효과적이며 객체 지향적 방식의 클라이언트 어플레케이션 개발이 가능하도록 한 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체에 관한 것으로, 이를 위해 자바스크립트 언어를 이용하여 클래스 생성을 지원하는 기본 클래스를 제공하고 XML 컨텍스트 파일을 해석하여 인스턴스 팩토리를 구성하며 이벤트 기반 처리 및 웹서버와 실시간 및 유연한 통신이 가능하도록 하는 프레임워크를 제공하도록 함으로써, 자바스크립트 개체의 효율적인 관리와 유지보수 및 재활용성을 극대화하고, XML 컨텍스트를 통해 디자인코드와 논리 코드를 분리시킬 수 있어 분업 개발 및 객체지향 특성을 향상시키는 효과가 있다.

Description

자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치와 상기 프레임워크 장치를 이용한 웹 컨텐츠 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체{JAVA SCRIPT BASED WEB-CLIENT APPLICATION FRAMEWORK, WEB CONTENTS PROCESSING METHOD USING THE FRAMEWORK AND COMPUTER READABLE MEDIUM PROCESSING THE METHOD}

도 1은 일반적인 웹페이지 구성을 보인 예.

도 2는 일반적인 웹페이지 구성을 보인 다른 예.

도 3은 본 발명 일 실시예의 개념을 보인 개념도.

도 4는 본 발명 일 실시예의 아키텍쳐.

도 5는 본 발명 일 실시예에 따른 웹컨텐츠 구성예.

도 6은 본 발명 다른 실시예에 따른 웹컨텐츠 구성예.

도 7은 본 발명 또 다른 실시예에 따른 웹컨텐츠 구성예.

도 8은 본 발명 또 다른 실시예에 따른 웹컨텐츠의 화면.

도 9는 도 8의 웹컨텐츠를 구성하기 위한 디자인 코드 구성.

도 10은 도 8의 웹컨텐츠를 구성하기 위한 엑스엠엘(XML) 코드 구성.

도 11은 도 8의 동작을 위한 프레임워크의 개념도.

** 도면의 주요 부분에 대한 부호의 설명 **

100: 웹페이지 110: 자바스크립트 코드 영역

120: 웹 디자인 코드 영역 150: XML 컨텍스트

200: 어플리케이션 프레임워크 210: 라이브러리

220: 클래스 패키지 300: 프레임워크

301: 클래스 베이스 302: 유틸리티 모듈

303: HTML DOM 304: 윈도우 컴포넌트

305: 드래그 & 드롭 처리부 306: 이벤트 리스너

307: 메세지 처리부 308: XML DOM

309: Ajax 컴포넌트 310: 인스턴스 팩토리

본 발명은 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치와 이를 이용한 웹 컨텐츠 처리 방법에 관한 것으로, 특히 자바스크립트를 이용하여 프레임워크를 구성하고, 엑스엠엘(이하, XML이라 칭함) 문서를 이용하여 객체화 및 재사용성을 높이고 디자인 부분과 로직 부분을 분리하도록 함으로써 효과적이며 객체 지향적 방식의 클라이언트 어플레케이션 개발이 가능하도록 한 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체에 관한 것이다.

점차 포털로 대변되는 일방적인 정보 제공의 웹 형태에서 인터넷으로 연결된 모든 웹사이트에서의 고객 참여와 공유를 이끌어 내고, 재생산된 자원의 공유가 가능한 환경을 제공하도록 하는 웹2.0의 형태로 빠르게 전환되고 있다. 이러한 웹2.0의 시대에 접어들면서 웹을 플랫폼으로 간주하는 다양한 웹 어플리케이션들이 등장하게 되었다. 특히 RIA(Rich Internet Application)의 수요가 급증하면서 기존의 데스크탑 어플리케이션과 유사한 기능을 가지는 웹 어플리케이션이 속속 등장하고 있다.

이러한 다양한 기능과 화려한 인터페이스의 웹 어플리케이션의 수요가 급증함에 따라 그동안 웹 클라이언트에서 동적인 요소를 제공하기 위해 사용되었던 자바스크립트의 비중 역시 커지고 있는 실정이다.

하지만, 기존의 웹 클라이언트에서 사용되던 자바스크립트는 단순한 동적 효과를 제공하는 라이브러리의 측면이 강조된 것으로, 이를 이용하여 복잡한 웹 어플리케이션을 개발하기 위해서는 방대한 순차적 프로그래밍이 요구되게 된다. 실질적으로, 자바스크립트는 웹 브라우저가 실행하는 스크립트 언어로서, 그 규격은 자바의 규격과 유사하며, 하이퍼텍스트 생성 언어(HTML) 문서를 작성하는 수준의 사용자가 사용하는 것에 주안점을 두어 개발되었기 때문에 자바와는 달리 다양한 변수의 형 및 클래스, 상속 등을 사용할 수 없기 때문에 객체지향 특성이 부족한 특징이 있다. 따라서, 다양한 분야의 개발이 서로 연관되는 복잡한 웹 어플리케이션 개발의 특성상 각 담당 분야별로 각각 원하는 기능을 수행하는 모듈을 개별하여 통합하는 방식이 선호되지만, 자바스크립트를 이용한 웹어플리케이션 개발에서는 이러한 방식을 적용하기 어렵다는 문제점이 발생된다. 즉, 이러한 분업 개발의 경우 각 모듈의 상호 의존도가 낮을수록 개발 효율이 높아지게 되지만, 자바스크립트를 이용하는 경우에는 모듈들의 상호 의존도가 높아져 분업이 곤란하다.

또한, 자바스크립트는 웹 페이지의 내부에 태그 형식으로 적용되어 이를 브라우저가 해석하여 대응 기능을 수행하는 방식을 취하고 있기 때문에 웹 페이지 종속적인 코딩이 불가피하였다. 즉, 코드의 재사용이 어려워 개발 시간이 오래 걸리게 된다.

도 1은 일반적인 자바스크립트 코드를 적용한 웹페이지의 예로서, 도시한 바와 같이 하나의 웹페이지(10)는 자바스크립트 코드 영역(20)과 웹 디자인 코드 영역(30)으로 구분되어 기술된다. 물론, 상기 자바스크립트 코드 영역(20)과 웹 디자인 코드 영역(30)이 뒤섞여 혼재될 수도 있으나, 코딩의 편의상 자바스크립트 코드 영역(20)과 웹 디자인 코드 영역(30)을 분리하는 것이 일반적이다.

상기 자바스크립트 코드 영역(20)에 자바스크립트 함수들을 정의하고, 이를 상기 웹 디자인 코드(30) 부분에서 적절히 호출하여 적용하는 방식으로 동적인 요소가 부여된 웹페이지를 제공할 수 있다.

하지만 이러한 경우 상기 자바스크립트 코드 영역(20)의 내용은 모든 웹페이지에서 요구되는 기능이나 효과에 따라 상이한 내용이 적용되고, 이는 웹 페이지에 종속적인 상태가 되어 해당 코드를 재활용하거나 범용적으로 적용하는 것은 어려웠다.

도 2는 상기 도 1의 기본적인 형태를 벗어나 자바스크립트 코드들을 라이브러리 형태로 별도 구축하고, 원하는 기능을 가지는 자바스크립트 코드 파일들(51, 52)을 링크하여 사용하는 형태의 웹페이지(40)를 보인 것이다. 도시한 바와 같이 이 경우 웹페이지(40)에는 원하는 자바스크립트 코드를 가지는 자바스크립트 파일들(51, 52)을 지정하고, 추가할 코드나 해당 웹페이지에 맞추어 변경해야할 변수들을 해당 웹페이지에 맞추어 상기 도시된 자바스크립트 코드 영역(50)에 작성해야한다. 이후, 필요한 함수는 웹디자인 코드 영역(60)에서 호출하여 사용할 수 있다.

그러나, 이러한 방식 역시 단순히 라이브러리만 제공하는 기능일 뿐, 웹페이지에 종속적이므로, 작성된 코드를 재사용하기 어렵고, 웹페이지나 웹디자인 코드와 분리된 객체지향적 프로그래밍은 기대하기 어렵다. 즉, 복잡하고 방대하며, 다양한 협력 작업이 요구되는 웹 2.0 서비스를 위한 웹 어플리케이션을 개발하기 위해서 자바스크립트를 적용하고자 할 경우 개발 시간과 비용이 높아질 수 밖에 없다.

상기와 같은 자바스크립트의 객체지향 특성을 개선하고 효율적인 자바스크립트 개체(object)의 관리를 위해서 새롭게 제안하는 본 발명 실시예들의 목적은 자바스크립트 언어를 이용하여 클래스 생성을 지원하는 기본 클래스를 제공하고 XML 컨텍스트 파일을 해석하여 인스턴스 팩토리를 구성하며 이벤트 기반 처리 및 웹서버와 실시간 및 유연한 통신이 가능하도록 하는 프레임워크를 제공하도록 함으로써, 자바스크립트 개체의 효율적인 관리와 유지보수 및 재활용성을 극대화하고, XML 컨텍스트를 통해 디자인코드와 논리 코드를 분리시킬 수 있도록 한 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치와 상기 프레임워크 장치를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다.

본 발명 실시예들의 다른 목적은 XML을 이용하여 매소드 재정의(overriding) 및 상속이 가능하도록 함으로써, XML 설정만으로 새로운 클래스를 생성할 수 있도록 한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크 장치와 상기 프레임워크 장치를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다.

본 발명 실시예들의 또 다른 목적은 원하는 인스턴스를 싱글톤 인스턴스로 팩토리에 등록시켜 관리하며, 리소스 절약 및 로딩 지연을 줄이기 위해 레이지 바인딩(Lazy binding)을 추가적으로 적용할 수 있도록 한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크 장치와 상기 프레임워크 장치를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다.

본 발명 실시예들의 또 다른 목적은 메세지 기반 클래스를 이용한 메세지 기반 어플리케이션 구조를 제공하고, 메시지 체인을 이용한 순차적 수행 기능을 제공함과 아울러, 상기 메세지 기반 클래스를 이용하여 메시징 기능을 제공하는 사용자 정의 클래스를 작성할 수 있도록 함으로써, 이벤트 기반 처리 및 메세지 기반 처리를 이용하여 로직 일원화 및 자바스크립트 개체의 독립성을 확보할 수 있도록 한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크 장치와 상기 프레임워크 장치를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다.

본 발명의 목적은 이상에서 언급한 목적들로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 당업자에게 명확하게 이해되어질 수 있을 것이다.

상기와 같은 목적을 달성하기 위하여 본 발명의 일 실시예는, 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드의 수행을 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크에 있어서, 자바스크립트 언어로 작성된 기본 클래스들 및 상기 기본 클래스에 대한 접근 인터페이스를 제공하는 기본 클래스부와; XML 문서에 대한 인터페이스를 제공하는 DOM과; 인스턴스 생성 및 클래스 정의를 포함하는 XML 문서 파일을 상기 기본 클래스부를 근거로 해석하여 인스턴스의 풀을 구성하고 명시적 인스턴스를 관리하는 자바스크립트 언어로 작성된 인스턴스 팩토리와; 상기 인스턴스들 간의 메세지 전달을 지원하는 메세지 처리부를 포함하는 것을 특징으로 한다.

상기 인스턴스 팩토리는 상기 XML 컨텍스트 파일에 포함된 클래스 정의를 분석하여 상기 기본 클래스부에 포함된 기본 클래스로부터 상속되는 클래스를 생성하고 해당 클래스로 정의된 인스턴스를 팩토리에 등록하는 것을 특징으로 한다.

상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 그에 대한 처리를 정의하는 이벤트 리스너를 더 포함하는 것을 특징으로 한다.

상기 메세지 처리부는 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 상기 이벤트 발생을 현재 혹은 별도로 지정된 윈도우에 메세지로 전송하는 것 을 특징으로 한다.

상기 각 구성에 의한 요청이나 상기 웹 브라우저의 요청시 웹서버로부터 비동기 방식으로 파일이나 데이터를 수신하는 Ajax 컴포넌트를 더 포함하는 것을 특징으로 한다.

상기 HTML 코드에 포함된 HTML 요소를 브라우저의 종류에 관계 없이 동일한 인터페이스로 접근하도록 하는 크로스 브라우징 지원 인터페이스를 제공하는 HTML DOM을 더 포함하는 것을 특징으로 한다.

상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 해당 요소 혹은 개체가 이동 가능한 요소인 경우 마우스에 의한 드래그 & 드롭 기능을 제공하는 드래그 & 드롭 처리부를 더 포함하는 것을 특징으로 한다.

또한, 본 발명의 다른 실시예는 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드를 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 수행 방법에 있어서, 자바스크립트로 작성된 프레임워크 라이브러리 파일들을 로드하는 단계와; XML 파일을 로드한 후 해당 XML 파일을 해석하는 단계와; 상기 XML 파일의 해석 중에 상기 프레임워크에 포함된 클래스를 이용하거나 상기 클래스를 상속 또는 매소드를 재정의하는 내용 및 이를 통한 인스턴스 생성 내용을 파악하여 인스턴스 팩토리를 구성하는 단계와; 상기 HTML 코드에 포함된 HTML 요소들에 대한 이벤트 리스너 및 메세지 처리부 기능을 정의하는 단계와; 상기 HTML 요소들에 대한 이벤트 및 메세지 처리 과정을 수행하는 단계를 포함하는 것을 특징으로 한다.

상기 인스턴스 팩토리를 구성하는 단계는 싱글톤 인스턴스를 팩토리에 등록하고, 초기화 시점이 아닌 실제 참조시 인스턴스를 생성하는 것을 특징으로 한다.

상기 HTML 요소들에 대한 인스턴스를 인스턴스 팩토리를 이용하여 생성 및 등록하는 단계는 상기 XML 파일로부터 인스턴스 생성에 대한 프로토타입 정의를 획득하는 단계와; 상기 프로토타입 정의를 이용하는 자바스크립트 코드를 통해 상기 인스턴스 팩토리에 인스턴스를 등록하는 단계를 포함하는 것을 특징으로 한다.

상기 프로토타입 정의를 이용하는 자바스크립트 코드는 상기 HTML 코드에 포함되는 것을 특징으로 한다.

또한, 본 발명의 또 다른 실시예에 따른 웹 컨텐츠 수행 방법은 자바스크립트의 규약에 부합하는 제 1 소스 코드 및 인터넷 브라우저의 표현에 부합하는 제 2 소스 코드를 수신하는 단계와; 상기 제 2 소스 코드 내에 상기 제 1 소스 코드의 실행을 요청하는 제 1 명령어가 존재하는 경우, 상기 제 1 소스 코드를 독출하는 단계와; 상기 제 1 소스 코드에 상기 제 1 소스 코드에서 정의하지 않은 함수 또는 변수가 존재하는 경우, 상기 제 1 소스 코드의 클래스에 대한 인스턴스 정보를 추출하는 단계와; 상기 인스턴스 정보에 포함된 상기 함수 또는 변수를 사용하여 상기 제 1 명령어를 수행하는 단계를 포함하는 것을 특징으로 한다.

또한, 본 발명의 또 다른 실시예에 따른 기록 매체는 전술한 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드를 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용하여 웹 컨텐츠를 수행하는 프로그램이 수록된다.

이러한 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있도록 프로그램 및 데이터가 저장되는 모든 종류의 기록매체를 포함한다. 그 예로는, 롬(Read Only Memory), 램(Random Access Memory), CD(Compact Disk), DVD( Digital Video Disk)-ROM, 자기 테이프, 플로피 디스크, 광 데이터 저장 장치 등이 있으며, 또한 케리어 웨이브(예를 들면, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함된다. 또한, 이러한 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다.

상기한 바와 같은 본 발명을 첨부된 도면들과 실시예들을 통해 상세히 설명하도록 한다.

도 3은 본 발명 일 실시예의 개념을 보인 개념도로서, 도시한 바와 같이 자바스크립트 코드(110)와 웹 디자인 코드(120)를 포함하는 웹 페이지(100)와, 이러한 웹 페이지(100)를 웹 브라우저를 통해 해석하여 실행하고자 할 경우 기반 기능을 제공하기 위해 적용되는 프레임워크(200) 및, 이러한 프레임워크(200)를 이용한 동적 프로그램을 보다 객체 지향적이고 재활용성이 높게 사용할 수 있도록 상기 웹페이지(100)와 별도의 파일로 기술한 XML 컨텍스트(150)로 이루어진다. 상기 프레임워크(200)는 크게 라이브러리(210) 부분과 클래스 패키지 부분(220)으로 구분될 수 있다. 여기서, 상기 웹 브라우저(혹은, 인터넷 브라우저)는 컴퓨터, 노트북, 또는 휴대폰 등의 모바일 기기를 포함하는 네트워크 기기에서 인터넷 상의 데이터를 표시하는 기능을 가지는 것을 의미한다.

즉, 본 발명 일 실시예의 기본적인 개념은 객제지향특성이 미비한 자바스크립트를 이용하여 웹 페이지(100) 등의 웹 컨텐츠를 생성하고자 할 경우, 혹은 이를 더 복잡하게 구현한 웹 어플리케이션을 구성하고자 할 경우 개별적인 웹디자인 코드에 종속적이던 자바스크립트 코드를 최대한 웹디자인 코드와 분리시켜 연관성을 낮출 수 있도록 한 것이다. 즉, 이를 통해 자바스트립트 코드를 이용한 웹 컨텐트의 객체지향 특성을 높여 컴파일이나 별도의 실행 환경이 요구되지 않는 자바스크립트의 장점을 살리면서도 웹 2.0에서 요구하는 서비스를 충족시킬 수 있는 웹 컨텐츠나 웹 어플리케이션을 용이하게 개발할 수 있도록 하고자 하는 것이다.

이를 위해서, 실질적인 동적 효과와 논리적 프로그램은 디자인 코드와 분리되는 XML 컨텍스트(150)를 이용하여 작성하고, 이러한 XML 컨텐스트(150)를 해석하여 상기 웹 페이지(100)에 대한 높은 독립성을 가지는 동적 효과를 제공할 수 있도록 하는 프레임워크(200)를 자바스크립트 코드만으로 구성한 것에 본 발명 일 실시예의 특징이 있는 것이다. 이러한 방식을 이용하게 되면, 추후 웹 컨텐츠를 개선하고자할 경우 그 개선 내용에 따라 웹 디자인만 변경하거나, 혹은 XML 코드만 변경하여 원하는 목적을 달성할 수 있어 유지 보수가 용이해지며, 상기 XML 코드의 재사용이 가능해지게 되므로 웹 컨텐츠의 개발이 한층 용이해질 뿐만 아니라, 상기 객체 지향적 독립성에 의해 분야별 개발 분업화도 더욱 용이해지게 된다.

따라서, 상위 클래스의 생성자를 자동적으로 호출할 수 없는 자바스크립트의 클래스 초기화 방법이나, 클래스의 상속(혹은 다중 상속) 이나 매소드의 재정의(overriding) 등을 통한 새로운 클래스 생성 방법을 제공해야하고, 이러한 클래스들을 활용하는 인스턴스 생성 방식을 프로토 타입을 이용하는 방식, 팩토리를 이용하는 방식 등을 적용할 수 있도록 한다. 또한, XML 파일을 해석하기 위한 XML DOM(Document Object Model)에 대응되는 기능도 구현하여 브라우저 독립적으로 XML의 문서를 자유롭게 해석할 수 있는 인터페이스도 요구되게 된다. 물론, 그 외에 추가적인 컴포넌트들과, 윈도우 클래스들에 대한 지원이 필요하며, 화면 갱신 없는 신속한 화면 전환과 XML 코드의 다운로드 및 적용을 위해서 웹 서버에 대한 실시간 및 유연한 통신을 지속적으로 제공하는 Ajax 기능의 지원도 필요하게 된다.

이러한 상기 기능들을 라이브러리화하고, 이러한 라이브러리들을 체계적으로 관리하기 위한 수단을 부가하여 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 구성하였다. 이러한 프레임워크를 본 명세서에서는 예시적으로 SWAF(Superior Wab-client Application Framework)라 칭하기로 한다.

도 4는 상기 SWAF의 예시적 아키텍쳐를 보인 것으로, 도시된 바와 같이 복수의 기능부들로 이루어져 있으며, 이러한 기능부들은 브라우저가 디자인 코드와 자바스크립트 코드 및 이를 독립적으로 관리하는 XML을 해석하기 위한 기반 기능을 제공한다. 즉, 실질적으로 자바스크립트 코드의 해석은 브라우저에서 수행하게 되지만, 내부적으로 사용자가 원하는 자바스크립트 코드의 패턴을 제공하는 것은 XML을 해석하여 해당 XML에 기술된 각종 설정이나 동작 방식에 맞춘 자바스크립트 코드를 브라우저에 제공하는 상기 프레임워크(300)가 처리하는 방식이다. 그리고, 이러한 프레임워크(300)의 실질적인 구성 역시 자바스크립트 코드로 되어 있어, 브라우저는 상기 프레임워크(300)를 구성하는 자바스크립트 코드를 해석(인터프리팅)하여 수행하면서 상기 프레임워크(300)가 제공하는 다양한 기능들을 XML 문서로 설정한 작업들도 처리하게 되는 것이다.

도시된 구성을 보면, 우선 어플리케이션에서 사용되는 모든 클래스의 기본이 되는 SWAF 기본 클래스를 제공하는 클래스 베이스(301), XML 파일의 구성 노드들을 직관적으로 관리할 수 있도록 하는 인터페이스를 제공하는 XML DOM(308), 디자인코드(HTML)의 요소(element)에 대한 이벤트 발생시 해당 이벤트에 대한 처리 방식을 정의하는 이벤트 리스너(306), 상기 클래스 베이스(301)에 포함된 클래스나 해당 클래스를 상속하거나 매소드를 재정의하여 새롭게 생성한 클래스들 사이의 메세지 교환 기능을 제공하고, 클래스의 레벨에 따른 메세지 확산 기능을 제공하는 메세지 처리부(307), 전체 화면의 갱신 없이 실시간으로 서버와 통신하여 일부 페이지나 데이터를 주고받을 수 있는 Ajax 컴포넌트(309), 인스턴스 생성 및 클래스 정의를 포함하는 XML 문서 파일을 해석하여 인스턴스의 풀을 구성하고 명시적 인스턴스를 관리하는 인스턴스 팩토리(310)를 기본으로 하며, 부가적으로 자주 사용되는 윈도우에 관련된 클래스와 확장된 컴포넌트를 제공하는 윈도우 컴포넌트(304) 및 브라우저 및 개체(object)에 관련된 정보를 관리하는 유틸리티 모듈(302)이 포함될 수 있고, 개체나 HTML 요소의 이동을 위해 자주 사용되는 드래그 & 드롭 처리부(305) 역시 포함될 수 있다. 그 외에, 디자인 코드(HTML 코드)에 포함된 요소를 브라우저의 종류에 관계없이 동일한 인터페이스로 접근하도록 하는 크로스 브라우징 지원 인터페이스를 제공하는 HTML DOM이 더 포함될 수 있다.

상기 각 구성들은 모두 자바스크립트로 작성된 라이브러리의 형태를 가지며, 이들 중 일부 혹은 전부가 활용되어 웹 컨텐츠의 동적 기능을 지원하게 된다.

상기 각 구성들은 브라우저를 기반으로 동작되며, 그 자체적으로 활용되거나 서로 연동하여 활용된다. 상기 각 구성들의 실질적인 동작 방식은 이벤트 발생에 따른 이벤트 핸들러에 의해 관리되므로 이들을 통합적으로 설명하기 전에 각각의 개별적인 특성을 먼저 설명하도록 한다.

먼저, 상기 클래스 베이스(301)는 어플리케이션에서 사용되는 모든 클래스의 베이스 클래스를 포함하고, 이러한 클래스들의 종류 검증, 클래스 이름, 팩토리 ID 등과 같은 클래스 고유 데이터에 대한 접근 인터페이스를 제공하는 기능을 수행한다.

특히, 일반적인 자바스크립트에서 지원하지 않는 클래스 생성 기능을 지원하기 위해서는 클래스를 생성하고, 초기화하는 작업들을 자바스크립트가 기본적으로 제공하는 기능을 사용하는 것이 아니라, 상기 클래스 베이스(301)를 지원하기 위해서 별도로 구성하여 관리하는 프로토타입 라이브러리에서 제공하는 메소드를 사용하도록 할 수 있다. 이때, 상기 프로토타입은 인스턴스 생성을 위해 XML에 정의될 수 있는 프로토타입과는 상이한 것이라는데 주의한다. 상기 프로토타입 라이브러리는 상기 클래스 베이스(301)에 함께 구성될 수도 있으나 별도로 구분하여 별도의 자바스크립트 파일(예를 들어 prototype.js)에 클래스 생성이나 초기화 등을 지원하는 메소드를 작성하여 구성할 수있다. 예를 들어, 새로운 클래스인 C2.Plugin을 생성하기 위해서, 프로토타입 라이브러리에서 제공되는 매소드인 Class.create를 사용하여 다음과 같이 새로운 클래스를 정의할 수 있다.

C2.plugin=Class.create();

그 이후, 초기화를 위한 메소드를 실행시키거나, 자동실행되도록 하여 초기 화를 수행할 수 있다. 그 다음 해당 클래스에 포함되는 속성들을 정의할 수 있는데, 이때, 상기 클래스 베이스(301)에 포함된 클래스로부터 상속받은 클래스라는 것을 명확히 하는 것이 바람직하다. 또한, 재상속을 위해 상위 클래스의 생성자를 자동 호출하기 위해서는 직접 호출이 불가능하므로, init 생성자를 직접 사용하지 않고 현재 클래스에서 메소드를 구현(예를 들어, initPlugin)한 후, init 생성자에서 상기 구현한 메소드를 호출하는 방식을 적용하도록 한다.

예를 들어, 현재 클래스를 C2.Plugin 클래스라 하고, 상기 클래스를 상속받은 다른 클래스를 C2.SubPlugin이라 하면, initSubPlugin 메소드의 초기화 부분에서 가장 처음에 initPlugin을 호출하면, 상위 클래스를 초기화 할 수 있게 된다.

그 외에, 상기 클래스 베이스(301)는 상기 클래스 베이스가 제공하는 기본 클래스로부터 상속된 클래스들을 식별할 수 있는 메소드들을 제공할 수 있다.

그 다음, XML DOM(308)은 브라우저에서 제공하는 XML 문서 개체에 대해서 보다 직관적으로 접근할 수 있는 인터페이스를 제공하기 위한 것으로, 두가지 접근 방식이 가능하다. 즉, 브라우저에서 XML 문서 개체를 제공할 경우(예를 들어, 인터넷 익스플로러의 경우 Microsoft.XMLDOM ActiveX Object)에는 해당 개체를 래핑(wrapping)하는 개체로 XML 문서 개체를 초기화하고, 그렇지 않을 경우 XML 문서를 읽어들여 XML 문서 개체를 생성한다. 그리고, 이러한 XML 문서 개체에 대해서 노드를 기반으로 접근, 확인, 변경등을 실시할 수 있도록 하여 브라우저에서 제공하는 XML DOM 파서 보다 더 직관적인 인터페이스를 제공하도록 한다.

그 다음, 이벤트 리스너(306)는 HTML 코드의 요소(element)에 대한 이벤트 발생시 해당 이벤트에 대한 처리 방식을 정의하는 기능을 수행하며, 부가적으로는 메세지 처리부(307)와도 연동되는 기능을 수행한다. 일반적으로 자바스크립트는 이벤트 핸들링 방식으로 동작하기 때문에, 연결된 HTML 요소들에서 발생되는 이벤트들을 처리할 수 있는 기능이 있으나, 본 실시예에서는 이러한 이벤트 핸들링 방식을 더 확장한다. 예를 들어, 전술한 SWAF 리스너의 경우, 월드 와이드 웹 컨소시움(W3C)에서 정의된 이벤트 이름을 이용하여 이벤트 발생원인 소스(지정하지 않을 경우 해당 이벤트를 소유하는 개체와 연결된 HTML 요소가 자동으로 지정)와 이벤트 발생시 동작할 자바스트립트 함수를 지정하는 것으로 정의된다. 이러한 리스너는 배열로 구성할 수 있고, 상기 배열 관리를 통해 리스너의 초기화 및 설정 등이 가능하다. 만일, 상기 이벤트 발생시 동작할 함수를 지정하지 않는다면 해당 이벤트의 이름을 메세지로 하여 현재 발생된 자바스크립트 이벤트 정보가 해당 리스너를 소유한 개체에 전달(sendMessage)된다. 이는 HTML 요소의 이벤트를 SWAF의 메세지 처리부가 대신 처리하도록 바이패스할 수 있음을 의미하며, 이를 통해 로직을 일원화할 수 있게 된다.

그 외에, 일반적인 이벤트에 관련된 처리(이벤트 종류, 위치, 소유 개체, 리스너 제거 등)을 수행할 수 있다.

그리고, 메세지 처리부(307)는 상기 클래스 베이스(301)에 포함된 클래스나 해당 클래스를 상속한 클래스 혹은 매소드를 재정의하여 새롭게 정의한 클래스들 사이의 메세지 교환 기능을 제공하기 위하여 단독으로 인스턴스화 되어 사용되기 보다는 다른 클래스에 다중 상속되어 메세지 송수신 기능을 가질 수 있도록 메세지 처리를 위한 기본 클래스를 제공한다. 그리고, 메세지를 발생시키거나 메세지를 전파하고, 지정된 곳에 전달하는 기능을 제공한다.

그 다음, Ajax 컴포넌트(309)는 널리 알려진 바와 같이 요청(Request)과 응답(Response)에 따른 비동기적 데이터 송수신을 통해 화면을 전부 갱신하지 않고서도 원하는 내용을 선별 수신하는 기능을 제공한다.

그리고, 상기 인스턴스 팩토리(310)는 실질적으로 XML 문서를 해석 및 관리하고, 개체들의 인스턴스를 생성 및 관리하는 전역개체이다. 이는 XML 문서(즉, XML 개체)를 읽어들어 컨텍스트를 로드하여 해당 컨텍스트 내에 정의된 인스턴스들을 생성하게 되는데, 레이지 바인딩(lazy-binding) 및 싱글톤 인스턴스를 생성할 수 있고, 이들을 인스턴스 풀(pool)인 팩토리에 등록하여 명시적으로 관리할 수 있다. 상기 레이지 바인딩은 초기화가 아닌 실제 참조시 인스턴스를 생성할 수 있기 때문에 어플리케이션의 성능을 개선하는데 효과가 있다. 그 외에, 상기 인스턴스 팩토리(310)는 지정된 함수에 대한 프록시를 생성하고 해당 프록시를 통해 상기 지정된 함수에 대한 동작(이전, 이후, 예외)을 감시하도록 하여 AOP(관점 지향 프로그래밍)를 지원할 수 있다.

또한, 상기 인스턴스 팩토리(310)는 예외 발생을 검출하는 수단과 예외를 처리하기 위한 예외 처리기(exception processor)를 더 포함할 수 있다.

그리고, 필수적인 것은 아니지만, 적용될 경우 보다 용이한 웹 컨텐츠 또는 웹 어플리케이션의 작성을 지원할 수 있는 라이브러리들이 상기 프레임워크의 기본 구성들에 더 부가될 수 있다.

예를 들어, 자주 사용되는 윈도우에 관련된 클래스와 확장된 컴포넌트를 제공하는 윈도우 컴포넌트(304)를 더 추가하여, 윈도우의 생성, 크기 관리, 요소 관리등과 함께 버튼, 스트롤 뷰, 트리뷰, 칼라 픽커, 콤보 박스, 애니메이션 효과 등에 관한 확장된 컴포넌트 관리도 상기 프레임워크(300)를 활용할 수 있다.

그리고, 브라우저 및 개체에 관련된 정보(예를 들어, 브라우저의 위치, 포인트 위치, 움직임, 개체의 복사, 사각 개체의 관리, 좌표 설정, 개체 결합, 개체들의 움직임 관리 등)를 관리하는 유틸리티 모듈(302)이 포함될 수 있고, 개체나 HTML 요소의 이동을 위해 자주 사용되는 드래그 & 드롭 처리부(305) 역시 포함될 수 있고, 해당 드래그 & 드롭 처리부(305)는 개체의 위치를 지정하고, 개체를 지우고, 갱신하는 등의 기본적인 작업들과, 해당 개체가 위치할 목적 개체나 제거될 개체, 개체 풀의 관리 등과 같은 작업들도 처리할 수 있으며, 그 외에 필요한 기능들을 더 구성할 수 있다.

도 5내지 도 7은 도 4를 통해 설명한 프레임워크를 이용하여 웝 컨텐츠를 구성하는 방식에 관한 것으로, 여기서는 웹 페이지를 구성하는 방식을 예로 들어 설명한다.

먼저, 도 5는 웹 디자인 코드 영역(420)으로 웹 페이지(400)를 구성하고, 별도로 XML 코드 파일(420)을 구성한 것이다. 상기 웹 디자인 코드 영역(420)에는 단순한 프레임워크의 로딩 부분 및 상기 XML 코드 파일만의 로딩부분만 기재한 후, 실질적으로 상기 웹 디자인 코드 영역(420)의 각 요소들에 대한 동적 기능에 대한 내용은 상기 XML 코드 파일(420)에 기재하는 방식이다. 즉, 클래스에 대한 생성 및 사용을 상기 XML 코드 파일(420)로 단일화하는 것이다.

도시한 바와 같이, 상기 클래스 패키지(440)에 존재하는 클래스들을 이용한 인스턴스는 상기 XML 코드 파일(420)에 정의된 상태로 상기 인스턴트 팩토리(430)에 등록되어 사용되며, 상기 XML 코드 파일(420)에 기술된 내용에 따라 상기 웹 디자인 코드(410)의 요소에 대한 이벤트 발생시 상기 XML 코드 파일(420)에 기재된 상태로 상기 인스턴스 팩토리(430)에 등록된 인스턴스가 활용되어 해당 이벤트 발생에 대한 대응을 실시하게 된다.

즉, 상기 웹 디자인 코드 영역(410)에는 실질적인 자바스크립트 논리 부분이 존재하지 않아 상기 웹 디자인 코드 영역(410)과 실제 논리 부분의 정의된 XML 코드 파일(420)의 상호 독립성이 높다. 이는 상기 XML 코드 파일(420)의 재사용성이 높다는 것을 의미한다. 단순히 웹 디자인 코드 영역(410)에서 자바스크립트로 작성된 논리 파일을 호출하여 사용할 경우에는 물리적 위치는 상기 구성과 유사할 수 있지만, 이 경우의 논리 파일은 상기 웹 페이지(400)를 구성하는 상기 웹 디자인 코드 영역(410) 내부에서 함수 이름으로 호출되게 되므로 웹 페이지(400)에 종속적이 되어 재사용성이 극히 낮아지게 된다. 하지만, 상기 도시된 경우에는 실제 논리 부분이 자바스크립트가 아닌 XML로 기재되어 있으며, 실제 웹 디자인 코드 영역(410)에서 해당 자바스크립트 함수를 호출하여 사용하는 것이 아니라 상기 XML 파일이 상기 웹 디자인 코드 영역(410)의 요소들을 관리하도록 구성되므로 해당 XML 파일만 수정하면 다른 종류의 웹 디자인 코드 영역(410)에 대해서도 적용될 수 있으며, 실제 자바스크립트에 대한 심도 있는 지식이 없더라도 XML 파일만 논리적 으로 구성할 경우 원하는 기능을 정의할 수 있다. 특히, 전술한 도 4와 같은 구성을 가지는 프레임워크를 이용할 경우 대단히 간단한 설정만으로도 화면 조절, 요소 조절, 윈도우 컴포넌트 조절, 드래그 & 드롭, Ajax 지원, AOP 지원, 메세지 관리 방식 적용, 크로스 브라우저 지원 등이 가능하기 때문에, 구체적인 자바스크립트를 모르더라도 복잡한 어플리케이션을 쉽게 개발할 수 있게 된다.

도 6은 프로토타입을 이용하여 인스턴스를 생성하는 방식을 보인 것이다. 도시된 경우는 웹 페이지(500)를 이루는 코드 영역을 자바스크립트 코드 영역(510)과 웹 디자인 코드 영역(520)으로 구분하여 자바스크립트 코드 영역(510)에 상기 웹 디자인 코드 영역(520)의 요소들에 대한 이벤트 처리 논리를 기술해야 하는 방식이지만, 이때 자바스크립트의 인스턴스에 대한 정의를 직접 상기 자바스크립트 코드 영역(510)에 기재할 필요가 없으며, 별도의 XML 파일(530)에서도 기재할 필요가 없다.

도시된 구성은 별도의 XML 파일(530)에는 인스턴스 생성을 위한 프로토 타입을 정의하고, 상기 자바스크립트 코드 영역(510)에서는 상기 프로토 타입의 정의를 이용하여 상기 인스턴스 팩토리(540)에 인스턴스 생성을 요청하여 HTML 요소들과 연결하는 간접적 방법을 이용하도록 함으로써, 상기 웹 페이지의 구성에는 복잡한 자바스크립트의 인스턴스 정의를 생략할 수 있도록 한 것이다. 따라서, 간단히 필요한 인스턴스를 프로토타입을 이용하여 설정하고 해당 인스턴스에 정의된 함수들과 속성들을 이용하면 된다.

도 7은 상기 프레임워크를 이용하여 웹 컨텐츠나 웹 어플리케이션을 작성할 수 있는 가장 기본적인 방식으로, XML을 이용하지 않고 직접 웹 페이지(500)의 자바스크립트 코드 영역(510)에서 직접 자바스크립트를 이용하여 새로운 클래스를 생성하고 사용하며, 인스턴스를 HTML 요소들과 연결하는 방식을 보인 것이다. 비록, 이렇게 프레임워크를 이용한다 할지라도 클래스의 상속, 메소드 재정의 등을 이용한 클래스 생성을 이용할 수 있으나, 웹 페이지 종속성이 높아지므로 분업화에 의한 웹 어플리케이션 개발에는 적합하지 않다. 단, 클래스를 명시적으로 사용하기 때문에 자바스크립트에 익숙한 사용자에게는 직관적인 코드를 제공할 수 있다.

도 8은 전술한 프레임워크를 이용하여 구성한 웹 컨텐츠의 예이며, 도 9내지 도 10은 상기 도 8을 구현하기 위한 디자인 코드와 XML 코드의 구성 블록을 보인 것이다.

도 8은 브라우저의 한 윈도우에 2개의 버튼 요소들(611, 612)과 스크롤 뷰(610) 및 상기 스크롤 뷰(610) 상에 복수의 그림요소들(613)이 나타나도록 화면을 디자인한 것이다. 상기 버튼 요소들의 선택에 의해 그림들이 교체되며, 상기 그림들을 자유롭게 배경 영역(616)으로 드래그 & 드롭하여 그림을 별도 창(614, 615)으로 확장할 수 있도록 한 예이다.

도 9 내지 도 10은 도 5에 설명한 방식으로 최대한 디자인 코드에서 자바스크립트 코드 영역을 줄이도록 하고, 실질적인 클래스 설정이나 HTML 요소와의 연결은 XML을 통해 실시하도록 한 경우의 코드 구성 예를 보인 것이다.

도 9는 실제 웹 컨텐츠(620)의 디자인 코드 부분을 보인 것으로, 크게는 프레임워크 설정 부분(625)과 HTML 디자인 부분(628)로 나눌 수 있다. 이때, 상기 프 레임워크 설정 부분(625)은 프레임워크를 이루는 각 자바스크립트 파일들을 로딩하도록 하는 SWAF 라이브러리 로딩부(621)와, 만일 별도로 생성한 사용자 라이브러리가 있는 경우 해당 라이브러리를 링크하여 로드하도록 하는 사용자 라이브러리 로딩부(621)와, 실제 클래스 생성 및 사용과 인스턴스와 HTML 요소들을 연결하는 정의가 기재된 XML 파일을 로드하는 XML 로딩부(623)로 이루어진다. 이는 별도의 코드가 필요한 부분이 아니라, 단순한 반복 구문이기 때문에 적절한 파일들을 연결하기만 하면 되는 것이다. 즉, 디자인 내용을 위한 HTML 디자인부(628)에는 논리 코드가 포함되지 않는다.

도 10은 XML 파일의 내용을 보인 코드 블록도로서, XML 파일(630) 부분은 도시된 바와 같은 코드 블록들을 포함하고 있다. 상기 코드 블록의 순서는 변경 가능하며 응용 대상에 따라 내용이 변경되어야 한다.

우선, 해당 파일이 XML임을 나타내면서 범용적 XML로서 사용하기 위해 유효한 요소들을 이용하여 문서 구조를 설정한 DTD(Document Type Definition) 파일을 링크하는 XML 설정 부분(631)을 기재해야 한다. 상기 DTD는 SWAF 프레임워크에서 사용되는 요소들을 이용하여 문서 구조를 설정해 둔 것으로 유효한 파일 교환을 위해 작성한 것이며, 이는 규격을 나타내는 것이므로 공통적으로 사용된다.

예를 들어, 다음과 같이 기재할 수 있다.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE context SYSTEM "../../swaf/swaf_context.dtd">

그리고, Ajax 로딩 모듈을 정의하는 부분(632)과, HTML 디자인부에서 설정한 버튼에 대한 리스너를 정의하는 부분(633), 사이트 종류를 결정하는 종류 선택버튼 1을 정의하는 부분(634), 상기 버튼1의 정의 부분을 재사용하여 간단하게 버튼 2를 정의하는 부분(635), 스크롤 시 처리할 내용을 포함하여 스크롤뷰를 정의하는 부분(636), 확대창들이 움직일 배치 영역을 정의하는 부분(637), 종류 선택 버튼들에 대한 시각적 스타일 데이터를 정의하는 부분(638), 그리고 버튼 리스너의 정의에 따라 버튼 이벤트가 발생할 경우 실시될 실제 동작을 정의하는 부분(629) 등으로 이루어진다. 그 외에 마우스에 의한 드래그앤 드롭 등의 세부적인 구성들이 더 필요하지만, 해당 부분은 생략한 것이다.

도 11은 상기 도 8의 구성에 대한 좀 더 구조적 설명을 위해 도시한 프레임워크 동작의 개념도로서, 도시한 바와 같이 웹 브라우저(700)에서 제공되는 표시 내용(710)을 처리하기 위한 프레임워크의 설정 및 동작 방식이 나타나 있다.

먼저, 상기 표시 내용(710)은 실제 사용자에게 제공되는 윈도우로서, 내부적으로는 버튼들(712)이 위치한 스크롤뷰(711) 및 그림(713)과 상기 그림(713)을 드래그 & 드롭했을 경우 나타나는 확대 윈도우(714)의 일부를 보인 것이고, 상기 표시 내용(710)을 실질적으로 제공하기 위한 코드 부분으로 웹 디자인 코드 파일(721)과, 실제 HTML 요소들에 대한 동작들을 정의하기 위한 XML 코드 파일(컨텍스트)(722) 및 상기 XML 코드 파일(722)에 대한 구조적 정의를 포함하는 XML DTD 파일(723)을 상기 표시 내용(710) 하부에 도시하였다. 이때, 상기 웹 디자인 코드 파일(721)에는 프레임워크를 구성하는 복수의 자바스크립트 라이브러리 파일들(730)을 로드하는 부분이 포함되어 상기 표시 내용(710)의 우측에 도시된 프레임 워크를 사용할 수 있게 된다.

이제, 프레임워크(730)의 구성을 보면 여기서는 도 4에 도시한 구성요소들 중 일부인 Ajax 컴포넌트(731), 윈도우 컴포넌트(732), 이벤트 리스너부(733), 메세지 처리부(734), 드래그 & 드롭 처리부(735), XML DOM(736), 클래스 베이스(737), 인스턴스 팩토리(738) 등을 나타내었다.

우선, 표시 부분(710)의 각 요소들(버튼들(712), 스크롤 뷰(711), 그림개체(713) 등)에 대한 클래스 정의 및 인스턴스 생성에 의한 연결은 도시된 인스턴스 팩토리(738)가 상기 XML DOM(736)을 활용하여 상기 XML 컨텍스트(722)를 해석하는 것으로 클래스 베이스(737)를 상속한 인스턴스들을 팩토리(739)에 등록하여 관리한다.

상기 표시 부분(710)의 각 요소들을 개체지향적으로 표현하기 위해서 웹 디자인 코드(721)를 이용하기보다는 윈도우 컴포넌트(734)를 이용하여 상기 XML 컨텐스트(722)에서 대응되는 버튼, 스크롤뷰, 그림 객체등에 대한 시각적 효과를 정의하고, 상기 각 요소들에 대한 이벤트 리스너를 정의하여 해당 이벤트 발생시의 동작을 상기 이벤트 리스너부(733)에서 관리하도록 한다.

만일, 상기 이벤트 리스너부(733)에서 이벤트 발생에 대한 메세지 바이패스나 이벤트 발생에 대응되는 동작을 요청하면 상기 메세지 처리부(734)를 통해 이벤트 발생을 수신한 특정 개체가 대응 동작을 실시하거나, 상기 XML 컨텐스트(722)에 기 설정된 이벤트 리스너의 함수가 있는 경우 해당 기능을 수행하게 된다. 한편, 버튼을 눌러 그림 개체의 내용을 변경해야 할 경우, Ajax 컴포넌트(731)를 이용하 여 웹서버(810)에 필요한 그림 정보를 비동기적으로 요청하고 그로부터 수신하여 해당 그림 정보만을 갱신할 수 있다.

만일, 이벤트 발생 내용이 드래그 & 드롭인 경우 상기 드래그 & 드롭 처리부(734)에서 대응되는 기능을 관리하여 수행하도록 한다.

전술한 바와 같이 XML을 이용한 간접 코딩 방식으로 자바스크립트 프레임워크를 활용하게 되면, 복수 브라우저의 크로스 지원, 싱글톤 패턴의 적용, 레이지 바인딩의 적용은 물론이고, 다중 상속과 매소드 재정의를 통해 XML만으로도 클래스 생성이 가능하고, 이러한 클래스 생성의 자유성과 기본 클래스로부터 새로운 클래스를 상속을 통해 생성하는 체계를 통해 객체 지향 특성이 강화될 수 있다. 그 외에 필요한 인터페이스와 컴포넌트를 프레임워크 개선을 통해 필요한 경우 쉽게 추가하고 적용할 수 있으며 디자인 코드와 논리 코드를 분리할 수 있어 웹 컨텐트나 웹 어플리케이션을 용이하게 유지 보수하거나 개발할 수 있게 된다.

이상에서 상술한 바와 같이, 본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 자바스크립트 언어를 이용하여 클래스 생성을 지원하는 기본 클래스를 제공하고 XML 컨텍스트 파일을 해석하여 인스턴스 팩토리를 구성하며 이벤트 기반 처리 및 웹서버와 실시간 및 유연한 통신이 가능하도록 하는 프레임워크를 제공하도록 함으로써, 자바스크립트 개체의 효율적인 관리와 유지보수 및 재활용성을 극대화하고, XML 컨텍스트를 통해 디자인코드와 논리 코드를 분리시킬 수 있어 분업 개발 및 객체지향 특성을 향상시키는 효과가 있다.

본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 XML을 이용하여 인스턴스를 구성하고, 매소드 재정의(overriding) 및 상속이 가능하도록 함으로써, XML 설정만으로 새로운 클래스를 정의할 수 있도록 함으로써, 자바스크립트를 직접 코딩하지 않고도 웹 컨텐트나 웹 어플리케이션을 범용화된 XML 문법에 맞추어 작성할 수 있는 효과가 있고, 이러한 XML 문서를 다양하게 활용할 수 있는 효과가 있다.

본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 원하는 인스턴스를 싱글톤 인스턴스로 팩토리에 등록시켜 관리하며, 리소스 절약 및 로딩 지연을 줄이기 위해 레이지 바인딩(Lazy binding)을 추가적으로 적용할 수 있도록 함으로써, 복잡한 생성 과정을 단순화할 수 있으며, 사용하지 않는 인스턴스를 불필요하게 생성하지 않아 웹 컨텐츠나 웹 어플리케이션의 성능을 향상시킬 수 있는 효과가 있다.

본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 메세지 기반 클래스를 이용한 메세지 기반 어플리케이션 구조를 제공하고, 메시지 체인을 이용한 순차적 수행 기능을 제공함과 아울러, 상기 메세지 기반 클래스를 이용하여 메시징 기능을 제공하는 사용자 정의 클래스를 작성할 수 있도록 함으로써, 이벤트 기반 처리 및 메세지 기반 처리를 이용하여 로직 일원화 및 자바스크립트 개체의 독립성을 확보할 수 있는 효과가 있다.

Claims (32)

1. 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드의 수행을 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크 장치에 있어서,

   자바스크립트 언어로 작성된 기본 클래스들 및 베이스 클래스에 대한 접근 인터페이스를 제공하는 기본 클래스부와;

   XML 문서에 대한 인터페이스를 제공하는 DOM과;

   인스턴스 생성 및 클래스 정의를 포함하는 XML 문서 파일을 상기 기본 클래스부를 참조로 해석하여 인스턴스의 풀을 구성하고 명시적 인스턴스를 관리하는 자바스크립트 언어로 작성된 인스턴스 팩토리와;

   상기 인스턴스들 간의 메세지 전달을 지원하는 메세지 처리부를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
2. 제 1항에 있어서, 상기 인스턴스 팩토리는 싱글톤 인스턴스를 팩토리에 등록하고, 초기화 시점이 아닌 실제 참조시 인스턴스를 생성하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
3. 제 1항에 있어서, 상기 인스턴스 팩토리는 상기 XML 컨텍스트 파일에 포함된 클래스 정의를 분석하여 상기 기본 클래스부에 포함된 기본 클래스로부터 상속되는 클래스를 생성하고 해당 클래스로 정의된 인스턴스를 팩토리에 등록하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
4. 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 그에 대한 처리를 정의하는 이벤트 리스너를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
5. 제 1항에 있어서, 상기 메세지 처리부는 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 상기 이벤트 발생을 현재 혹은 별도로 지정된 윈도우에 메세지로 전송하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
6. 제 1항에 있어서, 상기 인스턴스 팩토리는 예외 발생을 검출하는 수단 및 예외 처리 수단을 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
7. 제 1항에 있어서, 상기 인스턴스 팩토리는 함수 프록시 생성을 통해 관점 지향 프로그래밍을 지원하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
8. 제 1항에 있어서, 상기 어플리케이션 프레임워크 장치에 의한 요청이나 상기 웹 브라우저의 요청시 웹서버로부터 비동기 방식으로 파일이나 데이터를 수신하는 Ajax 컴포넌트를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
9. 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소와 연동되는 윈도우에 관련된 클래스와 확장된 컴포넌트를 제공하는 윈도우 컴포넌트부를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
10. 제 9항에 있어서, 상기 확장된 컴포넌트는 버튼, 스트롤 뷰, 트리뷰, 칼라 픽커, 콤보 박스, 애니메이션 효과 중 적어도 하나를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
11. 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소를 브라우저의 종류에 관계 없이 동일한 인터페이스로 접근하도록 하는 크로스 브라우징 지원 인터페이스를 제공하는 HTML DOM을 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
12. 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 해당 요소 혹은 개체가 이동 가능한 요소인 경우 마우스에 의한 드래그 & 드롭 기능을 제공하는 드래그 & 드롭 처리부를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
13. 제 1항에 있어서, 상기 인스턴스 팩토리는 상기 XML 파일에 인스턴스의 탬플릿 혹은 프로토타입이 정의된 경우, 해당 인스턴스 생성 요청시 상기 템플릿이나 프로토타입의 정의를 참조하여 해당 인스턴스를 팩토리에 등록시켜 관리하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크 장치.
14. 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드를 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 수행 방법에 있어서,

    자바스크립트로 작성된 프레임워크 라이브러리 파일들을 로드하는 단계와;

    XML 파일을 로드한 후 해당 XML 파일을 해석하는 단계와;

    상기 XML 파일의 해석 중에 상기 프레임워크에 포함된 클래스를 이용하거나 상기 클래스를 상속 또는 매소드를 재정의하는 내용 및 이를 통한 인스턴스 생성 내용을 파악하여 인스턴스 팩토리를 구성하는 단계와;

    상기 HTML 코드에 포함된 HTML 요소들에 대한 이벤트 리스너 및 메세지 처리부 기능을 정의하는 단계와;

    상기 HTML 요소들에 대한 이벤트 및 메세지 처리 과정을 수행하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
15. 제 14항에 있어서, 상기 웹 브라우저를 통해 외부로부터 수신하는 데이터나 파일은 Ajax를 통해 비동기적으로 획득하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
16. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는,

    인스턴스를 팩토리에 등록시켜 싱글톤 인스턴스를 생성하고, 초기화 시점이 아닌 실제 참조시 인스턴스를 생성하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
17. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는,

    상기 HTML 요소들에 대한 인스턴스 연결 동작을 모두 상기 XML 파일로부터 획득하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
18. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는,

    상기 XML 파일로부터 인스턴스 생성에 대한 프로토타입 정의를 획득하는 단계와;

    상기 프로토타입 정의를 이용하는 자바스크립트 코드를 통해 상기 인스턴스 팩토리에 인스턴스를 등록하는 단계를 포함하는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
19. 제 18항에 있어서, 위에서, 상기 프로토타입 정의를 이용하는 자바스크립트 코드는 상기 HTML 코드에 포함되는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
20. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는,

    상기 HTML 요소들이 윈도우 또는 윈도우에 관련된 확장 컴포넌트일 경우 상기 프레임워크 라이브러리 파일들에 정의된 클래스를 이용하여 상기 인스턴스 팩토리에 등록하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
21. 제 20항에 있어서, 상기 확장 컴포넌트는 버튼, 스트롤 뷰, 트리뷰, 칼라 픽커, 콤보 박스, 애니메이션 효과 중 적어도 하나를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
22. 제 14항에 있어서, 상기 이벤트 리스너 및 메세지 처리부 기능을 정의하는 단계는,

    상기 XML 파일을 해석하여 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤 트 발생을 처리하는 방식을 지정하고, 상기 이벤트 발생에 따른 메세지를 해당 윈도우 또는 설정된 윈도우에 제공하도록 지정하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
23. 제 14항에 있어서, 상기 XML 파일을 해석하는 단계는,

    관련된 XML 파일의 링크가 포함되는 경우 해당 XML 파일을 추가적으로 임포트하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
24. 제 14항에 있어서, 상기 HTML 요소들에 대한 메세지 처리 과정을 수행하는 단계는,

    상기 XML 파일에 설정된 동작만을 수행하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
25. 제 14항에 있어서, 상기 XML 파일을 해석하는 단계는,

    지정된 함수에 대한 프록시를 생성하고 해당 프록시를 통해 상기 지정된 함수에 대한 동작을 감시하도록 하는 단계를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
26. 제 14항에 있어서, 상기 HTML 요소들에 대한 메세지 처리 과정을 수행하는 단계는,

    상기 HTML 요소에 대한 이벤트 발생시 해당 요소 혹은 개체가 이동 가능한 요소인 경우 상기 프레임워크 라이브러리 파일에서 제공하는 마우스에 의한 드래그 & 드롭 기능을 이용하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
27. 자바스크립트의 규약에 부합하는 제 1 소스 코드 및 인터넷 브라우저의 표현에 부합하는 제 2 소스 코드를 수신하는 단계와;

    상기 제 2 소스 코드 내에 상기 제 1 소스 코드의 실행을 요청하는 제 1 명령어가 존재하는 경우, 상기 제 1 소스 코드를 독출하는 단계와;

    상기 제 1 소스 코드에 상기 제 1 소스 코드에서 정의하지 않은 함수 또는 변수가 존재하는 경우, 상기 제 1 소스 코드의 클래스에 대한 인스턴스 정보를 추출하는 단계와;

    상기 인스턴스 정보에 포함된 상기 함수 또는 변수를 사용하여 상기 제 1 명령어를 수행하는 단계를 포함하는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
28. 제 27항에 있어서, 상기 인스턴스 정보는 XML 규약에 부합하는 형식으로 작 성된 정보인 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
29. 제 27항에 있어서, 상기 클래스는 하나 이상의 다른 클래스로부터 함수 또는 변수를 상속받는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
30. 제 27항에 있어서, 상기 제 1 소스 코드 내에 상기 인스턴스 정보를 포함하는 파일의 위치가 명시된 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
31. 제 27항에 있어서, 상기 인터넷 브라우저는 컴퓨터, 노트북, 또는 휴대폰 등의 모바일 기기를 포함하는 네트워크 기기에서 인터넷 상의 데이터를 표시하는 기능을 가지는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.
32. 제 14항 내지 제 31항 중의 어느 한 항의 방법을 수행할 수 있는 프로그램이 수록된 컴퓨터로 읽을 수 있는 기록 매체.

Images