KR20080021262A - Ｈｔｃ를 이용한 독립 컴포넌트 제공 시스템 및 독립컴포넌트를 이용한 이벤트 처리 방법 - Google Patents

Abstract

본 발명은 HTC를 이용한 독립 컴포넌트 제공 시스템 및 독립 컴포넌트를 이용한 이벤트 처리 방법에 관한 것으로, 사용자가 <INPUT> 또는 <IMG> 태그를 클릭하는 경우 showPopup 메시지를 수신하는 showPopup 이벤트 핸들러에서 fnOnClick() 메소드를 호출하는 과정과, 상기 호출된 fnOnClick() 메소드에서 아이템 리스트(item List)를 분석하여 <DIV> 태그에 마우스 입력을 받을 수 있는 아이템 리스트를 추가하는 과정과, 팝업(Popup) 객체에 <DIV>를 추가하여 콤보박스(combobox)의 위치에 따라 팝업(Popup) 객체를 표시하는 과정으로 이루어지는 것을 특징으로 한다.

Description

ＨＴＣ를 이용한 독립 컴포넌트 제공 시스템 및 독립 컴포넌트를 이용한 이벤트 처리 방법{INDEPENDENCE COMPONENT PROVIDING SYSTEM USING HTML COMPONENT AND EVENT PROECSSING METHOD THEREOF}

도 1은 본 발명에 따른 HTC를 이용한 독립된 컴포넌트 구성을 나타내는 도면.

도 2는 본 발명에 따른 사용자 PC에서의 웹 EMS 관리 화면의 일예를 나타내는 도면.

도 3 및 도 4는 커스텀 태그와 <SELECT> 태그를 비교하기 위해 레이어를 생성하여 기존 레이어에 추가한 예를 나타내는 도면.

도 5는 본 발명에 따른 ComboBoxTag 클래스를 이용한 콤보박스의 외관을 나타내는 도면.

도 6은 본 발명에 따른 ComboBoxTag 클래스의 전체 코드를 나타내는 도면.

도 7은 본 발명의 combobox를 클릭하기 이전에 HTC에 의해 수행되는 초기화 절차를 나타내는 도면.

도 8은 본 발명에 따른 combobox를 클릭하는 경우 리스트를 펼치는 동작을 예시한 도면.

도 9는 본 발명에 따른 combobox 내용을 선택하는 동작을 나타내는 도면.

도 10은 본 발명에 따른 showPopup 이벤트 핸들러에 의해 수행되는 동작을 나타내는 도면.

도 11은 본 발명에 따른 selectedIndex 이벤트 핸들러에 의해수행되는 동작을 나타내는 도면.

도 12는 본 발명의 HTC 이벤트 핸들러를 통한 이벤트 처리 과정을 나타내는 도면.

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

10 : TLD 20 : Tag class

30 : HTC 31 : showPopup 이벤트 핸들러

32 : selectedIndex 이벤트 핸들러

본 발명은 웹 EMS 내에서 선택사항을 표시하기 위해 사용되는 <SELECT> 태그를 대체하는 HTC(HTML Component)를 이용한 컴포넌트 제공 방법 및 그 시스템에 관한 것으로, 특히 HTC로 개발되어 독립적인 컴포넌트로 사용이 가능하며, 컴포넌트의 사용을 보다 편리하게 하기 위한 커스텀 태그를 포함하는 HTC를 이용한 독립 컴 포넌트 제공 시스템 및 독립 컴포넌트를 이용한 이벤트 처리 방법에 관한 것이다.

기존의 <SELECT> 태그가 담당하는 ComboBox, ListBox는 선택사항을 결정하는데 주로 사용되는 대표적인 컴포넌트이다.

즉, 종래에는 HTML 상에서 선택사항을 표시하기 위해 <SELECT> 태그를 사용하였다. 이러한 <SELECT> 태그는 기본적으로 ComboBox 와 같은 형상을 갖고 있으며, 여기에 size, multiple 속성을 변경하면 ListBox 와 같은 형상을 갖게 된다.

그러나, 기존의 <SELECT> 태그는 레이어 개념이 포함되지 않고 항상 최상위에 표시되는 문제를 가지고 있다. 만약 <SELECT> 태그가 하위 레이어에 존재한다면 상위 레이어는 하위 레이어의 영역을 피해야만 한다.

