Static 소개

Static 컴포넌트는 화면에 텍스트 정보를 출력하는 수단 중 하나입니다. 텍스트를 편집할 수 있는 컴포넌트와 달리 화면에 보여주는 기능만 제공합니다. 스크립트로 text 속성값을 변경하거나 Dataset 오브젝트에 바인딩된 상태에서 값이 변경될 수는 있지만, 사용자가 임의로 값을 수정하는 기능은 제공하지 않습니다.

사용 예

텍스트를 표시하는 항목 대부분은 Static 컴포넌트를 사용합니다.

Static 만들기

툴바에서 Static 항목을 선택한 후, Form 위에 드래그 앤 드롭해 생성합니다.

QuickView(Ctrl + F6)로 실행합니다.

텍스트를 동적으로 표현하기

Static 컴포넌트를 화면에 배치하고 text 속성값에 원하는 텍스트를 입력하면 더는 추가적인 작업은 필요하지 않습니다. 하지만 간혹 동적으로 생성된 텍스트를 표시해야 하는 경우도 있습니다. 예를 들어 오늘 날짜를 화면에 표시해야 하는 경우라면 text 속성값을 사전에 지정할 수는 없습니다. 이런 경우에는 expr 속성값을 이용할 수 있습니다.

예제

expr 속성값에 오늘 날짜를 가져오는 함수를 지정하고 Static 컴포넌트가 생성되면서 해당 함수의 반환값을 화면에 표시합니다. Radio 컴포넌트 항목 중 "Browser" 또는 "OS"를 선택하면 expr 속성값에 지정된 함수가 변경되면서 현재 실행 중인 브라우저 정보를 표시합니다.

sample_static_01.xfdl

예제에서 사용한 핵심 기능

navigatorname

애플리케이션이 실행되는 환경 정보를 반환합니다. 넥사크로 브라우저를 실행한 경우에는 "nexacro"로 표시하며, 그 외의 경우에는 브라우저명을 반환합니다.

osversion

애플리케이션이 실행되는 운영체제 정보를 반환합니다.

expr

속성값으로 설정된 코드를 실행하고 그 결과값을 표시합니다. 함수가 아니라 수식이나 특정 변수값을 사용할 수도 있습니다.

_fn_ = function(comp) { try { return comp.parent.fn_date(); } catch(e) { return undefined; } };

예제 구현 방법

Radio, Static 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 innerdataset 속성값은 아래와 같이 지정하고 실행 시 첫 번째 아이템인 "today"가 선택된 상태로 보이도록 index 속성값은 0으로 지정합니다. Static 컴포넌트의 expr 속성값은 "comp.parent.fn_dateTostr()"로 지정합니다.

간단하게 오늘 날짜값과 브라우저, 운영체제 정보를 반환하는 함수를 작성합니다.

this.fn_dateTostr = function()
{
	var objDate = new Date();
	var sRtn =  objDate.getFullYear()+"/"
		+ (objDate.getMonth()+1).toString().padLeft(2, "0")+"/"
		+ objDate.getDate().toString().padLeft(2, "0");
	return sRtn;
};

this.fn_checkBrowser = function()
{
	return system.navigatorname + " " + system.navigatorversion;
}

this.fn_checkOS = function()
{
	return system.osversion;
}

Radio 컴포넌트를 선택한 후 onitemchanged 이벤트 함수를 작성합니다. Radio 컴포넌트에서 항목 선택 시 Static 컴포넌트의 expr 속성값을 변경합니다.

this.radioExpr_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	var todayExpr = "comp.parent.fn_dateTostr()";
	var browserExpr = "comp.parent.fn_checkBrowser()";
	var osExpr = "comp.parent.fn_checkOS()";
	if(obj.value == "Today")
		this.staticExpr.set_expr(todayExpr);		
	else if(obj.value == "Browser")
		this.staticExpr.set_expr(browserExpr);
	else if(obj.value == "OS")
		this.staticExpr.set_expr(osExpr);	
};

QuickView(Ctrl + F6)로 실행한 후 선택항목을 변경하면서 확인해봅니다.

자동줄넘김(wordwrap) 기능

