Application 소개

Application은 실행되는 애플리케이션과 관련된 기본 환경 설정 정보를 담고 있습니다.

사용 예

프로젝트 생성 시 "Application" 프로젝트를 선택했다면 프로젝트를 생성하면서 기본 Application을 생성합니다. 생성된 Application은 [Project Explorer > App Information] 항목에서 확인할 수 있습니다. 해당 항목을 선택하고 관련 속성을 수정할 수 있습니다.

Application 접근하기

앞에서 언급한 것처럼 [Project Explorer]에서 접근하는 방식은 속성을 수정하거나 이벤트 함수를 지정하는 경우에 사용합니다. 하지만 Form에서 스크립트로 접근해야 할 때에는 아래와 같은 코드를 사용합니다.

nexacro.getApplication();
nexacro.getApplication().alert("warning");

경고, 확인 대화상자 띄우기

일반적으로 애플리케이션은 사용자가 정보를 입력하고 이를 처리한 후 결과를 보여주는 것이 주된 역할입니다. 하지만 사용자가 입력된 값이 잘못되었거나 뭔가 메시지를 직관적으로 주기 위해서 경고 또는 확인 대화상자를 사용합니다.

예제

버튼을 클릭하면 경고 대화상자가 나타납니다. 반복구문을 사용해 10번의 대화상자가 표시됩니다. 10개의 대화상자가 동시에 나타나지 않고 사용자가 화면에 나타난 대화상자를 닫거나 [확인] 버튼을 클릭했을 때만 다음 대화상자가 나타납니다.

sample_application_01.xfdl

예제에서 사용한 핵심 기능

alert

alert 메소드는 경고 메시지를 보여주기 위한 용도로 사용합니다. 예제에서 반복구문을 사용했는데 10개의 대화상자가 동시에 뜨지 않는 이유는 alert 메소드는 사용자가 해당 메시지를 확인하고 버튼을 누르기 전에는 다른 프로세스를 진행하지 않고 멈춘 상태로 대기합니다.

예제 구현 방법

Button 컴포넌트를 예제 화면과 같이 배치합니다.

버튼 클릭 시 처리할 이벤트 함수를 작성합니다. 반복 구문을 사용해 경고 대화상자가 10번 나타날 수 있도록 합니다.

this.btnAlert_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(var i=0 ; i<10 ; i++)
	{
		nexacro.getApplication().alert(i);
	}
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하고 경고 대화상자가 나타나는 것을 확인합니다.

사용자 정보 저장하기

각 화면 간 데이터를 공유할 필요가 있으면 addVariable에 변수를 저장할 수도 있지만 addVariable은 애플리케이션이 종료된 경우에는 다시 해당 값을 사용할 수 없습니다. 하지만 로컬스토리지에 사용자 정보를 저장하면 애플리케이션이 종료되더라도 해당 PC에 저장된 정보를 다시 사용할 수 있습니다.

예제

[SET DATA] 버튼을 클릭하면 Edit 컴포넌트에 입력된 값을 로컬스토리지에 저장합니다. 애플리케이션을 닫고 다시 실행해서 [GET DATA] 버튼을 클릭하면 이전에 입력했던 값이 Edit 컴포넌트에 출력됩니다.

sample_application_04.xfdl

예제에서 사용한 핵심 기능

setPrivateProfile

로컬스토리지에 데이터를 저장합니다. 저장 공간은 웹브라우저에 따라 다릅니다.

getPrivateProfile

로컬스토리지에 저장된 값을 가져옵니다. 지정된 키 값에 해당하는 값이 없더라도 에러로 처리하지는 않습니다.

예제 구현 방법

Button 컴포넌트와 Edit 컴포넌트를 예제 화면과 같이 배치합니다.

버튼 클릭 시 처리할 이벤트 함수를 작성합니다. 키 값은 미리 정해진 값으로 설정합니다. 키 값만 다르다면 여러 개의 값을 관리할 수 있습니다.

this.btnSet_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit00.set_value(nexacro.setPrivateProfile('TEST', this.editSet.value));
};

this.btnGet_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit00.set_value(nexacro.getPrivateProfile('TEST'));
};

QuickView(Ctrl + F6)로 실행한 후 Edit 컴포넌트에 임의의 값을 입력하고 [SET DATA] 버튼을 클릭하면 값이 저장됩니다. 정상적으로 값이 저장되면 true 값을 Edit 컴포넌트에 표시합니다. 그리고 [GET DATA] 버튼을 클릭하면 저장된 값을 Edit 컴포넌트에 표시합니다.

쿠키 정보 확인하기

웹브라우저가 가지고 있는 쿠키 정보를 확인할 수 있습니다.

예제

[Cookie check] 버튼 클릭 시 TextArea 영역에 쿠키 정보를 표시합니다.

sample_application_05.xfdl

예제에서 사용한 핵심 기능

window.document.cookie

현재 Document안의 cookies 정보를 확인합니다. name/value 값을 구할 수 있습니다.

예제 구현 방법

Button 컴포넌트와 TextArea 컴포넌트를 예제 화면과 같이 배치합니다.

