웹스퀘어 개발자 과정4(데이터바인딩)

각 컴포넌트에 기본Data를 setting하는 방법 

기본값설정에 필요한 컴포넌트는 td의 객체 내의 각 컴포넌트들과 조회버튼이 필요하다.
기본값 셋팅에 필요한 컴포넌트들에 대하여 모두 id를 부여하고, 웹스퀘어에서의 컴포넌트들은 id를 부여하면 해당 id는 전역변수로 인식되어 script에서 바로 사용이 가능하다. id를 작성시 주의사항은 공백은 허용하지 않으며 -의 문자는 파싱의 과정에서 오류를 일으킬  가능성이 있어서 사용을 권장하지 않는다. 

기본적이지만 id를 적용할 때의 중요한 사항은 유니크한 id를  사용해야한다는 점이다. id는 중복되는 경우 오류를 발생할 수 있다. 

날짜util API를 입력할 때에는 $p객체를 이용할 수 있으며, $p를 입력하고 .를 입력하면 웹스퀘어에서 사용가능한 utilAPI를 확인할 수 있다. 

날짜를 구해오는 API는 $p.getCurrentServerDate라는 API를 사용하고, 사용할 patter을 파라미터로 작성해주면 된다. 
list로 나타내는 컴포넌트는 selectbox와 radio,checkbox등이 있고, 각기 다른 방식으로 setting이 가능하다. 

우선 하드코딩으로 sessing하는 방법은 더블클릭으하는 방법이고, +와 -를 통하여 추가 혹은 삭제가 가능하다
selectbox는 하드코딩으로 setting을 할 수있고 AllOption을 클릭해서 '전체'가 출력되도록 만들 수 있다. . chooseoption을 클릭하면 '선택'이라는 부분이 출력되고, chooseoption에 변경하고자 하는 label을 입력하면 해당 글씨가 출력되는 것을 확인할 수 있다. all과 choose는 둘다사용이 가능하다. 

radio또한 하드코딩이 가능하다. addItem이라는 API을 사용해서 select설정을 할 수 있다. "F" "여자" 0으로 보여지는 값과 순서를 설정할 수 있다. index를 사용하지 않으면 먼저 선언된 순서대로 표시가 된다. 보여지는 편집창에서 하단에 span Direction을 선택할 수 있으며 default인 non이나 cols를 선택하면 세로방향으로 표현이 되고 rows를 선택하면 가로방향으로 표현된다. 또한 spanCount는 지정된 열과 행의 갯수를 표시하며 따로 주지않으면 1로 적용이 된다. spanDirection - rows, span Cout -2라면 가로로 2줄이 표현된다. rows로만 적용하면 가로로보여진다. 

dataList와 연동하는 방법

dataCollection에서 적용한다. data를 생성할 때 단건은 map으로 다건은 list로 표현한다.dataMap의 항목은 key List의 항목은 Column으로 속성이 표시된다. 우으로  누르면 여러가지 기능을 확인할 수 있다. data의 객체를 선택하고 마우스 우클릭하여 id수정을 선택, property의 id부분을 수정, data객체를 선택 후 F2를 누르면 직접 활성화 모드로 변경된다. 

생성된 dataList를 실행된 브라우져에서는 바로 확인이 어렵지만 ctrl + 마우스 우클릭을 하여 디버그 기능을 통해 확인하여야하나다. data의 객체를 확인하려면 dataCollection보기를 선택하면 된다. 그럼 보여지는 팝업에서 data를 조회할 수 있다. 

생성된 dataList에 초기값을 주는 방법 중 가장 쉬운 방법은 usedata의 기능을 이요하는 것이다. 체크박스에 체크하고 초기값으로 주고자 하는 data를 넣을 수 있다. 

checkbox을 더블클릭한다. checkbox와 같은 list를 담는 컴포넌트와 data객체와 연결려면 bindItemSet기능을 이용한다.NodeSet은 연결하려는 dataList명, label은 항목으로 보여질 컬럼명,- name Value는 값으로 보여질 컬럼명-code으로 spanDiection은 row방향으로 지정한다. 

data객체의 API를 활용하기 위해서는 id를 적고 .을 작성하며 값을 넣어줄 때는 data의 형식에 따라 setData, setXML, setJSON을 이용할 수 있다. 
setData -1차원 Array , setXML -xmlObject , setJSON -jsonObject 
setJSON을 활용하여 값을 setting하면 id.setJSON(jsonData,append);를 작성하고 위쪽에 우선값을 넣어줄 json의 객체를 지정하고,첫번째 parameterr로 넣는다. 2번째parameter인 append는 append의 여부를 묻는 것으로 true를 지정하면 기존 data에 붙여넣기를 적용하며, false를 지정하면 기존 data를 지우고 신규 data만 적용한다. 기본값으로는 false이다. 
var로 jsonData로 변수명을 설정 [{"code:"01","name":"총괄"}]처럼 배열의 형식으로 작성한다. 그리고 setJSON에 (변수 이름, true, false)로 설정한다. 
data의 객체와 바인딩을 할 댕에는 setNodeSet이라는 API를 활용한다. nodeSet은 연결할 dataList의 id 반드시 data:dataListID의 형식을 사용한다. label - 항목명을 나타내는 컬럼id, value -항목값을 나타내는 컬럼id
id.setNodeSet("data:dc_role","name","code")