KR20080070337A - Java script based web-client application framework, web contents processing method using the framework and computer readable medium processing the method - Google Patents

Java script based web-client application framework, web contents processing method using the framework and computer readable medium processing the method

Info

Publication number
KR20080070337A
KR20080070337A KR1020070008292A KR20070008292A KR20080070337A KR 20080070337 A KR20080070337 A KR 20080070337A KR 1020070008292 A KR1020070008292 A KR 1020070008292A KR 20070008292 A KR20070008292 A KR 20070008292A KR 20080070337 A KR20080070337 A KR 20080070337A
Authority
KR
South Korea
Prior art keywords
javascript
instance
web
client application
class
Prior art date
Application number
KR1020070008292A
Other languages
Korean (ko)
Other versions
KR101330559B1 (en
Inventor
남기훈
이지웅
신동민
정의정
김태영
신종훈
강혜진
김동우
Original Assignee
에스케이커뮤니케이션즈 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 에스케이커뮤니케이션즈 주식회사 filed Critical 에스케이커뮤니케이션즈 주식회사
Priority to KR1020070008292A priority Critical patent/KR101330559B1/en
Publication of KR20080070337A publication Critical patent/KR20080070337A/en
Application granted granted Critical
Publication of KR101330559B1 publication Critical patent/KR101330559B1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488—Object-oriented
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Computational Linguistics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computing Systems (AREA)
  • Artificial Intelligence (AREA)
  • Stored Programmes (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

A Java script based web-client application framework, a web contents processing method using the same, and a computer-readable recording medium thereof are provided to maximize maintenance efficiency and reusability of Java script objects by providing a basic class supporting class creation with a Java script language, forming an instance factory with interpreting an XML(eXtensible Markup Language) contents file, processing events based on events, and smoothly communicating with a web server in real-time. A basic class unit provides basic classes made in Java script language and an access interface for the basic classes. An XML DOM(Document Object Model)(736) provides interface for an XML document. An instance factory(738) is made in the Java script language, and forms an instance pool and manages declarative instances(739) by interpreting the XML document file including instance creation and class definition based on the basic class. A message processor(734) supports message transfer between the instances. The instance factory registers a single-tone instance to a factor and creates the instance in real reference not an initialization time point.

Description

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

도 1은 일반적인 웹페이지 구성을 보인 예.1 shows an example of a general webpage configuration.

도 2는 일반적인 웹페이지 구성을 보인 다른 예.Figure 2 is another example showing a typical web page configuration.

도 3은 본 발명 일 실시예의 개념을 보인 개념도.3 is a conceptual diagram showing the concept of an embodiment of the present invention.

도 4는 본 발명 일 실시예의 아키텍쳐.4 is an architecture of one embodiment of the present invention.

도 5는 본 발명 일 실시예에 따른 웹컨텐츠 구성예.5 is a configuration example of the web content according to an embodiment of the present invention.

도 6은 본 발명 다른 실시예에 따른 웹컨텐츠 구성예.6 is a configuration example of the web content according to another embodiment of the present invention.

도 7은 본 발명 또 다른 실시예에 따른 웹컨텐츠 구성예.7 is a configuration example of the web content according to another embodiment of the present invention.

도 8은 본 발명 또 다른 실시예에 따른 웹컨텐츠의 화면.8 is a screen of the web content according to another embodiment of the present invention.

도 9는 도 8의 웹컨텐츠를 구성하기 위한 디자인 코드 구성.9 is a design code configuration for configuring the web content of FIG.

도 10은 도 8의 웹컨텐츠를 구성하기 위한 엑스엠엘(XML) 코드 구성.FIG. 10 is an XML code configuration for constructing the web content of FIG. 8. FIG.

도 11은 도 8의 동작을 위한 프레임워크의 개념도.11 is a conceptual diagram of a framework for the operation of FIG.

** 도면의 주요 부분에 대한 부호의 설명 **** Description of symbols for the main parts of the drawing **

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

120: 웹 디자인 코드 영역 150: XML 컨텍스트120: Web design code area 150: XML context

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

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

301: 클래스 베이스 302: 유틸리티 모듈301: class base 302: utility module

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

305: 드래그 & 드롭 처리부 306: 이벤트 리스너305: Drag and drop processing unit 306: Event listener

307: 메세지 처리부 308: XML DOM307: message processing unit 308: XML DOM

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

본 발명은 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 이를 이용한 웹 컨텐츠 처리 방법에 관한 것으로, 특히 자바스크립트를 이용하여 프레임워크를 구성하고, 엑스엠엘(이하, XML이라 칭함) 문서를 이용하여 객체화 및 재사용성을 높이고 디자인 부분과 로직 부분을 분리하도록 함으로써 효과적이며 객체 지향적 방식의 클라이언트 어플레케이션 개발이 가능하도록 한 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체에 관한 것이다.The present invention relates to a JavaScript-based web-client application framework and a web content processing method using the same, and in particular, to construct a framework using JavaScript, and to objectify using XML (hereinafter referred to as XML) document A JavaScript-based web-client application framework that enables effective and object-oriented client application development by increasing reusability and separating design and logic parts, and a method and method for creating web content using the framework The present invention relates to a computer-readable recording medium.

점차 포털로 대변되는 일방적인 정보 제공의 웹 형태에서 인터넷으로 연결된 모든 웹사이트에서의 고객 참여와 공유를 이끌어 내고, 재생산된 자원의 공유가 가능한 환경을 제공하도록 하는 웹2.0의 형태로 빠르게 전환되고 있다. 이러한 웹2.0의 시대에 접어들면서 웹을 플랫폼으로 간주하는 다양한 웹 어플리케이션들이 등장하게 되었다. 특히 RIA(Rich Internet Application)의 수요가 급증하면서 기존의 데스크탑 어플리케이션과 유사한 기능을 가지는 웹 어플리케이션이 속속 등장하고 있다.Increasingly, the web form of unilateral information provision, which is represented by portals, is rapidly becoming a form of web 2.0 that leads to customer participation and sharing on all internet-connected websites and provides an environment in which reproduced resources can be shared. . In the era of Web 2.0, various web applications that consider the web as a platform have emerged. In particular, as the demand for RIA (Rich Internet Application) is rapidly increasing, web applications having functions similar to those of the existing desktop applications are continuously appearing.

이러한 다양한 기능과 화려한 인터페이스의 웹 어플리케이션의 수요가 급증함에 따라 그동안 웹 클라이언트에서 동적인 요소를 제공하기 위해 사용되었던 자바스크립트의 비중 역시 커지고 있는 실정이다.As the demand for web applications with various functions and colorful interfaces increases rapidly, the weight of JavaScript used to provide dynamic elements in the web client is increasing.

하지만, 기존의 웹 클라이언트에서 사용되던 자바스크립트는 단순한 동적 효과를 제공하는 라이브러리의 측면이 강조된 것으로, 이를 이용하여 복잡한 웹 어플리케이션을 개발하기 위해서는 방대한 순차적 프로그래밍이 요구되게 된다. 실질적으로, 자바스크립트는 웹 브라우저가 실행하는 스크립트 언어로서, 그 규격은 자바의 규격과 유사하며, 하이퍼텍스트 생성 언어(HTML) 문서를 작성하는 수준의 사용자가 사용하는 것에 주안점을 두어 개발되었기 때문에 자바와는 달리 다양한 변수의 형 및 클래스, 상속 등을 사용할 수 없기 때문에 객체지향 특성이 부족한 특징이 있다. 따라서, 다양한 분야의 개발이 서로 연관되는 복잡한 웹 어플리케이션 개발의 특성상 각 담당 분야별로 각각 원하는 기능을 수행하는 모듈을 개별하여 통합하는 방식이 선호되지만, 자바스크립트를 이용한 웹어플리케이션 개발에서는 이러한 방식을 적용하기 어렵다는 문제점이 발생된다. 즉, 이러한 분업 개발의 경우 각 모듈의 상호 의존도가 낮을수록 개발 효율이 높아지게 되지만, 자바스크립트를 이용하는 경우에는 모듈들의 상호 의존도가 높아져 분업이 곤란하다.However, the JavaScript used in the existing web client emphasizes the aspect of the library that provides simple dynamic effects, and requires extensive sequential programming to develop a complex web application. Practically speaking, JavaScript is a scripting language that web browsers run. Its specifications are similar to those of Java, and because Java was developed with a focus on use by users of the level of writing Hypertext Generation Language (HTML) documents. Unlike this, there is a lack of object-oriented characteristics because it cannot use types, classes, and inheritance of various variables. Therefore, due to the characteristics of the development of complex web applications in which various fields of development are related to each other, it is preferable to integrate modules that perform desired functions for each field of interest separately. However, in the case of web application development using JavaScript, such a method may be applied. Difficulty arises. That is, in the case of division of labor development, the lower the interdependency of each module, the development efficiency becomes higher. However, in the case of using JavaScript, the division of labor of the modules increases, which makes the division of labor difficult.

또한, 자바스크립트는 웹 페이지의 내부에 태그 형식으로 적용되어 이를 브라우저가 해석하여 대응 기능을 수행하는 방식을 취하고 있기 때문에 웹 페이지 종속적인 코딩이 불가피하였다. 즉, 코드의 재사용이 어려워 개발 시간이 오래 걸리게 된다.In addition, since JavaScript is applied as a tag format inside the web page, and the browser interprets it and performs a corresponding function, web page dependent coding is inevitable. In other words, it is difficult to reuse code, which takes a long time for development.

도 1은 일반적인 자바스크립트 코드를 적용한 웹페이지의 예로서, 도시한 바와 같이 하나의 웹페이지(10)는 자바스크립트 코드 영역(20)과 웹 디자인 코드 영역(30)으로 구분되어 기술된다. 물론, 상기 자바스크립트 코드 영역(20)과 웹 디자인 코드 영역(30)이 뒤섞여 혼재될 수도 있으나, 코딩의 편의상 자바스크립트 코드 영역(20)과 웹 디자인 코드 영역(30)을 분리하는 것이 일반적이다. 1 illustrates an example of a web page to which a general JavaScript code is applied. As illustrated, one web page 10 is divided into a JavaScript code area 20 and a web design code area 30. Of course, the JavaScript code region 20 and the web design code region 30 may be mixed together, but for convenience of coding, it is common to separate the JavaScript code region 20 and the web design code region 30.

상기 자바스크립트 코드 영역(20)에 자바스크립트 함수들을 정의하고, 이를 상기 웹 디자인 코드(30) 부분에서 적절히 호출하여 적용하는 방식으로 동적인 요소가 부여된 웹페이지를 제공할 수 있다. By defining JavaScript functions in the JavaScript code region 20 and calling them appropriately in the web design code 30, a web page with dynamic elements can be provided.

하지만 이러한 경우 상기 자바스크립트 코드 영역(20)의 내용은 모든 웹페이지에서 요구되는 기능이나 효과에 따라 상이한 내용이 적용되고, 이는 웹 페이지에 종속적인 상태가 되어 해당 코드를 재활용하거나 범용적으로 적용하는 것은 어려웠다.However, in this case, the content of the JavaScript code area 20 is different depending on the function or effect required in all web pages, which is dependent on the web page, and the content is recycled or applied universally. It was difficult.

도 2는 상기 도 1의 기본적인 형태를 벗어나 자바스크립트 코드들을 라이브러리 형태로 별도 구축하고, 원하는 기능을 가지는 자바스크립트 코드 파일들(51, 52)을 링크하여 사용하는 형태의 웹페이지(40)를 보인 것이다. 도시한 바와 같이 이 경우 웹페이지(40)에는 원하는 자바스크립트 코드를 가지는 자바스크립트 파일들(51, 52)을 지정하고, 추가할 코드나 해당 웹페이지에 맞추어 변경해야할 변수들을 해당 웹페이지에 맞추어 상기 도시된 자바스크립트 코드 영역(50)에 작성해야한다. 이후, 필요한 함수는 웹디자인 코드 영역(60)에서 호출하여 사용할 수 있다.FIG. 2 illustrates a web page 40 in which JavaScript codes are separately formed in a library form and the JavaScript code files 51 and 52 having a desired function are linked to each other. will be. In this case, as shown in the web page 40, the JavaScript files 51 and 52 having the desired JavaScript code are designated, and the code to be added or variables to be changed according to the web page are matched with the web page. It should be written in the JavaScript code area 50 shown. Then, the necessary function can be called and used in the web design code area 60.

그러나, 이러한 방식 역시 단순히 라이브러리만 제공하는 기능일 뿐, 웹페이지에 종속적이므로, 작성된 코드를 재사용하기 어렵고, 웹페이지나 웹디자인 코드와 분리된 객체지향적 프로그래밍은 기대하기 어렵다. 즉, 복잡하고 방대하며, 다양한 협력 작업이 요구되는 웹 2.0 서비스를 위한 웹 어플리케이션을 개발하기 위해서 자바스크립트를 적용하고자 할 경우 개발 시간과 비용이 높아질 수 밖에 없다.However, this method is merely a library-only function, and is dependent on a web page. Therefore, it is difficult to reuse the written code, and object-oriented programming that is separated from the web page or web design code is difficult to expect. In other words, if you want to apply JavaScript to develop web applications for Web 2.0 services that are complex, massive, and require various collaborations, development time and costs are high.

상기와 같은 자바스크립트의 객체지향 특성을 개선하고 효율적인 자바스크립트 개체(object)의 관리를 위해서 새롭게 제안하는 본 발명 실시예들의 목적은 자바스크립트 언어를 이용하여 클래스 생성을 지원하는 기본 클래스를 제공하고 XML 컨텍스트 파일을 해석하여 인스턴스 팩토리를 구성하며 이벤트 기반 처리 및 웹서버와 실시간 및 유연한 통신이 가능하도록 하는 프레임워크를 제공하도록 함으로써, 자바스크립트 개체의 효율적인 관리와 유지보수 및 재활용성을 극대화하고, XML 컨텍스트를 통해 디자인코드와 논리 코드를 분리시킬 수 있도록 한 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨 텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다. In order to improve the object-oriented characteristics of JavaScript as described above and to efficiently manage JavaScript objects, a new object of the present invention is to provide a base class that supports class generation using a JavaScript language and provide XML. By interpreting context files to construct instance factories and providing a framework for event-based processing and real-time and flexible communication with web servers, you can efficiently manage, maintain, and recycle JavaScript objects, and maximize XML context. The present invention provides a JavaScript-based web-client application framework for separating design code and logic code, a web content generation method using the framework, and a computer-readable recording medium capable of implementing the same.

본 발명 실시예들의 다른 목적은 XML을 이용하여 매소드 재정의(overriding) 및 상속이 가능하도록 함으로써, XML 설정만으로 새로운 클래스를 생성할 수 있도록 한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다. Another object of the embodiments of the present invention is to provide a method for overriding and inheriting using XML, thereby providing a JavaScript-based web-client application framework and the framework for creating a new class using only XML configuration. The present invention provides a method for generating web content using the same and a computer-readable recording medium capable of implementing the same.

본 발명 실시예들의 또 다른 목적은 원하는 인스턴스를 싱글톤 인스턴스로 팩토리에 등록시켜 관리하며, 리소스 절약 및 로딩 지연을 줄이기 위해 레이지 바인딩(Lazy binding)을 추가적으로 적용할 수 있도록 한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다. Yet another object of the embodiments of the present invention is to register and manage a desired instance as a singleton instance in the factory, and to enable lazy binding to further save resources and reduce loading delays. An application framework, a method of generating web content using the framework, and a computer-readable recording medium capable of implementing the same are provided.

본 발명 실시예들의 또 다른 목적은 메세지 기반 클래스를 이용한 메세지 기반 어플리케이션 구조를 제공하고, 메시지 체인을 이용한 순차적 수행 기능을 제공함과 아울러, 상기 메세지 기반 클래스를 이용하여 메시징 기능을 제공하는 사용자 정의 클래스를 작성할 수 있도록 함으로써, 이벤트 기반 처리 및 메세지 기반 처리를 이용하여 로직 일원화 및 자바스크립트 개체의 독립성을 확보할 수 있도록 한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체를 제공하는 것이다. Another object of the embodiments of the present invention is to provide a message-based application structure using a message-based class, provide a sequential function using a message chain, and provide a user-defined class that provides a messaging function using the message-based class. JavaScript-based web-client application framework and method for generating web content using the framework, which can be used to secure logic unification and independence of JavaScript objects by using event-based processing and message-based processing. It is to provide a computer-readable recording medium that can be implemented.

본 발명의 목적은 이상에서 언급한 목적들로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 당업자에게 명확하게 이해되어질 수 있을 것이다.The object of the present invention is not limited to the above-mentioned objects, and other objects that are not mentioned will be clearly understood by those skilled in the art from the following description.

상기와 같은 목적을 달성하기 위하여 본 발명의 일 실시예는, 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드의 수행을 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크에 있어서, 자바스크립트 언어로 작성된 기본 클래스들 및 상기 기본 클래스에 대한 접근 인터페이스를 제공하는 기본 클래스부와; XML 문서에 대한 인터페이스를 제공하는 DOM과; 인스턴스 생성 및 클래스 정의를 포함하는 XML 문서 파일을 상기 기본 클래스부를 근거로 해석하여 인스턴스의 풀을 구성하고 명시적 인스턴스를 관리하는 자바스크립트 언어로 작성된 인스턴스 팩토리와; 상기 인스턴스들 간의 메세지 전달을 지원하는 메세지 처리부를 포함하는 것을 특징으로 한다.In order to achieve the above object, an embodiment of the present invention, in the JavaScript-based web-client application framework for the execution of HTML code and XML code that is interpreted through a web browser, a base class written in the JavaScript language A base class unit for providing an access interface to the base class; A DOM providing an interface to an XML document; An instance factory written in a JavaScript language for constructing a pool of instances and managing explicit instances by interpreting an XML document file including instance creation and class definitions based on the base class portion; And a message processing unit for supporting message transfer between the instances.

상기 인스턴스 팩토리는 상기 XML 컨텍스트 파일에 포함된 클래스 정의를 분석하여 상기 기본 클래스부에 포함된 기본 클래스로부터 상속되는 클래스를 생성하고 해당 클래스로 정의된 인스턴스를 팩토리에 등록하는 것을 특징으로 한다.The instance factory analyzes the class definition included in the XML context file to generate a class inherited from the base class included in the base class unit, and registers an instance defined by the class in the factory.

상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 그에 대한 처리를 정의하는 이벤트 리스너를 더 포함하는 것을 특징으로 한다.It characterized in that it further comprises an event listener for defining the processing when the event occurs for the HTML element included in the HTML code.

상기 메세지 처리부는 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 상기 이벤트 발생을 현재 혹은 별도로 지정된 윈도우에 메세지로 전송하는 것 을 특징으로 한다.The message processing unit may be configured to transmit the event occurrence as a message to a current or separately designated window when an event occurs for the HTML element included in the HTML code.

상기 각 구성에 의한 요청이나 상기 웹 브라우저의 요청시 웹서버로부터 비동기 방식으로 파일이나 데이터를 수신하는 Ajax 컴포넌트를 더 포함하는 것을 특징으로 한다.It characterized in that it further comprises an Ajax component for receiving a file or data asynchronously from a web server when the request by each configuration or the request of the web browser.

상기 HTML 코드에 포함된 HTML 요소를 브라우저의 종류에 관계 없이 동일한 인터페이스로 접근하도록 하는 크로스 브라우징 지원 인터페이스를 제공하는 HTML DOM을 더 포함하는 것을 특징으로 한다.It further comprises an HTML DOM that provides a cross-browsing support interface for accessing the HTML elements included in the HTML code to the same interface, regardless of the type of browser.

상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 해당 요소 혹은 개체가 이동 가능한 요소인 경우 마우스에 의한 드래그 & 드롭 기능을 제공하는 드래그 & 드롭 처리부를 더 포함하는 것을 특징으로 한다.The method may further include a drag and drop processing unit that provides a drag and drop function using a mouse when a corresponding element or an object is a movable element when an event of an HTML element included in the HTML code is generated.

또한, 본 발명의 다른 실시예는 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드를 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 수행 방법에 있어서, 자바스크립트로 작성된 프레임워크 라이브러리 파일들을 로드하는 단계와; XML 파일을 로드한 후 해당 XML 파일을 해석하는 단계와; 상기 XML 파일의 해석 중에 상기 프레임워크에 포함된 클래스를 이용하거나 상기 클래스를 상속 또는 매소드를 재정의하는 내용 및 이를 통한 인스턴스 생성 내용을 파악하여 인스턴스 팩토리를 구성하는 단계와; 상기 HTML 코드에 포함된 HTML 요소들에 대한 이벤트 리스너 및 메세지 처리부 기능을 정의하는 단계와; 상기 HTML 요소들에 대한 이벤트 및 메세지 처리 과정을 수행하는 단계를 포함하는 것을 특징으로 한다. In addition, another embodiment of the present invention, in the web content execution method using a JavaScript-based web-client application framework for HTML code and XML code that is interpreted through a web browser, loading the framework library files written in JavaScript Making a step; Parsing the XML file after loading the XML file; Constructing an instance factory by grasping the contents included in the framework or inheriting the class or redefining the method and the instance creation contents through the analysis of the XML file; Defining event listener and message processing function for HTML elements included in the HTML code; And performing an event and message processing process for the HTML elements.

상기 인스턴스 팩토리를 구성하는 단계는 싱글톤 인스턴스를 팩토리에 등록하고, 초기화 시점이 아닌 실제 참조시 인스턴스를 생성하는 것을 특징으로 한다.The step of configuring the instance factory is characterized in that the singleton instance is registered in the factory and the instance is created at the actual reference, not at the time of initialization.

상기 HTML 요소들에 대한 인스턴스를 인스턴스 팩토리를 이용하여 생성 및 등록하는 단계는 상기 XML 파일로부터 인스턴스 생성에 대한 프로토타입 정의를 획득하는 단계와; 상기 프로토타입 정의를 이용하는 자바스크립트 코드를 통해 상기 인스턴스 팩토리에 인스턴스를 등록하는 단계를 포함하는 것을 특징으로 한다.Creating and registering an instance for the HTML elements using an instance factory includes obtaining a prototype definition for instance creation from the XML file; Registering an instance with the instance factory through JavaScript code using the prototype definition.

상기 프로토타입 정의를 이용하는 자바스크립트 코드는 상기 HTML 코드에 포함되는 것을 특징으로 한다.JavaScript code using the prototype definition is characterized in that it is included in the HTML code.

또한, 본 발명의 또 다른 실시예에 따른 웹 컨텐츠 수행 방법은 자바스크립트의 규약에 부합하는 제 1 소스 코드 및 인터넷 브라우저의 표현에 부합하는 제 2 소스 코드를 수신하는 단계와; 상기 제 2 소스 코드 내에 상기 제 1 소스 코드의 실행을 요청하는 제 1 명령어가 존재하는 경우, 상기 제 1 소스 코드를 독출하는 단계와; 상기 제 1 소스 코드에 상기 제 1 소스 코드에서 정의하지 않은 함수 또는 변수가 존재하는 경우, 상기 제 1 소스 코드의 클래스에 대한 인스턴스 정보를 추출하는 단계와; 상기 인스턴스 정보에 포함된 상기 함수 또는 변수를 사용하여 상기 제 1 명령어를 수행하는 단계를 포함하는 것을 특징으로 한다.In addition, the web content performing method according to another embodiment of the present invention comprises the steps of receiving a first source code that conforms to the conventions of JavaScript and a second source code that corresponds to the representation of the Internet browser; Reading the first source code when there is a first instruction requesting execution of the first source code in the second source code; Extracting instance information for a class of the first source code when a function or a variable not defined in the first source code exists in the first source code; And performing the first command by using the function or variable included in the instance information.

또한, 본 발명의 또 다른 실시예에 따른 기록 매체는 전술한 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드를 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용하여 웹 컨텐츠를 수행하는 프로그램이 수록된다.In addition, the recording medium according to another embodiment of the present invention includes a program for executing web content using a JavaScript-based web-client application framework for HTML code and XML code interpreted through the above-described web browser. .

이러한 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있도록 프로그램 및 데이터가 저장되는 모든 종류의 기록매체를 포함한다. 그 예로는, 롬(Read Only Memory), 램(Random Access Memory), CD(Compact Disk), DVD( Digital Video Disk)-ROM, 자기 테이프, 플로피 디스크, 광 데이터 저장 장치 등이 있으며, 또한 케리어 웨이브(예를 들면, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함된다. 또한, 이러한 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다.Such recording media includes all types of recording media on which programs and data are stored so that they can be read by a computer system. Examples include Read Only Memory (ROM), Random Access Memory (RAM), Compact Disk (CD), Digital Video Disk (DVD) -ROM, magnetic tape, floppy disk, optical data storage devices, and the like. It also includes implementations in the form of (eg, transmission over the Internet). In addition, these recording media can be distributed over network coupled computer systems so that the computer readable code is stored and executed in a distributed fashion.

상기한 바와 같은 본 발명을 첨부된 도면들과 실시예들을 통해 상세히 설명하도록 한다. The present invention as described above will be described in detail with reference to the accompanying drawings and embodiments.

도 3은 본 발명 일 실시예의 개념을 보인 개념도로서, 도시한 바와 같이 자바스크립트 코드(110)와 웹 디자인 코드(120)를 포함하는 웹 페이지(100)와, 이러한 웹 페이지(100)를 웹 브라우저를 통해 해석하여 실행하고자 할 경우 기반 기능을 제공하기 위해 적용되는 프레임워크(200) 및, 이러한 프레임워크(200)를 이용한 동적 프로그램을 보다 객체 지향적이고 재활용성이 높게 사용할 수 있도록 상기 웹페이지(100)와 별도의 파일로 기술한 XML 컨텍스트(150)로 이루어진다. 상기 프레임워크(200)는 크게 라이브러리(210) 부분과 클래스 패키지 부분(220)으로 구분될 수 있다. 여기서, 상기 웹 브라우저(혹은, 인터넷 브라우저)는 컴퓨터, 노트북, 또는 휴대폰 등의 모바일 기기를 포함하는 네트워크 기기에서 인터넷 상의 데이터를 표시하는 기능을 가지는 것을 의미한다.3 is a conceptual diagram showing a concept of an embodiment of the present invention, a web page 100 including a JavaScript code 110 and a web design code 120 as shown, and the web page 100 in a web browser If you want to interpret and run through the framework 200 is applied to provide a base function, and the web page (100) so that the dynamic program using the framework 200 can be used more object-oriented and highly recyclable ) And an XML context 150 described in a separate file. The framework 200 may be largely divided into a library 210 part and a class package part 220. Here, the web browser (or internet browser) means that the network device including a mobile device such as a computer, a laptop, or a mobile phone has a function of displaying data on the Internet.

즉, 본 발명 일 실시예의 기본적인 개념은 객제지향특성이 미비한 자바스크립트를 이용하여 웹 페이지(100) 등의 웹 컨텐츠를 생성하고자 할 경우, 혹은 이를 더 복잡하게 구현한 웹 어플리케이션을 구성하고자 할 경우 개별적인 웹디자인 코드에 종속적이던 자바스크립트 코드를 최대한 웹디자인 코드와 분리시켜 연관성을 낮출 수 있도록 한 것이다. 즉, 이를 통해 자바스트립트 코드를 이용한 웹 컨텐트의 객체지향 특성을 높여 컴파일이나 별도의 실행 환경이 요구되지 않는 자바스크립트의 장점을 살리면서도 웹 2.0에서 요구하는 서비스를 충족시킬 수 있는 웹 컨텐츠나 웹 어플리케이션을 용이하게 개발할 수 있도록 하고자 하는 것이다. That is, the basic concept of an embodiment of the present invention is to generate a web content such as the web page 100 using JavaScript that has insufficient object-oriented characteristics, or to construct a web application that implements the complexity more. JavaScript code that was dependent on web design code can be separated from web design code as much as possible to reduce the association. In other words, this enables web content or web applications that can satisfy the services required by Web 2.0 while enhancing the object-oriented characteristics of web content using JavaScript code, while taking advantage of JavaScript that does not require compilation or a separate execution environment. It is intended to facilitate the development of.

이를 위해서, 실질적인 동적 효과와 논리적 프로그램은 디자인 코드와 분리되는 XML 컨텍스트(150)를 이용하여 작성하고, 이러한 XML 컨텐스트(150)를 해석하여 상기 웹 페이지(100)에 대한 높은 독립성을 가지는 동적 효과를 제공할 수 있도록 하는 프레임워크(200)를 자바스크립트 코드만으로 구성한 것에 본 발명 일 실시예의 특징이 있는 것이다. 이러한 방식을 이용하게 되면, 추후 웹 컨텐츠를 개선하고자할 경우 그 개선 내용에 따라 웹 디자인만 변경하거나, 혹은 XML 코드만 변경하여 원하는 목적을 달성할 수 있어 유지 보수가 용이해지며, 상기 XML 코드의 재사용이 가능해지게 되므로 웹 컨텐츠의 개발이 한층 용이해질 뿐만 아니라, 상기 객체 지향적 독립성에 의해 분야별 개발 분업화도 더욱 용이해지게 된다.To this end, a substantial dynamic effect and a logical program are written using the XML context 150 separated from the design code, and the dynamic effect having high independence for the web page 100 is interpreted by interpreting the XML content 150. It is a feature of the embodiment of the present invention to configure the framework 200 to provide a JavaScript code only. By using this method, in the future, if the web content is to be improved in the future, the web design may be changed according to the improvement or only the XML code may be achieved to achieve a desired purpose, thereby making maintenance easier. As the reuse becomes possible, not only the development of web contents is easier, but also the division of development of each field can be facilitated by the object-oriented independence.

따라서, 상위 클래스의 생성자를 자동적으로 호출할 수 없는 자바스크립트의 클래스 초기화 방법이나, 클래스의 상속(혹은 다중 상속) 이나 매소드의 재정의(overriding) 등을 통한 새로운 클래스 생성 방법을 제공해야하고, 이러한 클래스들을 활용하는 인스턴스 생성 방식을 프로토 타입을 이용하는 방식, 팩토리를 이용하는 방식 등을 적용할 수 있도록 한다. 또한, XML 파일을 해석하기 위한 XML DOM(Document Object Model)에 대응되는 기능도 구현하여 브라우저 독립적으로 XML의 문서를 자유롭게 해석할 수 있는 인터페이스도 요구되게 된다. 물론, 그 외에 추가적인 컴포넌트들과, 윈도우 클래스들에 대한 지원이 필요하며, 화면 갱신 없는 신속한 화면 전환과 XML 코드의 다운로드 및 적용을 위해서 웹 서버에 대한 실시간 및 유연한 통신을 지속적으로 제공하는 Ajax 기능의 지원도 필요하게 된다.Therefore, you need to provide a way to initialize a class in JavaScript that cannot automatically call the constructor of a parent class, or to create a new class through class inheritance (or multiple inheritance) or method overriding. This allows you to apply instance creation methods that use classes, prototype methods, and factory methods. In addition, by implementing a function corresponding to the XML Document Object Model (DOM) for parsing XML files, an interface for freely parsing XML documents is required. Of course, other components and window classes need to be supported, and the Ajax feature continuously provides real-time and flexible communication to the web server for quick screen switching and XML code download and application without screen refresh. You will also need support.

이러한 상기 기능들을 라이브러리화하고, 이러한 라이브러리들을 체계적으로 관리하기 위한 수단을 부가하여 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 구성하였다. 이러한 프레임워크를 본 명세서에서는 예시적으로 SWAF(Superior Wab-client Application Framework)라 칭하기로 한다.The above-mentioned functions were libraryed and a means for systematically managing these libraries was added to construct a JavaScript-based web-client application framework. Such a framework will be referred to herein as SWAF (Superior Wab-client Application Framework).

도 4는 상기 SWAF의 예시적 아키텍쳐를 보인 것으로, 도시된 바와 같이 복수의 기능부들로 이루어져 있으며, 이러한 기능부들은 브라우저가 디자인 코드와 자바스크립트 코드 및 이를 독립적으로 관리하는 XML을 해석하기 위한 기반 기능을 제공한다. 즉, 실질적으로 자바스크립트 코드의 해석은 브라우저에서 수행하게 되지만, 내부적으로 사용자가 원하는 자바스크립트 코드의 패턴을 제공하는 것은 XML을 해석하여 해당 XML에 기술된 각종 설정이나 동작 방식에 맞춘 자바스크립트 코드를 브라우저에 제공하는 상기 프레임워크(300)가 처리하는 방식이다. 그리고, 이러한 프레임워크(300)의 실질적인 구성 역시 자바스크립트 코드로 되어 있어, 브라우저는 상기 프레임워크(300)를 구성하는 자바스크립트 코드를 해석(인터프리팅)하여 수행하면서 상기 프레임워크(300)가 제공하는 다양한 기능들을 XML 문서로 설정한 작업들도 처리하게 되는 것이다.Figure 4 shows an example architecture of the SWAF, as shown is composed of a plurality of functional units, these functional units are a base function for the browser to interpret the design code and JavaScript code and XML that manages them independently To provide. That is, the actual interpretation of the JavaScript code is performed by the browser. However, internally, providing a pattern of the JavaScript code that the user wants is to interpret the XML and apply the JavaScript code to the various settings or operation methods described in the XML. The framework 300 provides the browser. In addition, the actual configuration of the framework 300 is also made of JavaScript code, so that the browser 300 interprets (interprets) and executes the JavaScript code constituting the framework 300. It also handles the tasks of setting up XML documents with various functions provided.

도시된 구성을 보면, 우선 어플리케이션에서 사용되는 모든 클래스의 기본이 되는 SWAF 기본 클래스를 제공하는 클래스 베이스(301), XML 파일의 구성 노드들을 직관적으로 관리할 수 있도록 하는 인터페이스를 제공하는 XML DOM(308), 디자인코드(HTML)의 요소(element)에 대한 이벤트 발생시 해당 이벤트에 대한 처리 방식을 정의하는 이벤트 리스너(306), 상기 클래스 베이스(301)에 포함된 클래스나 해당 클래스를 상속하거나 매소드를 재정의하여 새롭게 생성한 클래스들 사이의 메세지 교환 기능을 제공하고, 클래스의 레벨에 따른 메세지 확산 기능을 제공하는 메세지 처리부(307), 전체 화면의 갱신 없이 실시간으로 서버와 통신하여 일부 페이지나 데이터를 주고받을 수 있는 Ajax 컴포넌트(309), 인스턴스 생성 및 클래스 정의를 포함하는 XML 문서 파일을 해석하여 인스턴스의 풀을 구성하고 명시적 인스턴스를 관리하는 인스턴스 팩토리(310)를 기본으로 하며, 부가적으로 자주 사용되는 윈도우에 관련된 클래스와 확장된 컴포넌트를 제공하는 윈도우 컴포넌트(304) 및 브라우저 및 개체(object)에 관련된 정보를 관리하는 유틸리티 모듈(302)이 포함될 수 있고, 개체나 HTML 요소의 이동을 위해 자주 사용되는 드래그 & 드롭 처리부(305) 역시 포함될 수 있다. 그 외에, 디자인 코드(HTML 코드)에 포함된 요소를 브라우저의 종류에 관계없이 동일한 인터페이스로 접근하도록 하는 크로스 브라우징 지원 인터페이스를 제공하는 HTML DOM이 더 포함될 수 있다.In the configuration shown, first, the class base 301 provides a SWAF base class that is the basis of all classes used in the application, and the XML DOM 308 provides an interface for intuitively managing the configuration nodes of the XML file. ), An event listener 306 that defines how to handle an event when an event occurs for an element of design code (HTML), a class included in the class base 301, or inherits a class or redefines a method A message processing unit 307 that provides a function of exchanging messages between newly created classes and a message spreading function according to the level of the class, and communicates with a server in real time without updating the entire screen to exchange some pages or data. XML document files that contain Ajax components (309), instance creation, and class definitions Based on an instance factory 310 that organizes pools of instances and manages explicit instances, additionally provides window components 304 and browsers and objects that provide classes and extended components related to frequently used windows. A utility module 302 may be included to manage the information related to the < RTI ID = 0.0 > In addition, the HTML DOM may be further provided to provide a cross-browsing support interface for accessing elements included in the design code (HTML code) to the same interface regardless of the type of browser.

상기 각 구성들은 모두 자바스크립트로 작성된 라이브러리의 형태를 가지며, 이들 중 일부 혹은 전부가 활용되어 웹 컨텐츠의 동적 기능을 지원하게 된다.Each of the above components has the form of a library written in JavaScript, and some or all of them are utilized to support dynamic functions of web content.

상기 각 구성들은 브라우저를 기반으로 동작되며, 그 자체적으로 활용되거나 서로 연동하여 활용된다. 상기 각 구성들의 실질적인 동작 방식은 이벤트 발생에 따른 이벤트 핸들러에 의해 관리되므로 이들을 통합적으로 설명하기 전에 각각의 개별적인 특성을 먼저 설명하도록 한다.Each of the above components is operated based on a browser, and is utilized by itself or in conjunction with each other. Since the actual operation of each of the above components is managed by an event handler according to an event occurrence, each individual characteristic will be described first before describing them collectively.

먼저, 상기 클래스 베이스(301)는 어플리케이션에서 사용되는 모든 클래스의 베이스 클래스를 포함하고, 이러한 클래스들의 종류 검증, 클래스 이름, 팩토리 ID 등과 같은 클래스 고유 데이터에 대한 접근 인터페이스를 제공하는 기능을 수행한다. First, the class base 301 includes base classes of all classes used in the application, and performs a function of providing an access interface for class-specific data such as type verification, class name, factory ID, and the like of these classes.

특히, 일반적인 자바스크립트에서 지원하지 않는 클래스 생성 기능을 지원하기 위해서는 클래스를 생성하고, 초기화하는 작업들을 자바스크립트가 기본적으로 제공하는 기능을 사용하는 것이 아니라, 상기 클래스 베이스(301)를 지원하기 위해서 별도로 구성하여 관리하는 프로토타입 라이브러리에서 제공하는 메소드를 사용하도록 할 수 있다. 이때, 상기 프로토타입은 인스턴스 생성을 위해 XML에 정의될 수 있는 프로토타입과는 상이한 것이라는데 주의한다. 상기 프로토타입 라이브러리는 상기 클래스 베이스(301)에 함께 구성될 수도 있으나 별도로 구분하여 별도의 자바스크립트 파일(예를 들어 prototype.js)에 클래스 생성이나 초기화 등을 지원하는 메소드를 작성하여 구성할 수있다. 예를 들어, 새로운 클래스인 C2.Plugin을 생성하기 위해서, 프로토타입 라이브러리에서 제공되는 매소드인 Class.create를 사용하여 다음과 같이 새로운 클래스를 정의할 수 있다. In particular, in order to support the class creation function not supported by general JavaScript, the class creation and initialization operations are not separately used to support the class base 301, rather than using the functions basically provided by JavaScript. You can configure it to use the methods provided by the prototype library. Note that the prototype is different from the prototype that can be defined in XML for instance creation. The prototype library may be configured together in the class base 301, but may be separately formed by creating a method for supporting class generation or initialization in a separate JavaScript file (for example, prototype.js). . For example, to create a new class C2.Plugin, you can define a new class as follows using Class.create, a method provided in the prototype library.

C2.plugin=Class.create();C2.plugin = Class.create ();

그 이후, 초기화를 위한 메소드를 실행시키거나, 자동실행되도록 하여 초기 화를 수행할 수 있다. 그 다음 해당 클래스에 포함되는 속성들을 정의할 수 있는데, 이때, 상기 클래스 베이스(301)에 포함된 클래스로부터 상속받은 클래스라는 것을 명확히 하는 것이 바람직하다. 또한, 재상속을 위해 상위 클래스의 생성자를 자동 호출하기 위해서는 직접 호출이 불가능하므로, init 생성자를 직접 사용하지 않고 현재 클래스에서 메소드를 구현(예를 들어, initPlugin)한 후, init 생성자에서 상기 구현한 메소드를 호출하는 방식을 적용하도록 한다. After that, the initialization method can be executed by executing a method for initialization or automatically executing. Then, it is possible to define the properties included in the class, in which case it is desirable to be clear that the class inherited from the class included in the class base (301). In addition, since it is impossible to directly call the constructor of the parent class for reinheritance, implement the method in the current class without using the init constructor directly (for example, initPlugin), and then implement the above in the init constructor. Apply the method of calling a method.

예를 들어, 현재 클래스를 C2.Plugin 클래스라 하고, 상기 클래스를 상속받은 다른 클래스를 C2.SubPlugin이라 하면, initSubPlugin 메소드의 초기화 부분에서 가장 처음에 initPlugin을 호출하면, 상위 클래스를 초기화 할 수 있게 된다. For example, if the current class is called C2.Plugin class and another class that inherits the class is C2.SubPlugin, the first class is called in the initialization part of the initSubPlugin method so that the parent class can be initialized. .

그 외에, 상기 클래스 베이스(301)는 상기 클래스 베이스가 제공하는 기본 클래스로부터 상속된 클래스들을 식별할 수 있는 메소드들을 제공할 수 있다.In addition, the class base 301 may provide methods for identifying classes inherited from the base class provided by the class base.

그 다음, XML DOM(308)은 브라우저에서 제공하는 XML 문서 개체에 대해서 보다 직관적으로 접근할 수 있는 인터페이스를 제공하기 위한 것으로, 두가지 접근 방식이 가능하다. 즉, 브라우저에서 XML 문서 개체를 제공할 경우(예를 들어, 인터넷 익스플로러의 경우 Microsoft.XMLDOM ActiveX Object)에는 해당 개체를 래핑(wrapping)하는 개체로 XML 문서 개체를 초기화하고, 그렇지 않을 경우 XML 문서를 읽어들여 XML 문서 개체를 생성한다. 그리고, 이러한 XML 문서 개체에 대해서 노드를 기반으로 접근, 확인, 변경등을 실시할 수 있도록 하여 브라우저에서 제공하는 XML DOM 파서 보다 더 직관적인 인터페이스를 제공하도록 한다.Next, the XML DOM 308 is to provide a more intuitive interface to the XML document object provided by the browser, two approaches are possible. In other words, if the browser provides an XML document object (for example, Microsoft.XMLDOM ActiveX Object for Internet Explorer), initialize the XML document object with the object that wraps it; otherwise, the XML document is initialized. Read and create an XML document object. In addition, this XML document object can be accessed, checked, and modified based on nodes to provide a more intuitive interface than the XML DOM parser provided by the browser.

그 다음, 이벤트 리스너(306)는 HTML 코드의 요소(element)에 대한 이벤트 발생시 해당 이벤트에 대한 처리 방식을 정의하는 기능을 수행하며, 부가적으로는 메세지 처리부(307)와도 연동되는 기능을 수행한다. 일반적으로 자바스크립트는 이벤트 핸들링 방식으로 동작하기 때문에, 연결된 HTML 요소들에서 발생되는 이벤트들을 처리할 수 있는 기능이 있으나, 본 실시예에서는 이러한 이벤트 핸들링 방식을 더 확장한다. 예를 들어, 전술한 SWAF 리스너의 경우, 월드 와이드 웹 컨소시움(W3C)에서 정의된 이벤트 이름을 이용하여 이벤트 발생원인 소스(지정하지 않을 경우 해당 이벤트를 소유하는 개체와 연결된 HTML 요소가 자동으로 지정)와 이벤트 발생시 동작할 자바스트립트 함수를 지정하는 것으로 정의된다. 이러한 리스너는 배열로 구성할 수 있고, 상기 배열 관리를 통해 리스너의 초기화 및 설정 등이 가능하다. 만일, 상기 이벤트 발생시 동작할 함수를 지정하지 않는다면 해당 이벤트의 이름을 메세지로 하여 현재 발생된 자바스크립트 이벤트 정보가 해당 리스너를 소유한 개체에 전달(sendMessage)된다. 이는 HTML 요소의 이벤트를 SWAF의 메세지 처리부가 대신 처리하도록 바이패스할 수 있음을 의미하며, 이를 통해 로직을 일원화할 수 있게 된다.Next, the event listener 306 performs a function of defining a processing method for the corresponding event when an event for an element of the HTML code occurs, and additionally interworks with the message processing unit 307. . In general, since JavaScript operates in an event handling method, there is a function that can handle events generated from connected HTML elements. However, in the present embodiment, the event handling method is further extended. For example, in the case of the SWAF listener described above, the source of the event originated using the event name defined in the World Wide Web Consortium (W3C) (if not specified, automatically specified by the HTML element associated with the object that owns the event). It is defined to specify the JavaScript function to be executed when and event occurs. Such a listener may be configured as an array, and the initialization and setting of the listener may be performed through the array management. If the function to be executed when the event occurs is not specified, the JavaScript event information currently generated is transmitted to the object owning the listener by using the name of the event as a message. This means that events in HTML elements can be bypassed for the SWAF's message handler to handle instead, which allows the logic to be unified.

그 외에, 일반적인 이벤트에 관련된 처리(이벤트 종류, 위치, 소유 개체, 리스너 제거 등)을 수행할 수 있다.In addition, you can perform general event-related processing (event type, location, owned object, listener removal, and so on).

그리고, 메세지 처리부(307)는 상기 클래스 베이스(301)에 포함된 클래스나 해당 클래스를 상속한 클래스 혹은 매소드를 재정의하여 새롭게 정의한 클래스들 사이의 메세지 교환 기능을 제공하기 위하여 단독으로 인스턴스화 되어 사용되기 보다는 다른 클래스에 다중 상속되어 메세지 송수신 기능을 가질 수 있도록 메세지 처리를 위한 기본 클래스를 제공한다. 그리고, 메세지를 발생시키거나 메세지를 전파하고, 지정된 곳에 전달하는 기능을 제공한다.In addition, the message processing unit 307 may be instantiated independently to provide a function of exchanging messages between newly defined classes by redefining a class included in the class base 301, a class that inherits the class, or a method. Provides a base class for message handling so that multiple classes can inherit and have message sending / receiving capabilities. It also provides the ability to generate or propagate a message and deliver it to a specified location.

그 다음, Ajax 컴포넌트(309)는 널리 알려진 바와 같이 요청(Request)과 응답(Response)에 따른 비동기적 데이터 송수신을 통해 화면을 전부 갱신하지 않고서도 원하는 내용을 선별 수신하는 기능을 제공한다.Next, the Ajax component 309 provides a function of selectively receiving desired contents without updating the screen through asynchronous data transmission and reception according to a request and a response, as is well known.

그리고, 상기 인스턴스 팩토리(310)는 실질적으로 XML 문서를 해석 및 관리하고, 개체들의 인스턴스를 생성 및 관리하는 전역개체이다. 이는 XML 문서(즉, XML 개체)를 읽어들어 컨텍스트를 로드하여 해당 컨텍스트 내에 정의된 인스턴스들을 생성하게 되는데, 레이지 바인딩(lazy-binding) 및 싱글톤 인스턴스를 생성할 수 있고, 이들을 인스턴스 풀(pool)인 팩토리에 등록하여 명시적으로 관리할 수 있다. 상기 레이지 바인딩은 초기화가 아닌 실제 참조시 인스턴스를 생성할 수 있기 때문에 어플리케이션의 성능을 개선하는데 효과가 있다. 그 외에, 상기 인스턴스 팩토리(310)는 지정된 함수에 대한 프록시를 생성하고 해당 프록시를 통해 상기 지정된 함수에 대한 동작(이전, 이후, 예외)을 감시하도록 하여 AOP(관점 지향 프로그래밍)를 지원할 수 있다.The instance factory 310 is a global entity that substantially interprets and manages XML documents and creates and manages instances of objects. It reads an XML document (that is, an XML object) and loads the context to create instances defined within that context, which can create lazy-binding and singleton instances, and pool them into an instance pool. It can be managed explicitly by registering it in an factory. The lazy binding is effective in improving the performance of the application because the lazy binding can create an instance upon actual reference rather than initialization. In addition, the instance factory 310 may support AOP (perspective-oriented programming) by generating a proxy for a specified function and monitoring the behavior (before, after, and exception) for the specified function through the proxy.

또한, 상기 인스턴스 팩토리(310)는 예외 발생을 검출하는 수단과 예외를 처리하기 위한 예외 처리기(exception processor)를 더 포함할 수 있다. In addition, the instance factory 310 may further include means for detecting the occurrence of an exception and an exception processor for handling the exception.

그리고, 필수적인 것은 아니지만, 적용될 경우 보다 용이한 웹 컨텐츠 또는 웹 어플리케이션의 작성을 지원할 수 있는 라이브러리들이 상기 프레임워크의 기본 구성들에 더 부가될 수 있다.And, although not essential, libraries that can support the creation of web content or web applications that are easier to apply may be added to the basic configurations of the framework.

예를 들어, 자주 사용되는 윈도우에 관련된 클래스와 확장된 컴포넌트를 제공하는 윈도우 컴포넌트(304)를 더 추가하여, 윈도우의 생성, 크기 관리, 요소 관리등과 함께 버튼, 스트롤 뷰, 트리뷰, 칼라 픽커, 콤보 박스, 애니메이션 효과 등에 관한 확장된 컴포넌트 관리도 상기 프레임워크(300)를 활용할 수 있다.For example, add a window component 304 that provides classes and extended components related to frequently used windows, creating buttons, scroll views, tree views, colors, along with window creation, size management, and element management. Extended component management for pickers, combo boxes, animation effects, etc. may also utilize the framework 300.

그리고, 브라우저 및 개체에 관련된 정보(예를 들어, 브라우저의 위치, 포인트 위치, 움직임, 개체의 복사, 사각 개체의 관리, 좌표 설정, 개체 결합, 개체들의 움직임 관리 등)를 관리하는 유틸리티 모듈(302)이 포함될 수 있고, 개체나 HTML 요소의 이동을 위해 자주 사용되는 드래그 & 드롭 처리부(305) 역시 포함될 수 있고, 해당 드래그 & 드롭 처리부(305)는 개체의 위치를 지정하고, 개체를 지우고, 갱신하는 등의 기본적인 작업들과, 해당 개체가 위치할 목적 개체나 제거될 개체, 개체 풀의 관리 등과 같은 작업들도 처리할 수 있으며, 그 외에 필요한 기능들을 더 구성할 수 있다.The utility module 302 manages information related to the browser and the object (for example, the position of the browser, the point position, the movement, the copy of the object, the management of the rectangular object, the coordinate setting, the object combination, the movement management of the object, etc.). ), And a drag and drop processor 305, which is frequently used for moving an object or HTML element, may be included, and the drag and drop processor 305 may specify an object's position, erase an object, and update the object. You can handle basic tasks, such as the object to which the object will be located, the object to be removed, the management of the object pool, and more.

