3.넥사크로 스튜디오 UI

Edit

넥사크로 스튜디오에서 기본적으로 할 수 있는 작업은 사용자가 이용할 화면을 그리고 화면이 어떻게 동작해야 하는지 프로그래밍 코드를 작성하는 것입니다. 이런 작업을 좀 더 쉽게 처리할 수 있도록 다양한 기능을 지원하고 화면에 배치된 컴포넌트가 어떤 속성을 가졌는지 한눈에 볼 수 있도록 정리된 정보를 제공합니다.

구성요소

설명

1 메뉴, 툴바, Ribbon interface

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

(넥사크로 스튜디오 17 버전부터는 기존 메뉴와 리본 인터페이스를 선택적으로 사용할 수 있습니다)

6 Status Bar

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

View

3 Form Design

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

Dock Windows

2 Explorer

- Project Explorer

- Resource Explorer

4 Properties

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

5 Message Window

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

3.1메뉴, 툴바, 리본 인터페이스 영역

메뉴바와 툴바 또는 리본 인터페이스가 표시되는 영역입니다. 사용자의 선택에 따라 메뉴바와 리본 인터페이스를 변경할 수 있습니다.

넥사크로 스튜디오의 메뉴바와 툴바는 프로젝트의 상태, 열린 파일 등에 따라 필요한 항목이 표시됩니다.

3.1.1메뉴바와 툴바

툴바 표시 여부는 메뉴[View > Toolbars]에서 선택할 수 있습니다. 체크된 항목은 표시되고 체크를 해제하면 보이지 않습니다. 메뉴를 사용하지 않고 메뉴, 툴바 영역에서 오른쪽 마우스 버튼를 클릭해 나타나는 컨텍스트 메뉴에서도 툴바 표시 여부를 선택할 수 있습니다.

그림 3-1menu_view_toolbars

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

3.1.2리본 인터페이스

넥사크로스튜디오 설치 시 기본 설정으로 제공되는 메뉴입니다. 관련된 명령이 리본탭에 묶여 있습니다. 상단 메뉴바에서 항목을 선택하면 하단에 필요한 기능 버튼이 화면에 나타납니다.

상단 메뉴바를 제외한 기능 버튼 영역은 접었다 펼 수 있는 기능을 제공해 작업 영역을 충분하게 확보할 수 있습니다.

Quick Access Toolbar는 자주 사용하는 메뉴를 바로 사용할 수 있게 리본 인터페이스 상단 또는 하단에 배치됩니다. 기본으로 설정된 위치는 리본 인터페이스 상단이며 [Show Below the Ribbon] 메뉴를 선택하여 리본 메뉴 하단으로 이동할 수 있습니다.

3.2상태 표시줄

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

표 3-1Statusbar


기능

1

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

- 생성한 프로젝트를 열거나 닫을 때 진행 상태를 표시합니다.

- 메뉴 항목에 마우스 포인터가 멈추었을 때 각 메뉴에 따른 메시지를 표시합니다.

2

현재 마우스 좌표

3

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

4

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

5

현재 파일의 상태

파일 속성이 읽기 전용인 경우 하이라이트

6

Insert 키 상태 (INS, OVR)

소스, 스크립트 편집창에 커서가 있는 경우 하이라이트

7

<CAPS LOCK> 설정/해제 상태

8

<NUM LOCK> 설정/해제 상태

9

소스, 스크립트 편집창에 커서가 있는 경우 커서 위치

상태 표시줄 표시 여부는 메뉴[View > Status Bar]에서 토글 형식으로 선택할 수 있습니다.

3.3뷰 (View)

프로젝트에서 관리하는 파일을 편집하는 영역입니다. 뷰는 Multiple-document interface(MDI) 형태로 구성되며 사용자가 선택한 방법으로 창을 배치할 수 있습니다.

3.3.1창 배치

뷰는 최대화, 최소화가 가능하며 마우스 드래그를 이용하여 탭 순서를 변경할 수 있습니다.

탭 구성

넥사크로스튜디오에서 뷰 화면은 기본적으로 탭으로 구성되어 표시되고 있습니다. 뷰가 하나라도 최대화되어 있으면 다른 모든 뷰도 최대화 상태로 표시됩니다.

활성화 뷰를 변경하는 경우 탭 영역에서 뷰의 타이틀을 선택하거나 탭의 오른쪽 상단 영역의 "Active Files"를 선택하여 뷰 타이틀을 선택하여 활성화 뷰를 변경할 수 있습니다.

캐스캐이드 구성

뷰를 계단식 배열로 표시할 수 있습니다. 메뉴 [Window - Cascade]를 선택하거나 뷰 타이틀바 영역에서 마우스 오른쪽 버튼 클릭 시 보이는 컨텍스트 메뉴에서 [Cascade] 항목을 선택합니다.

타일 구성

뷰를 타일 형태 배열로 표시할 수 있습니다. 메뉴 [Window - Tile]를 선택하거나 뷰 타이틀바 영역에서 마우스 오른쪽 버튼 클릭 시 보이는 컨텍스트 메뉴에서 [Tile] 항목을 선택합니다.

아이콘 정렬

뷰를 최소화해서 아이콘만 남긴 상태로 화면 영역 내 흩어져 있을 때 각 아이콘을 Form Design 영역 왼쪽 하단에 모이도록 정렬할 수 있습니다. 메뉴 [Window - Arrange Icons]를 선택하거나 최소화된 아이콘 영역에서 마우스 오른쪽 버튼 클릭 시 보이는 컨텍스트 메뉴에서 [Arrange Icons] 항목을 선택합니다. 최소화하지 않은 뷰는 정렬 대상에 포함되지 않습니다.

3.3.2폼 디자인(Form Design)

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

선택한 화면 모드나 편집 상태에 따라 툴바의 활성화 상태가 변경될 수 있습니다.

예를 들어 디자인 편집 상태에서 컴포넌트를 선택하기 전에는 [Align] 툴바의 정렬 관련 옵션이 활성화되지 않습니다. 컴포넌트를 선택하면 정렬 관련 옵션이 상태에 따라 활성화됩니다.

디자인 편집(Design)

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

그림 3-2Design Window

소스 편집(Source)

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

그림 3-3Source Window

생성되는 XML 소스는 디자인 편집 화면에서 배치한 컴포넌트, 오브젝트의 위치와 속성이나 추가한 이벤트에 따라 자동으로 생성됩니다. 직접 수정하는 경우에 정해진 생성 규칙을 벗어나면 오류가 발생할 수 있습니다.

스크립트 편집(Script)

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

그림 3-4Script Window

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

3.4도킹창

메뉴와 파일 종류에 상관없이 넥사크로 스튜디오에서 공통으로 사용할 수 있는 기능은 도킹창으로 제공합니다.

3.4.1배치

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

보이기/감추기

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

표 3-2Statusbar


기능

1

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

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


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

창을 고정했을 경우

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

2

해당 창을 닫습니다.

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

이동

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

위치 변경

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

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

결합

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

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

표 3-3Statusbar


기능

1

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

2

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

3

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

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

탭 결합

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

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

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