Static 컴포넌트의 text 속성값은 사전에 지정된 값을 보여주기도 하지만 데이터베이스에서 가져온 데이터를 보여주거나 특정 결과값을 보여주는 경우에는 Static 컴포넌트에서 보여주어야 할 텍스트의 너비를 사전에 예측하지 못할 수 있습니다. Static 컴포넌트는 기본적으로 표현할 텍스트를 한 줄로 보여주는데 자동으로 줄바꿈 처리가 필요한 경우에는 wordwrap 속성을 지정합니다.

예제

최초 실행 시에는 wordwrap 속성을 적용하지 않고 Static 컴포넌트 오른쪽에 있는 Radio 컴포넌트의 아이템 선택 시 선택한 wordwrap 속성값을 적용합니다.

sample_static_02.xfdl

예제에서 사용한 핵심 기능

wordwrap

컴포넌트의 영역을 벗어나는 입력값을 줄바꿈해서 보여줄지 지정하는 속성입니다. 'none', 'char', 'english' 속성 중 하나를 선택할 수 있습니다. 'english'를 선택하면 단어 단위로 줄바꿈을 처리하고 'char'를 선택하면 단어 단위와 상관없이 길이에 따라 줄바꿈을 처리합니다.

예제 구현 방법

Static, Radio 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 innerdataset 속성값은 아래와 같이 지정합니다. Static 컴포넌트의 text 속성값은 원하는 텍스트를 입력합니다. 예제에서는 Lorem ipsum 텍스트를 사용했습니다.

Radio 컴포넌트를 선택한 후 onitemchanged 이벤트 함수를 작성합니다. Radio 컴포넌트에서 항목 선택 시 Static 컴포넌트의 wordWrap 속성값으로 지정합니다.

this.radioWordwrap_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.staticWordWrap.set_wordWrap(this.radioWordwrap.value);
};

QuickView(Ctrl + F6)로 실행한 후 속성값을 변경하면서 확인해봅니다. TextArea 컴포넌트와 달리 텍스트가 주어진 컴포넌트 크기보다 많은 경우 스크롤바가 적용되지 않기 때문에 화면 구성 시 적절한 크기를 설정해주어야 합니다.

텍스트 꾸미기

Static 컴포넌트는 텍스트를 그대로 보여주는 것이 주요 기능입니다. 하지만 필요에 따라 특정 글자를 강조할 필요가 있습니다. 그런 경우에는 usedecorate 속성값을 지정할 수 있습니다.

예제

text 항목에 텍스트를 입력하고 꾸미기 옵션을 선택한 후 "input text" 버튼 클릭 시 상단에 지정한 꾸미기 옵션에 따라 텍스트가 표시됩니다. 하단 TextArea 컴포넌트에는 text 속성값에 지정한 태그를 표시합니다.

sample_static_03.xfdl

예제에서 사용한 핵심 기능

usedecorate

Static 컴포넌트에 표시되는 텍스트에 특정 태그 기반 효과를 적용할지를 지정합니다. 해당 속성은 적용 여부를 결정하며 실제 사용하는 태그는 text 속성값 또는 expr 속성값으로 지정해주어야 합니다.

fs (font-size)
fc (color)
ff (font-family)
b (bold)
i (italic)
u (underline)
s (strike)

예제 구현 방법

예제에서 표기한 것처럼 Static, Edit, Spin, Combo, Radio, TextArea 컴포넌트를 배치합니다. font color, font family 항목을 처리하는 Combo 컴포넌트의 innerdataset 속성값은 아래와 같이 지정합니다. bold, italic, underline, strike 항목을 처리하는 Radio 컴포넌트의 innerdataset 속성값은 "true", "false" 두 가지 값을 지정하고 direction 속성값은 "vertical"로 지정합니다.

꾸미기 옵션값에 따라 태그가 만들어지고 사용자가 입력한 값과 합쳐져 value 속성값에 적용할 태그를 만들어야 합니다. 다음 순서에서 작성하는 태그 처리 함수에서 처리된 값을 저장하고 value 속성값에 적용할 변수를 초기화하는 함수를 작성합니다.

this.defaultValue = "My name is ";
this.addFrontValue = "";
this.addBackValue = "";
	
this.fn_initValue = function()
{
	this.addFrontValue = "";
	this.addBackValue = "";
}

