2014년 3월 25일 화요일

4. XplatForm Binding하기[웹표준/웹접근성/HTML5/jQUERY교육잘하는곳/제이쿼리,JAVASCRIPT교육추천/jQUERY,CSS3학원추천/HTML5학원교육추천/JQUERY,HTML5교육학원추천/실무웹표준교육/웹퍼블리싱/웹접근성교육]

4. XplatForm Binding하기[웹표준/웹접근성/HTML5/jQUERY교육잘하는곳/제이쿼리,JAVASCRIPT교육추천/jQUERY,CSS3학원추천/HTML5학원교육추천/JQUERY,HTML5교육학원추천/실무웹표준교육/웹퍼블리싱/웹접근성교육]


1. Binding 이란?

- Dataset Component와 Presentation Component를 자동 연결 시켜주는 기능



2. Datast Component 아이콘을 드래그해서 Fome화면에 둔다.



3. 2번에서 처럼 드래그하게되면 Invisible Objects영역에 Dataset Component 아이콘이 생기게 되며, Properties창에 id값을 이용하여 이름을 정해줄 수 있다.



4. 생성된 dataset를 더블클릭하면 밑 화면처럼 Dataset Contents Editor창이 뜨게된다.
두번째 Colums부분에서 컬럼이름,타입,사이즈를 설정할수 있으며, 세번째 Rows에서는 생성한 컬럼에 값을 임의로 넣을 수 있다.

(1) : 컬럼 및 값을 추가 하는 아이콘
(2) : 생성된 컬럼 및 값들 사이에 새로운 컬럼,값을 추가하는 아이콘
(3) : 컬럼 및 값 삭제하는 아이콘


5. form화면의 Grid Compoent를 더블클릭하게 되면 밑 화면과 같이 창이 뜨게 되는데 왼쪽 회색부분에 마우스 우클릭을 하게 되면 3개가 활성화 되어있는 것을 볼수 있다.



Add Head Row를 클릭하게 밑 화면처럼 컬럼이 하나인 그리드 화면이 만들어지는데 화면에 우클릭을 해서 Add Column을 통해 컬럼을 하나 더 추가하자.



회색화면에 다시 우클릭을 해서 Add Body Row를 클릭해보면, Head 밑에 body가 생기는데 컬럼의 레코드값이 들어갈 부분이다.



마지막으로 위 내용과 같이 우클릭을 하면, 선택하지 않는 Add Summ Row가 있는데  Grid의 재일 밑에 생성이 되는데 값들의 합계와 같은 값을 찍을때 사용된다.



Head에 컬럼이 들어간다고 했는데 출력화면에서 지금 나오는 컬럼이 무슨 컬림인지 식별하기 위해서 해당 해더를 선택하고 우측에 Binding그룹에 Text속성에 해당 식별할 수 있는 컬럼 이름을 입력하면 된다.
입력후 ok버튼을 누르자.



화면에 나와서 Grid화면을 보게되면,  haed와 summ 영역은 출력이되지만, body영역 data값 표현이 안되고 있는것을 볼 수 있다.
그 이유는 grid와 dataset이 Binding을 하지않았기 때문인데 해결 방법은 Grid 속성창에 가보게되면 Binding그룹에 binddataset이라는 속성을 볼 수 있는데 클릭하고 드롭다운버튼을 눌러서 binding하려느 dataset Component를 선택하면 grid창이 바뀌는것을 볼 수 있다.


dataset과 Binding이 됬으면 이제 각각의 컬럼값을 표현하기 위해서 다시 Grid Contants Editor로 들어가서 설정해보자.
해당 Binding할 body를 클릭한 후  우측 Binding그룹 text속성에서 binding을 하게 되는데 가운데에 있는 녹색체크버튼을 누르게 되면 dataset의 컬럼목록이 나오게 된다.
사원명도 윗글과 동일하게 binding하고 ok버튼을 누르고 확인해보면 값이 화면에 출력되었다는걸 볼 수 있다.



6. grid쪽 binding이 끝났으니 이제 처음에 만들었던 div에 그룹화된 edit, maskEdit, Calendar, CheckBox, Radio, Combo, TextArea Conponent에 각각 해당 출력 컬럼을 binding해보자.
Conponent를 클릭한 후 우측 속성창에 5번째 아이콘(Binding하는 아이콘)을 클릭한 후 Appearance그룹에 value속성을 클릭하게 되면, combo박스가 두개로 나눠져 있는데 첫번째는 어떤 dataset을 binding 할 것인지 선택하는 박스고 두번째는 해당하는 dataset컬럼을 선택하는 박스이다.



7. 재대로 화면이 나오는지 출력해보자.
출력화면을 보게되면 재대로 출력되는 Component도 있고 아닌 경우도 있다.
정상적으로 출력안되는 부분은 밑에서 하나씩 수정하겠다.



8. 위에 출력화면을 보게되면, MaskEdit에 출력이 안되는 것을 볼 수 있는데  그 이유는 레코드의 형태와 출력하려는 MaskEdit의 형식이 다르기 때문이다. MaskEdit를 사용할때는 이점을 유의해야된다.
해결 방법은 해당 사원번호를 뜻하는 MaskEdit 선택한 후 속성창에서 3번째 아이콘을 클릭한 후 Action그룹에 type속성을 보게되면 현재 number로 되있는데 DropDownButton을 클릭하여 String으로 바꾼다.
그리고 Action그룹에 mask라는 속성은 형식을 맞춰주는 기능이 있는데 AA-###이라고 기술 하자.
A를 입력하면 대문자 알파벳만 입출력되며, #은 십진수를 뜻한다.



급여에 해당하는 MaskEdit도 수정해보자.ex)1000 - > 1,000
속성창 Action그룹 mask속성에 #,###이라고 입력하자.





Calendar Compoent 출력내용도 수정해보자.
속성창 Misc그룹에 dateformat과 editformat이 있다.
dateformat : 화면에 출력되는 형식
editformat : 날짜 바꿀때 출력되는 형식



Radio , Combo Conponent는 값을 불러오기 전에 코드성 데이터를 가지고 있어야 된다.
코드성 데이터를 binding하는 방법은 두가지가 있다.
일단 Radio Conponent를 클릭 후 속성창 Binding그룹 Innerdataset속성을 선택하게 되면 ...버튼과 DropDownButton이 있는데 Radio버튼에서는 ...버튼을 클릭해보자.
...버튼을 클릭하게 되면 코드성 데이터를 입력하는 창이 나오는데 dataset에서 컬럼 생성,추가,삭제 하는 방식이 같다. 밑에 화면을 보면서 입력해보자. 입력 후 ok버튼을 누르게 되면, Radio버튼이 생기는 것을 확인 할 수 있으며, 속성창 Appearance그룹 columncount를 2로 바꾸면 라이오버튼이 가로로 설정되는 것을 볼 수 있다.



Combo Button도 아까와 동일 하게 클릭 후 속성창 Binding그룹 Innerdataset속성을 선택한다. 이번에는 DropDownButton으로 코드성 데이터를 넣어 보겠다.
두번째 방법은 DataSet를 이용해서 하는 방식이므로 밑에 화면처럼 Dataset Componet를 생성하고 설정해준다.

dataset을 만들었으면 이제 Innerdataset속성으로 이동하여 드롭다운 버튼을 클릭하여 방금 만든 dataset을 선택한다. 선택하게 되면 codecolumn, datacolumn 속성을 보게 되면 해당 컬럼이 되는것을 볼 수 있다.


9. 이제 binding 설정 다 했다. 다시 실행해서 확인 해보자.

 




댓글 없음:

댓글 쓰기