도 5내지 도 7은 도 4를 통해 설명한 프레임워크를 이용하여 웝 컨텐츠를 구성하는 방식에 관한 것으로, 여기서는 웹 페이지를 구성하는 방식을 예로 들어 설명한다. 5 to 7 relate to a method of organizing content using the framework described with reference to FIG. 4. Here, a method of constructing a web page will be described as an example.

먼저, 도 5는 웹 디자인 코드 영역(420)으로 웹 페이지(400)를 구성하고, 별도로 XML 코드 파일(420)을 구성한 것이다. 상기 웹 디자인 코드 영역(420)에는 단순한 프레임워크의 로딩 부분 및 상기 XML 코드 파일만의 로딩부분만 기재한 후, 실질적으로 상기 웹 디자인 코드 영역(420)의 각 요소들에 대한 동적 기능에 대한 내용은 상기 XML 코드 파일(420)에 기재하는 방식이다. 즉, 클래스에 대한 생성 및 사용을 상기 XML 코드 파일(420)로 단일화하는 것이다.First, FIG. 5 configures a web page 400 using a web design code area 420 and separately configures an XML code file 420. In the web design code area 420, only the loading part of the simple framework and the loading part of the XML code file are described. Subsequently, the dynamic function of each element of the web design code area 420 is described. Is a method described in the XML code file 420. That is, to unify the generation and use of the class to the XML code file 420.

