HTC 를 이용한 내맘대로 태그

회사에 select 태그를 이용하는 페이지가 있었는데.. 이놈이 어느순간 상당히 긴~ 값을 가지더니 태그 자체도 늘어나버려서 테이블을 다 깨먹는 사고를 쳐버렸다..ㅡ.ㅡ;
이것때문에 페이지를 하나 더 만들어서 페이징처리하고.. 등등 하기엔 너무 귀찮았다..ㅡ.ㅡ;
어디 좋은방법 없을까 하며 뒤지며 다니다가 htc 라는 것을 보게되었다.
백문이 불여일견이다.
만들어 보도록 하자.

이런 셀렉트박스를 아래와같이 바꾸는 HTC 를 만들어 보겠다.

이것은 위에 보이는 텍스트박스에 글자를 입력하면 해당되는글자가 필터링되서 아래 리스트에 나타나는 것이다.

자. 먼저 이걸 javascript 만으로 구현한다고 생각해보자.
일단 구현은 했다고 치자.
그런데 select 태그가 수십개다?
그러면 어떻게 모든 태그에 적용을한다?
이거 만드는거보다 더 노가다일꺼다..ㅡ.ㅡ;
이 모든것을 말끔히 해결해준게 htc 였다.
htc 로 구현하면 아래와같이 behavior 하나만 추가해주면 바로 변경이 된다.

[code html]<select name="selectbox_focus" style="behavior: url('selectBox.htc');">
<OPTION VALUE="1">옵션 1</OPTION>
<OPTION VALUE="2">옵션 2</OPTION>
<OPTION VALUE="3">옵션 3</OPTION>
<OPTION VALUE="4">선택 1</OPTION>
<OPTION VALUE="5">선택 2</OPTION>
<OPTION VALUE="6">선택 3</OPTION>
<OPTION VALUE="7">옵션 4</OPTION>
<OPTION VALUE="8">옵션 5</OPTION>
<OPTION VALUE="9">옵션 6</OPTION>
<OPTION VALUE="10">선택 4</OPTION>
<OPTION VALUE="11">선택 5</OPTION>
<OPTION VALUE="12">선택 6</OPTION>
<OPTION VALUE="13">옵션 7</OPTION>
<OPTION VALUE="14">옵션 8</OPTION>
<OPTION VALUE="15">옵션 9</OPTION>
<OPTION VALUE="16">선택 7</OPTION>
<OPTION VALUE="17">선택 8</OPTION>
<OPTION VALUE="18">선택 9</OPTION>
</select>[/code]

이거.. 상당히 편하다.
그럼 이제 htc 파일 만드는법을 알아보자.

 [code xml]<public:component>
<public:attach event="ondocumentready" handler="initSelectBox" />
<public:property name="setWidth" put="setupWidth" />
<public:property name="setPopupWidth" put="setupPopupWidth" />

<script>

//TODO

</script>

</public:component>[/code]

위와같은 형태로 만든다.
이게 끝이다.
나머지는 <script></script> 부분에서 javascript 로 처리해주면 된다.

 

1.<public:component>

이 구문은 htc 선언부다.
htc 는 html component 라고도 부르기때문에 이런형태의 선언이 생긴거 같다.

2.<public:attach event="ondocumentready" handler="initSelectBox" />

이부분은 htc 가 걸려있는 오브젝트의 이벤트를 잡아내는 것이다.
"ondocumentready" 라는것은 htc 가 포함되어있는 문서의 로드가 끝났을때를 가르킨다.
뒷부분의 handler 부분에 써있는것은 스크립트 부분에 구현해 줘야한다.

3.<public:property name="setWidth" put="setupWidth" />

이 부분은 property 를 설정하는 부분이다.
<select name="selectbox_focus" style="behavior: url('selectBox.htc');" setWidth="100">
select 태그의 htc 선언부를 위와같이 property 를 추가해서 넣을수도 있다.
이 property 는 init 보다 먼저 실행된다.

4. <script></script>

이부분은 처리를 담당할 javascript 를 쓰는 부분이다.
여기서 this 는 해당 오브젝트를 가르킨다.
자세한 소스는 첨부되어있는 파일을 보기바란다.

- 추가 -

htc 파일을 웹서버에서 쓰려면 해당 웹서버에 mime 타입이 선언되어 있어야 한다.
톰켓 5.5 에는 기본으로 선언되어 있었는데 resin3 에는 없었다.
이거때문에 좀 고생했다..ㅡ.ㅡ;
다른 서버는 테스트 안해봤지만 혹 서버에 올렸는데 htc 가 실행이 안된다면 아래와같이 mime 타입을 선언해 주길바란다.

[code xml]<mime-mapping>
       <extension>htc</extension>
       <mime-type>text/x-component</mime-type>
</mime-mapping>[/code]

invalid-file