3.작업 영역

넥사크로 스튜디오는 애플리케이션 프레임, 프로젝트 탐색창, 폼 디자인, 속성창, 메시지창으로 구분됩니다.

구성요소

설명

Application

Frame

1 Menu, Tool Bar

메뉴 영역과 TextStyle, Alignment, Object 등을 제어하는 툴바를 표시

6 Status Bar

넥사크로 스튜디오의 상태를 표시하는 상태 표시줄

2 Project Explorer

작업중인 프로젝트 구성 표시

3 Form Design

디자인, 소스, 스크립트 편집

4 Properties

폼, 컴포넌트, Dataset 등의 속성 및 이벤트 속성표시, 편집

5 Message Window

각종 메시지 및 찾기 결과 표시

3.1애플리케이션 프레임

애플리케이션 프레임에는 넥사크로 스튜디오 메뉴와 툴바 영역이 포함되며, 현재 넥사크로 스튜디오의 상태를 나타내는 상태 표시줄을 제공합니다.

3.1.1메뉴, 툴바 영역

기본 메뉴바와 툴바가 표시되는 영역입니다. 메뉴바는 넥사크로 스튜디오에서 기본으로 제공되며 툴바는 사용자 설정에 따라 표시 여부를 선택할 수 있습니다.

툴바 표시 여부툴바:표시 여부 설정는 아래 메뉴에서 선택할 수 있습니다. 체크된 항목은 표시되고 체크를 해제하면 보이지 않습니다.

[Menu] File > View > Toolbars

메뉴를 사용하지 않고 메뉴, 툴바 영역에서 오른쪽 마우스를 클릭해 나타나는 컨텍스트 메뉴툴바:컨텍스트 메뉴에서도 툴바 표시 여부를 선택할 수 있습니다.

툴바 앞부분으로 마우스를 가져가면 마우스 커서가 move 형태로 변경되고 해당 영역을 클릭하고 다른 위치로 드래그하면 툴바의 위치나 순서를 변경툴바:위치, 순서 변경할 수 있습니다.

3.1.2상태 표시줄상태 표시줄

그림 3-1Statusbar

상태 표시줄에 표시되는 넥사크로 스튜디오의 상태 값은 아래와 같습니다.

표 3-1Statusbar


기능

1

넥사크로 스튜디오의 상태를 보여주는 메시지

2

현재 마우스 좌표

3

선택된 컴포넌트의 폼 좌표 (단위:픽셀)

4

선택된 컴포넌트의 크기 (단위:픽셀)

5

현재 파일의 상태

6

스크립트 삽입모드 상태

7

<CAPS LOCK> 설정/해제 상태

8

<NUM LOCK> 설정/해제 상태

3.2창 배치창 배치

상태 표시줄과 폼 디자인 창을 제외한 넥사크로 스튜디오의 모든 창은 원하는 위치에 배치하거나 보이지 않게 감출 수 있습니다.

3.2.1보이기/감추기

기능을 제공하는 창 제목줄 왼쪽에 창을 닫거나 감출 수 있는 아이콘을 제공합니다.

표 3-2Statusbar


기능

1

설정에 따라 해당하는 창을 자동으로 감추어 주는 기능을 제공합니다.

창이 감추어진 경우에는 해당 창의 제목이 화면 오른쪽 또는 왼쪽에 탭으로 표시되며 탭 위에 마우스를 가져가거나 [View] 메뉴에서 해당 창을 선택했을 때 보입니다.


설정에 따라 아이콘의 모양은 아래와 같이 변경됩니다.

창을 고정했을 경우

창을 자동으로 감추도록 설정했을 경우

2

해당 창을 닫습니다.

여러 개의 창이 탭으로 겹쳐 있는 경우에 창을 자동으로 감추는 설정을 적용하면 겹쳐진 창이 모두 해당 방향에 탭으로 표시되며 감춰집니다.

3.2.2이동