도시한 바와 같이, 상기 클래스 패키지(440)에 존재하는 클래스들을 이용한 인스턴스는 상기 XML 코드 파일(420)에 정의된 상태로 상기 인스턴트 팩토리(430)에 등록되어 사용되며, 상기 XML 코드 파일(420)에 기술된 내용에 따라 상기 웹 디자인 코드(410)의 요소에 대한 이벤트 발생시 상기 XML 코드 파일(420)에 기재된 상태로 상기 인스턴스 팩토리(430)에 등록된 인스턴스가 활용되어 해당 이벤트 발생에 대한 대응을 실시하게 된다. As shown, an instance using the classes present in the class package 440 is registered and used in the instant factory 430 in a state defined in the XML code file 420, and the XML code file 420. When an event occurs for the element of the web design code 410 according to the contents described in the above, the instance registered in the instance factory 430 in the state described in the XML code file 420 is utilized to respond to the event occurrence. Will be implemented.

즉, 상기 웹 디자인 코드 영역(410)에는 실질적인 자바스크립트 논리 부분이 존재하지 않아 상기 웹 디자인 코드 영역(410)과 실제 논리 부분의 정의된 XML 코드 파일(420)의 상호 독립성이 높다. 이는 상기 XML 코드 파일(420)의 재사용성이 높다는 것을 의미한다. 단순히 웹 디자인 코드 영역(410)에서 자바스크립트로 작성된 논리 파일을 호출하여 사용할 경우에는 물리적 위치는 상기 구성과 유사할 수 있지만, 이 경우의 논리 파일은 상기 웹 페이지(400)를 구성하는 상기 웹 디자인 코드 영역(410) 내부에서 함수 이름으로 호출되게 되므로 웹 페이지(400)에 종속적이 되어 재사용성이 극히 낮아지게 된다. 하지만, 상기 도시된 경우에는 실제 논리 부분이 자바스크립트가 아닌 XML로 기재되어 있으며, 실제 웹 디자인 코드 영역(410)에서 해당 자바스크립트 함수를 호출하여 사용하는 것이 아니라 상기 XML 파일이 상기 웹 디자인 코드 영역(410)의 요소들을 관리하도록 구성되므로 해당 XML 파일만 수정하면 다른 종류의 웹 디자인 코드 영역(410)에 대해서도 적용될 수 있으며, 실제 자바스크립트에 대한 심도 있는 지식이 없더라도 XML 파일만 논리적 으로 구성할 경우 원하는 기능을 정의할 수 있다. 특히, 전술한 도 4와 같은 구성을 가지는 프레임워크를 이용할 경우 대단히 간단한 설정만으로도 화면 조절, 요소 조절, 윈도우 컴포넌트 조절, 드래그 & 드롭, Ajax 지원, AOP 지원, 메세지 관리 방식 적용, 크로스 브라우저 지원 등이 가능하기 때문에, 구체적인 자바스크립트를 모르더라도 복잡한 어플리케이션을 쉽게 개발할 수 있게 된다.That is, since there is no substantial JavaScript logic portion in the web design code region 410, the independence of the web design code region 410 and the defined XML code file 420 of the actual logic portion is high. This means that the XML code file 420 is highly reusable. When simply calling and using a logical file written in JavaScript in the web design code area 410, the physical location may be similar to the above configuration, but the logical file in this case is the web design constituting the web page 400. Since it is called with a function name inside the code area 410, it is dependent on the web page 400, and the reusability is extremely low. However, in the illustrated case, the actual logic part is described as XML, not JavaScript, and the XML file is not used to call and use the corresponding JavaScript function in the actual web design code area 410. It is configured to manage the elements of 410, so modifying the corresponding XML file can be applied to other kinds of web design code area 410, and logically constructing only the XML file even without in-depth knowledge of the actual JavaScript. You can define the function you want. In particular, when using the framework having the configuration as shown in FIG. 4 described above, the screen control, element control, window component control, drag & drop, Ajax support, AOP support, message management method application, cross browser support, and the like are very simple. Because of this, you can easily develop complex applications without knowing the specific JavaScript.

