NEXACRO 기본

1. 프로젝트 생성

1-1. File -> New -> Project 를 클릭하여 새로운 프로젝트를 생성한다.

1-2. 클릭하면 다음과 같은 창이 나오는데, Application을 클릭하면 빈 프로젝트가 생성되고, Template를 선택하면 샘플이 포함된 프로젝트가 생성된다.

1-3. 프로젝트 이름과 경로를 설정하고 Next 버튼을 누르면 아래와 같은 화면이 뜬다.

• 위 화면에서는 사용할 스크린정보를 선택한다.

1-4. 스크린 정보 선택 후 Next 버튼을 누르면 아래와 같은 프레임유형 선택 화면이 뜬다.

• 위 화면에서는 브라우저 내의 화면을 어떻게 분할하여 사용할지에 대한 정보이다.

2. Form 생성

• 넥사크로에서 실행되는 화면을 폼(Form) 이라고 하며, 폼은 xfdl 확장자로 생성되는 xml 파일이다.

2-1. 폼(Form) 생성

• File -> New -> Form 클릭 또는 단축키 ctrl + n

2-2. 클릭시 아래와 같은 팝업이 뜬다.

• Name 을 설정하고 Location을 Base로 설정후 Next 버튼을 클릭한다.

2-3. 클릭시 아래와 같은 레이아웃을 지정하는 팝업이 뜬다.

• 레이아웃(Layout)은 폼(Form)의 크기와 레이아웃 정보를입력할 수 있고, 하나의 폼에 여러가지 레이아웃을 추가할 수 있다.
• 타입 속성을 이용하여 Fluid Layout 기능을 사용할 수 있다.

2-4. 포지션(Position) 설정

• 포지션(Position) 에서는 생성되는 컴포넌트 크기와 좌표의 기본단위를 설정하는 곳이다.
• 크기와 좌표는 px, %, em, rem 단위로 구성되어있다

2-5. Finsh 버튼을 클릭하여 폼(Form) 생성을 완료한다.

• 생성을 완료하면 상단의 컴포넌트 툴바가 활성화 된다.
• Base 디렉토리 안에 위치되어있다.

3. 컴포넌트 배치와 스크립트 작성

3-1 버튼 컴포넌트 배치하기

• 상단 컴포넌트 툴바에서 버튼 컴포넌트 선택 후, 원하는 위치에 Drag & Drop 으로 배치한다.

3-2 버튼의 속성값 변경하기

3-2-1 버튼의 보이는 글자 변경하기

• 1. 버튼을 두번 클릭하여 변경 (여기서 빠르게 더블클릭 할경우 이벤트 함수가 생기므로 속도를 조절해야 한다)
• 2. Properties 에서 text 속성을 찾아 직접 변경한다.
• 3. 클릭 후 단축키인 F2를 눌러 변경한다.
• 4. 스크립트를 사용하여 텍스트를 변경할 수 있다.

this.Button00_onclick = function(obj:nexacro.Button, e:nexacro.ClickEventInfo)
{
  this.Button00.set_text("btn_hello")
}

3-2-2 버튼의 이벤트 설정

• 이벤트 탭에서 오른쪽의 빈 영역을 더블클릭하면 생성된다.
• 자동으로 "컴포넌트 ID_이벤트 명" 형식의 자바스크립트 함수가 생성된다.

• 사용자가 직접 함수명을 지정하는 방법
• 이벤트 탭의 빈 영역에 원하는 함수명(ex : fn_Click)을 입력한 후 엔터키를 누르면 함수가 생성된다.

• 다음과 같은 함수가 생성된 것을 볼 수 있다.

4. 실행시켜보기

4-1 Generate 하기

• 만든 화면은 XML 파일로 생성되기 때문에 실행하기 위해서는 자바스크립트변환(Generate)를 해야한다.

• Generate는 화면을 수정한 후, 저장할 때 자동으로 변환된다.

• Output 창에 결과가 표시된다.
  

• 메뉴의 Generate에서 수동으로 할 수도 있다.
  

• 자바스크립트로 변환된 파일은 Generate Path에 설정된 경로에 저장된다.

• 저장경로는 메뉴의 Tools -> Option 클릭 후

• 나오는 팝업창에서 Project > Generate 의 Generate Path에서 확인하거나 수정할 수 있다.

• 프로젝트 경로에 있는 XML 파일과, Generate 경로에있는 자바 스크립트 파일 비교

4-2 Quickview 로 변환된 파일 결과 확인

• 툴바에서 Quckview 아이콘을 선택하거나, ctrl + F6 단축키를 사용하여 퀵뷰를 실행한다.

• 원하는 실행환경을 선택한 후 결과를 확인한다.

• 위는 Nexacro Runtime Environment(x64) 의 실행 결과이다.

• 위는 Nexacro Emulater 의 실행결과이다.
• Nexacro Emulater는 크기를 변경할 수 있는 기능이 있어, 데스크톱 외에도 모바일 등 다양한 스크린에서의 결과를 확인 할 수 있다.

• 위는 Chrome 의 실행결과이다.
• 로컬 PC에 설치된 브라우저만 표시된다.
• 만약 QuickView 창에서 웹 브라우저 목록이 보이지 않는다면 Nexacro Studio의 라이센스를 갱신해야한다.