기능을 제공하는 창의 배치를 변경하거나 다른 창과 겹쳐서 탭으로 표시할 수 있습니다. 또는 넥사크로 스튜디오 영역을 벗어나 별도의 윈도우로 배치할 수도 있습니다.

위치 변경

창의 제목 표시줄 영역 위에서 오른쪽 마우스를 누른 상태에서 끌어내면 이동할 수 있는 상태가 됩니다.

이동할 수 있는 상태에서 넥사크로 스튜디오 영역 밖으로 이동하면 별도의 윈도우로 사용할 수 있습니다. 2개 이상의 모니터를 사용하고 있다면 폼 디자인 창은 왼쪽에 속성창은 오른쪽에 배치할 수도 있습니다.

결합

넥사크로 스튜디오 내에서 메뉴, 툴바 영역과 상태 표시줄을 제외한 나머지 영역에 창을 배치할 수 있습니다. 단, 폼 디자인 창의 위치는 변경할 수 없습니다.

마우스로 창을 이동하는 중에 다른 창 위에 마우스 포인터가 위치하게 되면 해당 창을 기준으로 어떻게 이동하고 있는 창을 결합할지 안내해주는 아이콘이 나타납니다.

표 3-3Statusbar


기능

1

해당 창을 기준으로 이동 중인 창을 결합할 위치를 지정합니다. 이 때 마우스 포인터로 지정한 방향에 따라 창을 결합할 영역이 2 번과 같이 표시됩니다.

2

창이 결합할 영역을 표시합니다.

3

해당 창 기준이 아니라 메뉴, 툴바 영역과 상태 표시줄 영역을 제외한 전체 화면 영역에서 창을 결합할 방향을 지정합니다.

예시 그림에서 1 번을 선택했을 때는 폼 디자인 창 바로 위에 속성창을 결합하지만 3 번을 선택하면 툴바 아래에 속성창을 결합합니다.

탭 결합

폼 디자인 창은 해당 창을 기준으로 바깥쪽에 창을 결합하지만 나머지 창은 탭 형식으로 중첩해 결합할 수 있습니다.

폼 디자인 창 위에 결합할 때와 다르게 가운데 위치를 선택할 수 있는 옵션이 추가되고 해당 위치에 마우스 포인터를 가져가면 창이 결합할 영역이 해당 창 위에 표시되며 하단에 탭 모양이 나타납니다.

탭으로 결합한 창을 이동할 때 제목 표시줄을 마우스로 누른 채 이동하면 해당 영역에 포함된 모든 창이 같이 움직이고 하단 탭 영역을 누른 채 이동하면 해당하는 창만 이동합니다.

3.3프로젝트 탐색(Project Explorer)

프로젝트 탐색 창프로젝트 탐색 창(Project Explorer)에서는 프로젝트에 포함된 모든 항목을 트리 형태로 표시해줍니다. 프로젝트 탐색창은 아래와 같이 보입니다.

표 3-4Project Explorer


설명

1

프로젝트에 포함된 항목 중 찾고자 하는 검색어를 입력하는 검색 창

검색어 입력 후 엔터키 또는 F3 키를 입력하면 해당하는 항목이 선택 상태로 변경됩니다.

(입력하는 항목은 대소문자 구분을 하지 않습니다)

2

검색창에 입력된 값과 일치하는 항목만 필터링해서 표시

검색어 입력창에 검색어 입력 후 필터링 아이콘을 클릭하면 서비스 그룹 내에 같은 문자열이 포함된 파일만 화면에 보입니다.

3

적용된 필터 기능을 초기화

4

필터 기능을 적용할 서비스 그룹

5

편집 동기화 기능

6

TypeDefinition, GlobalVariables, ADL, FDL등 프로젝트에 포함된 요소 표시

3.3.1프로젝트 검색

프로젝트 검색은 프로젝트에 포함된 파일 및 아이템을 대상으로 검색을 처리합니다. 검색어 입력 후 엔터키(또는 F3키)를 치면 바로 검색이 진행되며 다음 검색을 진행하려면 F3키를 입력합니다.