도 6은 프로토타입을 이용하여 인스턴스를 생성하는 방식을 보인 것이다. 도시된 경우는 웹 페이지(500)를 이루는 코드 영역을 자바스크립트 코드 영역(510)과 웹 디자인 코드 영역(520)으로 구분하여 자바스크립트 코드 영역(510)에 상기 웹 디자인 코드 영역(520)의 요소들에 대한 이벤트 처리 논리를 기술해야 하는 방식이지만, 이때 자바스크립트의 인스턴스에 대한 정의를 직접 상기 자바스크립트 코드 영역(510)에 기재할 필요가 없으며, 별도의 XML 파일(530)에서도 기재할 필요가 없다.6 shows a method of creating an instance using a prototype. In the illustrated case, the code region constituting the web page 500 is divided into a JavaScript code region 510 and a web design code region 520, and the elements of the web design code region 520 are displayed in the JavaScript code region 510. In this case, the definition of the instance of JavaScript is not required to be directly described in the JavaScript code area 510, and the separate XML file 530 needs to be described. none.

도시된 구성은 별도의 XML 파일(530)에는 인스턴스 생성을 위한 프로토 타입을 정의하고, 상기 자바스크립트 코드 영역(510)에서는 상기 프로토 타입의 정의를 이용하여 상기 인스턴스 팩토리(540)에 인스턴스 생성을 요청하여 HTML 요소들과 연결하는 간접적 방법을 이용하도록 함으로써, 상기 웹 페이지의 구성에는 복잡한 자바스크립트의 인스턴스 정의를 생략할 수 있도록 한 것이다. 따라서, 간단히 필요한 인스턴스를 프로토타입을 이용하여 설정하고 해당 인스턴스에 정의된 함수들과 속성들을 이용하면 된다.The illustrated configuration defines a prototype for creating an instance in a separate XML file 530 and requests the instance factory 540 to create an instance using the definition of the prototype in the JavaScript code area 510. By using an indirect method of linking with HTML elements, complex web instance definition can be omitted in the construction of the web page. Therefore, you simply set up the required instance with a prototype and use the functions and properties defined in that instance.

