코드 구조

다음은 WebSquare5로 생성되는 XML 코드와 일반적인 HTML 코드 구조를 비교한 것입니다.

스크립트

scwin.onpageload

onpageload는 WebSquare Page 파일 생성 시 자동 생성되는 이벤트입니다. Script 탭에서 onpageload onpageunload 이벤트를 정의할 수 있으며, onpageload 이벤트는 페이지 로딩 후 실행됩니다.

scwin.onbeforepageunload

onbeforepageunload 이벤트는 WebSquare 페이지를 닫을 경우, 페이지가 닫히기 전 해당 페이지의 body 부분에서 발생합니다. onbeforepageunload 이벤트는 Outline 뷰의 Design 탭에서 Body를 우클릭하여 추가할 수 있습니다.

<initScript>

아래와 같이 client.config.xml 파일을 설정하여 initScript를 등록할 수 있습니다. 페이지 로딩 직후 실행되며 scwin.onpageload 스크립트 이전에 실행됩니다.

<postScript>

아래와 같이 client.config.xml 파일을 설정하여 postScript를 등록할 수 있습니다. postScript는 페이지 로딩 시 scwin.onpageload 스크립트가 실행된 후에 실행됩니다.

스크립트 실행 순서

Scope 기능 사용 시 스크립트는 아래의 순서로 동작합니다.

1. 외부 JS 파일

2. 로컬 스크립트

3. <initScript>

4. onpageload

5. <postScript>

메인 페이지가 WFrame을 포함하는 경우, 실행 순서는 아래와 같습니다.

WFrame이 중첩된 경우

메인 화면이 WFrame을 중첩 포함하고 있는 경우, 스크립트 수행 순서는 아래와 같습니다.

위의 그림의 순서를 표로 나타내면 아래와 같습니다.

onpageload 발생 순서

onpageload, initScript, postScript 발생 순서

Scope 기능 미적용 시

참고로 Scope 기능을 사용하지 않는 경우, 스크립트 수행 순서는 아래와 같습니다.

1. 외부 JS 파일:

   1. PageInherit 컴포넌트의 외부 JS 파일 로딩.

   2. 메인 페이지의 외부 JS 파일 로딩.

   3. WFrame 컴포넌트의 외부 JS 파일 로딩.

2. 메인 페이지:

   1. 메인 페이지의 initScript (config.xml 파일에 정의된 JS 파일.)

   2. 메인 페이지의 <script> 영역에 정의된 스크립트.

   3. 메인 페이지의 onpageload 이벤트 (화면의 <script> 영역에 정의.)

3. WFrame 컴포넌트:

   1. WFrame 컴포넌트의 initScript (config.xml 파일에 정의된 JS 파일.)

   2. WFrame 컴포넌트의 <script> 영역에 정의된 스크립트.

   3. WFrame 컴포넌트의 onpageload 이벤트 (화면의 <script> 영역에 정의.)

4. postScript:

   1. WFrame 컴포넌트의 postScript (config.xml 파일에 정의된 JS 파일.)

   2. 메인 페이지의 postScript (config.xml 파일에 정의된 JS 파일.)

W-Pack (JS 변환)

웹스퀘어5는 화면 소스를 JavaScript로 빌드할 수 있는 W-Pack을 제공합니다. 스튜디오에서 개발한 화면 파일은 XML 형식으로 생성되며, W-Pack은 이를 JavaScript 파일로 변환합니다.

파일 크기 감소

압축 및 최소화(Minify) 기능을 제공하여, 기존 XML 형식과 비교하여 파일 크기가 감소되었습니다.

보안성 개선

난독화(Obfuscation)를 통해 소스 코드의 보안성을 높였습니다.

속도 개선

웹 환경에 최적화된 JS 파일은 XML과 비교하여 로딩 시간이 짧고 메모리 사용량이 적어, 웹스퀘어 엔진은 JS 파일을 이용하여 더욱 빨리 화면을 브라우저에 그릴 수 있습니다.

XML 화면 파일은 JS 파일로 변환되어 /WebContent/_wpack_/ 폴더 아래에 저장됩니다. 화면 파일 개발에 사용한 공통 리소스도 JS 파일로 변환되어 /WebContent/_wpack_/cm/ 폴더 아래에 저장됩니다.