다시 말해, <SELECT> 태그는 레이어를 무시하고 항상 최상위에 표시되어 마치 구멍이 뚫린 것처럼 표시되어진다. 이러한 관점에서 종래의 <SELECT> 태그를 사용하게 되면 2차원적인 화면만이 가능할 뿐, 웹 EMS 상에서 화면 위에 다른 정보를 보여주기 위한 3차원적인 GUI 를 제공하려면 레이어 속성은 필수적이다.

따라서, 기존에 <SELECT> 태그가 존재하는 화면에서 그 위에 표시할 내용이 필요한 경우 아래와 같은 방법을 사용하였다.

첫 번째로, window.open() 을 이용하여 새로운 브라우저를 생성하는 방법을 사용하였으나, 새로운 브라우저를 생성하는 것은 메모리도 많이 차지할 뿐 아니라, 구동되어지는데 오랜 시간이 소요된다는 단점을 가지고 있다.

두 번째로, window.createPopup() 을 이용하여 팝업창을 만드는 방법이다. 그러나 팝업창을 만드는 방법은 팝업창이 포커스를 잃었을 경우 자동으로 창이 닫 히므로 사용이 매우 제한적이다.

세 번째로, <SELECT> 태그가 필요한 곳에 레이어가 지원되는 다른 태그와 스크립트를 이용하여 별도의 코드를 만드는 방법이다. 그러나 재사용이 불가하며, 중복된 코드가 JSP 마다 반복되어야 하고, 모든 개발자가 사용하기에는 대단히 어렵다는 문제점이 있었다.

따라서, 본 발명의 목적은 상기와 같은 문제점을 해결하기 위한 것으로서, 중복된 코드가 반복되거나 매번 코드를 수정하며 구현하는 방법이 아닌 독립된 컴포넌트 개발 기법인 HTC에 커스텀 태그를 접목하여 선택사항을 표시하기 위해 필수적인 ComboBox 와 ListBox 를 독립된 컴포넌트로 제공할 수 있도록 한 HTC를 이용한 독립 컴포넌트 제공 시스템 및 독립 컴포넌트를 이용한 이벤트 처리 방법을 제공함에 있다.

상기한 목적을 달성하기 위한 본 발명에 따른 독립 컴포넌트를 이용한 이벤트 처리 방법의 일 측면에 따르면, 사용자가 <INPUT> 또는 <IMG> 태그를 클릭하는 경우 showPopup 메시지를 수신하는 showPopup 이벤트 핸들러에서 fnOnClick() 메소드를 호출하는 과정과, 상기 호출된 fnOnClick() 메소드에서 아이템 리스트(item List)를 분석하여 <DIV> 태그에 마우스 입력을 받을 수 있는 아이템 리스트를 추가 하는 과정과, 팝업(Popup) 객체에 <DIV>를 추가하여 콤보박스(combobox)의 위치에 따라 팝업(Popup) 객체를 표시하는 과정으로 이루어지는 것을 특징으로 한다.

특히, 상기 아이템 리스트를 추가하는 과정에서, 상기 아이템 리스트의 개수가 소정 개수를 초과하는 경우, 스크롤 바를 자동으로 표시하게 된다.

또한, 상기한 목적을 달성하기 위한 본 발명에 따른 독립 컴포넌트를 이용한 이벤트 처리 방법의 일 측면에 따르면, 사용자가 아이템 리스트 팝업 창에서 특정 아이템을 선택하는 경우 closePopup 메시지를 수신하는 selectedIndex 이벤트 핸들러에서 fnHide() 메소드를 호출하는 과정과, 상기 호출된 fnHide() 메소드가 팝업(Popup) 객체를 닫는 과정과, 상기 selectedIndex 이벤트 핸들러에서 fnSetSelectdeIndex() 메소드를 호출하는 과정과, 상기 호출된 fnSetSelectdeIndex() 메소드가 closePopup 속성이 올바른 값인지를 확인하여 selectedIndex 값을 설정한 후 콤보박스(combobox)를 재구성하는 과정으로 이루어지는 것을 특징으로 한다.

특히, 상기 콤보박스(combobox)를 재구성하는 과정에서, 상기 설정된 selectedIndex 값에 따라 <INPUT>의 문자열을 변경하고 수행할 함수를 호출하게 된다.