defaultValue 변수는 "My name is "라는 값을 가집니다. defaultValue 변수는 계속 같은 값을 유지합니다. addFrontValue, addBackValue 변수는 사용자가 선택한 옵션에 따라 생성된 태그값을 가지는 변수입니다. 그래서 사용자가 버튼을 클릭할 때마다 값을 초기화하고 새로운 태그값을 저장하도록 준비합니다.

아래 그림은 각 변수값이 어떻게 적용되는지 보여주고 있습니다.

꾸미기 옵션에서 선택한 값을 태그로 변환하는 작업이 필요한데 태그와 태그에 포함할 value 값만 다르고 나머지 규칙은 같습니다. 태그값과 value값을 받아서 전체 태그를 만드는 함수를 작성합니다.

this.addValue = function(tag:String, value:String) {
	if(value) {
		this.addFrontValue += "<"+tag+" v='"+value+"'>";
		this.addBackValue = "</"+tag+">"+this.addBackValue ;
	}
};

Button 컴포넌트를 클릭 시 처리할 onclick 이벤트 함수를 작성합니다. 각 꾸미기 옵션을 변경할 때 이벤트를 처리할 수도 있으나 이번 예제에서는 버튼 클릭 이벤트에서만 처리하는 것으로 작성했습니다. 버튼을 클릭하면 addFrontValue, addBackValue 변수값을 초기화하기 위해 fn_initValue 함수를 호출합니다.

꾸미기 옵션값을 addValue 함수에서 처리한 후 변수에 담고 마지막에 화면에 표시할 태그를 작성합니다. 작성된 태그를 확인할 수 있도록 TextArea 컴포넌트에 Static 컴포넌트의 text 속성값을 표시합니다.

this.btnText_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.fn_initValue();
	this.addValue("fs", this.spinFontSize.value);
	this.addValue("fc", this.comboFontColor.value);
	this.addValue("ff", this.comboFontFamily.value);
	this.addValue("b", this.radioBold.value);
	this.addValue("i", this.radioItalic.value);
	this.addValue("u", this.radioUnderline.value);
	this.addValue("s", this.radioStrike.value);
	this.staticDecorate.set_text(this.defaultValue + this.addFrontValue + this.editText.value + this.addBackValue);
	this.textareaDecorate.set_value(this.staticDecorate.text);
};

QuickView(Ctrl + F6)로 실행한 후 선택항목을 변경하면서 확인해봅니다.

가로바 만들기

화면을 배치할 때 제목 영역을 강조하거나 제목과 본문을 구분하기 위해 가로바를 사용합니다. 가로바를 만드는 방법은 여러 가지가 있지만, 이번 예제에는 Static 컴포넌트의 배경색을 지정하는 방식으로 가로바를 만들어봅니다. 같은 방식으로 세로 형태의 바도 만들 수 있습니다.

예제

화면 상단에 제목을 표시하고 제목 아래 영역에 가로바를 표시합니다. 제목과 가로바는 position 속성값을 "%"로 지정해 화면 크기가 달라지더라도 형태를 유지할 수 있습니다.

sample_static_04.xfdl

예제에서 사용한 핵심 기능

background

컴포넌트의 배경 속성을 지정합니다. 이번 예제에서는 배경색을 지정하지만 색상값을 직접 지정하지 않고 이미지를 배경으로 지정하거나 그라데이션 효과를 지정할 수 있습니다.

예제 구현 방법

제목을 구성할 Static 컴포넌트를 예제 화면과 같이 배치합니다. 제목처럼 보이도록 font 속성값을 아래와 같이 지정합니다. 그리고 화면 왼쪽에 고정될 수 있도록 left 속성값을 "10 %"로 지정합니다.

font: normal bold 20pt Arial

font 속성값은 넥사크로 스튜디오 속성창에서 font 항목을 확장하면 세부항목을 지정할 수 있습니다. 예제에서는 font-weight, font-size만 수정하고 나머지 항목은 default 값을 사용합니다.

제목으로 지정한 Static 컴포넌트 아래 Static 컴포넌트를 하나 더 배치합니다. left, right 속성값은 "10 %"로 지정합니다. 이렇게 지정하면 왼쪽 면은 제목과 정렬된 상태를 유지하고 오른쪽 면은 화면 크기가 변경되더라도 10%의 간격을 떨어뜨릴 수 있습니다. height 속성값은 적당하게 지정합니다.

