Div 소개

Div 컴포넌트는 하나의 화면을 여러 개로 분할해서 처리해야 하는 경우 이런 레이아웃을 지원하는 컴포넌트입니다. 예를 들어 하나의 화면 가운데를 가로 방향으로 잘라서 위에는 차트를 보여주고 아래는 그리드를 보여주고자 할 때 사용할 수 있습니다. 물론 하나의 화면에 컴포넌트를 배치해서 분할된 화면처럼 구성할 수 있지만 Div 컴포넌트는 이런 기능을 처리하기 위해 몇 가지 기능을 제공합니다.

구분되는 화면의 경계선을 표시할 수 있습니다.

하나의 컴포넌트만 들어간다면 모르겠지만 두 개 이상의 컴포넌트를 묶어서 구분하는 경우에는 경계선을 표시하기가 모호합니다. 이런 경우 Div 컴포넌트를 사용하면 쉽게 경계를 구분할 수 있습니다.

Form을 재활용할 수 있습니다.

Div 컴포넌트는 이미 생성된 Form을 연결할 수 있습니다. 차트 기능을 제공하는 Form을 만들고 모든 화면에 적용하고 싶다면 Div 컴포넌트를 배치하고 해당하는 Form만 연결합니다. 매번 새로운 화면을 만들지 않아도 됩니다.

영역의 크기를 조절할 수 있습니다.

Div 컴포넌트 내 배치된 컴포넌트는 Div 컴포넌트를 기준으로 위치값을 지정합니다. 때문에 Div 컴포넌트의 크기가 변경되면 연결된 컴포넌트의 위치도 같이 변경됩니다.

사용 예

웹사이트에 보이는 화면의 구성요소(이미지, 텍스트 등)를 배치할 때 아무것도 없이 정확한 위치에 배치되는 것처럼 보이지만 실제로는 수많은 div 태그를 사용합니다. div 태그는 넥사크로플랫폼에서 다루는 Div 컴포넌트와는 다르지만, 화면에 보이는 요소를 감싸는 용도로 사용한다는 점에서 비슷한 특성이 있습니다.

Div 만들기

Div 컴포넌트만 단독으로 사용하는 일은 거의 없습니다. 대부분은 Form을 연결하거나 내부에 컴포넌트를 포함하는 형식으로 구현합니다. 이번 예제에서는 Div 컴포넌트를 배치하고 Button 컴포넌트 하나를 추가합니다.

툴바에서 Div 항목을 선택한 후, Form 위에 드래그 앤 드롭해 생성합니다. 빈 흰색 상자가 화면에 표시됩니다.

툴바에서 Button 항목을 선택한 후, Div 영역 위에 드래그 앤 드롭해 생성합니다. 정확하게 Div 영역 내에서 생성되어야 합니다. Div 컴포넌트 내 생성되었다면 속성창에 아래와 같이 표시됩니다.

QuickView(Ctrl + F6)로 실행합니다. Default 테마에서 지정된 Div 컴포넌트의 border 속성때문에 경계선이 표시됩니다. border 속성을 보이지 않게 지정한다면 경계선이 보이지 않습니다. 하지만 Div 컴포넌트 내 Button 컴포넌트가 생성된 것은 변함없습니다.

다른 화면 보여주기

선택한 메뉴에 따라 다른 화면을 보여주어야 한다면 어떻게 구현할 수 있을까요? 전체 페이지 URL을 변경할 수도 있지만, 콘텐츠 영역만 원하는 화면으로 바꾸어 보여주는 방법도 있습니다. Div 컴포넌트에 연결된 Form만 변경하는 방법을 사용하면 자연스럽게 원하는 콘텐츠를 사용자에게 보여줄 수 있습니다.

예제

버튼을 클릭하면 해당하는 화면이 Div 컴포넌트 영역에 표시됩니다. 다른 콘텐츠를 보여주기 위해 이벤트를 처리하는 메인 Form과 콘텐츠를 담고 있는 2개의 Form을 생성합니다. 콘텐츠를 담고 있는 두 개의 Form은 Button 컴포넌트의 위치를 각각 왼쪽 상단과 오른쪽 하단에 배치하고 Form 배경색을 다르게 표시해 콘텐츠가 바뀌었다는 것을 알 수 있도록 합니다. "Init" 버튼을 클릭하면 아무것도 지정되지 않은 상태로 변경합니다.

