FloatingLayer

닫기 버튼 표시

useCloseButton="true" 설정을 적용하면 우측 상단에 닫기 버튼을 표시할 수 있습니다.

프레임 내부에서만 이동 허용

layerMoveType 속성을 사용하여 FloatingLayer를 드래깅할 때의 동작을 지정할 수 있습니다. layerMoveType="overflow" 속성 설정을 적용하면 FloatingLayer를 프레임 외부로도 이동할 수 있고, layerMoveType="restrict" 속성 설정을 적용하면 프레임 내부에서만 FloatingLayer를 드래깅하여 이동할 수 있습니다.

Generator

Group

내부 컴포넌트 비활성화

내부 컴포넌트 전체의 일괄 비활성화 및 활성화

setDisabled(true) 함수로 내부 컴포넌트들을 모두 비활성화할 수 있습니다. 이후 setDisabled(false) 함수를 실행하여 내부 컴포넌트들이 다시 활성화됩니다.

내부 컴포넌트의 비활성화 상태 유지

setDisabled(true) 함수로 내부 컴포넌트들을 비활성화한 후, setDisabled(false) 함수를 실행하여 내부 컴포넌트들을 다시 활성화 할 경우, 초기에 비활성화 상태인 컴포넌트는 비활성화 상태를 유지할 수 있습니다. 이 경우 keepDisabled="true" 속성 설정을 추가하십시오.

이벤트

onmouseleave & onmouseenter

스타일링

여러 컴포넌트를 Group으로 감싼 후에, Group에 일괄적으로 스타일링을 적용할 수 있습니다.

ScrollView

SlideHide

Switch

TabControl

탭 생성 (addTab())

아래 예제와 같이 addTab() 함수를 사용하여 탭을 생성할 수 있습니다.

$r_title(addTab() 함수를 사용한 탭 생성)
tabControl1.addTab("tab_01", {
    "label": "New",
    "title": "dataObject",
    "openAction": "exist",
    "closable": "true"
}, {
    "src": "src.xml",
    "frameMode": "wframePreload", 
    "scope" : "true"
});

탭 프레임 종류 (frameMode)

addTab() 함수를 사용하여 탭을 생성할 경우 frameMode 옵션을 설정하여 탭 프레임 종류를 설정하십시오. 단, wframe 혹은 wframePreload 타입의 탭을 생성할 경우 scope 옵션을 "true"로 설정하십시오.

$r_title(사용 예)
// 아래는 단순 예제입니다 
// TabControl 내에서는 동일한 frameMode 사용을 권장합니다.

<w2:tabControl id="tabControl1">
	<w2:tabs label="tab_iframe" id="tabs1"></w2:tabs>
	<w2:tabs label="tab_wframe" id="tabs2"></w2:tabs>
	<w2:tabs label="tab_wframePreload" id="tabs3"></w2:tabs>
		<w2:content id="content1" alwaysDraw="false" src="sub.xml" 
			frameMode="iframe"></w2:content>
		<w2:content id="content2" alwaysDraw="false" src="sub2.xml" 
			frameMode="wframe" scope="true"></w2:content>
		<w2:content id="content3" alwaysDraw="false" src="sub3.xml" 
			frameMode="wframePreload" scope="true"></w2:content>
</w2:tabControl>

부모 WFrame의 Scope를 상속하는 탭으로 생성

WFrame을 포함하는 화면을 wframe 타입의 탭으로 생성할 경우, 탭이 포함한 WFrame의 소스(src) 화면에서 가장 가까운 부모의 WFrame(즉, wframe 타입의 탭)의 객체 및 영역에 접근하도록 허용할 수 있습니다.

addTab() 함수로 wframe 타입의 탭을 생성할 때 scopeInherit 옵션을 아래와 같이 설정하십시오.

• "none" (기본 값) : 부모 영역의 객체를 자동으로 참조하지 않고, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

• "api" : 부모 영역의 객체를 자동으로 참조하지 않지만, $p.main() 함수는 부모 영역에 접근.

• "all" : 부모 영역의 객체를 자동으로 참조하고, $p.main() 함수도 부모 영역에 접근.

• "component" : 부모 영역의 객체를 자동으로 참조하지만, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

$r_title(사용 예)
var contOpt = {
    frameMode: "wframe",
    src: "source.xml",
    scopeInherit: "all"
};
tabControl1.addTab(tabId, tabOpt, contOpt);

탭 생성 시 dataObject를 통한 파라미터 전달

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);

탭의 src 변경

content에 지정된 페이지의 경로를 동적으로 바꿀 경우 getFrame API를 이용하십시오.

