YUI :: DataTable :: 커스텀 태그로 숨기기

<%@ page language=“java” contentType=“text/html; charset=EUC-KR” pageEncoding=“EUC-KR”%>

<%@ taglib prefix=“ajn” tagdir=“/WEB-INF/tags/ajn”%>

<ajn:page title=구매 대행 신청 도서 목록>

       <ajn:dataTable label=“markup”>

             <ajn:columnHeader
key=“index”
text=순번type=“number”
sortable=“true” />

             <ajn:columnHeader
key=“bookName”
text=책이름type=“html”
sortable=“true” />

             <ajn:columnHeader
key=“owners”
text=신청자 명단type=“html” sortable=“false”
/>

        </ajn:dataTable>

        <ajn:viewTable label=“markup” />

        <ajn:table>

             <ajn:bookOrderRow
index=“1” book=<a href=“http://www.amazon.com/exec/obidos/tg/detail/-/1932394230/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance”>JUnit Recipes:
Practical Methods for Programmer Testing
</a> members=
영회/>

             <ajn:bookOrderRow
index=“2” book=<a href=“http://www.amazon.com/exec/obidos/tg/detail/-/1932394885/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance”>Java Persistence with
Hibernate
</a> members=
찬욱,기선,한수,계옥,연숙/>

             <ajn:bookOrderRow
index=“3” book=<a href=“http://www.amazon.com/exec/obidos/tg/detail/-/159059584X/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance”>Expert Spring MVC and
Web Flow
</a> members=
찬욱/>

       </ajn:table>

</ajn:page>

와~ 70줄에 달아던 코드가 불과 15줄로 줄었습니다. 짝짝짝 .. 기선아 귿잡!

문제의 코드들은..<tr> <td>들 뿐만이 아닌 YUI의 자바스크립트.. 그것들을 태그파일로 만들어 버렸더니 코드가 확~ 줄어들었습니다. 예전에 물개 선생님 한테서 안 배웠다면 엄청 고생했을 텐데 말이죠. 새삼 다시 감사합니다. 🙂

이전에 커스텀 태그를 공부했던 흔적들 입니다.
Custom Tag 만들기
9. Tag만들기

HTML 태그를 DataTable로

ColumnSet의 생성자에 넣어줄 배열을 만들 때 각 Column의 속성 중에 text에 적는 값과 <th> 태그에 적는 값이 같으면 맵핑이 됩니다.

그리고 관련된 css와 js파일을 사용해 주면 IE와 FF에서 동일하게 나타납니다.
FF
사용자 삽입 이미지IE
사용자 삽입 이미지

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>구매 대행 신청 도서 목록</title>
<link type=”text/css” rel=”stylesheet” href=”../../build/reset/reset.css”>
<link type=”text/css” rel=”stylesheet” href=”../../build/fonts/fonts.css”>
<link type=”text/css” rel=”stylesheet” href=”../../build/logger/assets/logger.css”>
<link type=”text/css” rel=”stylesheet” href=”../../build/datatable/assets/datatable.css”>
<link type=”text/css” rel=”stylesheet” href=”./css/examples.css”>
<link type=”text/css” rel=”stylesheet” href=”../../docs/assets/dpSyntaxHighlighter.css”>
<style type=”text/css”>
/* custom css*/
#markup {margin:1em;}
#markup table {border-collapse:collapse;}
#markup th {border:1px solid #000;padding:.25em;background-color:#696969;color:#fff;}/*dark gray*/
#markup td {border-bottom:1px solid #000;padding:.25em;}
</style>

<script type=”text/javascript” src=”../../build/yahoo/yahoo.js”></script>
<script type=”text/javascript” src=”../../build/dom/dom.js”></script>
<script type=”text/javascript” src=”../../build/event/event.js”></script>
<script type=”text/javascript” src=”../../build/datasource/datasource-beta-debug.js”></script>
<script type=”text/javascript” src=”../../build/datatable/datatable-beta-debug.js”></script>
<script type=”text/javascript” src=”../../build/logger/logger.js”></script>
</head>
<body>
<script type=”text/javascript”>
YAHOO.example.enhanceFromMarkup = function() {
    this.columnHeaders = [
        {key:”num”,text:”순번”,type:”number”,sortable:true},
        {key:”bookName”,text:”책이름”,sortable:true},
        {key:”owners”,text:”신청자 명단”,type:”html”}
    ];
    this.columnSet = new YAHOO.widget.ColumnSet(this.columnHeaders);

    var markup = YAHOO.util.Dom.get(“markup”);
    this.dataTable = new YAHOO.widget.DataTable(markup,this.columnSet,null);
};