sample_div_01.xfdl

예제에서 사용한 핵심 기능

url

Div 컴포넌트에 연결되는 Form 경로를 지정합니다. 절대경로나 상대경로, 서비스 경로를 지정할 수 있습니다. 예제에서는 3개의 Form이 같은 서비스 경로에 있는 것으로 가정합니다.

예제 구현 방법

Div, Button 컴포넌트를 예제 화면과 같이 배치합니다. Div 컴포넌트의 text 속성값은 "divMain"으로 지정해서 초기화했을 때 상태를 확인할 수 있도록 합니다. width, height 속성값은 300으로 지정합니다. 다음 단계에서 만드는 콘텐츠를 담을 Form 오브젝트의 width, height 속성값도 300으로 지정할 겁니다.

Form을 새로 만들고 Button 컴포넌트를 배치합니다. Form의 width, height 속성값은 300으로 지정합니다. 메인 화면에서 "left top red" 버튼 클릭 시 보일 화면은 Button 컴포넌트를 왼쪽 상단에 배치하고 Form의 background 속성값을 "red"로 지정합니다. 메인 화면에서 "right bottom blue" 버튼 클릭 시 보일 화면은 Button 컴포넌트를 오른쪽 하단에 배치하고 Form의 background 속성값을 "blue"로 지정합니다.

3개 버튼 클릭 시 처리할 이벤트 함수를 작성합니다. 각 버튼에 맞는 파일 경로를 지정하고 초기화를 선택한 경우에는 null값을 지정합니다.

this.btnLeft_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.set_url("Sample::sample_div_01_left.xfdl");
};


this.btnRight_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.set_url("Sample::sample_div_01_right.xfdl");
};

this.btnInit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.set_url(null);
};

sample_div_01_left.xfdl, sample_div_01_right.xfdl 에 포함된 Button 컴포넌트 클릭 시 sample_div_01.xfdl 의 Form 오브젝트 id 속성값에 접근해서 alert 메소드로 표시하는 기능을 추가합니다.

this.btnLeft_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.alert(this.parent.parent.name);
};

this.btnRight_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.alert(this.parent.parent.name);
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하고 변경된 콘텐츠를 확인합니다.

Div Contents 접근하기

Form 안에 배치된 컴포넌트나 오브젝트는 다 같은 형제입니다. 서로 이름을 부르면 대답할 수 있습니다. 하지만 Div 컴포넌트 안에 포함된 컴포넌트는 바로 이름을 부를 수 없습니다. 항상 Div 컴포넌트를 지나가야만 합니다.

예제

Edit 컴포넌트에 텍스트를 입력하고 버튼을 클릭하면 입력한 텍스트가 Div 컴포넌트 내 Static 컴포넌트의 text 속성값으로 입력됩니다.

sample_div_02.xfdl

예제에서 사용한 핵심 기능

form

Div 컴포넌트 내부에 정의된 컴포넌트에 접근하기 위한 속성입니다. url 속성값에 Form을 연결한 경우에도 같은 방식으로 접근합니다.

this.[Div Component].form.[Component];

예제 구현 방법

Edit, Button, DIv 컴포넌트를 예제 화면과 같이 배치합니다. Div 컴포넌트가 잘 보이도록 border 속성값을 아래와 같이 지정합니다.

1px solid #e5e5e5

Div 컴포넌트를 선택하고 컨텍스트 메뉴에서 [Start Div Contents Editor] 항목을 선택하거나 디자인창 오른쪽 상단 툴바에서 [Start Div Contents Editor] 항목을 선택합니다.

DIv Content 편집 상태에서 Static 컴포넌트를 배치합니다. 편집 상태에 들어가지 않고 Div 영역 위에 Static 컴포넌트를 올려놓을 수도 있지만 편집 상태에서는 좀 더 명확하게 컴포넌트를 배치할 수 있습니다.

편집이 끝나면 컨텍스트 메뉴에서 [End Div Contents Editor] 항목을 선택하거나 디자인창 오른쪽 상단 툴바에서 [End Div Contents Editor] 항목을 선택합니다.

입력된 값을 Div 컴포넌트 내 Static 컴포넌트의 text 속성값으로 전달합니다.

this.btnInput_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.divMain.form.staticInput.set_text(this.editInput.value);
};