또한, 상기한 목적을 달성하기 위한 본 발명에 따른 독립 컴포넌트를 이용한 이벤트 처리 방법의 일 측면에 따르면, 사용자 입력 대기 상태에서 발생한 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트인지를 확인하는 과정과, 상기 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트인 경우, showPopup 이벤트 메시지를 showPopup 이벤트 핸들러로 전달하는 과정과, 상기 showPopup 이벤트 핸들러에서 저장소에 저장되어 있는 아이템 리스트(item List)를 추출하여 추출된 아이템 리스트를 팝업창에 입력하여 화면에 표시하는 과정과, 상기 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트가 아닌 경우 상기 아이템 리스트 팝업창에서 사용자가 특정 아이템을 선택하는 SelectItem 이벤트가 발생하였는지를 확인하는 과정과, 상기 발생된 이벤트가 SelectItem 이벤트인 경우 selectedItem 이벤트 메시지를 selectedIndex 이벤트 핸들러로 전달하는 과정과, 상기 selectedIndex 이벤트 핸들러에서 선택된 아이템 값을 저장소에 저장하여 설정값을 변경하고 선택된 아이템 값을 <INPUT> 에 표시한 후 팝업창을 닫는 과정으로 이루어지는 것을 특징으로 한다.

특히, 상기 추출된 아이템 리스트를 팝업창에 입력하여 화면에 표시하는 과정에서, 상기 아이템 리스트의 개수가 소정 개수를 초과하는 경우, 스크롤 바를 자동으로 표시하게 된다.

한편, 상기한 목적을 달성하기 위한 본 발명에 따른 HTC를 이용한 독립 컴포넌트 제공 시스템의 일 측면에 따르면, 콤보박스(combobox)와 리스트박스(listbox)에 대한 사용 명세를 기술하기 위한 TLD 컴포넌트와, 상기 콤보박스와 리스트박스에 대한 구현체로서 JSP 내에서 문자열로 변환되는 Tag class 컴포넌트와, 상기 콤보박스와 리스트박스의 행위를 기술하고 브라우저에서 이벤트 처리를 수행하기 위한 HTC 컴포넌트를 각각 독립적으로 제공하는 것을 특징으로 한다.

상기 TLD는 상기 콤보박스와 리스트박스에 해당하는 태그의 상세 내역을 포함하고 있으며, 각 태그는 어떤 클래스(class)를 사용하고, 어떤 속성값을 갖고 있으며, 어떤 속성이 필수 속성인지 등의 정보를 포함한다.

상기 콤보박스와 리스트박스에는 각각 고유의 ID가 할당되며, 할당된 ID는 웹서버로 명령 전송시 파라미터의 네임(name)으로 설정되어진다.

또한, 상기 TLD는 JSP 코드 내에 선언되어 사용되며, ComboBoxTag class의 속성정보를 명시한 combobox description와, ListBoxTag class의 속성정보를 명시한 listbox description에 대해 기술하고 있다.

상기 ComboBoxTag class는 콤보박스의 외관을 만들어주며, <DIV> 태그를 기본으로 하여 레이어(layer) 적용이 가능하다.

특히, 상기 <DIV> 태그는 Layer 순서를 나타내는 z-Index를 이용한 객체의 중복을 허용하며 자동(Auto) 속성을 갖는다.

상기 ComboBoxTag class를 이용한 콤보박스의 외관은 HTML에 존재하는 <DIV>, <INPUT>, <IMG> 태그를 사용하여 사용자 인터페이스(UI)를 구성하게 된다.

상기 <INPUT> 태그에 behavior를 HTC로 설정하고, 상기 HTC에 사용될 속성을 설정하며, 상기 속성에는 items, itemValues, selectedIndex, enabled, editable 등이 포함되어진다.

이하, 본 발명의 바람직한 실시예의 상세한 설명이 첨부된 도면들을 참조하여 설명될 것이다. 도면들 중 참조번호들 및 동일한 구성요소들에 대해서는 비록 다른 도면상에 표시되더라도 가능한 한 동일한 참조번호들 및 부호들로 나타내고 있음에 유의해야 한다. 하기에서 본 발명을 설명함에 있어, 관련된 공지 기능 또는 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명을 생략한다.

도 1은 본 발명에 따른 HTC를 이용한 독립된 컴포넌트 구성을 나타내는 도면이다.

