[DWR] util.js / Basis, Table, List Manipulation

 

2008/07/14 15:15 | Posted by 베스트나

검색을 해보니 DWR util.js에 대해 정리해 놓은 문서들이 없어 대충 정리해 보았습니다.
dwr 홈페이지 영문 메뉴얼로 만으로는 부족한 부분들을 몇개 덧 붙였으며,
크게 기본, 테이블, 리스트에 대한 사용법을 담았습니다.

==================================================================================================

less..

펼쳐두기..

* Basis Manipulation

  dwr.util.getText(id)
    - <select> 태그에서 선택한 option의 text값을 돌려준다.
    - 'text'속성을 가지고 있지 않는 그 이외의 폼태그에서는 적용이 되지 않음.


  dwr.util.getValue(id)
    - 'value' 속성을 폼 태그에 대해서 적용. value값을 돌려줌.


  dwr.util.getValues(map)
    - 파라미터로 map 형태의 데이터 전달.
    - map의 key값으로는 id를, value 값으로는 ............(아직 잘 모르겠음.ㅜ.ㅡ)
    - map ex) { div:null, textarea:null, select:null, text:null, password:null, formbutton:null, button:null }

function objectEval(text)
 {
     text = text.replace(/\n/g, " ");
     text = text.replace(/\r/g, " ");
     if (text.match(/^\s*\{.*\}\s*$/))
     {
         text = "[" + text + "]";
     }
     return eval(text)[0];
 }
 
 
 function doGetValues() {
   var text = "{ div:null, textarea:null, select:null }";
   var object = objectEval(text);
   dwr.util.getValues(object);
   var reply = dwr.util.toDescriptiveString(object, 3);
   reply = reply.replace(/\n/g, "<br/>");
   dwr.util.setValue("getvaluesret", reply);
 }

    - eval을 통하여 객체로 변환한 다음 getValues로 넘겨준다.


  dwr.util.setValue(id, value [, options])
    - 1st Param : 해당 id 지정
    - 2nd Param : 데이터값 지정
    - 3rd Param : options 사항으로 {escapeHtml:false} 등을 지정할 수 있다.
    - <select>일 경우 option의 text값을 지정하면 그에 해당하는 option이 선택된다.


  dwr.util.setValues(map)
    - 파라미터로 map 형태의 데이터 전달.
    - ex) { div:"new div content", password:"1234567980" }


  dwr.util.toDescriptiveString(object, mode [, options])
    - object를 다양한 형태로 toString()
    - 2nd Param

0 : Short single value. For objects and arrays this means not descending into child objects and for strings it means printing a maximum of options.shortStringMaxLength characters.
1 : 한 줄 에 options.oneLineMaxItems 만큼 표시한다.
2 : 여러줄에 first-level과 제한된 second-level의 object 표시
3 : 여러줄에 first and second-level을 표시하고 제한된 third-level object 표시

    - 3rd Param

escapeHtml: Default: false, html 태그를 escape할지 여부

baseIndent: Default:empty string, 기본적인 indent 문자. 모든 라인 첫번째에 삽입.

childIndent: Default:two hard Unicode spaces.레벨에 따라 재귀로 삽입되는 indent 문자.

lineTerminator: Default: "\n" , 라인 구분 문자(2, 3 모드에서..)

oneLineMaxItems:  Default:5  (1 모드에서) 한 라인에 나오는 최대 항목 수

shortStringMaxLength: Default:13, 속성값이 스트링일때 그 값의 최대 길이.

propertyNameMaxLength: Default: 30, 속성이름의 최대 길이

  byId() or $() == document.getElementById
    - dwr.util.byId('demo') == $('demo') == document.getElementById('demo')


  DWRUtil.onReturn, onSubmit
    - 테스트 해보았으나 잘 안된다..ㅠㅠ


  dwr.util.selectRange(id, start, end)
    - <input type="text" id="demo" value="123456789">
    - dwr.util.selectRange("demo", 0 , 4 )
    - 위 경우 input 폼 안에 0번째 부터 4번째 글자까지 선택된다.

==================================================================================================

* Table Manipulation

  : Table 태그에 addRows를 이용하여 tr, td를 삽입하고 removeAllRows으로 모든 tr, td를 지운다.