가로바로 지정한 Static 컴포넌트의 background 속성값을 지정합니다. 속성창에서 background 속성값을 선택하면 내용을 확장할 수 있는 아이콘이 표시됩니다. 해당 아이콘을 클릭하면 background 속성값에서 지정할 수 있는 항목을 확인할 수 있습니다. 이번 예제에서는 배경색상값만 지정합니다. background-color 항목을 선택하고 목록에서 원하는 색을 선택합니다.

QuickView(Ctrl + F6)로 실행한 후 브라우저의 크기를 바꾸어가면서 가로바의 크기가 제대로 변경되는지 확인합니다.

글자 길이에 맞추어 배치하기

컴포넌트를 배치할 때 처음 정했던 텍스트가 운영상의 이유로 변경될 수 있습니다. 또는 다국어를 지원한다면 한국어와 영어를 변경할 때 텍스트 길이가 달라지기도 합니다. 텍스트가 변경되면 그때마다 컴포넌트의 배치를 바꾸어주고, 다국어를 지원해야 하는 경우에는 가장 긴 언어 설정의 길이를 찾아 맞추어 주기도 합니다.

넥사크로에서는 value 속성값에 맞게 컴포넌트의 크기를 조정해주는 Fit To Contents 속성을 지원합니다. 텍스트가 바뀌거나 다국어를 사용할 때 적용되는 값에 따라 컴포넌트의 크기를 조정하고 배치할 수 있습니다.

예제

예제에서는 한국어, 영어 2가지 언어를 선택할 수 있습니다. 선택한 언어가 Static 컴포넌트에 적용되어 표시됩니다. "Fit To Contents" 항목을 선택하기 전에는 텍스트 길이가 늘어나도 Static 컴포넌트는 넥사크로 스튜디오에서 디자인한 크기 그대로 보이며 텍스트가 길어지면 나머지는 잘려서 보이지 않습니다.

"Fit To Contents" 항목을 선택해주면 적용된 텍스트 길이에 따라 Static 컴포넌트의 크기가 달라집니다. "Fit To Contents" 항목을 선택했을 때 첫번째 "1. 이름" 항목은 언어를 영어로 선택하면 Static 영역이 Edit 컴포넌트 아래로 숨겨져 보이지 않습니다. Static 컴포넌트의 크기는 커졌지만, Edit 컴포넌트의 위치는 그대로이기 때문입니다. "2. 직장" 항목은 영어 선택 시 Edit 컴포넌트의 위치도 Static 컴포넌트가 커진 만큼 이동하도록 설정했습니다.

sample_static_05.xfdl

예제에서 사용한 핵심 기능

fittocontents

컴포넌트의 컨텐츠에 따라 컴포넌트의 크기를 자동으로 설정합니다. 기본값은 "none"입니다. 넥사크로 스튜디오에서 지정된 크기 속성에 따라 표시됩니다. 설정할 수 있는 속성은 "width", "height", "both" 3가지입니다. 한 줄로 표시되어야 하는 경우에는 "width"로 설정하고 게시판에 등록한 글을 보여주는 경우에는 "height"로 설정해 높이를 자동 조정하도록 합니다.

left

크기나 위치를 설정하는 속성은 픽셀 또는 비율로 크기를 지정할 수 있었습니다. 넥사크로에서는 PositionBase를 지정하는 옵션이 추가되었습니다. 예제처럼 주변 컴포넌트의 크기나 위치가 가변적으로 변하는 경우 모든 컴포넌트의 위치나 크기를 하나하나 지정하는 것이 아니라 최초 디자인 작업 시 기준 컴포넌트를 정해주면 연쇄적으로 변경된 크기나 위치값을 적용할 수 있습니다.

예제 구현 방법

Static 컴포넌트와 Edit 컴포넌트를 배치합니다. Static 컴포넌트의 value 속성값은 한글로 먼저 입력합니다. 컴포넌트의 크기 변화를 한눈에 확인하기 위해 Static 컴포넌트의 background 색을 지정합니다.

언어를 선택할 수 있도록 Radio 컴포넌트를 배치 합니다. codecolumn 항목은 "KOR", "ENG", datacolumn 항목은 "한국어", "영어"로 지정합니다.