YAHOO.util.Event.onAvailable(“markup”,YAHOO.example.enhanceFromMarkup,YAHOO.example.enhanceFromMarkup,true);
</script>
<div id=”hd”></div>
<div id=”bd”>
<div id=”markup”>
<table id=”accounts”>
    <thead>
        <tr>
            <th>순번</th>
            <th>책이름</th>
            <th>신청자 명단</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><a href=”http://www.amazon.com/exec/obidos/tg/detail/-/1932394230/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance”>JUnit Recipes: Practical Methods for Programmer Testing</a></td>
            <td>영회</td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href=”http://www.amazon.com/exec/obidos/tg/detail/-/1932394885/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance”>Java Persistence with Hibernate</a></td>
            <td>찬욱,기선,한수,계옥,연숙</td>
        </tr>
        <tr>
            <td>3</td>
            <td><a href=”http://www.amazon.com/exec/obidos/tg/detail/-/159059584X/ref=ord_cart_shr/103-7860518-9786265?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance”>Expert Spring MVC and Web Flow</a></td>
            <td>찬욱</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</body>
</html>

여기서 고정적으로 사용되는 부분이랑 변동 되는 부분을 분리 해내는게 다음 과제가 되겠네요. CustomTag를 활용해서 좀 더 쉽고 간편하게 사용할 수 있는 방법을 찾아야겠습니다.

ck93.zip예제코드 입니다.

YUI :: DataTable :: DataTable 객체 만들기

앞에서 이미 ColumnSet 객체와 DataSource 객체를 만들었다면 아래에 있는 예제 코드 처럼 만들면 됩니다.

var myDataTable = new YAHOO.widget.DataTable(“myContainer“, myColumnSet, myDataSource);

그리고 DataTable을 화면에 나타내려면

<div id=”myContainer“></div>

이렇게 DataTable의 생성자에 있는 제일 첫번째 인자에 들어가는 String 값과 동일한 id를 가지는 <div>를 추가해주면 됩니다. 그럼 그 부분에 DataTable이 나타나게 됩니다.

YUI :: DataTable :: DataSource 객체 만들기

참조 : http://developer.yahoo.com/yui/datatable/

흠.. 이 부분이 가장 중요한 부분인데요. 아직 잘 모르겠습니다. 제가 원하는 건 현재 페이지가 List나 자바의 배열 객체를 가지고 있을 때 이것을 어떻게 DataTable로 표현 할 것인가 입니다.

답을 찾을 수 있을지 모르겠지만 일단 ㄱㄱ..

DataTable을 만들기 위해서 DataSource 객체를 만들차례입니다.

var YAHOO.example.puppies = [
  {name:”Ashley”,breed:”German Shepherd”,age:12},
  {name:”Dirty Harry”,breed:”Norwich Terrier”,age:5},
  {name:”Emma”,breed:”Labrador Retriever”,age:9},
  {name:”Oscar”,breed:”Yorkshire Terrier”,age:6},
  {name:”Riley”,breed:”Golden Retriever”,age:6},
  {name:”Shannon”,breed:”Greyhound”,age:12},
  {name:”Washington”,breed:”English Bulldog”,age:8},
  {name:”Zoe”,breed:”Labrador Retriever”,age:3}
];

먼저 예제로 보여주는 경우는 DataSource 객체를 만들 때 생성자에 JavaScript 배열이 담긴 파일을 넣어 줍니다.

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.puppies);

그리고 responseType을 JavaScript 배열로 지정해 줍니다.

myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

마지막으로 key에 매핑될 객체의 속성들을 지정해 줍니다.

myDataSource.responseSchema = {
    fields: [“name”,”breed”,”age”]
};

responseType으로는 다음과 같은 것들이 있습니다.

TYPE_JSARRAY – final Number :: Type is a JavaScript Array. :: Default Value: 0
TYPE_JSFUNCTIOn – final Number :: Type is a JavaScript Function. :: Default Value: 1
TYPE_JSON – final Number :: Type is JSON. :: Default Value: 3
TYPE_TEXT – final Number :: Type is plain text. :: Default Value: 5
TYPE_UNKNOWN – final Number :: Type is unknown. :: Default Value: -1
TYPE_XHR – final Number :: Type is hosted on a server via an XHR connection. :: Default Value: 2
TYPE_XML – final Number :: Type is XML. :: Default Value: 4