도 1에 도시된 바와 같이, 본 발명의 HTC(HTML Component)로 개발된 컴포넌트는 TLD(Tag Library Descriptors)(10)와 Tag class(20) 및 HTC(HTML Component)(30)로 구성되며, 각각의 설명은 하기의 표 1과 같다.

	설명
TLD	combobox와 listbox에 대한 사용법이 기술된 파일이다. 각각의 구현체는 어떤 것이고 속성은 어떤 것인지에 대한 내역이 담겨 있다.
Tag class	combobox와 listbox에 대한 구현체이다. JSP 내에서 문자열로 변환된다.
HTC	combobox와 listbox의 행위를 기술한다. 브라우저에서 이벤트 처리를 담당한다.

즉, TLD는 ComboBoxTag class의 속성정보를 명시한 combobox description와 ListBoxTag class의 속성정보를 명시한 listbox description에 대해 기술하고 있다.

이와 같은 TLD는 JSP 코드 내에 선언됨으로써 사용이 가능하며, TLD 선언은 예를 들어 하기와 같이 선언되어진다.

<%@ taglib uri="/WEB-INF/tld/common.tld" prefix="common" %>

즉, taglib 디렉티브를 선언하고, uri 속성을 태그가 정의된 파일의 위치로 설정하고 prefix 속성에는 임의의 접두어를 설정한다. 여기서는 "common" 이라는 접두어를 사용하였다.

TLD 파일의 내용에는 combobox, listbox 에 해당하는 태그의 상세 내역이 포함되어 있으며, 각 태그는 어떤 클래스(class)를 사용하는지, 속성은 어떤 값을 갖는지, 어떤 속성이 필수 속성인지 등의 정보가 포함되어지며, 사용 방법은 하기와 같다.

<common:combobox id="combobox" width="100"

items="a,b,c,d,e,f" />

<common:listbox id="listbox1" width="100"

items="a,b,c,d,e,f" />

즉, combobox 와 listbox 에는 각각 고유의 id 가 할당되며, 이와 같이 할당된 id 는 웹서버로 명령을 전송시 파라미터의 네임(name)으로 설정된다. items 속성에는 선택 가능한 리스트를 설정하는데 이때 "," 를 분리자로 사용한다. 이렇게 작성된 페이지는 첨부된 도 2와 같다.

도 2는 본 발명에 따른 사용자 PC에서의 웹 EMS 관리 화면의 일예를 나타내는 도면이다.

도 2에 도시된 바와 같이, 왼쪽에 표시된 ComboBox 와 ListBox 는 위의 사용법대로 작성된 커스텀 태그를 사용하였고, 오른쪽에는 기존의 <SELECT> 태그를 사용하여 동일하게 구성한 것으로서, 웹 브라우저 상에서 표시되는 GUI는 서로 비슷하다.

도 3 및 도 4는 각각 커스텀 태그와 <SELECT> 태그를 비교하기 위해 레이어를 생성하여 기존 레이어에 추가한 예를 나타내는 도면이다.

도 3 및 도 4에 도시된 바와 같이, <common:combobox>와 <common:listbox> 는 의도된 대로 새로 생성된 레이어(A,B)의 아래에 위치하여 가려지게 된다. 하지만, 기존의 <SELECT> 태그를 사용한 부분은 항상 최상위로 설정이 되어 있으므로 새로운 레이어의 위에 위치하여 의도되지 않은 결과를 초래하게 된다.

이하, 하기에서는 상술한 <common:combobox>의 동작 원리에 대해 살펴보기로 한다. 여기서, <common:listbox>의 동작 원리 역시 <common:combobox>의 동작 원리와 동일하므로 이에 대한 설명은 생략하기로 한다.

먼저, 본 발명의 TLD는 ComboBoxTag 클래스가 가지는 속성의 리스트(id, width, items 속성정보)와 이러한 속성 정보의 필수/옵션 여부에 대해 알려주는 역할을 수행하며, TLD에 정의된 내용을 바탕으로 <common:combobox> 를 만들 수 있다.

한편, ComboBoxTag 클래스는 도 5에서와 같이 콤보박스의 외관을 만들어주는 역할을 수행하며, <DIV> 태그를 기본으로 하기 때문에 레이어(layer) 적용이 가능하다.