브라우저 호출

WebSquare Studio에서 작성한 화면은 XML 파일로 생성되며, W-Pack에 의해 JS 파일로 변환되며, 브라우저는 XML 파일을 표시하나 화면을 표시할 때 실제로 사용하는 파일은 JS 파일입니다.

WebSquare5로 개발한 화면의 브라우저 호출 순서는 아래와 같습니다.

1. 브라우저에서 화면을 호출합니다.

2. 서버 쪽 WebSquare5 엔진의 websquare.html 파일이 호출됩니다.

3. WebSquare5 엔진이 구동됩니다.

4. 화면에 해당하는 XML 파일을 URL로 호출합니다.

5. W-Pack에 의해 변환된 JS 파일이 로딩됩니다.

6. 해당 화면이 브라우저에 표시됩니다.

브라우저에는 호출한 화면의 XML 파일 명이 표시됩니다.

실제 브라우저에 구동되는 파일은 아래와 같이 JS 파일입니다.

웹표준 호환성

비표준 태그 처리

컴포넌트 별로 사용자 정의 attribute를 사용하는 경우, w3c validator에서 오류가 검출됩니다. client.config.xml 설정 파일에 <dataPrefix> 항목을 아래와 같이 설정하면 "data-" prefix가 추가되어 오류가 발생하지 않습니다.

$r_title(설정 예)
<WebSquare>
    <dataPrefix value="true" />
</WebSquare>

$r_title(적용 전)
<th removeborderstyle="false" or_wd="70" inputtype="select" style="text-align: center; position: static;" id="grid1_column1" value="" blockselect="false" displaymode="label" datatype="" customformatter="aaaa" alloption="" chooseoption="" ref="" onchangefunction="doTest" colindex="0" role="gridcell" class="gridHeaderTDDefault gridHeaderTDDefault_data grid1_header__column0" col_id="column1" header_id="column1">
...
</th>

$r_title(적용 후)
<th data-or_wd="70" data-inputtype="select" style="text-align: center; position: static;" id="grid1_column1" data-value="" data-datatype="" data-onchangefunction="doTest"  data-colindex="0" class="gridHeaderTDDefault gridHeaderTDDefault_data grid1_header__column0" data-col_id="column1" data-header_id="column1">
...
</th>

GridView의 <nobr> 태그

GridView에서 텍스트 데이터를 출력할 경우 <nobr> 태그로 출력됩니다. <nobr> 태그는 비권장 태그입니다. client.config.xml 설정 파일에 <gridView> – <dataTag> 항목을 아래와 같이 설정하여, <nobr> 태그 대신 <span> 태그로 출력하십시오.

$r_title(설정 예)

<WebSquare>
    <gridView>
        <dataTag value="span" />
    </gridView>
</WebSquare>

XML의 namespace 제거

client.config.xml 설정 파일에 <removeXmlNameSpace> 항목을 아래와 같이 설정하면, XML 관련 namespace를 제거할 수 있습니다.

$r_title(설정 예)
<WebSquare>
        <removeXmlNameSpace value="true" />
</WebSquare>

Scope

Scope 기능을 사용할 경우 개발자는 웹페이지 전체를 하나의 Single Page로 쉽게 구현할 수 있습니다. 보통의 경우 IFrame을 프레임 단위로 사용하지만, IFrame은 매번 사용할 때마다 브라우저가 다시 로딩되기 때문에 메모리 부하가 증가하는 단점이 있었습니다. 독립된 단위로 동작하는 WFrame은 기존의 IFrame을 대체할 수 있으며, 개발자는 IFrame 사용을 최소화하여 웹 어플리케이션의 전반적인 성능을 개선할 수 있습니다.

주요 API

$w.top vs. $p.top

$w.parent vs. $p.parent

windowContainer.getWindow

dataObject를 통한 파라미터 전달

$p.openPopup()

openPopup() 함수를 이용하여 WFrame 팝업을 생성할 때 dataObject를 통해 파라미터를 전달할 수 있습니다. 생성된 팝업의 src 페이지는 $p.getParameter() 함수를를 통해 전달받은 파라미터 확인 가능합니다.

$r_title(openPopup() 함수로 팝업을 생성할 때 파라미터 전달 (예시))
requires("uiplugin.popup");