넥사크로 스튜디오 스크립트 창에서 코드 힌트 기능을 사용하는 경우에는 "form" 항목을 입력하지 않아도 자동으로 입력해줍니다.

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하고 변경된 콘텐츠를 확인합니다.

간단한 splitter 구현하기

프레임이나 윈도우 화면이 분리된 경우 구분된 화면의 크기를 조정하기 위해 사용하는 것이 스플리터(splitter) 입니다. 넥사크로 스튜디오에서도 각 화면 영역의 크기를 조정하기 위해 사용하고 있습니다. 아래 그림처럼 해당 영역에 마우스 포인터를 가져가면 커서 모양이 변합니다. 이때 마우스 왼쪽 버튼을 누르고 드래그해서 원하는 방향으로 이동하면 화면 크기를 조정할 수 있습니다.

예제

가운데 표시되는 하늘색 막대(스플리터)에 마우스를 가져가면 커서 모양이 바뀝니다. 마우스 왼쪽 버튼을 누르고 마우스 드래그 동작으로 LEFT, RIGHT 영역의 너비를 변경할 수 있습니다.

sample_div_03.xfdl

예제에서 사용한 핵심 기능

ondrag

컴포넌트 위에서 마우스 왼쪽 버튼을 누른 상태에서 드래그 동작을 실행했을 때 발생하는 이벤트입니다. 이때 true 값을 반환해야 상위 컴포넌트로 이벤트가 전파됩니다. 드래그 동작은 드래그를 시작한 컴포넌트의 범위를 넘어서기 때문에 움직이는 좌표값은 상위 컴포넌트에서 처리할 수 있습니다. 예제에서는 상위 컴포넌트의 ondragmove 이벤트에서 스플리터 영역의 움직임을 처리합니다.

cursor

예제에서는 LEFT, RIGHT 영역의 크기만 조정하기 때문에 cursor 속성값을 "e-resize"로 지정했습니다. 스플리터를 움직이는 방향에 따라 속성값을 선택할 수 있습니다.

예제 구현 방법

화면 구성은 Div 컴포넌트 안에 3개의 Div 컴포넌트를 배치합니다. 가운데 배치되는 Div 컴포넌트가 스플리터 역할을 담당합니다. 3개의 컴포넌트의 top 속성값은 0px, heigth 속성값은 100%로 지정합니다. 그리고 LEFT Div 컴포넌트의 left 속성값은 0px, RIGHT Div 컴포넌트의 right 속성값도 0px로 지정합니다. 스플리터 Div 컴포넌트의 left 속성값은 적절하게 지정하고 width 속성값은 5px로 지정합니다.

LEFT, RIGHT Div 컴포넌트는 width 속성값을 따로 지정하지 않고 스플리터 Div 컴포넌트의 움직임에 따라 right, left 속성값이 변경될 수 있도록 스플리터 Div 컴포넌트를 기준 컴포넌트로 지정합니다. LEFT Div 컴포넌트의 right 속성값은 "Div01:0", RIGHT 컴포넌트의 left 속성값은 "Div01:0"으로 지정합니다.

스플리터 Div 컴포넌트의 ondrag 이벤트 함수를 추가합니다. 이벤트 함수 내에서는 true 값을 반환해 이벤트를 상위 컴포넌트로 전파합니다.

this.Div00_Div01_ondrag = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	return true;
};

바깥쪽을 감싸고 있는 Div 컴포넌트의 ondragmove 이벤트 함수를 추가합니다. 이벤트 함수 내에서는 드래그하는 위치를 확인하고 해당 위치로 스플리터 Div 컴포넌트를 이동합니다.

this.Div00_ondragmove = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	this.Div00.form.Div01.set_left(e.clientx);
	this.Div00.form.resetScroll();
};

QuickView(Ctrl + F6)로 실행한 후 스플리터 Div 영역을 마우스 왼쪽 버튼으로 누른 상태에서 드래그해서 움직여봅니다.

마지막 좌표값 처리하기

Div 컴포넌트 내에 Button 컴포넌트를 마우스 드래그 동작으로 움직일 수 있도록 하고 마지막 좌표값을 저장해놓고 이전 좌표값으로 이동하는 방법을 살펴봅니다.

예제