도 5는 본 발명에 따른 ComboBoxTag 클래스를 이용한 콤보박스의 외관을 나타내는 도면이다.

도 5에 도시된 바와 같이, ComboBoxTag 클래스를 이용한 콤보박스의 외관은 기존의 HTML에 존재하는 <DIV>, <INPUT>, <IMG> 태그를 사용하여 사용자 인터페이스(UI)를 구성하게 된다.

<DIV> 태그는 z-Index(Layer 순서)를 이용한 객체의 중복을 허용한다. 이러한 z-Index는 기본값으로 auto 속성을 가지므로 HTML 소스상의 순서에서 나중에 정의된 객체가 높은 값을 갖는다. 즉, z-Index 가 높으면 하위의 객체 위에 표시가 된다. 따라서 기존 <SELECT> 태그에서 최상위로 표시되는 문제를 해결할 수 있게 된다.

<INPUT> 태그에는 behavior 를 HTC 로 설정하고, 여기에 사용될 속성을 설정한다. 여기서, 속성에는 items, itemValues, selectedIndex, enabled, editable 등이 존재하며, 전체 코드는 첨부된 도 6과 같다.

도 6은 본 발명에 따른 ComboBoxTag 클래스의 전체 코드를 나타내는 도면이다.

도 6에 도시된 바와 같이, DIV style, INPUT type, style 및 IMG 에 관한 코드가 존재하며, 이러한 ComboBoxTag 클래스의 전체 코드는 JSP 내에서 문자열로 변환되어진다.

<IMG> 태그에는 이미지를 표시하고, 마우스 클릭시 <INPUT> 에 할당된 HTC 이벤트 블록으로 'showPopup' 메시지를 전달하게 된다.

즉, HTC는 <SELECT> 태그가 가지는 실제 동작을 표현하는 역할을 수행하며, 초기 구동시 동작은 첨부된 도 7과 같다.

도 7은 본 발명의 combobox를 클릭하기 이전에 HTC에 의해 수행되는 초기화 절차를 나타내는 도면이다.

도 7에 도시된 바와 같이, 초기화 절차는 combobox의 내용이 없는 경우에 맞게 파라미터를 초기화하고, combobox의 내용이 있는 경우에 맞게 파라미터를 초기화한다.

또한, combobox에 editable 속성도 넣을 수 있으며, combobox가 활성화/비활성화됨에 따라 사용자 인터페이스(UI)가 달라지게 된다. 만약 속성이 변경되었을 경우 이벤트 처리를 담당하게 된다.

즉, 이와 같은 HTC는 combobox에서 사용하는 변수(item list, selectedIndex, enabled, editable 등)를 초기화한다.

또한, combobox UI를 초기화하게 되는데 enabled 속성이 false 이면 gray 톤으로 표시하고, editable 속성이 false 이면, <INPUT> 태그 내에 입력이 불가능하도록 변경한다.

또한, 이벤트 핸들러를 등록하는 기능을 수행하게 되는데, 여기서 이벤트 핸들러는 Drag & Drop 이벤트 핸들러와, Property Change 이벤트 핸들러가 해당된다.

Drag & Drop 이벤트 핸들러는 마우스의 Drag & Drop 이벤트를 무효화시키는 역할을 수행하게 된다.

Property Change 이벤트 핸들러는 showPopup 이벤트 핸들러와, selectedIndex 이벤트 핸들러, enabled 이벤트 핸들러, editable 이벤트 핸들러를 포함한다.

showPopup 이벤트 핸들러는 운영자가 <INPUT> 또는 <IMG>를 클릭하면, 팝업(Popup) 객체를 이용하여 아이템 리스트(item list)를 화면에 표시하고, 아이템 리스트(item list)의 개수가 10개를 초과하게 되면 스크롤바를 자동으로 표시하게 된다.

selectedIndex 이벤트 핸들러는 사용자가 팝업(Popup) 창에서 특정 아이템(item)을 선택하게 되면 팝업(Popup) 창을 닫고, <INPUT>에 선택된 아이템(item)을 표시하게 된다.

또한, selectedIndex를 저장하고 selectedIndex 변경시 수행할 함수를 호출하게 된다.

enabled 이벤트 핸들러는 enabled가 true 이면 선명한 색상으로 표시하고 각종 이벤트에 대한 처리를 수행하며, 만약 enabled가 false 이면 gray 색상으로 표시하고 모든 이벤트를 무효화하게 된다.