dwr.util.addRows( "demo1", [ 'Africa', 'America', 'Asia'], cellFuncs, { escapeHtml:false });

      - 1st Param :  삽입할 table의 id명. 반드시 tbody, thead, tfoot의 id이어야 한다.(table에는 적용이 안됨.)
                          'The first parameter to both is the id of the table, tbody, thead or tfoot to edit.'
      - 2nd Param :  적용할 데이터 셋.
      - 3rd Param :  각 cell마다 적용할 형식을 정의한 변수명. 각 function이 순서대로 하나의 cell에 해당한다.

 var cellFuncs = [
                           function(data) { return data; },
                           function(data) { return data.toUpperCase(); },
                           function(data) {
                               return "<input type='button' value='Test' onclick='alert(\"Hi\");'/>";
                           },
                           function(data) { return count++; }
                        ];

      - 4th Param :  option에 해당하는 부분으로 이곳에서 tr과 td를 다룬다.

  * Advanced Options

    4th Param 부분에서는 기본적으로 아래와 같은 function을 제공한다.
 

                           function defaultRowCreator(options) {
                                 return document.createElement("tr");
                           };

                           function defaultCellCreator(options) {
                                 return document.createElement("td");
                           };                          

    즉, 아무것도 명시하지 않을경우 기본적이 tr/td Element 객체를 리턴하게 된다.

          dwr.util.addRows("demo1",
                                   [ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ],
                                   cellFuncs,
                                   {
                                        rowCreator:function(options) {
                                               var row = document.createElement("tr");
                                               var index = options.rowIndex * 50;
                                               row.style.color = "rgb(" + index + ",0,0)";        
                                               return row;
                                        },
                                        cellCreator:function(options) {
                                               var td = document.createElement("td");
                                               var index = 255 - (options.rowIndex * 50);
                                               td.style.backgroundColor = "rgb(" + index + ",255,255)";
                                               td.style.fontWeight = "bold";
                                               return td;
                                        }, escapeHtml:false
                                  });

    위와 같이, rowCreator와 cellCreator를 정의함으로써 tr과 td를 원하는 형태로 만들 수 있다.
    여기서 해당 function의 인자로 options를 받는데 options의 속성은 아래와 같다.

   rowData: 2nd Param의 배열의 데이터
   rowIndex: Map일 경우는 key, Array일경우는 index번호.
   rowNum: table에 삽입되는 row번호.(0부터 시작)
   data: cellCreator에서 최종적으로 리턴되는 데이터 (cellCreators only)
   cellNum: 하나의 row에 삽입되는 cell번호.(0부터 시작) (cellCreators only)
   (rowIndex와 rowNum이 어떤 경우에 달라지는지는 아직 찾지를 못하였다.)

    'escapeHtml:false'은 역시 html 태그를 escape 할것인지 여부를 지정.

 * Remove All Rows
    - dwr.util.removeAllRows(id);

==================================================================================================

* List Manipulation

  : Select 태그에 addOptions를 이용하여 option을 삽입하고 removeAllOption으로 모든 option을 지운다.

  * Simple Array Example
    - dwr.util.addOptions( "demo1", [ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ] )
    - option의 text와 value 값이 동일.

  * Simple Object Array Example
    - dwr.util.addOptions( "demo2", [    { name:'Africa', population:'800m' },
                                                       { name:'America', population:'900m' },
                                                       { name:'Asia', population:'3000m' },
                                                       { name:'Australasia', population:'31m' },
                                                       { name:'Europe', population:'700m' } ],   name );
    - 객체 배열로 넘겨줄 경우 세번째 파라미터로 객체의 속성을 지정해주면 그 속성값으로 삽입
    - 역시 option의 text와 value 값이 동일.

  * Advanced Object Array Example
    - dwr.util.addOptions( "demo3", [    { name:'Africa', id:'AF' },
                                                       { name:'America', id:'AM' },
                                                       { name:'Asia', id:'AS' },
                                                       { name:'Australasia', id:'AU' },
                                                       { name:'Europe', id:'EU' } ], id, name );
    - 3, 4번째 파라미터에 객체 속성값을 지정할 경우 3번째는 option의 value값, 4번째는 text값을 나타낸다.

  * Map Example
    - dwr.util.addOptions( "demo4", {  AF:'Africa',
                                                     AM:'America',
                                                     AS:'Asia',
                                                     AU:'Australasia',
                                                     EU:'Europe'  });
    - Map의 형태로 넘겨질 경우 key 값이 option의 value로 value값은 option의 text값으로 나타낸다.
    - 3번째 인자는(boolean) key와 value 매핑을 반대로 할것인지의 여부를 나타냄. (디폴트 false)

  * <ul> and <ol> list editing
    - dwr.util.addOptions( "demo5", [ 'Africa', 'America', 'Asia', 'Australasia', 'Europe' ] )
    - <ul> 및 <ol> 태그에 <li>태그를 삽입시킨다.
    - 객체 배열을 적용할 경우 마찬가지로 3번째 파라미터에 해당 객체 속성값을 지정해 준다.
      (4번째 파라미터를 넘겨줘도 무시)
    - Map형태일 경우 적용이 안된다.

  * Advanced addOptions
    - function formatter(entry) { return "<b>" + entry + "</b>"; }
    - dwr.util.addOptions( "demo11", [ "one", "two", "three" ], formatter, { escapeHtml:false });
    - 3번째 파라미터에 함수명을 지정함으로써 포멧팅.
    - 배열의 값은 포멧팅 함수의 인자로 넘어가며 인자명은 임의로 바꿀 수 있음.
    - 네번째 인자는 html태그를 escape여부를 설정하며 생략할경우 디폴트로 true로 설정.

  * Remove All Options
    - dwr.util.removeAllOptions(id);


참조
  - DWR : http://directwebremoting.org
  - DWR util.js : http://directwebremoting.org/dwr/browser/util

less..