Button 컴포넌트를 마우스로 드래그해서 움직일 수 있습니다. 마우스 버튼을 놓을 때 좌표값을 ListBox 컴포넌트에서 저장하고 ListBox 컴포넌트의 목록을 선택하면 이전 좌표값으로 이동합니다.

sample_div_04.xfdl

예제에서 사용한 핵심 기능

getOffsetWidth, getOffsetHeight

컴포넌트의 너비, 높이를 픽셀 단위 숫자로 반환합니다.

getInnerDataset

컴포넌트의 innerdataset 속성에 설정된 Dataset 오브젝트에 접근하기 위한 용도로 사용합니다.

clientx, clienty

컴포넌트의 클라이언트 영역을 기준으로 좌표값을 반환합니다. 예제에서는 마우스 드래그를 시작할 때 Button 컴포넌트의 clientx, clienty을 임시로 저장해 Div 컴포넌트의 드래그 이벤트에서 발생하는 좌표값을 보정합니다.

예제 구현 방법

var btnOrgW;
var btnOrgH;
this.sample_div_04_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var btnOrgW = this.Div00.form.Button00.getOffsetWidth();
	var btnOrgH = this.Div00.form.Button00.getOffsetHeight();
};

드래그 동작이 시작하는 시점에 Button 컴포넌트의 좌표값을 확인합니다.

var nButtonX;
var nButtonY;
this.Div00_Button00_onlbuttondown = function(obj:nexacro.Button,e:nexacro.MouseEventInfo)
{
	nButtonX = e.clientx;
	nButtonY = e.clienty;
};

ondrop 이벤트 함수에서는 마지막 좌표값을 ListBox 컴포넌트의 innerdataset 오브젝트에 추가합니다.

this.Div00_ondrag = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	return true;
};

this.Div00_ondragmove = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	var nLeft = e.clientx-nButtonX;
	var nTop = e.clienty-nButtonY;
	this.Div00.form.Button00.move(nLeft,nTop, btnOrgW, btnOrgH);
};

this.Div00_ondrop = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
	var tempDS = this.ListBox00.getInnerDataset();
	var nIndex = tempDS.rowcount;
	tempDS.insertRow(nIndex);
    tempDS.setColumn(nIndex, "codecolumn", (e.clientx-nButtonX)+","+(e.clienty-nButtonY));
    tempDS.setColumn(nIndex, "datacolumn", "Left >> " + (e.clientx-nButtonX) + "  Top >>> " + (e.clienty-nButtonY));
    this.resetScroll();
};

특정 좌표값을 선택하면 해당 위치로 Button 컴포넌트를 움직입니다. ListBox 컴포넌트에서 포커스를 벗어나게 되면 선택 상태를 초기화합니다.

this.ListBox00_onitemchanged = function(obj:nexacro.ListBox,e:nexacro.ItemChangeEventInfo)
{
	if(e.postindex!=-1)
	{
		var tempArray = e.postvalue.split(',');
		var nLeft = tempArray[0];
		var nTop = tempArray[1];
		this.Div00.form.Button00.move(nLeft,nTop, btnOrgW, btnOrgH);
	}
};

this.ListBox00_onkillfocus = function(obj:nexacro.ListBox,e:nexacro.KillFocusEventInfo)
{
	obj.setSelect(-1);
};

맨 위로 가기 버튼 만들기

스크롤이 길어지는 콘텐츠의 경우 맨 위로 바로 가기 버튼을 보여주는 경우가 있습니다. 스크롤바를 움직이지 않고 맨 위로 이동하고자 할 때 편하게 사용할 수 있습니다.

예제

Div 컴포넌트의 스크롤바를 아래로 움직이면 위로 가기 버튼이 표시되고 버튼을 클릭하면 맨 위로 이동합니다.

sample_div_05.xfdl

예제에서 사용한 핵심 기능

pos

스크롤바의 위치값을 갖는 속성입니다. 예제에서는 Div 컴포넌트 내 innerform 오브젝트의 vscrollbar 컨트롤의 속성값을 설정합니다.

onvscroll

스크롤바가 움직일때 발생하는 이벤트입니다. 예제에서는 위치가 맨 위가 아닌 경우 버튼을 보이게 합니다.

예제 구현 방법