editable 이벤트 핸들러는 editable이 true 이면 <INPUT>에서 입력을 받고, editable이 false 이면 <INPUT>에서 입력을 받지 않게 된다.

또한, 입력된 문자열이 아이템 리스트(item list)에 해당하면 자동으로 selectedIndex를 변경하여 selectedIndex 핸들러가 호출된다.

도 8은 본 발명에 따른 combobox를 클릭하는 경우 리스트를 펼치는 동작을 예시한 도면이다.

도 8에 도시된 바와 같이, 사용자가 combobox를 클릭하게 되면 해당 동작이 가능한 상태인지 확인하고, 창의 크기를 조절하며, 선택된 리스트를 확인하게 된다.

또한, 팝업으로 보여줄 내용(items 팝업창)을 만드는 코드와, combobox의 내용을 팝업으로 보여주는 코드를 보여주게 된다.

도 9는 본 발명에 따른 combobox 내용을 선택하는 동작을 나타내는 도면이다.

도 9에서와 같이, 운영자가 items 팝업창에서 특정 item을 선택하게 되면, combobox의 팝업창을 감추고, 동작이 가능한 상태인지 확인한다.

그리고, combobox의 선택된 내용을 변경하고, 선택된 정보에 따라 파라미터를 재설정하고 지정된 함수를 호출하게 된다.

도 10은 본 발명에 따른 showPopup 이벤트 핸들러에 의해 수행되는 동작을 나타내는 도면이다.

도 10에 도시된 바와 같이, 사용자가 <INPUT> 또는 <IMG>를 클릭하게 되면 showPopup 이벤트 핸들러(31)에서는 showPopup 메시지를 수신하게 된다.

이에 따라, showPopup 이벤트 핸들러(31)에서는 fnOnClick() 메소드를 호출함에 따라, fnOnClick() 메소드는 아이템 리스트(item List)를 분석하고, <DIV>에 마우스 입력을 받을 수 있는 아이템 리스트(item List)를 추가하게 된다. 이때, 만약 아이템 리스트(item List)의 개수가 10개를 초과하면 스크롤바를 자동으로 표시하게 된다.

그리고, 팝업(Popup) 객체에 <DIV>를 추가하며, combobox 위치에 따라 팝업(Popup) 객체를 표시하게 된다. 여기서 팝업(Popup) 객체는 아이템(item)을 담을 수 있는 컨테이너를 의미한다.

도 11은 본 발명에 따른 selectedIndex 이벤트 핸들러에 의해 수행되는 동작을 나타내는 도면이다.

도 11에 도시된 바와 같이, 사용자가 아이템 리스트(item List) 팝업(Popup)에서 원하는 아이템을 선택하게 되면 selectedIndex 이벤트 핸들러(32)에서 closePopup 메시지를 수신하게 된다.

이에 따라, selectedIndex 이벤트 핸들러(32)에서는 fnHide() 메소드를 호출함에 따라, fnHide() 메소드는 팝업(Popup) 객체를 닫게 된다.

이어서, selectedIndex 이벤트 핸들러는 fnSetSelectedIndex() 메소드를 호출함에 따라, fnSetSelectedIndex() 메소드는 closePopup 속성이 올바른 값인지를 확인하고 selectedIndex 값을 설정한 후 Combobox를 재구성하게 된다.

이때, 변경된 값에 따라 <INPUT>의 문자열을 변경하며, selectdeIndex 변경시 수행할 함수를 호출하게 된다.

도 12는 본 발명의 HTC 이벤트 핸들러를 통한 이벤트 처리 과정을 나타내는 도면이다.

도 12에 도시된 바와 같이, 사용자 입력 대기 상태(S10)에서 사용자 입력이 있는지를 확인(S20)하여 만약 사용자 입력이 없으면 사용자 입력 대기 상태로 리턴되어진다.

그러나, 만약 사용자 입력이 발생한 경우에는 발생한 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트인지를 확인(S30)하게 된다.

확인 결과, 만약 사용자의 <INPUT> 입력 또는 <IMG> 클릭 이벤트가 발생된 것으로 확인되면, showPopup 이벤트 핸들러로 showPopup 이벤트 메시지를 전달(S40)하게 된다.