var rowJSON = {
  "Product Info": {
    "Origin": "Korea",
    "Manufacturer": "Inswave",
    "Type": "Software"
  },
  "Region": "Seoul",
  "Carrier": true
};

var dataObject = {
  "type": "json",
  "name": "param",
  "data": rowJSON
};

var options = {
  id: "popup1",
  type: "wframePopup",
  height: "300px",
  width: "300px",
  dataObject: dataObject
};

$p.openPopup("src.xml", options);

또한 팝업에 설정된 페이지 정보는 아래 방법으로 확인할 수 있습니다.

$r_title(팝업에서 전달받은 파라미터 확인 (예시 1))
var paramData = $p.getParameter("param");
var data = JSON.stringify(paramData);
alert(data);

$r_title(팝업에서 전달받은 파라미터 확인 (예시 2))
var paramData = $p.getParameter("param");
alert("param : " + paramData.Region);

TabControl

addTab() 함수로 추가하는 탭에 dataObject를 통해 파라미터를 전달할 수 있습니다. 생성된 탭에서는 $p.getParameter() 함수를 통해 전달받은 파라미터 확인 가능합니다.

$r_title(addTab() 함수로 탭을 생성할 때 파라미터 전달 (예시))
var rowJSON = {
  "Product Info": {
    "Origin": "Korea",
    "Manufacturer": "Inswave",
    "Type": "Software"
  },
  "Region": "Seoul",
  "Carrier": true
};

var dataObject = {
  "type": "json",
  "name": "param",
  "data": rowJSON
};

tabControl1.addTab("tab_01", {
  "label": "New",
  "title": "dataObject",
  "openAction": "exist",
  "closable": "true"
}, {
  "src": "src.xml",
  "frameMode": "wframePreload",
  "scope": "true",
  "dataObject": dataObject
});

$r_title(탭에서 전달받은 파라미터 확인 (예시))
var paramData = $p.getParameter("param");
var data = JSON.stringify(paramData);
alert(data);

WindowContainer

createWindow() 함수를 통해 추가하는 윈도우에 dataObject를 통해 파라미터를 전달할 수 있습니다. 생성된 윈도우에서는 $p.getParameter() 함수를 통해 전달받은 파라미터 확인 가능합니다.

$r_title(createWindow() 함수로 윈도우를 생성할 때 파라미터 전달 (예시))
var rowJSON = {
  "Product Info": {
    "Origin": "Korea",
    "Manufacturer": "Inswave",
    "Type": "Software"
  },
  "Region": "Seoul",
  "Carrier": true
};

var dataObject = {
  "type": "json",
  "name": "param",
  "data": rowJSON
};

var obj = {
  "title": "Test",
  "windowID": "001",
  "frameMode": "wframe",
  "src": "src.xml",
  "dataObject": dataObject
};

windowContainer1.createWindow(obj);

$r_title(윈도우에서 전달받은 파라미터 확인 (예시))
var paramData = $p.getParameter("param");
var data = JSON.stringify(paramData);
alert(data);

WFrame

WFrame에 setSrc() 함수를 이용하여 페이지를 설정할 때 dataObject를 통해 파라미터를 전달할 수 있습니다. 생성된 WFrame의 src 페이지는 $p.getParameter() 함수를를 통해 전달받은 파라미터 확인 가능합니다.

$r_title(setSrc() 함수로 페이지를 설정할 때 파라미터 전달 (예시))
var rowJSON = {
  "Product Info": {
    "Origin": "Korea",
    "Manufacturer": "Inswave",
    "Type": "Software"
  },
  "Region": "Seoul",
  "Carrier": true
};

var dataObject = {
  "type": "json",
  "name": "param",
  "data": rowJSON
};

var obj = {
  "dataObject": dataObject
};

wframe1.setSrc("src.xml", obj);

또한 WFrame에 설정된 페이지 정보는 아래 방법으로 확인할 수 있습니다.

$r_title(WFrame에서 전달받은 파라미터 확인 (예시 1))
var paramData = $p.getParameter("param");
var data = JSON.stringify(paramData);
alert(data);

$r_title(WFrame에서 전달받은 파라미터 확인 (예시 2))
var param = $p.getParameter("param");
alert("param : " + param.userId);