onitemchanged 이벤트 함수를 아래와 같이 지정합니다. 실제 운영 시스템에서 다국어를 설정할때는 별도 Dataset을 구성하는데 이번 예제에서는 항목이 적기 때문에 선택된 아이템에 따라 text 속성값을 직접 지정합니다.

onitemchanged 이벤트 발생 시 ItemChangeEventInfo 오브젝트에 관련 정보를 담습니다. 선택한 codecolumn 항목의 값은 postvalue 속성값으로, datacolumn 항목의 값은 posttext 속성값으로 확인할 수 있습니다. 예제에서는 postvalue 속성값을 비교합니다.

this.radioLang_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	if(e.postvalue == "KOR")	{
		this.staticName.set_text("1. 이름");
		this.staticWorkplace.set_text("2. 직장");
	} else if(e.postvalue == "ENG")	{
		this.staticName.set_text("1. First name");
		this.staticWorkplace.set_text("2. place of work");
	}
	this.resetScroll();
};

Static 컴포넌트의 fittocontents 속성값을 설정할 수 있도록 checkbox 컴포넌트를 배치합니다. onchanged 이벤트 함수에서 체크 여부에 따라 fittocontents 속성값을 설정합니다.

this.checkboxFit_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	if(e.postvalue == true)	{
		this.staticName.set_fittocontents('width');
		this.staticWorkplace.set_fittocontents('width');
	} else if(e.postvalue == false)	{
		this.staticName.set_fittocontents('none');
		this.staticWorkplace.set_fittocontents('none');
	}
	this.resetScroll();
};

PositionBase는 속성창에서 직접 적용하거나 넥사크로 스튜디오 디자인 창에서 마우스로 컨트롤할 수 있습니다. 속성창에서 직접 적용하는 경우에는 적용할 속성 항목을 선택하고 기준이 되는 컴포넌트와 기준 컴포넌트와의 간격을 지정해줍니다.

디자인 창에서 지정하는 경우에는 컴포넌트를 선택하고 가운데 표시되는 십자화살표 모양을 드래그해서 기준이 되는 컴포넌트 위로 가져가 마우스 버튼을 놓으면 어떤 속성 항목을 설정할지 표시하는 작은창이 나타납니다. 연결되는 방향에 따라 가장 인접한 속성 항목을 자동으로 설정합니다.

QuickView(Ctrl + F6)로 실행한 후 언어와 Fit To Contents 설정을 변경해가면서 컴포넌트의 크기와 배치가 어떻게 바뀌는지 확인합니다.

여러줄로 문자열 표시하기

Static 컴포넌트 내에는 여러 줄로 문자열을 입력할 수 있습니다. 속성창에서 Ctrl+ENTER 키를 입력해 줄을 바꿀 수 있습니다. 하지만 스크립트 내에서 문자열을 조합하는 경우에는 이런 방법을 사용할 수 없습니다. 이번 예제에서는 스크립트 내에서 여러줄로 문자열을 표시하는 방법을 알아봅니다.

예제

Edit 컴포넌트에 입력된 2개의 문자열을 2줄로 Static 컴포넌트에 표시합니다.

sample_static_06.xfdl

예제에서 사용한 핵심 기능

fromCharCode

String.fromCharCode(10)를 호출했을때 줄바꿈 문자를 반환합니다.

예제 구현 방법

Edit 컴포넌트를 2개 배치하고 Button 컴포넌트를 추가합니다. 결과값을 보여줄 Static 컴포넌트를 적당한 크기로 배치합니다.

아래와 같이 Button 컴포넌트의 이벤트를 추가합니다. 입력된 값을 더해서 Static 컴포넌트에 표시해주는 기능을 처리합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Static00.set_text(this.Edit00.value
		+String.fromCharCode(10)
		+this.Edit01.value);
};

QuickView(Ctrl + F6)로 실행한 후 Edit 컴포넌트에 입력한 2개의 문자열이 여러줄로 표시되는지 확인합니다.

Bar 차트 만들기

Static 컴포넌트는 문자열을 표현하는 용도로도 사용하지만 간단한 사각형을 표현하는 용도로도 사용합니다. 이미 가로바 만들기 예제에서도 다루었는데, 이를 활용하면 간단한 Bar 차트도 만들어볼 수 있습니다.

예제

버튼을 클릭하면 Bar 차트가 애니메이션 효과를 적용하면서 표시됩니다.