버튼 클릭 시 실행할 이벤트 함수를 작성합니다. window.document 오브젝트에서 cookie라는 값을 받아옵니다. 각 쿠키값은 ";" 문자로 구분되어 있기 때문에 split 메소드를 사용해 배열로 변환한 뒤 TextArea 컴포넌트에 표시해 줍니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var arrCookie = window.document.cookie;
	arrCookie = arrCookie.split(";");
	var arrTempCookie;
	this.TextArea00.set_value("");
	for(var i=0; i<arrCookie.length; i++)
	{
		arrTempCookie = arrCookie[i].split("=");
		this.TextArea00.set_value(this.TextArea00.value 
			+ ( arrTempCookie[0].trim() + " : " + arrTempCookie[1] ) + "\n");
	}  
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하면 TextArea에 쿠키값을 표시합니다. 하지만 상황에 따라 아무값도 표시되지 않는 경우도 있습니다.

쿠키값이 표시되지 않는 경우에는 임시로 쿠키값을 설정해봅니다. Project Explorer에서 Environment 항목을 선택하고 컨텍스트 메뉴에서 [Add > Cookie] 항목을 선택합니다.

쿠키값으로 추가할 값을 입력합니다. 아래 입력 양식에서 id와 initval 항목을 입력합니다.

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하면 TextArea에 앞 단계에서 입력한 Cookie 정보가 표시됩니다.

활성화된 화면(Form) 이름(ID) 속성 정보 얻기

여러 화면이 열려 있는 경우에는 현재 활성화된 화면이 어떤 것인지 쉽게 알 수 없습니다. 이런 경우 활성화된 Form을 확인하는 기능 예제입니다.

예제

[Check] 버튼 클릭 시 Form의 id, titletext 속성값, Button 컴포넌트의 부모 오브젝트의 id 속성값을 Edit 컴포넌트에 표시합니다. [Div Check] 버튼 클릭 시에는 활성화된 화면(Form)은 Div 내 innerForm 이지만 getActiveForm 메소드에서는 Div 컴포넌트를 포함하고 있는 Form 오브젝트를 반환합니다.

sample_application_06.xfdl

예제에서 사용한 핵심 기능

getActiveForm

활성화(현재 포커스가 있는)된 Form 오브젝트를 반환합니다.

예제 구현 방법

Edit 컴포넌트와 Button 컴포넌트를 배치합니다. Div 컴포넌트를 배치하고 그 안에 Button 컴포넌트를 배치합니다.

2개의 Button 컴포넌트 클릭 시 호출되는 이벤트 함수 내에서 check_active_form 라는 함수를 다시 호출합니다.

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

this.Div00_Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.check_active_form();
};

check_active_form 라는 함수 내에서는 getActiveForm 메소드를 실행해 활성화된 Form 정보를 Edit 컴포넌트에 표시합니다. 마지막 Edit02 컴포넌트에는 현재 포커스를 가지고 있는 컴포넌트(Button)의 부모 오브젝트의 id 값을 표시하도록 했습니다.

this.check_active_form = function()
{
	var objApp = nexacro.getApplication(); 	
	var objForm = objApp.getActiveForm();
	
	this.Edit00.set_value(objForm.name);
	this.Edit01.set_value(objForm.titletext);
	this.Edit02.set_value(this.getFocus().parent.name);
}

QuickView(Ctrl + F6)로 실행한 후 [Check] 버튼과 [Div Check] 버튼을 클릭하고 표시되는 정보를 확인합니다.

구글 폰트 사용하기

사용자 PC에 해당 폰트가 설치되어 있지 않더라도 공개된 폰트 리소스를 웹에서 내려받아 바로 표시할 수 있습니다. 구글에서는 구글 폰트 사이트를 통해 무료로 사용할 수 있는 웹 폰트 정보를 제공하고 있습니다.

예제

버튼을 클릭하면 선택한 폰트가 Form에 적용되고 각 컴포넌트에 반영됩니다. 단, Button 컴포넌트는 자체적으로 font 속성을 지정해서 해당 속성값이 유지됩니다.

sample_application_07.xfdl

예제에서 사용한 핵심 기능

userfontid

애플리케이션에 적용할 UserFont ID를 설정합니다.

예제 구현 방법

userfontid 속성에 생성한 UserFont 파일을 바로 적용하려면 아래 체크박스를 체크 상태로 변경합니다.

이번 예제에서는 구글 폰트를 사용하기 때문에 주석 내 코드는 건드리지 않습니다.

https://fonts.google.com

/********************************************************************
@font-face {
  font-family : 'NanumGothic';
  font-style : normal;
...
    url(./_resource_/_font_/NanumGothicBold.woff) format('woff'),
    url(./_resource_/_font_/NanumGothicBold.ttf) format('truetype');
}
********************************************************************/
@import url('https://fonts.googleapis.com/css?family=Chilanka|Lobster&display=swap');

Button00: 20px/normal Lobster
Button01: 20px/normal Chilanka

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.set_font("24px/normal 'Lobster'");
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.set_font("24px/normal 'Chilanka'");
};