$r_title(예제)
tabControl1.getFrame("tab1").setSrc(
        "/ui/tab2.xml", {
            "dataObject": {
                "type": "json",
                "name": "pageParam",
                "data": {
                    "name": "WebSquare",
                    "addr": "서울시"
                }
            }
        );

탭 크기에 따른 적응형 디자인 적용

addTab() 함수를 사용하여 탭을 생성할 때 탭의 프레임 모드(frameMode)가 WFrame이고 탭의 소스(src) 화면이 적응형 디자인을 사용하는 경우, adaptiveFrame 옵션을 true로 지정하면 탭의 크기에 따라 소스 화면에 적응형 디자인을 적용할 수 있습니다. 즉, 탭의 크기에 따라 탭에 포함된 화면을 적응형으로 표시할 수 있습니다. 별도로 adaptiveFrame 옵션을 설정하지 않을 경우, 탭에 포함된 화면은 브라우저 크기에 따라 적응형으로 표시됩니다.

$r_title(사용 예)
tabControl1.addTab(1, {
    label: "Adaptive Tab",
    title: "Adaptive Tab",
    openAction: "exist",
    closable: "true"
}, {
    "src": "adaptive_adaptiveThreshold_TableLayout.xml",
    "frameMode": "wframe",
    "adaptiveFrame": "true"
});

다음은 동일한 너비의 TabControl에 적응형 디자인을 사용하는 소스(src) 화면으로 탭을 생성한 경우입니다. tabControl1에만 "adaptiveFrame": "true" 옵션 설정을 적용했고, 이 경우, tabControl1에 생성된 탭만 소스(src) 화면을 적응형 디자인으로 표시하는 것을 확인할 수 있습니다.

탭 생성 후 서브미션 상태 창 표시

상태창 표시

WFrame으로 생성한 탭의 src 화면이 서브미션을 포함할 경우, 서브미션 실행 시 표시되는 상태창을 WFrame 탭 내부에 표시할 수 있습니다.

상태창 소스(src) 변경

config.xml 파일의 설정을 변경하여 해당 상태창의 소스를 변경할 수도 있습니다.

이벤트 로딩 순서

Scope 참조

WFrame으로 생성한 탭은 getWindow와 $p.parent API를 통해 참조할 수 있습니다.

탭이 여러 개인 경우

탭 위치 지정 (tabPosition)

탭이 여러 개인 경우,화면 디자인에 따라 tabPosition 속성을 통해 탭을 표시할 위치를 설정하십시오.

스크롤 및 탭목록 버튼 표시 (tabScroll="true")

탭을 여러 개 생성할 경우 tabScroll="true" 설정을 추가하면 상단에 스크롤과 탭 목록을 표시할 수 있습니다.

탭 스크롤 버튼을 통한 탭 활성화 (changeActiveTab="true")

tabScroll="true" 설정을 통해 탭 스크롤 버튼을 표시할 경우, 스크롤 버튼을 클릭하면 탭 목록만 스크롤 됩니다. 이 경우 changeActiveTab="true" 설정을 추가할 경우 스크롤 버튼을 통해 선택한 탭을 활성화할 수 있습니다.

탭을 닫을 경우 남은 탭을 자동으로 앞으로 이동 (tabScrollAuto="true")

또한 tabScrollAuto="true" 설정을 추가할 경우 마지막 탭 닫은 자리를 앞의 탭으로 채워서 상단에 최대한 많은 탭을 표시할 수 있습니다.

현재 선택된 탭의 선택 상태를 툴팁으로 표시

useTabTitleSelected="true" 설정을 추가할 경우, 선택된 탭의 툴팁으로 선택 상태를 표시하는 문구("선택됨" / "selected")를 추가할 수 있습니다.

자식 탭의 비활성화 상태를 유지

keepDisabledTab="true" 설정을 추가할 경우 부모 탭의 활성화 여부에 상관없이 자식 탭의 비활성화 상태를 유지할 수 있습니다.

즉, 부모 TabControl의 탭이 또 다른 TabControl을 포함한 경우, 자식 TabControl의 탭 비활성화 상태를 부모 TabControl 탭의 활성화 상태에 상관없이 유지할 있습니다.

탭 닫기 버튼 표시

closable="true" 설정을 추가하면 사용자가 마우스를 가져다 댈 때 탭에 닫기 버튼을 표시하여 사용자가 탭을 닫을 수 있도록 할 수 있습니다.

추가로 alwaysShowCloseBtn="true" 설정까지 적용하면 탭에 마우스를 가져다 대지 않아도 항상 모든 탭에 닫기 버튼을 표시할 수 있습니다.

팝업

지정한 프레임 영역에만 모달 팝업 표시

frameMode="wframe" 혹은 frameMode="wframePreload"로 생성한 WFrame 탭에서 $open.popUp() 함수를 통해 팝업을 생성할 경우, 팝업을 표시한 프레임을 지정할 수 있습니다. $p.open.popUp() 함수의 options.frameModal 옵션을 사용하십시오.

부모 – 자식 팝업 닫기

$p.openPopup() 함수를 사용하여 탭 화면에서 팝업을 생성하고, 부모 팝업과 해당 부모에 속하는 모든 자식 팝업을 함께 닫을 수 있습니다.

1. 단, WFrame 탭에서만 동작합니다. frameMode="wframe" 혹은 frameMode="wframePreload"로 탭을 생성하십시오.

2. TabControl의 frameModal 속성을 "true"로 설정하십시오.

주요 API

TableLayout

그리기

적응형 웹

DataCollection 바인딩 및 컴포넌트 자동 추가

1. TableLayout을 생성합니다.

2. 아래와 같이 DataMap을 생성합니다.

3. Output 탭의 DataMap 키를 Design 탭 상의 TableLayout 셀로 드래깅합니다.

4. 아래와 같은 팝업 창이 나오는지 확인합니다.

5. DataMap을 바인딩할 컴포넌트 종류를 선택합니다.

6. 아래는 각 셀에 컴포넌트를 바인딩한 모습입니다. 컴포넌트 키 값(Name, Nationality, 등)이 자동 입력되며, DataMap의 데이터가 자동 표시됩니다.

WidgetContainer

위젯의 기본 구조는 아래와 같습니다. content 영역은 WFrame으로 구성되며 위젯을 추가할 때 지정한 XML 페이지(src 옵션)가 표시됩니다.

좌표계

WidgetContainer는 cols 및 unitHeight 속성을 기준으로 2차원 좌표계를 생성하고, 모든 위젯의 위치 및 크기는 좌표계를 기준으로 결정됩니다.

위젯 생성

위젯은 WidgetContainer의 addWidgets() 함수를 통해서만 동적으로 생성할 수 있습니다. (XML 상에서 위젯을 추가할 수 없습니다.)

관련 함수

addWidgets( optionsArr ) : 생성하려는 위젯을 options 객체 혹은 배열로 지정하여 해당 위젯을 생성.

$r_title(사용 예)
widgetContainer.addWidgets({
    id: "001",
    title: "Widget_Added",
    src : "widget.xml",
    scope: true,
    x: 0,
    y: 0,
    unitWidth: 1,
    unitHeight: 1
});

CSS 클래스를 적용하여 위젯 생성

addWidgets() 함수를 통해 위젯을 추가할 때 CSS 클래스를 정의하고 titleClass 속성에 정의한 CSS 클래스를 지정하여 각 위젯 별로 서로 다른 스타일을 적용할 수 있습니다.

$r_title(타이틀 스타일 적용 (예))
<head>
...
<script type="text/javascript"><![CDATA[
	widgetContainer1.addWidgets({
        	title : "위젯  0",
			...
			titleClass : "w2widget_red",
	});

	widgetContainer1.addWidgets({
		title : "위젯  1",
		...
		titleClass : "w2widget_red",
	});

	widgetContainer1.addWidgets({
		title : "위젯  2",
		...
		titleClass : "w2widget_red",
	});

 ]]></script>
</head>
<style>
	.w2widget_red{
		background-color: red;
		height: 50px;
		font-size: 30px;
		color: white;
	}
	
	.w2widget_orange{
		background-color: orange;
	}
	
	.w2widget_green{
		background-color: green;
	}
</style>

타이틀 아이콘 이미지를 추가하여 위젯 생성

addWidgets() 함수를 사용하여 위젯을 추가할 때 위젯의 타이틀 아이콘 이미지를 동적으로 추가할 수 있습니다.

$r_title(클래스 지정 (예))
.w2widget_title_imageIcon1 {
    background-image: url("http://static.image.net/image_on.gif");
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

$r_title(사용 예)
ui_wgc_main.addWidgets({
    id: "widget" + scwin.count,
    title: "위젯" + scwin.count,
    src: "WidgetContainer_sub1.xml",
    scope: true,
    x: 0,
    y: 0,
    unitWidth: 1,
    unitHeight: 1,
    userIconClass: "w2widget_title_imageIcon1" // 타이틀 아이콘 이미지 
});

위젯의 타이틀 바를 표시하거나 숨긴 채로 위젯 생성

아래의 API를 사용하여 WidgetContainer에 포함된 전체 및 개별 위젯의 타이틀 표시 여부를 제어할 수 있습니다.

$r_title(개별 위젯 정적 제어)
addWidgets([{
    ...
    hasTitleBar: false,
    ...
}]);

$r_title(개별 위젯 동적 제어)
showTitle();

$r_title(전체 위젯 동적 제어)



enableWidgetTitle();

부모 WFrame의 Scope를 상속하는 위젯으로 생성

WFrame을 포함하는 화면을 WFrame 타입의 위젯으로 생성할 경우, 위젯이 포함한 WFrame의 소스(src) 화면에서 가장 가까운 부모의 WFrame(즉, WFrame 위젯)의 객체 및 영역에 접근하도록 허용할 수 있습니다.

addWidgets() 함수로 위젯을 생성할 때 options.scopeInherit 옵션을 아래와 같이 설정하십시오.

• "none" (기본 값) : 부모 영역의 객체를 자동으로 참조하지 않고, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

• "api" : 부모 영역의 객체를 자동으로 참조하지 않지만, $p.main() 함수는 부모 영역에 접근.

• "all" : 부모 영역의 객체를 자동으로 참조하고, $p.main() 함수도 부모 영역에 접근.

• "component" : 부모 영역의 객체를 자동으로 참조하지만, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

$r_title(사용 예)
var options = {
    id: "widget1",
    title: "widget1",
    titleClass: "w2widget_blue",
    src: null,
    scope: true,
    x: 0,
    y: 1,
    unitWidth: 1,
    unitHeight: 1,
    scopeInherit: "all"
};

widgetContainer1.addWidgets(options);

위젯 생성 후 서브미션 상태 창 표시

addWidgets() 함수로 생성한 WFrame 위젯의 src 화면이 서브미션을 포함할 경우, 서브미션 실행 시 표시되는 상태창을 위젯 내부에 표시할 수 있습니다.

위젯 버튼

위젯 상단의 버튼을 잉요하여 위젯을 이동하거나 크기를 변경할 수 있습니다.

Import, Export, 삭제

전체 위젯

importWidgets() & exportWidgets()

현재 존재하는 위젯 전체를 export하거나, 새로운 위젯 여러 개를 추가할 수 있습니다.

관련 함수

importWidgets(): 현재 존재하지 않는 여러 개의 위젯을 WidgetContainer에 추가.

exportWidgets(): 현재 WidgetContainer에 포함된 모든 위젯을 내보냄.

$r_title(export)

var jsonArr = widgetContainer1.exportWidgets();

exportWidgets() & removeWidgetsAll()

exportWidgets(); 및 removeWidgetsAll(); 함수를 사용하여 현재 생성된 모든 위젯을 반환하거나 삭제할 수 있습니다.

개별 위젯

기존에 존재하는 위젯 한 개를 export하거나 역시 이미 존재하는 위젯 한 개를 import할 수도 있습니다.

관련 함수

exportWidget() : 해당 ID의 위젯을 내보냄.

importWidget(): 현재 존재하는 위젯 ID와 위젯의 정보를 JSON으로 받아 WidgetContainer에 추가.

$r_title(사용 예)
widgetContainer.importWidget('widget1',  { 
	id: 'widget1',
	src:"widget.xml",
	scope:true,
	x:0,
	y:0,
	title:"개별 import",
	}
);

접근

개별 접근

관련 함수

getWidgetById() : ID에 해당하는 위젯을 반환. (존재하지 않은 경우 null을 반환.)

getWidgetByTitle() : Title에 해당하는 위젯을 반환. (존재하지 않은 경우 null을 반환.)

$r_title(사용 예)
var widget0 = widgetContainer1.getWidgetById('widget0');

$r_title(사용 예)
var widget0 = widgetContainer1.getWidgetByTitle('위젯0');

위젯 내부 객체에 접근

아래의 위젯 함수를 사용하여 위젯 내부 객체에 접근할 수 있습니다.

관련 함수

setSrc()

getObj()

getObjList()

사용법은 아래와 같습니다.

$r_title(사용 예)

var widget0 = widgetContainer1.getWidgetById('widget0');
widget0.setSrc('other_page.xml');
var myObj = widget0.getObj('myObj');
var objList = widget0.getObjList();
console.log(myObj);
console.log(objList);

상호 참조

WFrame의 scope="true" 설정을 사용할 경우 WidgetContainer 및 포함된 위젯 간의 상호 참조가 가능합니다.

$p.widget() 객체는 위젯을 위한 전용 함수입니다. 위젯으로 사용되는 화면에 대해서만 이 객체가 존재하며 아래 함수를 통해 위젯으로 사용된 화면의 정보를 얻을 수 있습니다.

관련 함수

$p.widget.getWidgetId(): 화면이 위젯으로 사용된 경우 사용된 위젯 ID를 반환.

$p.widget.getWidgetContainerId(): 해당 위젯을 관리하는 WidgetContainer의 ID를 반환.

$p.widget.getWidgetContainer(): 해당 위젯을 관리하는 WidgetContainer 객체를 반환.

if($p.widget) {
        dataMap1.set( "key1" , $p.widget.getWidgetId() );
    } else {
        dataMap1.set( "key1" , "widget아님" );
    }

자주 사용하는 함수

$p: Utility 성격의 기능 제공.

$p.data(): DataCollection을 제어.

아래는 WFrame의 scope="true" 설정을 사용할 때 위젯 내에서 Submission을 실행하는 예제입니다. 즉, $p.xxx 형태의 함수를 사용하십시오. $p.xxx 형태의 함수를 사용하면 메인 영역에서 submission을 탐색합니다.

$r_title(위젯 내부의 Submission 실행 (예))
scwin.startInit = function() {
    $p.executeSubmission("submission1");
};

scwin.submission1_submitdone = function(e) {
    alert('done');
};

scwin.startInit();

위젯 제어

타이틀 텍스트를 동적으로 변경

아래의 함수를 사용하여 위젯 타이틀의 텍스트를 동적으로 변경할 수 있습니다.

관련 함수

getTitle()

setTitle()

$r_title(사용 예)
var widget0 = widgetContainer1.getWidgetByTitle('widget0');
var title = widget0.getTitle();  // 'widget0'
title += '_MODIFIED';
widget0.setTitle(title);  // 'widget0_MODIFIED'

위젯 최대화/최소화

각 위젯의 타이틀을 더블 클릭할 경우 화면이 최대화되거나 최소화됩니다. 단, 고정핀이 활성화된 위젯의 크기는 변경되지 않습니다.

위젯 최대화 금지

preventMaximizeByTitle="true" 속성 설정을 추가하면, 사용자가 타이들을 더블-클릭할 때 위젯이 최대화되는 것을 방지할 수 있습니다.

타이틀 표시 & 이동 & 리사이징

WidgetContainer에 포함된 모든 위젯의 이동 여부를 제어할 수 있습니다.

아래의 API를 사용하여 WidgetContainer에 포함된 전체 및 개별 위젯의 리사이징 허용 여부를 결정할 수 있습니다.

예제

1. 위젯을 추가하기 전 WidgetContainer의 ID를 지정하고, 좌표계를 생성하기 위해 cols와 unitHeightPixel을 정의하십시오.

$r_title(WidgetContainer 정의 (예))
<w2:widgetContainer id="widgetContainer1" minUnitWidth="1" widgetMove="" cols="8" horizontalMargin="0" verticalMargin="0" params="false" widgetResize=""mode="pushpull"threshold="null"style="width:100%;height:100%;margin: 20px;" unitHeightPixel="200"></w2:widgetContainer>

cols="8" & unitHeightPixel="200"인 경우 아래와 같은 좌표계가 생성됩니다.

2. <script> 탭에 아래와 같은 스크립트를 작성하여 위젯을 추가합니다.

$r_title(추가 예)

<script type="text/javascript">
	<![CDATA[
        widgetContainer1.addWidgets({
            	id : "widget0",
                title : "위젯 0",
                src : "widget0.xml",
                scope : true,
                x : 0,
                y : 0,
                unitWidth : 2,
                unitHeight : 1
            });

            widgetContainer1.addWidgets({
            	id : "widget1",
                title : "위젯  1",
                src : null,
                scope : true,
                x : 1,
                y : 1,
                unitWidth : 1,
                unitHeight : 1
            });

            widgetContainer1.addWidgets({
            	id : "widget2",
                title : "위젯  2",
                 src : "widget.xml",
                scope : true,
                x : 3,
                y : 0,
                unitWidth : 2,
                unitHeight : 2
            });
	]]>
</script>

3. 저장 후 브라우저를 갱신하여 위젯이 추가되는지 확인하십시오.

4. 각 위젯 우측 상단의 버튼을 이용하여 아래와 같은 위제 제어 동작이 가능한지 확인합니다.

• 위치 고정

• 최대화/최소화

• 닫기

• 이동 (탭을 클릭하여 드래깅)

• 리사이징 (우측 하단 모서리를 드래깅)

WindowContainer

윈도우 생성

아래 예제와 같이 createWindow() 함수를 사용하여 윈도우를 생성할 수 있습니다.

$r_title(윈도우 생성 예시)
windowContainer1.createWindow({
    "title": "Red",
    "src": "sub_red.xml",
    "windowId": "window1",
    "frameMode": "wframe"
});

윈도우 프레임 종류 (frameMode)

createWindow() 함수를 사용하여 새 창을 생성할 경우 아래와 같이 frameMode 옵션을 통해 새로 지정하는 창의 프레임 종류를 결정할 수 있습니다.

윈도우 생성 및 고정

dataObject 옵션에 JSON 객체를 지정하여 Window 생성시 호출할 페이지의 파라미터를 전달할 수 있습니다. 호출된 페이지는 $p.getParameter()로 반환할 수 있습니다. 아래 예제의 경우 $p.getParameter() 함수를 사용하여 호출된 페이지를 반환할 수 있습니다.

$r_title(동적 Window 생성)
var obj = {
    "title": "wframeWindow1",
    "windowId": "window1",
    "src": "/ui/window1.xml",
    "frameMode": "wframe",
    "dataObject": {
        "type": "json",
        "name": "pageParam",
        "data": {
            "name": "WebSquare",
            "addr": "서울시"
        }
    }
};
windowContainer1.createWindow(obj);

부모 WFrame의 Scope를 상속하는 윈도우로 생성

WFrame을 포함하는 화면을 wframe 윈도우로 생성할 경우, 윈도우가 포함한 WFrame의 소스(src) 화면에서 가장 가까운 부모의 WFrame(즉, wframe 윈도우의) 객체 및 영역에 접근하도록 허용할 수 있습니다.

createWindow() 함수로 wframe 윈도우를 생성할 때 scopeInherit 옵션을 아래와 같이 설정하십시오.

• "none" (기본 값) : 부모 영역의 객체를 자동으로 참조하지 않고, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

• "api" : 부모 영역의 객체를 자동으로 참조하지 않지만, $p.main() 함수는 부모 영역에 접근.

• "all" : 부모 영역의 객체를 자동으로 참조하고, $p.main() 함수도 부모 영역에 접근.

• "component" : 부모 영역의 객체를 자동으로 참조하지만, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

$r_title(사용 예)
var winObj = {
    title: "window",
    src: "source.xml",
    windowTitle: "Title",
    windowId: "001",
    frameMode: "wframe",
    defaultWidth: "400",
    defaultHeight: "300",
    scopeInherit: "all"
}
windowContainer1.createWindow(winObj);

윈도우 기본 크기 지정

createWindow() 함수를 사용하여 윈도우를 생성할 경우, defaultWidth 옵션 및 defaultHeight 옵션을 사용하여 기본 너비 빛 높이를 지정할 수 있습니다.

$r_title(사용 예)
var winObj = {
    ...
    defaultWidth: "600",
    defaultHeight: "300",
    ...
}
windowContainer1.createWindow(winObj);

처음 윈도우를 생성할 경우, 아래와 같이 최대 크기의 윈도우가 생성됩니다.

윈도우 크기 복원 아이콘을 클릭할 경우, 아래와 같이 defaultWidth 및 defaultHeight 옵션으로 지정한 크기로 조정됩니다.

윈도우 크기에 따른 적응형 디자인 적용

createWindow() 함수를 사용하여 팝업을 생성할 때 윈도우의 프레임 모드(frameMode)가 WFrame이고 윈도우의 소스(src) 화면이 적응형 디자인을 사용하는 경우, adaptiveFrame 옵션을 true로 지정하면 윈도우의 크기에 따라 소스 화면에 적응형 디자인을 적용할 수 있습니다. 즉, 윈도우의 크기를 변경할 경우, 윈도우의 크기에 따라 팝업에 포함된 화면을 적응형으로 표시할 수 있습니다. 별도로 adaptiveFrame 옵션을 설정하지 않을 경우, 윈도우에 포함된 화면은 브라우저 크기에 따라 적응형으로 표시됩니다.

$r_title(사용 예)
var winObj = {
    title: "window",
    src: "adaptive_adaptiveThreshold_TableLayout.xml",
    windowTitle: "Title",
    windowId: "001",
    frameMode: "wframe",
    defaultWidth: "400",
    defaultHeight: "300",
    adaptiveFrame: true
}
windowContainer1.createWindow(winObj);

윈도우 생성 시 dataObject를 통한 파라미터 전달

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으로 생성한 윈도우의 src 화면이 서브미션을 포함할 경우, 서브미션 실행 시 표시되는 상태창을 WFrame 탭 내부에 표시할 수 있습니다.

상태창 소스 변경

Config.xml 파일의 <processMsgFrameURL> 항목 설정을 변경하여 해당 상태창의 소스를 변경할 수도 있습니다.

$r_title(config.xml 설정 예)
<WebSquare>
  ...
      <processMsgFrameURL value="/message/processMsg.xml"/> 
  ... 
</WebSquare>

윈도우 표시

정렬 (setArrangeWindows())

setArrangeWindows() 함수를 사용하여 윈도우를 네 가지(vertical, horizontal, cascade, sequential) 방법으로 정렬할 수 있습니다.

$r_title(사용 예)
// (예제 1) 
// 세로로 window1, window3, window2가 하나씩 열림
windowContainer1.setArrangeWindows("vertical", ["window1", "window3", "window2"]);


// (예제 2) 
// 가로로 window2, window1, window3가 하나씩 열림
windowContainer1.setArrangeWindows("horizontal", ["window2", "window1", "window3"]);

자동 정렬 (autoArrange)

WindowContainer에서 여러 개의 윈도우를 정렬해서 표시한 후 특정 윈도우를 닫을 경우, 남아 있는 윈도우를 다시 정렬할 수 있습니다. autoArange 속성을 사용하십시오.

정렬 아이콘 위치 설정 (controlIconPosition)

controlIconPosition 속성을 사용하여 윈도우 정렬 아이콘의 표시 위치를 결정할 수 있습니다. 단, controlIconPosition 속성을 사용할 경우, useNameContainer="true" 설정을 추가해야 합니다.

controlIconPosition

"left" (기본 값) : 스크롤링 화살표는 양 옆에, 정렬 아이콘은 왼쪽에 표시.

"right" : 스크롤링 화살표는 양 옆에, 정렬 아이콘은 오른쪽에 표시.

"allright" : 스크롤링 화살표 모두 오른쪽에, 정렬 아이콘 역시 모두 오른쪽에 표시.

최대 윈도우 수 동적 변경 (setWindowMaxNum())

setWindowMaxNum함수를 이용하면 WindowContainer에서 열 수 있는 최대 윈도우 개수를 동적으로 변경할 수 있습니다.

윈도우를 항상 열린 상태로 유지 (stopMinimizeOnNameLayer)

stopMinimizeOnNameLayer="true" 설정을 적용하면, 네임레이어 클릭에 상관 없이 윈도우를 항상 열린 상태로 유지할 수 있습니다.

윈도우 최대화

WindowContainer에서 생성한 윈도우는 최대화 버튼을 클릭하거나 윈도우 타일을 더블-클릭하여 최대화할 수 있습니다.

윈도우 최소화

WindowContainer에서 생성한 윈도우는 최소화 버튼을 클릭하거나 네임 레이어를 클릭하여 최소화할 수 있습니다.

윈도우 드래깅 시 윈도우 표시 (windowMoveType)

windowMoveType="overflow"인 경우, WindowContainer 밖으로 윈도우를 드래깅 하고 마우스 커서 위치에 따라 윈도우를 표시할 수 있습니다. 혹은, windowMoveType="restrict" 설정을 사용할 경우, WindowContainer 내에서만 윈도우를 드래깅할 수 있습니다.

현재 선택된 윈도우 구분

w2window_selected 스타일 클래스를 지정하여 선택된 윈도우를 나머지 윈도우로부터 구분하는 스타일을 지정할 수 있습니다.

$r_title(사용 예)
<style>.w2window_selected {border: solid 2px green;}</style>

위의 스타일을 적용하면 아래와 같이 선택한 윈도우가 초록색 선으로 구분됩니다.

네임 레이어

윈도우 순서 변경 (nameLayerMove)

윈도우 고정 (nameLayerMove & nameLayerRearrange)

nameLayerMove="true" 및 nameLayerRearrange="true" 설정을 추가할 경우, 핀 버튼(useFixButton="true")으로 고정한 윈도우를 네임레이어의 맨 앞으로 이동할 수 있습니다.

윈도우를 고정하지 않은 상태에서는 아래와 같이 "aaa" "bbb" "ccc" 순서로 윈도우 타이틀이 표시됩니다.

위의 사태에서 "bbb" 윈도우를 핀으로 고정하면 "bbb" 윈도우 타이틀이 네임레이어 상에서 제일 앞으로 이동합니다.

스크롤 버튼을 통한 윈도우 활성화 (changeActiveWindow="true")

changeActiveWindow="true" 속성 설정을 적용하면 네임 레이어 상의 스크롤 버튼을 클릭하여 윈도우를 선택하고 활성화할 수 있습니다.

윈도우 순서 변경

setWindowTabOrder() 함수를 사용하여 네임 레이어 상의 윈도우 탭 순서를 변경할 수 있습니다.

$r_title(사용 예)
// 윈도우 탭의 순서를 인덱스가 2, 1, 0 차례로 변경.
wdc_main.setWindowTabOrder([2,1,0]);

윈도우 닫기

전체 윈도우 닫기

특정 윈도우를 제외한 나머지 윈도우 닫기 (closeOthers())

closeOthers() 함수를 사용하여 현재 활성화된 윈도우, 혹은 주어진 windowID나 uniqueID에 해당하는 윈도우를 제외한 모든 윈도우를 닫을 수 있습니다.

윈도우 닫기 방지

useFixButton="true" 설정을 사용할 경우 네임 레이어에 표시되는 각 창의 이름 옆에 창 닫기 방지 버튼을 표시할 수 있습니다.

또한 useFixbutton="true"와 closeType="noneFixedWindow" 속성과 함께 사용할 경우, 전체 창닫기 버튼을 통해 창 닫는 방법을 설정할 수 있습니다. 즉, 전체 창닫기 버튼을 클릭해도 닫히지 않을 창을 창 닫기 받지 버튼으로 설정할 수 있습니다.

fixWindow() 및 unfixWindow()함수를 사용할 경우, 창 닫기 방지 버튼을 동적으로 활성화/비화성화할 수 있습니다.

소스(src) 화면 변경

호출할 페이지의 경로를 동적으로 바꿀 경우 getFrame() API를 이용하십시오.

$r_title(예제)
windowContainer1.getFrame("window1").setSrc(
        "/ui/tab2.xml", {
            "dataObject": {
                "type": "json",
                "name": "pageParam",
                "data": {
                    "name": "WebSquare",
                    "addr": "서울시"
                }
            }
        );

IFrame 윈도우의 뒤로가기(History) 제어

WindowContainer가 IFrame을 포함할 경우, IFrame 화면의 뒤로가기를 제어할 수 있습니다. spaReplaceHistory="true"로 설정할 경우 뒤로 가기 버튼을 클릭하면 각 IFrame에 담긴 화면이 아닌 브라우저 전체가 이젠 페이지를 표시합니다.

다른 윈도우 참조

WFrame으로 생성한 window는 getWindow() (기존의 getWindowbyWindowID()와 동일) 및 $p.parent() API를 통해 참조할 수 있습니다.

윈도우 인덱스 확인

getSelectedIndex() 함수를 사용하면 선택한 윈도우의 인덱스를 확인할 수 있습니다. createWindow() 함수를 이용하여 윈도우를 생성할 경우, 윈도우를 생성할 때마다 인덱스가 "1"씩 증가하고, 윈도우를 닫으면 인덱스가 초기화됩니다.

특정 윈도우에 포커스 주기

setFocus() 함수를 사용하면 윈도우 ID나 윈도우 인덱스를 파라미터로 지정하여, 해당 윈도우에 포커스를 줄 수 있습니다. 윈도우 ID 및 윈도우의 인덱스는 getSelectedWindowId() 함수와 getSelectedIndex() 함수를 사용하여 확인할 수 있습니다.

$r_title(사용 예)
// index="0" 윈도우에 포커스 주기
windowContainer1.setFocus(0);

// windowId="window_1" 윈도우에 포커스 주기
windowContainer1.setFocus("window_1");

팝업

지정한 프레임 영역에 팝업 표시

frameMode="wframe"로 생성한 WFrame 윈도우에서 $p.pen.popUp() 함수를 통해 팝업을 생성할 경우, 팝업을 표시한 프레임을 지정할 수 있습니다. $open.popUp() 함수의 options.frameModal 옵션을 사용하십시오.

부모 – 자식 팝업 닫기

$p.openPopup() 함수를 사용하여 탭 화면에서 팝업을 생성하고, 부모 팝업을 속하는 모든 자식 팝업과 함께 닫을 수 있습니다.

1. 단, WFrame 윈도우에서만 동작합니다.

2. 윈도우 생성 시 frameMode="wframe"으로 생성하십시오.

3. 윈도우의 frameModal 속성을 "true"로 설정하십시오.

$r_title(WFrame 윈도우 생성 예)
windowContainer1.createWindow({
    "title": "PopUp Closing",
    "windowTitle": "PopUp Closing",
    "src": "01_wframe_frameModal.xml",
    "windowId": "window01",
    "frameMode": "wframe",
    "frameModal": "true"
});

툴바

윈도우 목록 확인용 버튼 (useWindowScrollButton)

useWindowScrollButton 속성을 사용하여 현재 윈도우 목록을 확인할 수 있는 버튼을 툴바에 표시할 수 있습니다. 또한, useWindowScrollButton="true" 설정을 통해 목록을 표시할 경우, windowScrollVisibleRowNum 속성을 통해 목록에 표시할 항목 수를 지정할 수 있습니다

이벤트

이벤트 로딩 순서

WindowContainer는 onwindowload 및 onwindowunload 이벤트를 지정할 수 있습니다. WindowContainer의 onwindowload 이벤트는 window 화면의 initScript와 postScript 호출 이후에 발생합니다.

ondragstart & ondragend

윈도우 드래깅 시작할 때 ondragstart 이벤트가 발생하고, 드래깅이 종료될 때 ondragend 이벤트가 발생합니다. 두 이벤트 모두 발생할 때 드래깅되는 윈도우의 ID를 반환합니다.