10.Application

Edit

10.1Application 소개

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

10.1.1사용 예

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

현재 버전은 "Application" 프로젝트만 있습니다.

10.1.2Application 접근하기

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

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

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

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

10.2.1예제

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

sample_application_01.xfdl

10.2.2예제에서 사용한 핵심 기능

alert

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

alert 메소드 실행 시 표시되는 대화상자는 브라우저에 따라 다르게 보일 수 있습니다. 자신이 원하는 형태로 경고 메시지를 보여주기 원한다면 alert 메소드 대신 popupDiv 같은 컴포넌트를 사용해야 합니다.

구글 크롬 브라우저를 사용하는 경우에는 예제 실행 시 경고 대화상자에서 "Prevent this page from creating additional dialogs"라는 메시지를 볼 수 있습니다. 해당 항목을 체크한 경우에는 더는 경고 대화상자가 나타나지 않습니다. 다시 대화상자가 나오게 하려면 브라우저를 재시작해야 합니다.

10.2.3예제 구현 방법

1

메인 화면 구성하기

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

2

Button 컴포넌트 이벤트 함수 작성하기

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

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

3

QuickView로 확인하기

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

10.3사용자 정보 저장하기

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

로컬스토리지 정보는 런타임과 웹브라우저가 자신만의 저장소에서 정보를 관리합니다. 때문에 런타임에서 저장된 데이터를 크롬 브라우저에서 가져올 수는 없습니다.

로컬스토리지 정보는 웹브라우저에서는 도메인 단위로 관리하고 런타임에서는 프로젝트 단위로 관리합니다. 같은 키값을 사용하더라도 도메인이나 프로젝트가 다르면 처리되지 않습니다.

10.3.1예제

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

sample_application_04.xfdl

10.3.2예제에서 사용한 핵심 기능

setPrivateProfile

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

getPrivateProfile

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

10.3.3예제 구현 방법

1

메인 화면 구성하기

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

2

Button 컴포넌트 이벤트 함수 작성하기

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

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

3

QuickView로 확인하기

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

같은 키 값을 사용해 setPrivateProfile 메소드를 호출하면 이전에 저장된 값을 덮어씁니다.

10.4쿠키 정보 확인하기

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

window.document 오브젝트는 넥사크로 브라우저에서는 접근할 수 없습니다.

넥사크로 브라우저로 실행 시에는 해당 예제가 동작하지 않습니다.

10.4.1예제

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

sample_application_05.xfdl

10.4.2예제에서 사용한 핵심 기능

window.document.cookie

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

10.4.3예제 구현 방법

1

메인 화면 구성하기

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

2

Button 컴포넌트 이벤트 함수 작성하기

버튼 클릭 시 실행할 이벤트 함수를 작성합니다. 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");
    }  
};

3

QuickView로 확인하기

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

넥사크로 스튜디오에서 로컬 웹 서버를 사용해 실행하는 경우에는 별도로 쿠키값을 설정하지 않은 경우에 쿠키값이 표시되지 않습니다.

4

쿠키값 설정하기

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

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

5

다시 QuickView로 확인하기

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

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

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

10.5.1예제

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

sample_application_06.xfdl

10.5.2예제에서 사용한 핵심 기능

getActiveForm

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

10.5.3예제 구현 방법

1

메인 화면 구성하기

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

2

Button 컴포넌트의 onclick 이벤트 함수 생성하기

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

예제의 특성 상 하나의 Form 내에서 Div 컴포넌트를 배치했기 때문에 실제 활성화된 Form 자체가 바뀌지는 않았습니다. MDI 형식으로 여러 개의 Form을 배치하는 경우에 유용한 예제입니다.

3

QuickView로 확인하기

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

10.6구글 폰트 사용하기

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

웹에서 사용할 수 있도록 폰트 리소스 용량이 크지 않게 만들어졌습니다. 하지만, 네트워크 환경이 좋지 않은 경우에는 애플리케이션 처리 속도에 영향을 미칠 수도 있습니다.

구글 폰트는 WOFF2 파일 형식을 기본값으로 사용하지만, IE 브라우저와 일부 웹브라우저에서는 WOFF2 파일 형식을 지원하지 않아 WOFF 파일 형식으로 내려받습니다. 파일 압축률의 차이가 있어, 파일 크기가 웹브라우저에 따라 다를 수 있습니다.

https://www.w3schools.com/Css/css3_fonts.asp

10.6.1예제

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

sample_application_07.xfdl

10.6.2예제에서 사용한 핵심 기능

userfontid

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

10.6.3예제 구현 방법

1

UserFont 파일을 새로 생성합니다. 메뉴[File > New > UserFont] 항목을 선택합니다.

2

생성할 파일명을 지정합니다.

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

3

생성된 파일을 확인합니다. 예제 스크립트가 주석 내에 생성되어 있습니다.

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

4

구글 폰트 웹사이트에 접속합니다.

https://fonts.google.com

구글 폰트 웹사이트 관련 내용은 2019년 9월 기준입니다. 이후 서비스 정책에 따라 사용법이 변경될 수 있습니다.

https://fonts.google.com

5

폰트 목록에서 원하는 항목을 선택하고 [+] 아이콘을 클릭합니다.

6

선택한 폰트는 오른쪽 하단에 박스에 담겨져 있습니다. 박스를 클릭하면 아래와 같은 내용을 볼 수 있습니다.

7

@IMPORT 항목을 복사해서 앞에서 만든 xfont 파일에 붙여넣습니다.

/********************************************************************
@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');

xfont 파일에 작성한 내용은 부트스트랩 파일에 반영됩니다. 서버에 배포 시에는 xfont 파일을 배포하는 것이 아니라 index.html 파일을 포함한 부트스트랩 파일을 업데이트해주어야 합니다.

8

userfontid 속성값이 지정되었는지 확인합니다. 이전 단계에서 xfont 파일 생성하면서 지정하도록 체크했기 때문에 아래와 같이 속성값이 설정되어 있어야 합니다.

9

이제 폰트를 적용할 화면을 만듭니다. Button 컴포넌트 2개를 배치하고 TextArea, Static 컴포넌트를 배치합니다.

10

Button 컴포넌트의 font 속성을 아래와 같이 설정합니다.

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

font 속성을 설정해도 넥사크로 스튜디오에서는 폰트가 적용되지 않습니다. 넥사크로 스튜디오에서는 사용자 PC에 설치된 폰트만 적용할 수 있습니다.

11

Button 컴포넌트의 onclick 이벤트 함수를 아래와 같이 작성합니다.

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'");
};

12

QuickView(Ctrl + F6)로 실행한 후 버튼을 눌렀을 때 컴포넌트에 폰트 설정이 적용되는지 확인합니다.