이에 따라, showPopup 이벤트 핸들러에서는 저장소에 저장되어 있는 아이템 리스트(item List)를 추출(S50)하고, 추출된 아이템 리스트(item List)를 팝업창에 입력하여 화면에 표시(S60)하게 된다.

한편, 상기 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트인지를 확인하는 S30 과정에서, 만약 사용자의 <INPUT> 입력 또는 <IMG> 클릭 이벤트가 발생되지 않은 것으로 확인된 경우에는 아이템 리스트(item List) 팝업창에서 사용자가 특정 아이템을 선택하는 SelectItem 이벤트가 발생하였는지를 확인(S70)한다.

확인 결과, 사용자가 특정 아이템을 선택하는 SelectItem 이벤트가 발생하지 않은 것으로 확인된 경우에는 사용자 입력 대기 상태로 리턴되어진다.

그러나, 만약 사용자가 특정 아이템을 선택하는 SelectItem 이벤트가 발생된 것으로 확인되면, selectedIndex 이벤트 핸들러로 selectedItem 이벤트 메시지를 전달(S80)하게 된다.

이에 따라, selectedIndex 이벤트 핸들러에서는 선택된 아이템 값을 저장소에 저장하여 설정값을 변경(S90)하고, 선택된 아이템 값을 <INPUT> 에 표시하고 팝업창을 닫게 된다(S100).

이상에서는 본 발명에서 특정의 바람직한 실시예에 대하여 도시하고 또한 설명하였다. 그러나, 본 발명은 상술한 실시예에 한정되지 아니하며, 특허 청구의 범위에서 첨부하는 본 발명의 요지를 벗어남이 없이 당해 발명이 속하는 기술분야에서 통상의 지식을 가진 자라면 누구든지 다양한 변형 실시가 가능할 것이다.

본 발명에 따르면, 선택사항을 결정하는데 주로 사용되는 <SELECT> 태그를 <common:combobox> 와 <common:listbox> 컴포넌트로 대체함으로써, 레이어의 영향을 받지 않는 <SELECT> 태그의 단점을 극복하여 컴포넌트로 제공되는 <common:combobox> 와 <common:listbox> 의 사용에 의해 독립적 컴포넌트의 개발을 더욱 효과적으로 할 수 있게 된다.

Claims (15)

1. 사용자가 <INPUT> 또는 <IMG> 태그를 클릭하는 경우 showPopup 메시지를 수신하는 showPopup 이벤트 핸들러에서 fnOnClick() 메소드를 호출하는 과정과,

   상기 호출된 fnOnClick() 메소드에서 아이템 리스트(item List)를 분석하여 <DIV> 태그에 마우스 입력을 받을 수 있는 아이템 리스트를 추가하는 과정과,

   팝업(Popup) 객체에 <DIV>를 추가하여 콤보박스(combobox)의 위치에 따라 팝업(Popup) 객체를 표시하는 과정으로 이루어지는 것을 특징으로 하는 독립 컴포넌트를 이용한 이벤트 처리 방법.
2. 제 1항에 있어서,

   상기 아이템 리스트를 추가하는 과정에서,

   상기 아이템 리스트의 개수가 소정 개수를 초과하는 경우, 스크롤 바를 자동으로 표시하는 것을 특징으로 하는 독립 컴포넌트를 이용한 이벤트 처리 방법.
3. 사용자가 아이템 리스트 팝업 창에서 특정 아이템을 선택하는 경우, closePopup 메시지를 수신하는 selectedIndex 이벤트 핸들러에서 fnHide() 메소드를 호출하는 과정과,

   상기 호출된 fnHide() 메소드가 팝업(Popup) 객체를 닫는 과정과,

   상기 selectedIndex 이벤트 핸들러에서 fnSetSelectdeIndex() 메소드를 호출하는 과정과,

   상기 호출된 fnSetSelectdeIndex() 메소드가 closePopup 속성이 올바른 값인지를 확인하여 selectedIndex 값을 설정한 후 콤보박스(combobox)를 재구성하는 과정으로 이루어지는 것을 특징으로 하는 독립 컴포넌트를 이용한 이벤트 처리 방법.
4. 제 3항에 있어서,

   상기 콤보박스(combobox)를 재구성하는 과정에서,

   상기 설정된 selectedIndex 값에 따라 <INPUT>의 문자열을 변경하고 수행할 함수를 호출하는 것을 특징으로 하는 독립 컴포넌트를 이용한 이벤트 처리 방법.
