WFrame scope
WFrame은 File을 include 하는 개념으로
IFrame처럼 부모 페이지와 독립된 영역으로 나뉘어 지는 것이 아니라
부모 페이지와 하나의 영역내에 구성된다 (전체 페이지가 하나의 웹스퀘어 라이브러리를 사용한다)
- 이와 같이 구성되면, 하나의 웹 페이지로 구성되기 때문에
IFrame에 비해 훨씬 더 적은 메모리로 화면을 실행 할 수 있어 보다 빠른 속도로 화면을 rendering 할 수 있는 장점이 있지만, 부모 페이지의 구성요소와 동일한 id를 갖는 component가 있을 경우 id 중복문제가 발생하게 된다
이때 발생하는id 중복을 피하기 위해 scope 기능을 사용할 수 있다
부모 페이지의 inputBox의 id를 ipt1로 지정 해주고
부모 페이지내 WFrame에 들어온 자식 페이지의 inputBox의 id 또한 ipt1로
지정해주었는데 아이디 중복 오류가 발생하지 않는다
그 이유는 WFrame이 지닌 속성 중에 Scope라는 속성이 적용되어 실제 화면에서 rendering 되는 id를 변경하기 때문이다
scope속성을 true로 사용하면 적용되며, default도 true이다
tabControl 로 두개의 tab을 구성하여 각각 tabContent의 scope 속성을 true 로, src를 동일한 child.xml 파일을 연결해주면 WFrame의 scope가 적용된다
browser의 요소 검사를 통해 rendering 된 id를 확인해보면
ipt1가 아닌 각기 다른 id로 rendering 됨을 알 수 있다
이와 같이 scope 속성은 실제 web browser에 rendering 되는 component의 id를 변경하는 것을 확인 할 수 있다
script 제어를 알아보기 위해 alert()를 실행해주는 trigger component를 추가해주고 id를 입력, onclick 이벤트를 등록해준다
그러면 script 작성시 원래의 id인 ipt1이 아닌 rendering 된 id로 사용해야 한다고 생각 할 수 있지만, script coding에서는 실행 browser에서 rendering 된 id를 사용하지 않는다
신의 page 내에 있는 component를 접근할 경우, 원래 적용한 id로 script coding 하면 된다. 즉 원래의 id인 ipt1을 이용한다
script를 통해 모두 같은 id인 ipt1을 통하여 coding 하였음에도 모두 각각 적용한 값을 정상적으로 가져오고 있음을 확인 할 수 있다
자신의 page 에서 사용한 component는 원래의 id를 이용할 수 있지만,
단순 WFrame 이나 혹은 WFrame을 사용한 tabControl, windowContainer등은 모두 하위 객체에 접근 할 때 getWindow 라는 API를 통해 접근해야 한다
ex) tabControlID.getWindow(tabIndex).ipt1.getValue()
childvalue를 click하면 첫번째 탭의 inputbox의 값을 호출하는 것을 확인할 수 있다
만약 getWindow의 parameter를 0대신 1로 적용하면 두번째 tab의 inputbox에 접근 할 수 있다. 그렇지 않고, 선택된 tab의 inputbox에 접근하려면 tabControl의 API중 getSelectedTabIndex()를 통해 구현 할 수 있다
자식 페이지에서 부모 페이지로 접근 하는 방법
1_ 부모 페이지의 ipt1 값을 가져올 trigger component를 생성
WFrame의 scope가 적용된 경우 상위 객체에 접근하려면, IFrame에서 적용하듯이 parent 객체에 바로 접근하여 사용하지 않는다. WFrame의 scope에서는 $p.parent()를 통해 상위 객체로 접근할 수 있다
이와 같이 WFrame의 scope가 적용된 경우 script 작성시 아래 사항을 유의 하면 된다
1. 자신의 page component 접근 => 변경사항 없음, 원래 적용한 id로 접근
2. 자식 page component 접근 => getWindow API 이용, tabControl 이나 windowContainer의 경우 index를 parameter로 사용
3. 부모 page component 접근 => $p.parent() 이용2_ DataCollection의 AliasDataMap, AliasDataList을 이용하는 방법
임의의 dataMap을 만들고 parent 페이지의 inputBox에 바인딩 해준다
만약 parent 페이지에서 생성한 dataMap을 child 페이지에서 접근하려면, 동일한 dataMap을 만들어서 값을 복사하는 것이 아니라, AliasDataMap을 생성하여 사용해야 한다
AliasDataMap은 직접 항목을 생성할 수 없다. 부모페이지에서 생성한 DataMap을 접근하기에 속성을 이용하여 사용해야 한다
AliasDataMap의 속성중 scope를 이용하여 접근하고자 하는 상위 객체의 DataMap의 경로를 지정한다. 경로 지정은 상대 경로 및 절대 경로를 모두 이용할 수 있다
ex)
상대경로 : ../dataMap1
절대경로 : /tabControlID/dataMap1
AliasDataMap을 child 페이지의 inputBox에 바인딩 해준다
실행 browser를 통해 확인해 보면, parent 페이지와 child 페이지의 inputbox의 값이 모두 동일값으로 표기되고, 어느 한 군데에서 값을 고쳐도 모든 inputBox의 값이 함께 변경됨을 알 수 있다
이처럼 AliasDataCollection은 wframe의 scope 기능이 적용되었을 경우,
자식 페이지 -> 부모페이지의 data 객체를 참조 할 때 사용, 반대의 경우는 참조 할 수 없음
AliasDataList도 같은 방법으로 생성, 바인딩 해준다
이처럼 WFrame의 scope 기능을 통해 부모, 자식 페이지간 id 중복을 피하여 자유롭게 화면을 구성 할 수 있으며, web browser가 IFrame을 사용 할 때 보다 훨씬 더 적은 메모리를 사용하기 때문에 보다 빠르고 효율적인 웹 페이지를 구성할 수 있다
다만 WFrame은 IFrame과는 다르게 하나의 페이지로 인식하기 때문에
WFrame scope로 적용된 영역에 대해 개별 제어 할 수 없다는 점과
id가 변경되어 rendering 되기 때문에 css 작성시 id selector를 사용할 수 없다는 점을 주의해야 한다
- 일반 페이지 - WFrame의 scope 권장
- 외부 모듈 연계시 - IFrame 권장