도 7은 상기 프레임워크를 이용하여 웹 컨텐츠나 웹 어플리케이션을 작성할 수 있는 가장 기본적인 방식으로, XML을 이용하지 않고 직접 웹 페이지(500)의 자바스크립트 코드 영역(510)에서 직접 자바스크립트를 이용하여 새로운 클래스를 생성하고 사용하며, 인스턴스를 HTML 요소들과 연결하는 방식을 보인 것이다. 비록, 이렇게 프레임워크를 이용한다 할지라도 클래스의 상속, 메소드 재정의 등을 이용한 클래스 생성을 이용할 수 있으나, 웹 페이지 종속성이 높아지므로 분업화에 의한 웹 어플리케이션 개발에는 적합하지 않다. 단, 클래스를 명시적으로 사용하기 때문에 자바스크립트에 익숙한 사용자에게는 직관적인 코드를 제공할 수 있다.FIG. 7 illustrates the most basic method for creating web content or web application using the framework. The new method can be implemented using JavaScript directly in the JavaScript code area 510 of the web page 500 directly without using XML. It shows how to create and use a class and associate instances with HTML elements. Although this framework is used, class creation using class inheritance and method redefinition can be used, but it is not suitable for web application development by division of labor due to high web page dependency. However, because of the explicit use of classes, users who are familiar with JavaScript can provide intuitive code.

도 8은 전술한 프레임워크를 이용하여 구성한 웹 컨텐츠의 예이며, 도 9내지 도 10은 상기 도 8을 구현하기 위한 디자인 코드와 XML 코드의 구성 블록을 보인 것이다. FIG. 8 is an example of web content constructed using the above-described framework, and FIGS. 9 to 10 show building blocks of design code and XML code for implementing FIG. 8.

