8. 동적 테이블(Data Binding)


  Active란 뭘까? WEB강좌에서 잠깐 소개했었다. 즉, 인터넷에서 말하는 Active X라는 기술은 자바 애플릿과 차이점이 많이 있지만 브라우저 입장에서는 비슷한 개념으로 봐도 좋다.

  즉, 브라우저 안에서 실행되는 작은 프로그램을 말한다고 본다. 갑자기 여기서 Active X를 설명하는 것은 Active X를 사용해서 몇가지 일을 해볼 것이기 때문이며, 동적 테이블을 구성하는데 Active X가 사용되기 때문이다. 이 기술은 Explorer에서만 작동되는 것으로 특별한 Active X를 사용하게 된다.

    Active X / Java Applet   사실 애플릿과 비교하여 가장 큰 장점이라 할 만한 것은 속도다. 최초에 다운로드할 때에만 시간이 걸리며, 그 이후에는 로딩에 필요한 시간이 엄청나게 적다. 단점이라면 역시 익스플로러에서만 실행된다는 것이다.
8.1 동적 테이블 생성

  웹개발자들의 고민거리는 급변하는 정보를 매번 HTML로 작성해서 갱신하는 일일 것이다. 그 작업을 해보지 않은 사람은 그 고충을 알 수가 없다. 고치고 Update하고, 그러다 보면 내가 뭘 고쳤는지 알 수 없게 된다.......

  그래서 CGI기술이 발달했는데 계속 업데이트되는 자료를 DataBase에 모아두고서 실시간으로 웹문서로 볼 수 있게 하는 기술이다.

  그러나, 웹으로 단순히 홈페이지정도 구축하려는 사람들에게 CGI를 배우는 것은 무리다. 그래도 계속 업데이트되는 자료를 보다 쉽게 관리하고 싶다. 특히 Table의 경우에...!

  이런 사람들은 이번 장을 응용하면 아주 좋을 것이다. 지금 소개하는 방법은 서버에 txt파일을 CGI프로그램의 도움이 없이도 항상 동적으로 불러서 화면에 출력해주는 Active X의 활용방법이다. 즉, 웹서버측에 다음과 같은 list.txt파일이 있고, 이를 자동으로 보여주도록 하고 싶다고하자.

이름,나이,성별,주소,전화번호
홍길동,11,남자,여기저기,111-1111
둘리,22,남자,원시지구,222-2222
deadfire,100,모름,korea,333-3333
David,33,여자,america,555-5555



  이제 이 txt파일( CSV파일포맷 : 콤마 분리자 사용 파일)을 불러들여서 화면에 보여주는 Active X로는 CLASSID가 333C7BC4-460F-11D0-BC04-0080C7055A83인 Active X를 다음과 같이 사용하면 된다.
<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" width="1" height="1" id="clist" border="0">
<param name="DataURL" value="list.txt">
<param name="UseHeader" value="True">
</object>
<table border=1 datasrc="#clist">
<THEAD>
   <tr>
     <td><b>방문자 이름</b></td>
     <td><b>몇인고?</b></td>
     <td><b>성별은</b></td>
     <td><b>어디사나?</b></td>
     <td><b>전화!</b></td>
   </tr>
</THEAD>
<TBODY>
   <tr>
     <td><DIV DATAFLD="이름"></DIV></td>
     <td><DIV DATAFLD="나이"></DIV></td>
     <td><DIV DATAFLD="성별"></DIV></td>
     <td><DIV DATAFLD="주소"></DIV></td>
     <td><DIV DATAFLD="전화번호"></DIV></td>
   </tr>
</TBODY>
</table>
방문자 이름 몇인고? 성별은 어디사나? 전화!


  OBJECT, TABLE, THEAD, TBODY, DIV태그를 적절히 석어서 위와 같은 효과를 만들어 낸것이다. 하나씩 집어보면,

  • OBJECT : Active X를 HTML에 추가하는데, CLASSID가 특정한 기능을 하는 ActiveX의 고유번호이다.( 이거 그대로 써야 한다. InterDev같은 Tool을 쓰면 자동으로 특정한 Active X의 CLASSID를 가져와서 보여주기도 한다. 이 CLASSID는 고유한 값이기 때문에 똑같이 써야 한다.) 거기에서 해당 OBJECT를 식별할 수 있는 ID이름을 아무거나 하나 준다.

  • PARAM : OBJECT의 PARAM Tag에 Name부분은 똑같이 써야 하고, DataURL은 list가 들어있는 파일명, UserHeader의 경우 list파일의 첫줄을 무시해야하는지 여부를 넣어주면 된다.이 PARAM Tag의 사용은 해당 ActiveX를 제작할때, 인자(Argument)로 넘겨주는 값을 지정할수 있도록 만들었기 때문에 해당 Active X의 설명서나 스펙을 참조해야 한다.

  • DATASRC : TABLE Tag의 속성으로 DATASRC에 위에서 선언한 Active X의 ID를 넣어준다.

  • THEAD와 TBODY : THEAD는 테이블의 Header부분으로, 적은 그대로 출력된다. TBODY의 경우 list파일의 첫 번째 제목줄에 해당하는 명칭을 넣어주면된다. ( 이말은 list.txt파일에 어떤 순서로 들어있든 출력할 때는 멋대로 할 수 있다는 말이다. )

  • DIV / DATAFLD : 각 항목의 DIV 태그의 속성값으로 DATAFLD에 지정해 주면 된다.

  이렇게 하면list.txt만 관리하면 된다. 매번 HTML Tag로 고생할 필요가 없는 것이다. 잘만 사용하면 아주 편리한 기능이다.

- Last Update : 2001.7.2 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master