'Data'라는 검색어를 입력하고 프로젝트 검색을 진행하면 TypeDefinition에 지정된 Dataset 컴포넌트와 GlobalVariables에 사용자가 생성한 Dataset 변수가 검색됩니다.

3.3.2필터 (Filter)필터 (Filter)

필터 기능은 서비스 그룹 내에 포함된 파일과 파일 내 속성을 대상으로 입력된 항목이 포함된 파일만 필터링해서 보여주는 기능입니다.

Form 파일을 열지 않은 상태에서는 Form 파일 이름만을 대상으로 필터링을 진행하고 Form 파일을 편집하고 있는 중에는 Form에 포함된 컴포넌트 id나 기타 속성을 대상으로 필터링을 진행합니다.

Form 파일을 열지 않은 상태에서 'Drag'라는 검색어를 입력하고 필터 기능 아이콘을 클릭하면 Form 이름에 'Drag'가 포함된 파일만 보입니다.

필터 기능은 프로젝트 진행 시 업무에 따라 파일(Form) 이름을 정하는 규칙을 지정하는데 원하는 업무에 해당하는 파일을 쉽게 찾을 수 있도록 제공하는 기능입니다.

프로젝트 검색과 필터 기능에서 서비스 그룹에 포함된 Form 파일을 열지 않은 상태에서는 Form 파일 이름만을 대상으로 처리되며 Form 파일을 편집하고 있는 중에는 Form에 포함된 레이아웃이나 스크립트 관련 속성까지 포함해 처리됩니다.

프로젝트 검색은 전체 프로젝트에 포함된 아이템과 파일을 대상으로 하지만 필터 기능은 서비스 그룹 내에 사용자가 생성한 파일과 속성만을 대상으로 합니다.

3.3.3편집 동기화 (Edit Sync)편집 동기화 (Edit Sync)

선택된 프로젝트 요소 또는 폼 내에 포함된 스크립트나 레이아웃 속성에 해당하는 코드 위치를 편집창에서 열어주는 기능입니다.

프로젝트 요소별 실행되는 파일은 아래와 같습니다.

프로젝트 요소

실행되는 파일

TypeDefinition

default_typedef.xml

GlobalVariables

globalvars.xml

ADL

프레임 스크립트가 있을 때 해당 소스 파일(xadl)

Form > Layout

해당 Form 파일 Source 탭

Form > Objects

해당 Form 파일 Source 탭

Form > Script

해당 Form 파일 Script 탭

3.4폼 디자인(Form Design)

프로젝트에 필요한 컴포넌트를 배치해 애플리케이션의 각 화면을 구성합니다. 폼 디자인 창에서는 디자인 편집과 소스 편집, 스크립트 편집을 필요에 따라 선택해 작업합니다.

3.4.1디자인 편집(Design)폼 디자인 창:디자인(Design)

개발자가 원하는 곳에 컴포넌트를 배치할 수 있으며 각각의 컴포넌트를 자유롭게 편집하고 이동하거나 정렬해 원하는 화면을 구성할 수 있습니다. 컴포넌트를 배치하는 Form Canvas 영역은 개발자가 임의로 크기를 변경할 수 있습니다.

그림 3-2Design Window

3.4.2소스 편집(Source)폼 디자인 창:소스(Source)

Form의 내용 중 스크립트 영역을 제외한 모든 내용을 XML 형태로 표시하며, XML 소스를 직접 편집해 Form의 내용을 변경할 수 있습니다.

그림 3-3Source Window

3.4.3스크립트 편집(Script)폼 디자인 창:스크립트(Script)

Form이나 각종 컴포넌트의 Event 처리 함수와 사용자 함수, 비즈니스 로직을 작성합니다.

그림 3-4Script Window

