화면생성 및 실행환경 설정

화면생성

  1. 아래의 방법으로 화면을 생성합니다.

[Menu] File > New > Form (.xfdl)
or
Ctrl + N
or
아이콘

넥사크로플랫폼에서는 실행되는 화면을 폼(Form)이라고 부르며 폼(Form)은 xfdl 확장자로 생성되는 XML파일입니다.

  1. Form Wizard 창이 오픈됩니다. 생성 할 화면명과 크기를 지정합니다.

    • Name : CommonStyle

    • Location : Base

    • width : 800

    • height : 800

  1. 화면에 생성 할 컴포넌트의 크기와 좌표단위를 설정합니다. 크기와 좌표는 픽셀 또는 퍼센트 단위로 설정이 가능합니다. 기본인 픽셀로 지정한 상태에서 저장합니다.

  1. Project Explorer의 Base 안에 CommonStyle 이라는 화면이 생성되며, 상단에 화면에 사용할 수 있는 컴포넌트 툴바가 활성화 됩니다.

  1. 상단의 컴포넌트 툴바에서 아이콘을 선택하고 컴포넌트를 그리기 시작할 위치에서 마우스 왼쪽 버튼을 누른 상태에서 마우스를 그래드 하면 원하는 크기 및 위치에 컴포넌트를 배치할 수 있습니다.

    | 버튼컴포넌트( 아이콘 - )로 실습해봅니다.

실행환경 설정

넥사크로플랫폼 애플리케이션을 웹브라우저에서 직접 실행하기 위해서는 실행 환경을 만들어 주어야 합니다. 넥사크로 스튜디오에서 넥사크로 브라우저로 실행하여 테스트 해 볼 수 있지만 다양한 웹브라우저에서 실제 동작하는 내용을 확인해보고 싶다면 각 개발환경에서 별도의 실행환경을 만들어 주어야 합니다. 따라서 넥사크로플랫폼 애플리케이션이 동작하기 위해서는 웹서버가 필요합니다.
넥사크로플랫폼에서는 넥사크로 스튜디오에 포함된 Local Web Server를 사용하거나 직접 Web Server를설치하여 사용하는 방법이 있습니다.

Nexacro Browser 실행

넥사크로플랫폼의 전용브라우저를 통해 실행합니다.
아래 메뉴 또는 툴바 QuickView 아이콘(  )을 클릭하여 실행 후 결과를 확인 합니다.
[Menu] Generate > QuickView (ctrl+F6)

Nexacro Browser로 자동 지정된 창이 뜹니다. 'Run' 버튼을 클릭하여 확인합니다.

1 넥사크로 에물레이터에서 실행합니다. 
      Desktop 이외의 다른 스크린(모바일 등)에서 실행결과를 확인 할 경우 사용합니다.

2 3 넥사크로 브라우저 32bit, 64bit에서 실행합니다.

4 웹브라우저에서 실행합니다. 
     로컬 PC에 설치되어 있는 웹브라우저 목록이 표현됩니다.

[ Nexacro Browser에서 실행한 결과 ]

Web Browser 실행

Internet Explorer, Chrome 등의 웹 브라우저를 통해 실행합니다. 이 경우에는 Web Server 설치가 필요합니다. 넥사크로 스튜디오에는 Local Web Server가 있어 간단한 해당 속성 설정으로 실행할 수 있습니다.이에따라 아래에서는 Local Web Server 설정으로 실행하는 방법과 경량 웹서버인 몽구스(mongoose)를 기준으로 설명합니다.

Local Web Server

  1. Tools > Options > Local Web Server 에서 속성을 설정합니다.

1 Web Server의 Host Url 및 사용 여부를 결정합니다.
2 실행된 브라우저에서 발생하는 HTTP error에 대하여 Tool의 Output창에 보여줄 지 결정합니다.
3 Local Web Server  실행 시 실행 로그에 대한 파일 저장 여부를 결정합니다.
4 Details Option 창을 띄웁니다.
5 Local Web Server는 기본적으로 자동포트를 지정하지만 임의의 포트번호를 수동으로 지정하고자 할 때 입력합니다.
6 Local Web Server 로그파일의 경로 및 파일명을 지정합니다.

넥사크로플랫폼은 작업 된 화면을 자바스크립트로 변환(Generate)하여 자바스크립트파일이 실행되는 방식입니다. 변환되는 경로는 기본으로 내문서 경로가 지정되어 있습니다.

경로확인은 Options > Project > Generate > Generate Path 에서 할 수 있습니다.

Generate시 넥사크로플랫폼 자바스크립트 통합 프레임워크 파일이 자동으로 복사됩니다.

lib

  1. 작성한 CommonStyle 화면을 엽니다.

  1. 메뉴영역의 Build 툴바의 선택박스에 현재 PC에 설치되어 있는 웹브라우저 목록이 보입니다.

    화면실행을 위해 웹브라우저를 선택 후 QuickView 아이콘( )을 실행합니다.

  1. 자동포트로 지정된 Url 경로창이 뜹니다. 'Run' 버튼을 클릭하여 확인합니다.

[ Internet Explorer Browser에서 실행한 결과 ]

Web Server

Local Web Server가 아닌 Web Server 사용 예로 별도의 설치과정이 필요없는 몽구스(mongoose)로 설명합니다. 몽구스는 Web Server root로 동작할 위치에 실행 파일을 복사해서 더블클릭하여 실행만 하면 됩니다.

  1. 아래 경로에서 몽구스 실행 파일을 다운 받습니다.

https://code.google.com/archive/p/mongoose/downloads

  1. 다운 받은 몽구스 실행 파일을 적당한 위치에 복사합니다.

    아래에서는 C루트에 mongoose 폴더를 생성하여 몽구스 파일을 복사합니다.

mongoose

  1. mongoose-5.0.exe 파일을 실행하면 윈도우 작업표시줄에 몽구스 모양의 아이콘()이 생성됩니다.

    몽구스가 실행된 경로 (C:\mongoose\)가 웹 루트 경로가 되며 8080포트를 사용합니다.

8080포트를 사용하는 다른 웹서버가 구동 중이면 실행이 안 될 수 있습니다.

몽구스 아이콘을 우클릭 > Edit Settings 을 통해 포트 등의 다른 설정을 변경 할 수 있습니다.

  1. 복사에 놓은 경로(C:\mongoose\)에서 몽구스 더블클릭하여 실행합니다.

  1. 기본경로로 지정되어 있는 변환경로를 웹루트 경로로 변경하기 위해서 Generate Path를 아래와 같이 변경합니다.

[Menu] Tools > Options > Generate
Generate Path - C:\mongoose\nexacro17_design\

  1. 옵션창 종료시 메세지가 출력되고 프로젝트 Reload 됩니다.

  1. 아래의 메뉴 또는 툴바의 Generate 아이콘( )을 이용하여 애플리케이션 전체를 Generate 합니다.

[Menu] Generate > Application

generate2

  1. 설정한 Generate Path 경로에 프로젝트가 Generate 됩니다.

mongGenerate

  1. 작성한 CommonStyle 화면을 엽니다.

  1. 실행하기 원하는 웹 브라우저를 선택한 후 QuickView 아이콘( ) 을 이용하여 실행합니다.

webbrowser

  1. Use Local Web Server 체크박스 해제 후 프로젝트 실행 경로를 다음과 같이 입력하고 결과를 확인합니다. ( 최초 한 번만 설정 )

http://localhost:8080/nexacro17_design/

[ Chrome Browser에서 실행한 결과 ]