도 8은 브라우저의 한 윈도우에 2개의 버튼 요소들(611, 612)과 스크롤 뷰(610) 및 상기 스크롤 뷰(610) 상에 복수의 그림요소들(613)이 나타나도록 화면을 디자인한 것이다. 상기 버튼 요소들의 선택에 의해 그림들이 교체되며, 상기 그림들을 자유롭게 배경 영역(616)으로 드래그 & 드롭하여 그림을 별도 창(614, 615)으로 확장할 수 있도록 한 예이다.8 illustrates a screen design such that two button elements 611 and 612, a scroll view 610, and a plurality of picture elements 613 appear on the scroll view 610 in one window of the browser. The pictures are replaced by selection of the button elements, and the pictures can be freely dragged and dropped into the background area 616 to expand the pictures to the separate windows 614 and 615.

도 9 내지 도 10은 도 5에 설명한 방식으로 최대한 디자인 코드에서 자바스크립트 코드 영역을 줄이도록 하고, 실질적인 클래스 설정이나 HTML 요소와의 연결은 XML을 통해 실시하도록 한 경우의 코드 구성 예를 보인 것이다. 9 to 10 show an example of the code configuration in which the JavaScript code region is reduced in the design code as much as possible in the manner described in FIG. 5, and the actual class setting and the connection with the HTML element are performed through XML.

도 9는 실제 웹 컨텐츠(620)의 디자인 코드 부분을 보인 것으로, 크게는 프레임워크 설정 부분(625)과 HTML 디자인 부분(628)로 나눌 수 있다. 이때, 상기 프 레임워크 설정 부분(625)은 프레임워크를 이루는 각 자바스크립트 파일들을 로딩하도록 하는 SWAF 라이브러리 로딩부(621)와, 만일 별도로 생성한 사용자 라이브러리가 있는 경우 해당 라이브러리를 링크하여 로드하도록 하는 사용자 라이브러리 로딩부(621)와, 실제 클래스 생성 및 사용과 인스턴스와 HTML 요소들을 연결하는 정의가 기재된 XML 파일을 로드하는 XML 로딩부(623)로 이루어진다. 이는 별도의 코드가 필요한 부분이 아니라, 단순한 반복 구문이기 때문에 적절한 파일들을 연결하기만 하면 되는 것이다. 즉, 디자인 내용을 위한 HTML 디자인부(628)에는 논리 코드가 포함되지 않는다.9 shows a design code portion of the actual web content 620, which can be broadly divided into a framework setting portion 625 and an HTML design portion 628. At this time, the framework setting portion 625 is a SWAF library loading unit 621 for loading each JavaScript file constituting the framework, and if there is a user library created separately to link and load the corresponding library A user library loading section 621 and an XML loading section 623 for loading an XML file containing definitions of creating and using actual classes and connecting instances and HTML elements. It's not just a piece of code, it's just a loop, so you just link the appropriate files. That is, the HTML design unit 628 for the design content does not include the logic code.

도 10은 XML 파일의 내용을 보인 코드 블록도로서, XML 파일(630) 부분은 도시된 바와 같은 코드 블록들을 포함하고 있다. 상기 코드 블록의 순서는 변경 가능하며 응용 대상에 따라 내용이 변경되어야 한다.10 is a code block diagram showing the contents of an XML file, wherein an XML file 630 portion includes code blocks as shown. The order of the code blocks can be changed and the contents should be changed according to the application target.

우선, 해당 파일이 XML임을 나타내면서 범용적 XML로서 사용하기 위해 유효한 요소들을 이용하여 문서 구조를 설정한 DTD(Document Type Definition) 파일을 링크하는 XML 설정 부분(631)을 기재해야 한다. 상기 DTD는 SWAF 프레임워크에서 사용되는 요소들을 이용하여 문서 구조를 설정해 둔 것으로 유효한 파일 교환을 위해 작성한 것이며, 이는 규격을 나타내는 것이므로 공통적으로 사용된다.First, the XML setting portion 631 that links the DTD (Document Type Definition) file in which the document structure is set using elements valid for use as general-purpose XML while indicating that the file is XML should be described. The DTD is a document structure set by using elements used in the SWAF framework. It is written for valid file exchange, and it is commonly used because it represents a standard.

예를 들어, 다음과 같이 기재할 수 있다.For example, it can be described as follows.

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

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

그리고, Ajax 로딩 모듈을 정의하는 부분(632)과, HTML 디자인부에서 설정한 버튼에 대한 리스너를 정의하는 부분(633), 사이트 종류를 결정하는 종류 선택버튼 1을 정의하는 부분(634), 상기 버튼1의 정의 부분을 재사용하여 간단하게 버튼 2를 정의하는 부분(635), 스크롤 시 처리할 내용을 포함하여 스크롤뷰를 정의하는 부분(636), 확대창들이 움직일 배치 영역을 정의하는 부분(637), 종류 선택 버튼들에 대한 시각적 스타일 데이터를 정의하는 부분(638), 그리고 버튼 리스너의 정의에 따라 버튼 이벤트가 발생할 경우 실시될 실제 동작을 정의하는 부분(629) 등으로 이루어진다. 그 외에 마우스에 의한 드래그앤 드롭 등의 세부적인 구성들이 더 필요하지만, 해당 부분은 생략한 것이다.A portion 632 defining an Ajax loading module, a portion 633 defining a listener for a button set by the HTML design unit, a portion 634 defining a type selection button 1 for determining a site type, and Reusing button 1's definition part to simply define button 2 (635), part defining scroll view including contents to be processed when scrolling (636), part defining layout area to move zoomed windows (637) ), A part 638 defining visual style data for the type selection buttons, and a part 629 defining an actual operation to be performed when a button event occurs according to the definition of the button listener. In addition, detailed configuration such as drag and drop with a mouse is required, but the part is omitted.

도 11은 상기 도 8의 구성에 대한 좀 더 구조적 설명을 위해 도시한 프레임워크 동작의 개념도로서, 도시한 바와 같이 웹 브라우저(700)에서 제공되는 표시 내용(710)을 처리하기 위한 프레임워크의 설정 및 동작 방식이 나타나 있다.FIG. 11 is a conceptual diagram of a framework operation illustrated for a more structural description of the configuration of FIG. 8. The configuration of the framework for processing the display content 710 provided by the web browser 700 as illustrated. And mode of operation is shown.

먼저, 상기 표시 내용(710)은 실제 사용자에게 제공되는 윈도우로서, 내부적으로는 버튼들(712)이 위치한 스크롤뷰(711) 및 그림(713)과 상기 그림(713)을 드래그 & 드롭했을 경우 나타나는 확대 윈도우(714)의 일부를 보인 것이고, 상기 표시 내용(710)을 실질적으로 제공하기 위한 코드 부분으로 웹 디자인 코드 파일(721)과, 실제 HTML 요소들에 대한 동작들을 정의하기 위한 XML 코드 파일(컨텍스트)(722) 및 상기 XML 코드 파일(722)에 대한 구조적 정의를 포함하는 XML DTD 파일(723)을 상기 표시 내용(710) 하부에 도시하였다. 이때, 상기 웹 디자인 코드 파일(721)에는 프레임워크를 구성하는 복수의 자바스크립트 라이브러리 파일들(730)을 로드하는 부분이 포함되어 상기 표시 내용(710)의 우측에 도시된 프레임 워크를 사용할 수 있게 된다.First, the display content 710 is a window provided to an actual user, which is displayed when the scroll view 711 and the picture 713 where the buttons 712 are located are dragged and dropped. A portion of the magnification window 714 is shown, and the web design code file 721 is a code portion for substantially providing the display content 710, and an XML code file for defining operations on actual HTML elements. Context) 722 and an XML DTD file 723 including structural definitions for the XML code file 722 are shown below the display content 710. In this case, the web design code file 721 includes a portion for loading a plurality of JavaScript library files 730 constituting the framework to use the framework shown on the right side of the display content 710. do.

이제, 프레임워크(730)의 구성을 보면 여기서는 도 4에 도시한 구성요소들 중 일부인 Ajax 컴포넌트(731), 윈도우 컴포넌트(732), 이벤트 리스너부(733), 메세지 처리부(734), 드래그 & 드롭 처리부(735), XML DOM(736), 클래스 베이스(737), 인스턴스 팩토리(738) 등을 나타내었다.Referring now to the configuration of the framework 730, here are some of the components shown in Figure 4 Ajax component 731, window component 732, event listener unit 733, message processing unit 734, drag & drop The processing unit 735, the XML DOM 736, the class base 737, the instance factory 738, and the like are illustrated.

우선, 표시 부분(710)의 각 요소들(버튼들(712), 스크롤 뷰(711), 그림개체(713) 등)에 대한 클래스 정의 및 인스턴스 생성에 의한 연결은 도시된 인스턴스 팩토리(738)가 상기 XML DOM(736)을 활용하여 상기 XML 컨텍스트(722)를 해석하는 것으로 클래스 베이스(737)를 상속한 인스턴스들을 팩토리(739)에 등록하여 관리한다.First, the class definition and connection by instance creation for each element of the display portion 710 (buttons 712, scroll view 711, picture object 713, etc.) is performed by the instance factory 738 shown. By interpreting the XML context 722 by using the XML DOM 736, instances inheriting the class base 737 are registered and managed in the factory 739.

상기 표시 부분(710)의 각 요소들을 개체지향적으로 표현하기 위해서 웹 디자인 코드(721)를 이용하기보다는 윈도우 컴포넌트(734)를 이용하여 상기 XML 컨텐스트(722)에서 대응되는 버튼, 스크롤뷰, 그림 객체등에 대한 시각적 효과를 정의하고, 상기 각 요소들에 대한 이벤트 리스너를 정의하여 해당 이벤트 발생시의 동작을 상기 이벤트 리스너부(733)에서 관리하도록 한다.Rather than using web design code 721 to represent each element of the display portion 710 rather than using web design code 721 the corresponding button, scroll view, picture in the XML context 722 is used. By defining a visual effect on an object and the like, and defining event listeners for the respective elements, the event listener unit 733 manages an operation when a corresponding event occurs.

만일, 상기 이벤트 리스너부(733)에서 이벤트 발생에 대한 메세지 바이패스나 이벤트 발생에 대응되는 동작을 요청하면 상기 메세지 처리부(734)를 통해 이벤트 발생을 수신한 특정 개체가 대응 동작을 실시하거나, 상기 XML 컨텐스트(722)에 기 설정된 이벤트 리스너의 함수가 있는 경우 해당 기능을 수행하게 된다. 한편, 버튼을 눌러 그림 개체의 내용을 변경해야 할 경우, Ajax 컴포넌트(731)를 이용하 여 웹서버(810)에 필요한 그림 정보를 비동기적으로 요청하고 그로부터 수신하여 해당 그림 정보만을 갱신할 수 있다.If the event listener unit 733 requests a message bypass for an event occurrence or an operation corresponding to the event occurrence, the specific entity that receives the event occurrence through the message processing unit 734 performs a corresponding operation, or If there is a function of a predetermined event listener in the XML context 722, the corresponding function is performed. On the other hand, when it is necessary to change the contents of the picture object by pressing a button, the Ajax component 731 can be used to asynchronously request the picture information required by the web server 810 and receive only therefrom to update the corresponding picture information.

만일, 이벤트 발생 내용이 드래그 & 드롭인 경우 상기 드래그 & 드롭 처리부(734)에서 대응되는 기능을 관리하여 수행하도록 한다.If the event occurrence content is drag & drop, the drag & drop processing unit 734 manages and performs a corresponding function.