사용하고 있는 함수나 이벤트는 스크립트 편집창 상단의 콤보박스에서 목록폼 디자인 창:스크립트(Script):함수, 이벤트 목록으로 제공됩니다. 원하는 항목을 선택하면 해당 항목이 있는 코드 위치로 이동합니다.

3.5속성 편집(Properties)속성 창:속성 편집 창(Properties)

편집 중인 Form이나 컴포넌트, Dataset 등에 대한 속성 및 이벤트 항목을 표시하고 편집할 수 있습니다.

그림 3-5Properties Window

3.5.1컴포넌트 목록속성 창:속성 편집 창(Properties):컴포넌트 목록

편집 중인 Form에 포함된 모든 컴포넌트, Dataset 등을 Component ID (Type) 형태로 보여줍니다.

그림 3-6Component List

3.5.2툴바

정렬 방식속성 창:속성 편집 창(Properties):정렬 방식

Group Sort

선택된 오브젝트의 속성이나 이벤트를 그룹별로 정렬하여 편집합니다. 그룹별로 편집할 때는 그림과 같이 '+'나 '-'를 마우스로 클릭하여 항목을 펼치거나 접을 수 있습니다.

그림 3-7Toolbar[Group Sort]

Alphabet Sort

선택된 오브젝트의 속성이나 이벤트를 이름순으로 정렬하여 편집합니다.

그림 3-8Toolbar[Alphabet Sort]

편집 대상속성 창:속성 편집 창(Properties):편집 대상

Attribute Info

선택된 오브젝트의 속성을 편집하는 기능을 제공합니다.

그림 3-9Toolbar[Group Sort]

Init Info

MLM 기능 사용 시 최초 애플리케이션이 실행했을 때만 지정된 속성값을 사용하고 이후에는 사용자가 입력하거나 실행 중 변경된 값을 사용해야 하는 경우가 있습니다. 그런 항목값은 Init Info 속성으로 별도 관리합니다. 속성값 중 Layout Information에 해당하는 값을 제외한 나머지 값 중에서 일부 항목만 편집할 수 있습니다.

그림 3-10Toolbar[Group Sort]

Event Info

선택된 오브젝트의 이벤트를 편집하는 기능을 제공합니다

그림 3-11Toolbar[Event]

Bind Info

선택된 오브젝트의 속성에 Dataset을 바인딩하는 기능을 제공합니다.

그림 3-12Toolbar[Property Bind]

Pseudo

선택된 오브젝트가 컴포넌트일 경우에만 활성화되며, disabled, focused 등 컴포넌트의 상태에 따른 컴포넌트의 스타일을 확인할 수 있습니다.

그림 3-13Toolbar[Pseudo List]

3.5.3스타일 속성 편집(Style Property Editor)속성 창:스타일 속성 편집 창(Style Property Editor)

컴포넌트의 스타일 속성을 직관적으로 입력, 수정할 수 있는 편집 창으로 스타일 속성 편집 창에서 입력, 수정된 값은 속성 창에도 자동으로 반영됩니다. 화면 구성은 아래와 같습니다.

그림 3-14Style Property Editor

표 3-5Style Property Editor


속성

설명

1

Component List

편집 중인 Form이 가지고 있는 모든 컴포넌트, Dataset 등을 목록에 표시

2

Pseudo List

선택된 컴포넌트의 각 Pseudo별로 스타일 속성을 수정할 수 있도록 Pseudo 목록을 표시

3

Style Property

컴포넌트의 스타일 속성 항목을 직관적으로 수정할 수 있도록 표시

3.6메시지 창(Message Window)

3.6.1Output메시지 창:Output

넥사크로 스튜디오로 작업하는 중에 발생할 수 있는 각종 메시지를 표시합니다. 메시지에는 각종 오류, 진행과정 표시 메시지 등이 포함됩니다.

그림 3-15Output Window

3.6.2Find Results메시지 창:Find Results