흠…전부 외부 파일로 부터 데이타들을 읽어오는 것 같네요. 흠;;; 매번 이런 파일들을 생성해서 사용할 수도 없고 어떻게 사용하라는거지..ㅠ.ㅠ

request에서 “list” 라는 이름으로 List 객체를 가지고 있을 때 displayTag 같은 경우는   

 <display:table name=”list” export=”true”>
        <display:column property=”name” title=”이름” href=”detail.do” paramId=”id” paramProperty=”id”/>
        <display:column property=”email” autolink=”true”/>
        <display:column property=”phone” title=”연락처”/>
        <display:column property=”blogAddress” title=”Blog” autolink=”true”/>
        <display:column property=”messengerId” title=”MSN”/>
    </display:table>

이런식으로 쓰면 되는데…흠.. 도무지 감이 잡히질 않는 군요. request에 있는 배열은 DataSource로 어떻게 넣을 수 있지??

<table> 태그로 data들을 표현했다면 DataSource를 만들 필요가 없습니다. DataTable에서 적절하게 매핑할 수 있습니다. 그 방법은 좀이따가 살펴보겠습니다.

jstl 등을 사용해서 <table> 태그를 만들어서 사용해야 되나.. 그렇게 되면 displayTag보다는 불편한거 아닌가.. 흠..;;; 아 머리야; 일단 STOP

YUI :: DataTable :: ColumnSet 객체 만들기

참조 : http://developer.yahoo.com/yui/datatable/

ColumnSet 의 생성자는 객체의 배열을 받는데 각각의 객체는 DataTable의 맨 위에 해당하는 <TH> 엘리먼트를 나타냅니다.

var myColumnHeaders = [
    {key:”name”, text:”Dog’s Name”},
    {key:”breed”, text:”Dog’s Breed”},
    {key:”age”, text:”Dog’s Age (in Weeks)”, type:”number”}
];

var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

myColumnHeaders는 배열이고 이 배열을 ColumnSet의 생성자에 넣습니다. 배열의 요소는 Column객체를 나타내며 Column에 지정할 수 있는 속성으로 다음과 같은 것들이 있습니다.

  • abbr – String ::
    Column head cell ABBR for accessibility.
  • children – Object[] ::
    Array of object literals that define children (nested headers) of a Column.
  • className – String ::
    Custom CSS class to be applied to every cell in the Column.
  • currentlyAsc
  • editor – String ::
    Defines the type of editor for Column, otherwise Column is not editable.
  • formatter – HTMLFunction ::
    Defines a custom format function for Column, otherwise default is used,
    according to Column type.
  • key – String ::
    Associated database field, or null.
  • resizeable – Boolean ::
    True if Column is resizeable, false otherwise.

    Default Value: false
  • sortable – Boolean ::
    True if Column is sortable, false otherwise.

    Default Value: false
  • sortOptions.ascFunction – Function ::
    Custom sort handler to arrange Column in ascending order.

    Default Value: null
  • sortOptions.descFunctio – Function ::
    Custom sort handler to arrange Column in descending order.

    Default Value: null
  • text – String ::
    Text or HTML for display in Column’s assocated TH element.
  • type – String ::
    Data types: “string”, “number”, “date”, “currency”, “checkbox”, “select”,
    “email”, “link”.

    Default Value: “string”
  • width – String ::
    Column width
  • abbr이 뭐죠? 흠.. html 태그 중에 하나[footnote]참조를 해보니 축약어에 대한 설명을 달 때 사용하는 태그 였습니다.[/footnote] 였군요. currentlyAcs 속성에 관한건 API에서 찾을 수가 없었습니다. 이 속성들은 다른 예제 코드들을 보면서 차차 익혀가야겠습니다. 흐흐;;

    이전 글에서 보았던 basic.html에 있던 코드의 일부를 다시 보겠습니다.

    var myColumnHeaders = [
        {key:”POID”, abbr:”Purchase order ID”, sortable:true, resizeable:true},
        {key:”Date”, type:”date”, sortable:true, resizeable:true},
        {key:”Quantity”, type:”number”, sortable:true, resizeable:true},
        {key:”Amount”, type:”currency”, sortable:true, resizeable:true},
        {key:”Title”, type:”html”, sortable:true, resizeable:true}
    ];

    var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

    ColumnSet의 생성자에 넣을 배열의 요소들은 각각이 Column객체이며 그 객체의 속성으로 key, abbr, sortable, resizeable, type 등을 지정했습니다.