프로젝트 제너레이트 및 실행

넥사크로에서 프로젝트를 실행하기 위해서는 프로젝트를 실행 가능한 형태의 파일로 변환하는 작업이 필요합니다. 그리고 변환된 프로젝트를 테스트하기 위해 원하는 환경에 따라 실행 모드를 선택하고 테스트를 진행합니다. 이번 장에서는 프로젝트 빌드와 실행에 대해 살펴봅니다.

프로젝트 제너레이트

제너레이트 (Generate)

넥사크로 스튜디오에서 편집한 파일은 실행하기 위해 자바스크립트 파일로 변환하는 과정이 필요합니다. 이 동작을 Generate라고 합니다.

Generate Application

Generate 동작을 Application 단위로 실행합니다.

리본 메뉴 [HOME - Generate & Launch - Generate - Application] 또는 메뉴 [Generate > Application]을 선택해 실행할 수 있습니다.

서비스에 등록된 파일은 ADL에 종속되지 않고 TypeDefinition에서 관리하므로 ADL 선택에 상관없이 모두 Generate 됩니다.

Generate Theme

Generate 동작을 테마 단위로 실행합니다.

리본 메뉴 [[HOME - Generate & Launch - Generate - Theme] 또는 메뉴 [Generate > Theme]을 선택해 실행할 수 있습니다.

Generate Service

Generate 동작을 서비스 단위로 실행합니다.

리본 메뉴 [HOME - Generate & Launch - Generate - Service] 또는 메뉴 [Generate > Service]을 선택해 실행할 수 있습니다.

Generate File

Generate 동작을 활성화된 뷰 또는 Project Explorer에서 선택된 파일 단위로 실행합니다.

활성화된 뷰가 있는 경우에는 리본 메뉴 [HOME - Generate & Launch - Generate - File] 또는 메뉴 [Generate > File]을 선택해 실행할 수 있습니다. 활성화된 뷰가 없는 경우에는 해당 메뉴가 비활성화됩니다.

Project Explorer에서 원하는 파일을 선택하고 컨텍스트 메뉴에서 [Generate File] 항목을 선택하면 Generate 기능을 실행합니다.

Regenerate

Generate 기능은 생성할 파일이 출력경로에 이미 존재하고 변경되지 않았을 경우 해당 파일은 변환 작업 시 다시 생성하지 않습니다. Regenerate 기능은 중복 파일 유무와 상관없이 대상 파일 전체를 변환합니다. 메뉴 [Generate > Regenerate]를 선택해 수행합니다.

자동 Generate

넥사크로 스튜디오에서 프로젝트를 불러오고 편집하는 경우 Generate 된 프로젝트 파일이 필요합니다. 아래와 같은 동작을 수행할 때마다 자동으로 Generator가 동작하며 필요한 파일에 대한 Generate 기능을 실행합니다.

프로젝트 실행

넥사크로 스튜디오에서 편집한 결과물을 넥사크로에서 실행할 수 있습니다. 프로젝트 실행은 앱을 실행하는 Launch 기능과 Form만 실행하는 QuickView 기능으로 나뉩니다.

실행 모드

리본 메뉴 [HOME - Generate & Launch] 또는 툴바에서 Browser Combo 항목을 선택하여 실행 모드를 설정할 수 있습니다.

콤보 목록에 나타나는 웹 브라우저는 개발자 PC에 설치된 웹 브라우저 중 지원되는 항목만 보입니다.

NRE(Nexacro Runtime Environment)

32비트 또는 64비트 넥사크로 런타임 실행환경(NRE)으로 실행합니다. nexacro.exe 파일을 통해 실행되며 웹서버 없이 생성된 파일에 직접 접근하여 앱을 실행할 수 있습니다.

Emulator

디바이스나 스크린 설정에 따라 실행되는 모습을 미리 볼 수 있는 에뮬레이터 도구를 지원합니다. 편집 중인 화면을 디바이스, 스크린 설정에 따라 실시간으로 바꿔가며 실행 결과를 확인할 수 있습니다.


항목

설명

1

Screen List

Screen Definition 목록을 표시

2

Orientation

Tablet, Phone 타입의 Screen의 경우 화면을 가로, 세로 화면으로 표시

3

Size

화면 크기

4

Show Output

Output 창 표시 여부

5

Reload

현재 보이는 화면을 재 로드

6

Preview

현재 화면에 대한 미리보기 화면

7

Output

오류 및 메시지 표시

웹브라우저

웹브라우저에서 앱을 실행할 수 있습니다. 사용자 디바이스에 설치된 웹브라우저에서 앱을 실행합니다. 모바일 디바이스를 사용하는 경우에는 URL을 직접 입력해 실행할 수 있습니다.

Launch

넥사크로 앱을 실행하는 기능입니다. ScreenDefinition을 먼저 설정하고 실행모드를 선택합니다.

리본 메뉴 [HOME - Generate & Launch - Launch] 또는 메뉴 [Generate > Launch]로 실행할 수 있습니다. 웹 브라우저로 실행할 경우 URL을 입력하는 창이 팝업되고 입력한 URL을 선택한 웹 브라우저에서 실행합니다. 로컬 웹 서버를 사용하는 경우에는 메뉴 [Tools > Options > Project > Launch] 항목에서 지정한 "Server Host Url"이 URL로 지정됩니다.

메뉴 [Tools > Options > Project > Launch] 항목에서 "Web Server"를 선택한 경우 URL 값이 입력되어 있지 않으며 [Run Configuration] 창 표시 여부가 체크되어 있지 않으면 아래와 같이 URL 값을 입력하는 창이 표시됩니다.

메뉴[Tools > Options > Project > Launch]에서 [Run Configuration] 창 표시 여부를 선택한 경우에는 아래와 같은 화면이 표시됩니다.

Use Nexacro Runtime Browser excute paremeters 항목 옆에 [?] 버튼 클릭 시 아래 도움말 항목을 실행합니다.

Misc. Objects > System > Method > execNexacro

QuickView

활성화된 뷰가 Form 편집 뷰일 경우 QuickView를 실행할 수 있습니다. 또는, Project Explorer가 활성화된 상태에서 선택된 트리 아이템이 Form 파일일 경우에도 QuickView를 실행할 수 있습니다.

QuickView는 리본 메뉴 [HOME - Generate & Launch - QuickView] 또는 메뉴 [Generate > QuickView]로 실행할 수 있습니다.

부트스트랩 템플릿 관리하기

자동으로 생성되는 부트스트랩 HTML 파일을 사용자가 필요한 코드를 추가한 템플릿을 적용해 생성할 수 있습니다. 메뉴[Generate > Bootstrap Customize] 항목을 선택하고 템플릿 콘텐츠를 편집하면 자동으로 생성되는 부트스트랩 파일에 반영됩니다.

부트스트랩 템플릿에서는 아래 5개 파일을 관리할 수 있습니다.

파일

설명

index.html

Web Browser 배포 파일 Packing 시 생성됩니다.

별도 파라미터 없이 서버에 배포하고 해당 파일 URL 접근 시 실행합니다.

launch.html

넥사크로 스튜디오에서 [Launch] 실행 시 사용하는 파일입니다.

Generate 시 생성되며 배포 시에는 사용하지 않습니다.

screenid를 파라미터로 받아서 실행합니다.

quickview.html

넥사크로 스튜디오에서 [QuickView] 실행 시 사용하는 파일입니다.

Generate 시 생성되며 Web Browser 배포 파일 Packing 시에도 생성됩니다.

screenid와 formname을 파라미터로 받아서 실행합니다.

popup.html

nexacro.open 메소드로 모달리스 윈도우 실행 시 사용하는 파일입니다.

Generate 시 생성되며 Web Browser 배포 파일 Packing 시에도 생성됩니다.

run.html

iOS 운영체제 배포 파일 Packing 시 생성됩니다.

Update Type이 "Server"인 경우에는 Run.html 파일로 생성되며 "Update", "Local"인 경우에는 Run.zip 파일 내에 압축된 형태로 생성됩니다.

Bootstrap Customize의 기본 기능은 아래와 같습니다.


항목

설명

1

부트스트랩 템플릿 목록

편집할 부트스트랩 템플릿을 선택합니다.

2

부트스트랩 탬플릿 편집

선택한 부트스트랩 템플릿 콘텐츠를 수정합니다.

필수 키워드는 파란색 "!"로 줄번호 옆에 표기하고 있으며 필수 키워드를 수정하거나 삭제한 경우에는 편집창 상단에 경고 메시지를 표시합니다.

3

부트스트랩 템플릿 반영

작성된 템플릿 콘텐츠을 저장하고 프로젝트 부트스트랩 파일을 재생성합니다.

4

부트스트랩 템플릿 초기화

2가지 초기화 옵션을 제공합니다.

현재 열려있는 부트스트랩 템플릿만 기본값으로 되돌리거나 전체 부트스트랩 템플릿을 기본값으로 되돌릴 수 있습니다.

스크립트 코드 추가한 템플릿 만들기

URL 파라미터를 사용해 특정한 언어 코드를 입력받는 기능을 구현하려 한다면 아래와 같이 템플릿에 코드를 추가할 수 있습니다.

1

메뉴[Generate > Bootstrap Customize] 항목을 선택하고 Bootstrap Customize를 실행합니다.

2

부트스트랩 템플릿 목록에서 quickview.html 파일을 선택합니다.

3

script 태그 아래에 oninitframework function에 아래 코드를 추가합니다.

nexacro._lang = urlParams.lang;

4

[OK] 버튼을 클릭하면 창이 닫히고 부트스트랩 파일을 다시 생성합니다.

5

Generate Path로 지정한 경로에 생성된 quickview.html 파일을 텍스트 편집기에서 열어 추가한 코드가 파일 생성 시 반영됐는지 확인합니다.

부트스트랩 템플릿 편집 시 주의 사항

키워드 수정 또는 삭제

키워드 항목을 수정하거나 삭제하는 것은 권장하지 않습니다. 키워드를 수정하거나 삭제하는 경우 부트스트랩 편집창에 아래와 같이 경고 메시지가 표시됩니다. 아래 그림에서는 #{FRAMEWORK_LIBRARY} 항목을 #{FRAMEWOR_LIBRARY}으로 수정했습니다.

경고 메시지가 표시되어도 저장 후 반영할 수 있습니다. [OK] 버튼 클릭 시 한 번 더 반영 여부를 확인합니다.

생성된 코드를 실행하면 프레임워크 라이브러리를 정상적으로 호출하지 못하고 오류로 처리됩니다.

기본 스크립트 수정

nexacro._initHTMLSysEvent이나 nexacro._loadADL와 같은 함수는 넥사크로 프레임워크 내부에 지정된 함수를 호출하는 부분이기 때문에 삭제하거나 위치를 변경할 경우 앱 실행에 영향을 미칠 수 있습니다. 앱 실행에 영향을 주지 않는 범위에서 수정할 수 있습니다.

참고 사항

부트스트랩 템플릿 설정 파일 경로

부트스트랩 템플릿을 설정한 경우에는 프로젝트 경로에 설정 파일이 생성됩니다. 부트스트랩 템플릿 파일을 공유하려면 설정 파일과 프로젝트 파일(XPRJ)에 해당 설정 파일을 지정한 태그가 추가되어야 합니다.

[project path]\bootstrap.xml

프로젝트 파일(XPRJ)에는 아래와 같이 태그가 추가됩니다.

<?xml version="1.0" encoding="utf-8"?>
<Project version="2.1">
...
  <BootstrapCustomize url="bootstrap.xml"/>
</Project>

키워드 목록

키워드

설명

#{DOCTYPE}

DOCTYPE 태그 생성

Environment 정보

#{LANGUAGE}

locale 속성값에 따라 HTML 속성 태그 생성

#{META_CHECKVERSION}

checkversion 속성값에 따라 meta 태그 생성

값을 설정하지 않으면 태그를 생성하지 않습니다.

#{FAVICON}

icon 속성값에 따라 link 태그 생성

값을 설정하지 않으면 태그를 생성하지 않습니다.

#{USERFONT_STYLE}

userfontid 속성값에 따라 태그 생성

값을 설정하지 않으면 태그를 생성하지 않습니다.

Project 정보

#{FRAMEWORK_LIBRARY}

프레임워크 js 파일 script 태그 생성

#{COMPONENTS_LIBRARY}

컴포넌트 js 파일 script 태그 생성

#{ENVIRONMNET_LIBRARY}

environment.xml.js 파일 script 태그 생성

#{SCREEN_INFORMATION}

Screen 설정 정보 처리

#{USERFONT_INFORMATION}

xfont 설정 정보 처리

Run.html

#{MOBILE_LIBRARY}

archivefiles.js 파일 script 태그 생성

#{PROJECT_URL}

사용자가 입력한 프로젝트 URL

Splash Loader

옵션 [Project > Generate > General] 항목에서 Set Splash Loader 항목을 체크한 경우 Splash Loader를 표시하는 스크립트가 활성화됩니다.

키워드

설명

#{SPLASH_DEFINE_STYLE}

Splash Loader UI 정의

#{SPLASH_SHOW_STYLE}

Splash Loader UI 표시 영역 설정

#{SPLASH_HIDE_STYLE}

로딩 후 Splash Loader UI 감춤 처리

Splash Loader UI를 바꾸고자 할 경우에는 #{SPLASH_DEFINE_STYLE} 키워드를 style 태그로 변경합니다.

#{SPLASH_DEFINE_STYLE} 키워드를 삭제하면 Bootstrap Customize 창 상단에 경고 메시지가 표시되고 저장 시에도 Confirm 창이 표시됩니다. style 태그를 적절하게 작성했다면 동작에는 영향을 미치지 않습니다.


#{SPLASH_SHOW_STYLE} 키워드에서 "loader"이라는 class 명을 정의하고 있습니다. class 명도 수정하고자 한다면 #{SPLASH_SHOW_STYLE} 키워드도 태그로 변경해야 합니다.

<!-- SPLASH_DEFINE_STYLE : Defines the style of the splash screen that is visible while modules are loading -->
	#{SPLASH_DEFINE_STYLE}
<!-- SPLASH_DEFINE_STYLE : Defines the style of the splash screen that is visible while modules are loading -->

<style>
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #111111;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  }
  
  @-webkit-keyframes spin{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
   }
   
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
   }	
</style>