설정
- config.xml : 브라우저 상의 UI 화면 출력과 관련된 내용을 설정
- websquare.xml : WebSquare5 Engine의 동작과 관련된 내용을 설정
WebSquare XML 구성 요소
Model
DataCollection
- 데이터 객체를 정의하는 영역
- DataMap
- DataList
- LinkedDataList
- 서버 통신을 위한 request, response 데이터와 화면에서 사용할 데이터를 정의
Submission
- 서버 통신을 위한 인터페이스
- 용도 별로 여러 개 정의 가능
- 통신 방식(동기/비동기) 선택 가능
- 통신 전/후에 실행할 함수 정의 가능
- 전송할 데이터(request 혹은 ref)와 수신할 데이터(response 혹은 target)를 설정
Workflow
- 여러 개의 Submission을 실행할 경우 사용
- 실행 순서, 결과 처리 순서, 결과에 따른 이후 Submission의 실행 여부등을 정의
- 조회(Select) 용도의 통신에 사용할 것을 권장
Script
- 업무로직 구성
- 글로벌 스크립트 정의
- 컴포넌트의 이벤트 함수 정의
Body
- Design 탭에서 그리는 화면 UI 정보
- 컴포넌트 배치 및 구성
- 각 컴포넌트 속성
브라우저 호출
XML파일을 WebSquare5 엔진이 HTML로 변환하여 브라우저에 표시함
브라우저에서 WebSquare5로 개발한 화면을 요청 ->
서버 쪽의 Websquare.html 파일이 제일 먼저 호출됨 ->
WebSquare5 Engine이 구동 되어 해당 화면을 HTML로 변환하여 브라우저에 표현
스크립트
<initScript>
config.xml 파일을 설정하여 등록 할 수 있다. 페이지 로딩 직후 실행되며 scwin.onpageload 스크립트 이전에 실행 된다
<initScript value="true"/>
...
<wframe>
<mode value="sync"/>
<scope value="true"/>
<initScript value="true">
<![CDATA[
alert("initScript");
]]>
</initScript>
</wframe><postScript>
config.xml 파일을 설정하여 등록 할 수 있다. 페이지 로딩 시 scwin.onpageload 스크립트가 실행된 후에 실행 된다
<initScript value="true"/>
<postScript value="true"/>
...
<wframe>
<mode value="sync"/>
<scope value="true"/>
<initScript value="true">
<![CDATA[5. Page 51
alert("initScript");
]]>
</initScript>
<postScript value="true">
<![CDATA[
alert("postScript");
]]>
</postScript>
</wframe>스크립트 실행 순서
Scope 설정
Wframe의 Scope 기능을 사용하기 위해서는 아래의 설정이 필요함
scriptPrecedence
Scope 기능을 사용할 경우 스크립트 실행 순서에 따라 스크립트가 동작해야 한다. 이를 보장하기 위해 config.xml 파일에서 <scriptPrecedence> 항목을 아래와 같이 설정한다
<scriptPrecedence value="true"/>strictMode
Scope 기능을 사용할 경우, 각 화면은 독립적으로 동작하며 객체의 직접 참조는 WFrame 내에서만 가능하다. strictMode는 메인 화면에 내부적으로 WFrame을 씌우는 기능이다. config.xml 파일에 설정을 추가한다.
<strictMode value="true" id="mainFrame용WFrameID"/>
참고 (JavaScript "with"문)
WFrame의 scope 기능은 JavaScript의 "with"문을 사용하여 구현하였다."with"문은 지정한 객체 내에 있는 자원에 빨리 접근할 수 있다.
postDrawmode
다중 WFrame 구조를 사용하는 경우 필요.
<postDrawMode value="synchronous"></postDrawMode>SPA Variable
각 화면 파일의 스크립트를 해당 WFrame 내에서만 실행하기 위해서는 스크립트 앞에 변수를 추가해야 한다. 이 변수를 config.xml에 등록한다. 기본 값은 scwin이다
lazy="false"
화면 파일(XML)을 스크립트 실행 순서에 따라 로딩하기 위해 필요한 설정으로, 각 화면 파일에서 설정한다.(default 설정)
mode="sync", scope="true"
- mode="sync" : 다중 WFrame 구조를 사용하는 경우 필요하다.
- scope="true" : WFrame에 포함된 컴포넌트 및 스크립트의 유효 범위를 제한하기 위해 필요하다.
config.xml 파일에 설정 해준다
<wframe>
<mode value="sync"/>
<scope value="true"/>
</wframe>WFrame 간의 화면 참조
주요 API
자식 -> 부모 ($p.parent();)
$p.parent().$p.parent().input1.setValue("test");
형제
$p.parent().$p.parent().wframe2.getWindow().wframe2-2.getWindow().scwin.test1();
부모 -> 자식(wframe.getWindow();)
wframe1.getWindow().wframe1-1.getWindow().input1.getValue();
WFrame 생성 옵션(dataObject)전달
WFrame 생성 시 dataObject 속성을 통해 데이터를 전달할 수 있고, 호출된 페이지는 $p.getParameter로 해당 데이터를 참조 할 수 있다.
var options = {
id: "popup1",
type: "browser",
width: "230px",
height: "250px",
top: "130px",
left: "200px",
popupName: "openPopup1",
modal: true,
useIFrame: useIFrame,
resizable: true,
status: true,
menubar: false,
scrollbars: false,
title: false,
dataObject: dataObj
};
$p.openPopup("/popup.xml", options);설정 방법
dataObject는 크게 type, name, data 속성으로 구성되며, 모든 속성이 존재해야 정상 동작한다.
dataObject 예시
var dataObject = {
"type": "json",
"name": "dataObject",76 파트 II. 동작
"data": {
"param1": "test",
"param2": {
"param22": "test2"
},
"callback": "$p.parent().scwin.windowContainer1_callback"
}
}직접 설정
JSON.stringify를 통해 변환된 값을 dataObject로 그대로 설정하면 된다.
단, 각 속성을 반드시 큰 따옴표로 감싸야 한다. 그렇지 않을 경우 JSON.parse 시에 오류가 발생한다.
<w2:wframe id="wframe1" src="wframe1.xml"
dataObject='{"type":"json",
"name":"dataObject",
"data":{"param1":"test","param2":{"param22":"test2"},
"callback":"$p.parent().scwin.wframe1_callback"}}'/>setDataObject 를 통해 동적으로 설정
wframe1.setDataObject(dataObject); 호출하여 데이터를 설정한 후 $p.getParameter를 통해 해당 데이터를 가져올 수 있다.