전술한 바와 같이 XML을 이용한 간접 코딩 방식으로 자바스크립트 프레임워크를 활용하게 되면, 복수 브라우저의 크로스 지원, 싱글톤 패턴의 적용, 레이지 바인딩의 적용은 물론이고, 다중 상속과 매소드 재정의를 통해 XML만으로도 클래스 생성이 가능하고, 이러한 클래스 생성의 자유성과 기본 클래스로부터 새로운 클래스를 상속을 통해 생성하는 체계를 통해 객체 지향 특성이 강화될 수 있다. 그 외에 필요한 인터페이스와 컴포넌트를 프레임워크 개선을 통해 필요한 경우 쉽게 추가하고 적용할 수 있으며 디자인 코드와 논리 코드를 분리할 수 있어 웹 컨텐트나 웹 어플리케이션을 용이하게 유지 보수하거나 개발할 수 있게 된다.As mentioned above, if you use the JavaScript framework as an indirect coding method using XML, you can use the XML class through multiple inheritance and method redefinition, as well as cross-browser support of multiple browsers, application of singleton patterns, and application of lazy binding. It can be created, and object-oriented characteristics can be strengthened through the freedom of class creation and the scheme of generating new classes through inheritance from base classes. In addition, the framework enhancements make it easy to add and apply the necessary interfaces and components when needed, and to separate the design code from the logic code, making it easier to maintain or develop web content or web applications.

이상에서 상술한 바와 같이, 본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 자바스크립트 언어를 이용하여 클래스 생성을 지원하는 기본 클래스를 제공하고 XML 컨텍스트 파일을 해석하여 인스턴스 팩토리를 구성하며 이벤트 기반 처리 및 웹서버와 실시간 및 유연한 통신이 가능하도록 하는 프레임워크를 제공하도록 함으로써, 자바스크립트 개체의 효율적인 관리와 유지보수 및 재활용성을 극대화하고, XML 컨텍스트를 통해 디자인코드와 논리 코드를 분리시킬 수 있어 분업 개발 및 객체지향 특성을 향상시키는 효과가 있다.As described above, the JavaScript-based web-client application framework and the web content generation method using the framework provide a base class that supports class generation using the JavaScript language. By parsing XML context files to construct instance factories and providing a framework that enables event-based processing and real-time and flexible communication with web servers, maximizes efficient management, maintenance, and reusability of JavaScript objects, and It is possible to separate design code and logic code through context, which improves division of labor development and object-oriented characteristics.

본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 XML을 이용하여 인스턴스를 구성하고, 매소드 재정의(overriding) 및 상속이 가능하도록 함으로써, XML 설정만으로 새로운 클래스를 정의할 수 있도록 함으로써, 자바스크립트를 직접 코딩하지 않고도 웹 컨텐트나 웹 어플리케이션을 범용화된 XML 문법에 맞추어 작성할 수 있는 효과가 있고, 이러한 XML 문서를 다양하게 활용할 수 있는 효과가 있다. The JavaScript-based web-client application framework and the web content generation method using the framework in accordance with an embodiment of the present invention construct an instance using XML, and allow method overriding and inheritance. By defining a new class only by setting, it is possible to write web content or web application according to generalized XML grammar without having to code JavaScript directly, and to use various XML documents.

본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 원하는 인스턴스를 싱글톤 인스턴스로 팩토리에 등록시켜 관리하며, 리소스 절약 및 로딩 지연을 줄이기 위해 레이지 바인딩(Lazy binding)을 추가적으로 적용할 수 있도록 함으로써, 복잡한 생성 과정을 단순화할 수 있으며, 사용하지 않는 인스턴스를 불필요하게 생성하지 않아 웹 컨텐츠나 웹 어플리케이션의 성능을 향상시킬 수 있는 효과가 있다.JavaScript-based web-client application framework according to an embodiment of the present invention and web content creation method using the framework is managed by registering the desired instance as a singleton instance in the factory, lazy to save resources and reduce loading delay By additionally applying lazy binding, the complex creation process can be simplified, and the performance of web content or web application can be improved by not creating unnecessary instances unnecessarily.

본 발명의 실시예에 따른 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크와 상기 프레임워크를 이용한 웹 컨텐츠 생성 방법은 메세지 기반 클래스를 이용한 메세지 기반 어플리케이션 구조를 제공하고, 메시지 체인을 이용한 순차적 수행 기능을 제공함과 아울러, 상기 메세지 기반 클래스를 이용하여 메시징 기능을 제공하는 사용자 정의 클래스를 작성할 수 있도록 함으로써, 이벤트 기반 처리 및 메세지 기반 처리를 이용하여 로직 일원화 및 자바스크립트 개체의 독립성을 확보할 수 있는 효과가 있다.The JavaScript-based web-client application framework and the web content generation method using the framework provide a message-based application structure using a message-based class, and provide a sequential execution function using a message chain. In addition, by using the message-based class to create a user-defined class that provides a messaging function, it is possible to secure the independence of logic and JavaScript objects using event-based processing and message-based processing.

Claims (32)

웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드의 수행을 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크에 있어서, In the JavaScript-based web-client application framework for executing HTML code and XML code that is interpreted through a web browser, 자바스크립트 언어로 작성된 기본 클래스들 및 상기 베이스 클래스에 대한 접근 인터페이스를 제공하는 기본 클래스부와; A base class unit providing base classes written in the JavaScript language and an access interface to the base classes; XML 문서에 대한 인터페이스를 제공하는 DOM과; A DOM providing an interface to an XML document; 인스턴스 생성 및 클래스 정의를 포함하는 XML 문서 파일을 상기 기본 클래스부를 참조로 해석하여 인스턴스의 풀을 구성하고 명시적 인스턴스를 관리하는 자바스크립트 언어로 작성된 인스턴스 팩토리와; An instance factory written in a JavaScript language that constructs a pool of instances and manages explicit instances by parsing an XML document file including instance creation and class definitions by reference to the base class portion; 상기 인스턴스들 간의 메세지 전달을 지원하는 메세지 처리부를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.JavaScript-based web-client application framework comprising a message processing unit for supporting message transfer between the instances. 제 1항에 있어서, 상기 인스턴스 팩토리는 싱글톤 인스턴스를 팩토리에 등록하고, 초기화 시점이 아닌 실제 참조시 인스턴스를 생성하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The JavaScript-based web-client application framework of claim 1, wherein the instance factory registers the singleton instance in the factory and creates an instance upon actual reference rather than at initialization. 제 1항에 있어서, 상기 인스턴스 팩토리는 상기 XML 컨텍스트 파일에 포함된 클래스 정의를 분석하여 상기 기본 클래스부에 포함된 기본 클래스로부터 상속되는 클래스를 생성하고 해당 클래스로 정의된 인스턴스를 팩토리에 등록하는 것을 특징 으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The method of claim 1, wherein the instance factory analyzes the class definition included in the XML context file to generate a class inherited from the base class included in the base class unit, and registers an instance defined by the class in the factory. JavaScript-based web-client application framework. 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 그에 대한 처리를 정의하는 이벤트 리스너를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The JavaScript-based web-client application framework of claim 1, further comprising an event listener that defines a process for processing an event of an HTML element included in the HTML code. 제 1항에 있어서, 상기 메세지 처리부는 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 상기 이벤트 발생을 현재 혹은 별도로 지정된 윈도우에 메세지로 전송하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The JavaScript-based web-client application framework according to claim 1, wherein the message processing unit transmits the event generation as a message to a currently or separately designated window when an event of an HTML element included in the HTML code occurs. 제 1항에 있어서, 상기 인스턴스 팩토리는 예외 발생을 검출하는 수단 및 예외 처리 수단을 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.2. The JavaScript-based web-client application framework as recited in claim 1, wherein the instance factory further comprises means for detecting an exception occurrence and an exception handling means. 제 1항에 있어서, 상기 인스턴스 팩토리는 함수 프록시 생성을 통해 관점 지향 프로그래밍을 지원하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The JavaScript-based web-client application framework of claim 1, wherein the instance factory supports perspective-oriented programming through function proxy creation. 제 1항에 있어서, 상기 각 구성에 의한 요청이나 상기 웹 브라우저의 요청시 웹서버로부터 비동기 방식으로 파일이나 데이터를 수신하는 Ajax 컴포넌트를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The JavaScript-based web-client application framework of claim 1, further comprising an Ajax component that receives a file or data from a web server in response to a request by each configuration or a request of the web browser. . 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소와 연동되는 윈도우에 관련된 클래스와 확장된 컴포넌트를 제공하는 윈도우 컴포넌트부를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The JavaScript-based web-client application framework according to claim 1, further comprising a window component unit for providing a class and an extended component related to a window linked to an HTML element included in the HTML code. 제 9항에 있어서, 상기 확장된 컴포넌트는 버튼, 스트롤 뷰, 트리뷰, 칼라 픽커, 콤보 박스, 애니메이션 효과 중 적어도 하나를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.10. The JavaScript-based web-client application framework of claim 9, wherein the extended component includes at least one of a button, a stroke view, a tree view, a color picker, a combo box, and an animation effect. 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소를 브라우저의 종류에 관계 없이 동일한 인터페이스로 접근하도록 하는 크로스 브라우징 지원 인터페이스를 제공하는 HTML DOM을 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The JavaScript-based web-client according to claim 1, further comprising an HTML DOM that provides a cross-browsing support interface for accessing HTML elements included in the HTML code to the same interface regardless of the type of browser. Application framework. 제 1항에 있어서, 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤트 발생시 해당 요소 혹은 개체가 이동 가능한 요소인 경우 마우스에 의한 드래그 & 드롭 기능을 제공하는 드래그 & 드롭 처리부를 더 포함하는 것을 특징으로 하는 자바스크 립트기반 웹-클라이언트 어플리케이션 프레임워크.The method of claim 1, further comprising: a drag and drop processing unit that provides a drag and drop function using a mouse when a corresponding element or an object is a movable element when an event of an HTML element included in the HTML code is generated. JavaScript-based web-client application framework. 제 1항에 있어서, 상기 인스턴스 팩토리는 상기 XML 파일에 인스턴스의 탬플릿 혹은 프로토타입이 정의된 경우, 해당 인스턴스 생성 요청시 상기 템플릿이나 프로토타입의 정의를 참조하여 해당 인스턴스를 팩토리에 등록시켜 관리하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크.The method of claim 1, wherein when an instance template or prototype is defined in the XML file, the instance factory registers and manages the instance in the factory by referring to the template or prototype definition when the instance creation request is made. A JavaScript-based web-client application framework. 웹 브라우저를 통해 해석되는 HTML 코드 및 XML 코드를 위한 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 수행 방법에 있어서, In the web content execution method using a JavaScript-based web-client application framework for HTML code and XML code that is interpreted through a web browser, 자바스크립트로 작성된 프레임워크 라이브러리 파일들을 로드하는 단계와; Loading framework library files written in JavaScript; XML 파일을 로드한 후 해당 XML 파일을 해석하는 단계와; Parsing the XML file after loading the XML file; 상기 XML 파일의 해석 중에 상기 프레임워크에 포함된 클래스를 이용하거나 상기 클래스를 상속 또는 매소드를 재정의하는 내용 및 이를 통한 인스턴스 생성 내용을 파악하여 인스턴스 팩토리를 구성하는 단계와; Constructing an instance factory by grasping the contents included in the framework or inheriting the class or redefining the method and the instance creation contents through the analysis of the XML file; 상기 HTML 코드에 포함된 HTML 요소들에 대한 이벤트 리스너 및 메세지 처리부 기능을 정의하는 단계와; Defining event listener and message processing function for HTML elements included in the HTML code; 상기 HTML 요소들에 대한 이벤트 및 메세지 처리 과정을 수행하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.Web event processing method using a JavaScript-based web-client application framework, characterized in that it comprises the step of processing events and messages for the HTML elements. 제 14항에 있어서, 상기 웹 브라우저를 통해 외부로부터 수신하는 데이터나 파일은 Ajax를 통해 비동기적으로 획득하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.15. The method of claim 14, wherein the data or file received from the outside through the web browser is obtained asynchronously through Ajax. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는, The method of claim 14, wherein configuring the instance factory comprises: 인스턴스를 팩토리에 등록시켜 싱글톤 인스턴스를 생성하고, 초기화 시점이 아닌 실제 참조시 인스턴스를 생성하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.A method of processing web content using a JavaScript-based web-client application framework, which creates an instance of a singleton by registering an instance in a factory and creates an instance upon actual reference rather than at initialization. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는, The method of claim 14, wherein configuring the instance factory comprises: 상기 HTML 요소들에 대한 인스턴스 연결 동작을 모두 상기 XML 파일로부터 획득하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.And obtaining all of the instance connection operations for the HTML elements from the XML file. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는, The method of claim 14, wherein configuring the instance factory comprises: 상기 XML 파일로부터 인스턴스 생성에 대한 프로토타입 정의를 획득하는 단계와; Obtaining a prototype definition for instantiation from the XML file; 상기 프로토타입 정의를 이용하는 자바스크립트 코드를 통해 상기 인스턴스 팩토리에 인스턴스를 등록하는 단계를 포함하는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.Registering an instance in the instance factory through the JavaScript code using the prototype definition, Web content processing method using a JavaScript-based web-client application framework. 제 18항에 있어서, 위에서, 상기 프로토타입 정의를 이용하는 자바스크립트 코드는 상기 HTML 코드에 포함되는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.19. The method of claim 18, wherein the JavaScript code using the prototype definition is included in the HTML code. 제 14항에 있어서, 상기 인스턴스 팩토리를 구성하는 단계는, The method of claim 14, wherein configuring the instance factory comprises: 상기 HTML 요소들이 윈도우 또는 윈도우에 관련된 확장 컴포넌트일 경우 상기 프레임워크 라이브러리 파일들에 정의된 클래스를 이용하여 상기 인스턴스 팩토리에 등록하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.If the HTML elements are windows or extension components related to the windows, registering with the instance factory using a class defined in the framework library files. Web content processing method using. 제 20항에 있어서, 상기 확장 컴포넌트는 버튼, 스트롤 뷰, 트리뷰, 칼라 픽커, 콤보 박스, 애니메이션 효과 중 적어도 하나를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.21. The web content according to claim 20, wherein the extension component includes at least one of a button, a stroke view, a tree view, a color picker, a combo box, and an animation effect. Treatment method. 제 14항에 있어서, 상기 이벤트 리스너 및 메세지 처리부 기능을 정의하는 단계는, 15. The method of claim 14, wherein defining the event listener and message processor function comprises: 상기 XML 파일을 해석하여 상기 HTML 코드에 포함된 HTML 요소에 대한 이벤 트 발생을 처리하는 방식을 지정하고, 상기 이벤트 발생에 따른 메세지를 해당 윈도우 또는 설정된 윈도우에 제공하도록 지정하는 단계를 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.Parsing the XML file to designate a method of processing event generation for an HTML element included in the HTML code, and specifying to provide a message according to the event occurrence to a corresponding window or a set window. Web content processing method using a JavaScript-based web-client application framework. 제 14항에 있어서, 상기 XML 파일을 해석하는 단계는, The method of claim 14, wherein parsing the XML file comprises: 관련된 XML 파일의 링크가 포함되는 경우 해당 XML 파일을 추가적으로 임포트하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.Method for processing web content using a JavaScript-based web-client application framework, characterized in that additionally import the XML file if the link to the associated XML file. 제 14항에 있어서, 상기 HTML 요소들에 대한 메세지 처리 과정을 수행하는 단계는, The method of claim 14, wherein performing a message processing process on the HTML elements comprises: 상기 XML 파일에 설정된 동작만을 수행하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.Web content processing method using a JavaScript-based web-client application framework, characterized in that only the operation set in the XML file. 제 14항에 있어서, 상기 XML 파일을 해석하는 단계는, The method of claim 14, wherein parsing the XML file comprises: 지정된 함수에 대한 프록시를 생성하고 해당 프록시를 통해 상기 지정된 함수에 대한 동작을 감시하도록 하는 단계를 더 포함하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.Generating a proxy for a specified function and monitoring the operation of the specified function through the proxy; and a web content processing method using a javascript-based web-client application framework. 제 14항에 있어서, 상기 HTML 요소들에 대한 메세지 처리 과정을 수행하는 단계는, The method of claim 14, wherein performing a message processing process on the HTML elements comprises: 상기 HTML 요소에 대한 이벤트 발생시 해당 요소 혹은 개체가 이동 가능한 요소인 경우 상기 프레임워크 라이브러리 파일에서 제공하는 마우스에 의한 드래그 & 드롭 기능을 이용하는 것을 특징으로 하는 자바스크립트기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.When an event occurs for the HTML element, the web using the JavaScript-based web-client application framework, which uses a drag and drop function using a mouse provided in the framework library file when the corresponding element or object is movable. How to handle content. 자바스크립트의 규약에 부합하는 제 1 소스 코드 및 인터넷 브라우저의 표현에 부합하는 제 2 소스 코드를 수신하는 단계와;Receiving first source code conforming to the conventions of JavaScript and second source code conforming to the representation of the internet browser; 상기 제 2 소스 코드 내에 상기 제 1 소스 코드의 실행을 요청하는 제 1 명령어가 존재하는 경우, 상기 제 1 소스 코드를 독출하는 단계와; Reading the first source code when there is a first instruction requesting execution of the first source code in the second source code; 상기 제 1 소스 코드에 상기 제 1 소스 코드에서 정의하지 않은 함수 또는 변수가 존재하는 경우, 상기 제 1 소스 코드의 클래스에 대한 인스턴스 정보를 추출하는 단계와;Extracting instance information for a class of the first source code when a function or a variable not defined in the first source code exists in the first source code; 상기 인스턴스 정보에 포함된 상기 함수 또는 변수를 사용하여 상기 제 1 명령어를 수행하는 단계를 포함하는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.And executing the first command by using the function or variable included in the instance information. 제 27항에 있어서, 상기 인스턴스 정보는 XML 규약에 부합하는 형식으로 작 성된 정보인 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.28. The method of claim 27, wherein the instance information is information written in a format conforming to an XML protocol. 제 27항에 있어서, 상기 클래스는 하나 이상의 다른 클래스로부터 함수 또는 변수를 상속받는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.28. The method of claim 27, wherein the class inherits a function or variable from one or more other classes. 제 27항에 있어서, 상기 제 1 소스 코드 내에 상기 인스턴스 정보를 포함하는 파일의 위치가 명시된 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법. 28. The method of claim 27, wherein a location of a file including the instance information is specified in the first source code. 제 27항에 있어서, 상기 인터넷 브라우저는 컴퓨터, 노트북, 또는 휴대폰 등의 모바일 기기를 포함하는 네트워크 기기에서 인터넷 상의 데이터를 표시하는 기능을 가지는 것을 특징으로 하는 자바스크립트 기반 웹-클라이언트 어플리케이션 프레임워크를 이용한 웹 컨텐츠 처리 방법.28. The method of claim 27, wherein the Internet browser has a function of displaying data on the Internet in a network device including a mobile device such as a computer, a notebook, or a mobile phone. How to handle web content. 제 14항 내지 제 31항 중의 어느 한 항의 방법을 수행할 수 있는 프로그램이 수록된 컴퓨터로 읽을 수 있는 기록 매체.A computer-readable recording medium containing a program capable of performing the method of any one of claims 14 to 31.
KR1020070008292A 2007-01-26 2007-01-26 Java script based web-client application framework, web contents processing method using the framework and computer readable medium processing the method KR101330559B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020070008292A KR101330559B1 (en) 2007-01-26 2007-01-26 Java script based web-client application framework, web contents processing method using the framework and computer readable medium processing the method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020070008292A KR101330559B1 (en) 2007-01-26 2007-01-26 Java script based web-client application framework, web contents processing method using the framework and computer readable medium processing the method