sample_static_07.xfdl

예제에서 사용한 핵심 기능

components

Form 오브젝트 내 컴포넌트 이름이나 인덱스를 알고 있다면 컴포넌트를 동적으로 접근할 수 있습니다. 예를 들어 Button00이라는 컴포넌트에 접근할 때 this.components["Button00"]으로 접근할 수 있습니다.

예제 구현 방법

아래 그림과 같이 컴포넌트를 배치합니다.

stValue로 시작하는 Static 컴포넌트는 stBar로 시작하는 컴포넌트를 기준으로 위치를 지정합니다. 이렇게 하면 데이터에 따라 Bar 차트를 움직일 때 stBar로 시작하는 컴포넌트만 이동하고 stValue로 시작하는 컴포넌트는 이를 따라가도록 합니다.

예제에서는 Bar 차트에서 사용하는 데이터를 Dataset에서 가져옵니다. Dataset을 생성하고 아래와 같이 데이터를 입력합니다.

버튼 클릭 시 setTimer 메소드를 실행합니다. form 오브젝트의 ontimer 이벤트 함수도 같이 만들어줍니다. 타이머 이벤트가 발생할때마다 fn_Chart01 함수를 실행합니다. 해당 함수에서 Static 컴포넌트의 너비를 적당하게 조정해줍니다. fn_Chart01 함수 실행 후에는 resetScroll 메소드를 실행하는데 stValue로 시작하는 컴포넌트의 위치를 조정해주기 위한 용도입니다.

this.nTimerIdx = 0;
this.nTimerMax = 20;

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.setTimer(1, 50);
};

this.BarChart_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	if(e.timerid==1)
	{
		this.nTimerIdx++;
		this.fn_Chart01();
		this.divChart1.form.resetScroll();
		if(this.nTimerIdx==this.nTimerMax)
		{
			this.nTimerIdx = 0;
			this.killTimer(1);
		}
	}
};

Dataset 오브젝트에 row 만큼 for 반복문을 실행합니다. Static 컴포넌트의 left, top, height 값은 그대로 유지하고 width 값만 바꾸어 move 메소드를 실행합니다. 아래 예제에서는 move 메소드를 사용하지 않고 width 속성값만 바꾸어도 같은 결과가 나옵니다.

this.fn_Chart01 = function ()
{
	var i;
	var nLeft;
	var nTop;
	var nWidth;
	var nHeight;
	var objBar;
	var objValue;
	var nValue;
	
	for(i=0;i<this.ds_Chart01.rowcount;i++)
	{
		objBar = this.divChart1.form.components["stBar0"+(i+1)];	
		objValue = this.divChart1.form.components["stValue0"+(i+1)];

		nValue = Math.round(this.ds_Chart01.getColumn(i, "Value")*5.4);
		objValue.set_text(this.ds_Chart01.getColumn(i, "Value"));

		nLeft = objBar.left;
		nTop = objBar.top;
		nWidth = this.fn_move(this.nTimerIdx, 0, nValue, this.nTimerMax);
		nHeight = objBar.height;
		
		objBar.move(nLeft, nTop, nWidth, nHeight);
	}
};

fn_move 함수는 Bar 차트를 타이머 이벤트가 발생했을때 얼마나 크기를 변경할 것인지를 계산합니다. 전체 타이머 동작 횟수와 value 값, 현재 타이머 회차를 가지고 값을 계산합니다.

