2008/07/14 15:15 | Posted by 베스트나
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를 지운다.
- 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..