Find in Files 명령의 처리 결과를 표시합니다. 표시된 각 파일을 더블 클릭하면 해당 편집 창이 열리면서 해당 라인이 표시됩니다. Find in Files 검색 창에서 ‘Find results 2 window’의 체크 여부에 따라 ‘Find Results 1’ 또는 ‘Find Results 2’에 결과를 표시합니다.

그림 3-16Find Result Window

3.6.3Global Bookmark메시지 창:Global Bookmark

소스나 스크립트 편집 창에서 사용한 북마크 목록을 관리합니다. 목록에 표시된 북마크를 더블 클릭하면 편집 창이 열리고 해당 라인이 표시됩니다.

그림 3-17Global Bookmark Window

표 3-6Global Bookmark Window

아이콘

이름

설명

Toggle Bookmark

커서 위치의 북마크를 설정 및 해제

Previous Bookmark

이전 북마크를 찾아 커서를 위치

Next Bookmark

다음 북마크를 찾아 커서를 위치

Previous Bookmark in Document

현재 편집 창에서 이전 북마크를 찾아 커서를 위치

Next Bookmark in Document

현재 편집 창에서 다음 북마크를 찾아 커서를 위치

Clear Bookmark

설정된 북마크를 모두 해제

Clear Bookmark In Document

현재 편집 창에서 설정된 북마크를 모두 해제

Project Filter 항목의 옵션을 조절하여 북마크 목록을 필터링 할 수 있습니다. 또한 아래의 옵션 외에 북마크를 가진 프로젝트 목록이 옵션 창에 추가로 표시됩니다.

표 3-7Project Filter Option

옵션

설명

Show All Bookmarks

넥사크로 스튜디오에서 설정된 모든 북마크를 목록에 표시

Show Bookmarks that marked in Current project only

현재 프로젝트에 해당하는 북마크만 목록에 표시.

Global Bookmark 창에서 북마크를 설정, 해제하면 해당 편집 창에 바로 반영되며, 북마크 목록은 넥사크로 스튜디오 내부적으로 별도 관리하기 때문에 다른 장소에서 만든 프로젝트를 복사해 작업하는 경우 북마크까지 복사되지 않습니다.

3.7디버그 창(Debug Window)

작성된 애플리케이션 코드의 문제점을 찾기 위해 디버깅 작업을 진행할 때 필요한 기능을 제공합니다.

넥사크로 스튜디오에서 제공하는 디버깅 기능은 런타임으로 실행했을 때만 동작합니다. 실행환경이 웹브라우저인 경우에는 웹브라우저에서 제공하는 디버깅 기능을 사용해야 합니다.

웹브라우저에서 제공하는 디버깅 기능은 아래 링크 정보를 참조하세요.

인터넷 익스플로러 http://msdn.microsoft.com/en-us/library/ie/gg699336(v=vs.85).aspx

구글 크롬 https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

파이어폭스 https://developer.mozilla.org/en/docs/Debugging_JavaScript

3.7.1Debug Message

디버깅 모드에서 발생하는 메시지를 표시합니다.

3.7.2Breakpoints

디버깅 모드에서 일시 정지할 위치를 스크립트 코드 상에서 지정할 수 있습니다. 이렇게 지정된 위치를 브레이크 포인트라고 하며 지정된 값은 브레이크 포인트 창에서 목록 형태로 볼 수 있습니다.

브레이크 포인트가 설정된 소스 위치로 이동하거나 비활성화 또는 삭제하는 기능을 제공합니다.

3.7.3Call Stack

현재 위치까지 호출된 함수를 역순으로 표시합니다. 해당 항목을 더블클릭하면 이벤트를 호출한 위치의 코드로 이동합니다.

오른쪽에 있는 돋보기 아이콘을 더블클릭하면 새로운 창에 해당 이벤트 코드를 표시해줍니다.

3.7.4Variables

현재 위치에서 접근 가능한 변수나 오브젝트의 값을 표시합니다.

3.7.5Watch

특정 변수 또는 오브젝트를 지정해놓고 해당 값의 변화를 살펴보는 기능을 제공합니다.