this.fn_move = function(t, b, c, d)
{
	t /= d/2;
	if (t < 1) return Math.round(c/2*t*t + b);
	t--;
	return Math.round(-c/2 * (t*(t-2) - 1) + b);
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 Bar 차트가 움직이는 것을 확인합니다.

아코디언 UI 만들기

상세 항목은 숨겨놓고 제목 선택 시 상세 항목을 보여주는 형식을 아코디언 UI 라고 합니다. FAQ 같은 화면 구성 시 주로 사용합니다. 예제에서는 PositionBase 기능과 fittocontents 속성을 활용해 아코디언 UI 형식을 만들어봅니다.

예제

버튼을 클릭하면 기본 메뉴 타이틀이 표시되고 메뉴 타이틀 클릭 시 세부 설명이 표시됩니다.

sample_static_08.xfdl

예제에서 사용한 핵심 기능

fittocontents

컴포넌트 내 컨텐츠에 따라 컴포넌트의 크기를 조정합니다. 예제에서는 Dataset 오브젝트의 데이터에 따라 Static 컴포넌트의 높이를 조정합니다.

예제 구현 방법

Dataset 오브젝트의 rowcount 만큼 Static 컴포넌트를 생성하고 배치합니다. 첫 번째 Static 컴포넌트는 지정된 top 위치에 배치되고 두 번째 이후의 Static 컴포넌트는 바로 전에 만든 Static 컴포넌트를 기준으로 위치가 지정됩니다.

메뉴 타이틀 클릭 시 보여지는 상세 항목의 Static 컴포넌트도 같이 생성합니다. 각 Row에 따라 Static 컴포넌트의 id 속성값을 지정하고 height 속성값은 0으로 지정합니다.

this.preObj = "";

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nTop = 100;
	
	for(var i = 0; i < this.Dataset00.rowcount; i++)
	{
		var objStatic = new Static();  
		objStatic.init("Static"+i, 30, 70, 300, 30);				
		this.addChild("Static"+i, objStatic); 	
		objStatic.set_border("1px solid darkgray");
		objStatic.set_padding("0px 0px 0px 5px");
		objStatic.show(); 
		
		objStatic.addEventHandler("onclick", this.StaticAll_onclick, this);
		objStatic.set_text(this.Dataset00.getColumn(i, "Column0"));
		
		if(i != 0)
		{
			var imgID = "Static"+(i-1)+"_1";
			objStatic.set_top(imgID+":-1");
		}
		
		var objStatic1 = new Static();  
		objStatic1.init("Static"+i + "_1", 30, nTop+60, 300, 0, null, null);				
		this.addChild("Static"+i + "_1", objStatic1); 	
		objStatic1.set_border("1px solid darkred, 1px solid darkgray, 1px solid darkgray");
		objStatic1.set_background("yellow");
		objStatic1.set_wordWrap("char");
		objStatic1.show(); 		
		
		objStatic1.set_text(this.Dataset00.getColumn(i, "Column1"));
		objStatic1.set_top(objStatic.id+":0px");	
		nTop += 40;

	}
};

메뉴 타이틀을 구성하는 Static 컴포넌트는 모두 StaticAll_onclick 이벤트 함수와 연결됩니다. 아래와 같이 이벤트 함수 코드를 작성합니다. 메뉴 타이틀 클릭 시 Static 컴포넌트의 id 속성값을 확인하고 해당하는 상세 항목의 Static 컴포넌트 크기를 조정합니다. 이전에 선택한 항목이 있다면 해당 Static 컴포넌트는 초기화합니다.

this.StaticAll_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	if(this.preObj != "")
	{
		var objID = this.preObj + "_1";
		this.components[objID].set_fittocontents("none");		
		this.components[objID].set_height(0);	
	}
		
	if(obj.id == this.preObj)
	{
		this.preObj = "";
		this.resetScroll();
		return;
	}
	else 
	{
		var objID1 = obj.id + "_1";
		this.components[objID1].set_fittocontents("height");
		this.components[objID1].set_padding("10px 5px");	
		this.resetScroll();
	}
	this.preObj = obj.id;
};

특정 구분자를 줄바꿈 문자로 바꾸기

저장된 데이터는 콤마(,)로 구분하지만, 화면에 표시할 때는 줄을 바꾸어 표시해야 하는 경우 적용할 수 있습니다.

예제

콤마(,)로 구분된 텍스트를 선택하면 Static 컴포넌트에 줄바꿈 문자를 추가해서 여러 줄로 표시합니다.

sample_static_09.xfdl

예제에서 사용한 핵심 기능

expr

Static 컴포넌트에 표시되는 텍스트를 동적으로 설정할 수 있습니다. 예제에서는 외부 함수를 사용해 설정한 값을 표시하도록 했습니다.

예제 구현 방법

comp.parent.setWordWrap(comp.text)

text 속성값에서 콤마(,)를 찾아서 줄바꿈 문자로 변경합니다. 줄바꿈 처리 후 공백문자가 포함된 경우에는 공백문자를 제거해줍니다.

this.setWordWrap = function(sValue)
{
	return nexacro.replaceAll(sValue, ",", "\n").replace(/^\s+/gm,'');
}