Div 컴포넌트를 더블클릭하거나 컨텍스트 메뉴에서 [Edit] 항목을 선택하면 Div 컴포넌트 내 배치된 컴포넌트의 위치를 편집할 수 있습니다. 예제에서는 일부 Edit 컴포넌트는 Div 컴포넌트 영역 밖에 배치합니다.

세 번째와 네 번째 Edit 컴포넌트는 Div 컴포넌트 영역 밖에 배치합니다.

var nTop = this.Div00.form.Button00.top;

this.Div00_onvscroll = function(obj:nexacro.Div,e:nexacro.ScrollEventInfo)
{
	if( e.pos > 0 ) {
		this.Div00.form.Button00.set_visible(true);
		this.Div00.form.Button00.set_top(nexacro.toNumber(nTop)+ nexacro.toNumber(e.pos));
	} else {
		this.Div00.form.Button00.set_visible(false);
	}
};

this.Div00_Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Div00.form.vscrollbar.set_pos(0);
};

포틀릿 화면 구현하기

포틀릿(Portlet)은 작은 창을 의미합니다. 여러 정보를 박스 형태로 보여주는 용도로 사용합니다. 예제에서는 Div 컴포넌트를 포틀릿 형태로 배치하고 각 창을 이동하는 방식을 살펴봅니다.

예제

Div 컴포넌트를 마우스 드래그 동작으로 다른 Div 컴포넌트 위치로 가져가서 두 개의 Div 컴포넌트 위치를 바꿉니다.

sample_div_06.xfdl

예제에서 사용한 핵심 기능

fromobject

이벤트가 발생한 오브젝트를 가리킵니다. 예제에서는 Div 컴포넌트의 InnerForm 오브젝트가 fromobject가 되며 Div 컴포넌트를 찾기 위해서는 fromobject의 parent를 찾습니다.

userdata

DragEventInfo 오브젝트에서 userdata 속성값을 지정하면 연결된 드래그 동작에서 해당 속성값을 가져올 수 있습니다. 예제에서는 ondrag 이벤트 함수에서 속성값을 지정하고 ondrop 이벤트 함수에서 해당 값을 사용합니다.

예제 구현 방법

각 Div 컴포넌트는 다른 색으로 background 속성값을 지정합니다. 아래 예제에서 오른쪽 아래의 2개 Div 컴포넌트는 배경색을 지정하지 않았습니다.

오른쪽에 배치한 Div 컴포넌트는 드래그 동작 시 움직임을 표현하기 위한 임시 Div 컴포넌트입니다. visible 속성값을 false로 지정하고 border 속성을 적절하게 지정합니다. 이동하는 Div 컴포넌트의 색상을 연하게 표현하기 위해 opacity 속성값은 0.5로 지정합니다.

공통으로 하나의 함수를 사용하기 때문에 스크립트 창에서 함수를 미리 만들어놓고 컴포넌트 이벤트 속성으로 지정합니다.

this.Div_ondrag = function(obj:nexacro.Div,e:nexacro.DragEventInfo)
{
		e.userdata = obj;
		this.fn_makeDragObj(obj);
		return true;
};

this.fn_makeDragObj = function (obj)
{	
	this.divMove.set_background(obj.background);
	this.divMove.set_visible(true);
};

this.form_ondragmove = function(obj:nexacro.Form,e:nexacro.DragEventInfo)
{
	this.divMove.move(e.clientx + 10, e.clienty + 10);
};

Div 컴포넌트 이동 시 애니메이션 처리를 위해 Animation 오브젝트를 생성합니다.

this.fv_objFrom;
this.fv_objTo;

var aniObj = new nexacro.Animation("Ani00", this);
this.addChild("Ani00", aniObj);

this.form_ondrop = function(obj:nexacro.Form,e:nexacro.DragEventInfo)
{
	this.divMove.set_visible(false);
	this.fv_objFrom = e.userdata;
	this.fv_objTo = e.fromobject.parent;							
	if (this.fv_objTo != "[object Div]") 
	{
		
		return;
	}
	this.Ani00.addTarget("AniItem00", this.fv_objFrom, "left:"+this.fv_objTo.left+", top:"+this.fv_objTo.top);
	this.Ani00.addTarget("AniItem01", this.fv_objTo, "left:"+this.fv_objFrom.left+", top:"+this.fv_objFrom.top);
	this.Ani00.play();
	this.Ani00.removeTarget("AniItem00");
	this.Ani00.removeTarget("AniItem01");
};