Publications (2)

Publication Number Publication Date
KR20080070337A true KR20080070337A (en) 2008-07-30
KR101330559B1 KR101330559B1 (en) 2013-11-18

Family

ID=39823122

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020070008292A KR101330559B1 (en) 2007-01-26 2007-01-26 Java script based web-client application framework, web contents processing method using the framework and computer readable medium processing the method

Country Status (1)

Country Link
KR (1) KR101330559B1 (en)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101064741B1 (en) * 2010-02-12 2011-09-15 서울대학교산학협력단 How to Recycle Generated Code for Hot Pass-based JavaScript Dynamic Compilation
US8839194B2 (en) 2008-11-20 2014-09-16 Nhn Corporation Component-based web application development framework used for creating web page
KR20150069793A (en) 2013-12-16 2015-06-24 에릭슨엘지엔터프라이즈 주식회사 Method and apparatus for sharing application database
KR20170028838A (en) * 2015-09-04 2017-03-14 주식회사 케이티 Cloud web server for providing cloud iptv service based on command method, system and set-top box
CN111913695A (en) * 2020-08-07 2020-11-10 国网信息通信产业集团有限公司 Code conversion method, device and storage medium
US20230110270A1 (en) * 2021-10-12 2023-04-13 Sap Se Generic factory class

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6681386B1 (en) 2000-05-22 2004-01-20 International Business Machines Corporation Method, system, and program for parameter expansion, generation, and execution of scripts in a networked environment
KR100420103B1 (en) 2002-01-24 2004-03-02 (주) 자이오넥스 System And Method For Implementation Of Web Application Over XML
KR20050034237A (en) * 2003-10-09 2005-04-14 (주)아이비리더스 Web sheet component for enhancemant of developing performance of business application using by active-x

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8839194B2 (en) 2008-11-20 2014-09-16 Nhn Corporation Component-based web application development framework used for creating web page
KR101064741B1 (en) * 2010-02-12 2011-09-15 서울대학교산학협력단 How to Recycle Generated Code for Hot Pass-based JavaScript Dynamic Compilation
KR20150069793A (en) 2013-12-16 2015-06-24 에릭슨엘지엔터프라이즈 주식회사 Method and apparatus for sharing application database
KR20170028838A (en) * 2015-09-04 2017-03-14 주식회사 케이티 Cloud web server for providing cloud iptv service based on command method, system and set-top box
CN111913695A (en) * 2020-08-07 2020-11-10 国网信息通信产业集团有限公司 Code conversion method, device and storage medium
US20230110270A1 (en) * 2021-10-12 2023-04-13 Sap Se Generic factory class
US11947931B2 (en) * 2021-10-12 2024-04-02 Sap Se Generic factory class

Also Published As

Publication number Publication date
KR101330559B1 (en) 2013-11-18

Similar Documents

Publication Publication Date Title
US8006224B2 (en) System and method for unified visualization of two-tiered applications
US9003312B1 (en) Method and apparatus for updating a web-based user interface
CA2557111C (en) System and method for building mixed mode execution environment for component applications
US10417314B2 (en) Systems and methods of a script generation engine
US20040046789A1 (en) Extensible user interface (XUI) framework and development environment
US20070288644A1 (en) Systems and methods for developing and running applications in a web-based computing environment
KR101330559B1 (en) Java script based web-client application framework, web contents processing method using the framework and computer readable medium processing the method
Asensio et al. Emulating home automation installations through component-based web technology
CN103605527A (en) System and method for realizing cloud computing application interface integration and unified style display
KR101552914B1 (en) Web server application framework web application processing method using the framework and computer readable medium processing the method
Nylander et al. Ubiquitous service access through adapted user interfaces on multiple devices
Desolda et al. End-user development for the internet of things: EFESTO and the 5W composition paradigm
Brabra et al. Model-driven elasticity for cloud resources
Cimino et al. An efficient model-based methodology for developing device-independent mobile applications
CA2543898C (en) System and method for unified visualization of two-tiered applications
Stoeckle et al. A framework for visual notation exchange
CN116108814B (en) Gantt chart processing method and device, computer equipment and storage medium
CN116595284B (en) Webpage system operation method, device, equipment, storage medium and program
KR101062273B1 (en) A server-side JavaScript application framework device, a method of configuring an application using the framework device, and a computer-readable recording medium capable of implementing the same.
Yuan et al. Research on application support platform for Internet of Things
Khorasani et al. Building Streamlit Components
Suryadevara et al. Web Development
JP2007035021A (en) Server device and data acquisition method
Lutalo et al. DNAP: Dynamic Nuchwezi Architecture Platform-A New Software Extension and Construction Technology
Krebs et al. Adaptive applications for ubiquitous collaboration in mobile environments

Legal Events

Date Code Title Description
N231 Notification of change of applicant
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20161026

Year of fee payment: 4

FPAY Annual fee payment

Payment date: 20171114

Year of fee payment: 5

FPAY Annual fee payment

Payment date: 20181102

Year of fee payment: 6

FPAY Annual fee payment

Payment date: 20191106

Year of fee payment: 7