5. 사용자 입력 대기 상태에서 발생한 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트인지를 확인하는 과정과,

   상기 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트인 경우, showPopup 이벤트 메시지를 showPopup 이벤트 핸들러로 전달하는 과정과,

   상기 showPopup 이벤트 핸들러에서 저장소에 저장되어 있는 아이템 리스트(item List)를 추출하여 추출된 아이템 리스트를 팝업창에 입력하여 화면에 표시 하는 과정과,

   상기 사용자 입력이 <INPUT> 입력 또는 <IMG> 클릭 이벤트가 아닌 경우, 상기 아이템 리스트 팝업창에서 사용자가 특정 아이템을 선택하는 SelectItem 이벤트가 발생하였는지를 확인하는 과정과,

   상기 발생된 이벤트가 SelectItem 이벤트인 경우, selectedItem 이벤트 메시지를 selectedIndex 이벤트 핸들러로 전달하는 과정과,

   상기 selectedIndex 이벤트 핸들러에서 선택된 아이템 값을 저장소에 저장하여 설정값을 변경하고, 선택된 아이템 값을 <INPUT> 에 표시한 후 팝업창을 닫는 과정으로 이루어지는 것을 특징으로 하는 독립 컴포넌트를 이용한 이벤트 처리 방법.
6. 제 5항에 있어서,

   상기 추출된 아이템 리스트를 팝업창에 입력하여 화면에 표시하는 과정에서,

   상기 아이템 리스트의 개수가 소정 개수를 초과하는 경우, 스크롤 바를 자동으로 표시하는 것을 특징으로 하는 독립 컴포넌트를 이용한 이벤트 처리 방법.
7. 콤보박스(combobox)와 리스트박스(listbox)에 대한 사용 명세를 기술하기 위한 TLD 컴포넌트와, 상기 콤보박스와 리스트박스에 대한 구현체로서 JSP 내에서 문 자열로 변환되는 Tag class 컴포넌트와, 상기 콤보박스와 리스트박스의 행위를 기술하고 브라우저에서 이벤트 처리를 수행하기 위한 HTC 컴포넌트를 각각 독립적으로 제공하기 위한 HTC를 이용한 독립 컴포넌트 제공 시스템.
8. 제 7항에 있어서,

   상기 TLD는 상기 콤보박스와 리스트박스에 해당하는 태그의 상세 내역을 포함하고 있으며, 각 태그는 어떤 클래스(class)를 사용하고, 어떤 속성값을 갖고 있으며, 어떤 속성이 필수 속성인지 등의 정보를 포함하는 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.
9. 제 7항에 있어서,

   상기 콤보박스와 리스트박스에는 각각 고유의 ID가 할당되며, 할당된 ID는 웹서버로 명령 전송시 파라미터의 네임(name)으로 설정되는 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.
10. 제 7항에 있어서,

    상기 TLD는 JSP 코드 내에 선언되어 사용되며, ComboBoxTag class의 속성정 보를 명시한 combobox description와, ListBoxTag class의 속성정보를 명시한 listbox description에 대해 기술하고 있는 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.
11. 제 10항에 있어서,

    상기 ComboBoxTag class는 콤보박스의 외관을 만들어주며, <DIV> 태그를 기본으로 하여 레이어(layer) 적용이 가능한 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.
12. 제 11항에 있어서,

    상기 <DIV> 태그는 Layer 순서를 나타내는 z-Index를 이용한 객체의 중복을 허용하며 자동(Auto) 속성을 갖는 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.
13. 제 11항에 있어서,

    상기 ComboBoxTag class를 이용한 콤보박스의 외관은 HTML에 존재하는 <DIV>, <INPUT>, <IMG> 태그를 사용하여 사용자 인터페이스(UI)를 구성하는 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.
14. 제 13항에 있어서,

    상기 <INPUT> 태그에 behavior를 HTC로 설정하고, 상기 HTC에 사용될 속성을 설정하는 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.
15. 제 14항에 있어서,

    상기 속성에는 items, itemValues, selectedIndex, enabled, editable 등이 포함되는 것을 특징으로 하는 HTC를 이용한 독립 컴포넌트 제공 시스템.

Images