Whiteship's Note


HTML 태그를 DataTable로

JEDI/YUI : 2007. 3. 19. 18:54


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를 활용해서 좀 더 쉽고 간편하게 사용할 수 있는 방법을 찾아야겠습니다.

예제코드 입니다.

'JEDI > YUI' 카테고리의 다른 글

YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
HTML 태그를 DataTable로  (0) 2007.03.19
YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: basic.html  (0) 2007.03.18
숙제  (0) 2007.03.17
Yahoo Wideget 개발 준비  (0) 2007.03.15
YUI(Yahoo! UI Library)  (0) 2007.01.22
top

TAG DataTable, YUI

Write a comment.


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

JEDI/YUI : 2007. 3. 18. 16:33


앞에서 이미 ColumnSet 객체와 DataSource 객체를 만들었다면 아래에 있는 예제 코드 처럼 만들면 됩니다.
var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnSet, myDataSource);

그리고 DataTable을 화면에 나타내려면
<div id="myContainer"></div>

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


'JEDI > YUI' 카테고리의 다른 글

YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
HTML 태그를 DataTable로  (0) 2007.03.19
YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: basic.html  (0) 2007.03.18
숙제  (0) 2007.03.17
Yahoo Wideget 개발 준비  (0) 2007.03.15
YUI(Yahoo! UI Library)  (0) 2007.01.22
top

TAG DataTable, YUI

Write a comment.


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

JEDI/YUI : 2007. 3. 18. 14:41


참조 : 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

'JEDI > YUI' 카테고리의 다른 글

YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
HTML 태그를 DataTable로  (0) 2007.03.19
YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
YUI :: DataTable :: basic.html  (0) 2007.03.18
숙제  (0) 2007.03.17
Yahoo Wideget 개발 준비  (0) 2007.03.15
YUI(Yahoo! UI Library)  (0) 2007.01.22
top

Write a comment.


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

JEDI/YUI : 2007. 3. 18. 13:44


참조 : 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 태그 중에 하나[각주:1] 였군요. 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 등을 지정했습니다.
    1. 참조를 해보니 축약어에 대한 설명을 달 때 사용하는 태그 였습니다. [본문으로]

    'JEDI > YUI' 카테고리의 다른 글

    YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
    HTML 태그를 DataTable로  (0) 2007.03.19
    YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: basic.html  (0) 2007.03.18
    숙제  (0) 2007.03.17
    Yahoo Wideget 개발 준비  (0) 2007.03.15
    YUI(Yahoo! UI Library)  (0) 2007.01.22
    top

    Write a comment.


    YUI :: DataTable :: basic.html

    JEDI/YUI : 2007. 3. 18. 13:26


    DataTable 예제들

    이 중에서 Basic Table을 자세히 살펴 보겠습니다.

    샘플코드 부분 날리고, Logger 부분을 날리고, CSS 부분도 날리면 다음과 같이 보입니다.
    사용자 삽입 이미지

    핵심 부분의 소스코드는 다음과 같습니다.
    <script type="text/javascript">
    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);

    var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    myDataSource.responseSchema = {
        fields: ["POID","Date","Quantity","Amount","Title"]
    };
    var myDataTable = new YAHOO.widget.DataTable("basic", myColumnSet, myDataSource,{caption:"Whiteship: Basic Table"});
    </script>

    먼저 배열로 테이블의 헤더 부분을 지정하고, 그걸로 ColumnSet 객체를 만듭니다.
    다음은 DataSource 객체를 만들고 몇가지 속성을 설정합니다.
    마지막으로 위에서 만든 ColumnSet과 DataSource를 사용해서 DataTable객체를 만들면 됩니다.

    'JEDI > YUI' 카테고리의 다른 글

    YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
    HTML 태그를 DataTable로  (0) 2007.03.19
    YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: basic.html  (0) 2007.03.18
    숙제  (0) 2007.03.17
    Yahoo Wideget 개발 준비  (0) 2007.03.15
    YUI(Yahoo! UI Library)  (0) 2007.01.22
    top

    TAG DataTable, YUI

    Write a comment.


    숙제

    JEDI/YUI : 2007. 3. 17. 00:36


    YUI - DataTable 사용법

    http://developer.yahoo.com/yui/datatable/
    http://www.w3schools.com/js/default.asp

    기한 일요일 오후 5시 전까지...일단 Go to bed..

    'JEDI > YUI' 카테고리의 다른 글

    YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
    HTML 태그를 DataTable로  (0) 2007.03.19
    YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: basic.html  (0) 2007.03.18
    숙제  (0) 2007.03.17
    Yahoo Wideget 개발 준비  (0) 2007.03.15
    YUI(Yahoo! UI Library)  (0) 2007.01.22
    top

    TAG YUI

    Write a comment.


    YUI(Yahoo! UI Library)

    JEDI/YUI : 2007. 1. 22. 12:52


    http://developer.yahoo.com/yui/
    위에서 javascript와 css를 제공해 줍니다. 구글이나 아마존에서 제공해 주는 공개 API와는 다르게 소스를 직접 다운로드해서 사용할 수 있습니다.

    http://developer.yahoo.com/yui/docs/ <- API

    주소록 프로그램에 유용해 보이는 몇가지 샘플들의 링크를 모아봤습니다.

    http://developer.yahoo.com/yui/examples/container/dialog/2.html
    새로운 멤버나 새로운 그룹 추가를 팝업으로 사용 가능.
    http://developer.yahoo.com/yui/examples/container/simpledialog/2.html
    정말 삭제 하시겠습니까? 또는 수정 하시겠습니까? 라는 팝업으로 사용 가능.
    http://developer.yahoo.com/yui/examples/menu/index.html
    메뉴 만들 때 사용 가능.
    http://developer.yahoo.com/yui/examples/tabview/basic_from_markup.html
    탭뷰로 전체 멤버 보기, 전체 그룹 보기, 회원 추가, 멤버 추가 등의 메뉴 대용으로 사용 가능.
    http://developer.yahoo.com/yui/examples/tabview/transition.html
    탭 전환시 효과가 멋짐.
    http://developer.yahoo.com/yui/grids/#base_markup
    테이블 탬플릿을 위한 CSS를 제공해 줍니다.

    제공 되는 전체 서비스 보기

    'JEDI > YUI' 카테고리의 다른 글

    YUI :: DataTable :: 커스텀 태그로 숨기기  (0) 2007.03.20
    HTML 태그를 DataTable로  (0) 2007.03.19
    YUI :: DataTable :: DataTable 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: DataSource 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: ColumnSet 객체 만들기  (0) 2007.03.18
    YUI :: DataTable :: basic.html  (0) 2007.03.18
    숙제  (0) 2007.03.17
    Yahoo Wideget 개발 준비  (0) 2007.03.15
    YUI(Yahoo! UI Library)  (0) 2007.01.22
    top

    TAG YUI

    Write a comment.