넥사크로 N 스케치에서 화면을 만드는 방법은 2가지입니다.
첫 번째는 UI Pattern을 선택하는 방법입니다. UI Pattern은 화면 구성과 데이터가 미리 설정된 상태로 화면이 만들어집니다. 만들어진 화면에서 필요에 따라 수정할 수 있습니다.
두 번째는 Layout을 선택하는 방법입니다. 화면 배치를 위한 레이아웃만 미리 설정되어 있고 각 화면의 타입과 데이터는 개별적으로 설정해주어야 합니다.
이번 장에서는 화면을 만드는 2가지 방법을 자세히 살펴봅니다.
UI Pattern
UI Pattern 선택하고 화면 만들기
메뉴에서 [FILE > New Form] 항목 선택 시 New Form 위자드가 표시됩니다.
New Form 위자드 왼쪽 영역에서 UI Pattern 아래 4가지 타입 중 하나를 선택할 수 있습니다.
항목 | 설명 | |
|---|---|---|
1 | UI Pattern 타입 | 화면 유형에 따라 4가지 타입 중 하나를 선택할 수 있습니다. - Dashboard - Login - Portal - Master Detail |
2 | 세부 타입(미리보기) | 선택한 UI Pattern의 세부 타입을 미리보기 이미지를 확인하고 선택합니다. |
3 | Form Name | 화면 이름을 설정합니다. |
UI Pattern 타입, 세부 타입을 선택하고 Form Name을 입력한 후 [Create] 버튼을 클릭하면 화면이 만들어집니다.
화면 확인하기
화면을 만들면 작업영역에 만든 화면이 표시되고 PROJECT EXPLORER에 화면 이름이 표시됩니다.
항목 | 설명 | |
|---|---|---|
1 | PROJECT EXPLORER | 화면 목록에 화면 이름이 표시됩니다. 화면을 다시 열거나 이름을 변경할 수 있습니다. |
2 | 화면 탭 버튼 | 작업영역에 열려있는 화면 이름이 표시됩니다. [X] 버튼을 클릭해 화면을 닫을 수 있습니다. 작업영역에는 최대 10개의 화면을 열 수 있습니다. |
3 | 작업영역 | 화면이 표시되는 영역입니다. 개별 항목(VIEW)을 선택하고 편집할 수 있습니다. |
화면 편집하기
작업영역에 표시된 화면 내에서 각 영역을 마우스로 클릭해서 선택하면 오른쪽 DESIGN 패널에 COLUMNS 정보와 VIEW TYPE 정보가 표시됩니다.
항목 | 설명 | |
|---|---|---|
1 | 선택한 VIEW | 화면 내 표시되는 각 항목은 VIEW라고 합니다. 마우스로 클릭해서 선택하면 파란색 점으로 선택된 상태를 표시합니다. 선택한 VIEW에 따라 오른쪽 DESIGN 패널에 표시되는 내용이 달라집니다. |
2 | COLUMNS | 선택한 VIEW에 연결된 Data Source의 컬럼 정보를 표시합니다. 컬럼명 앞에 체크박스 선택 여부에 따라 화면에 표시할 컬럼을 선택할 수 있습니다. |
3 | VIEW TYPE | 선택한 VIEW에서 사용하는 화면 타입입니다. |
UI Pattern 목록
UI Pattern 목록입니다. UI Pattern과 각 VIEW에 연결된 DATA SOURCE와 VIEW TYPE을 설명합니다.
Dashboard
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 공지사항 | 표 > 대시보드 |
2 | 일정 | 일반 양식 > 일정 |
3 | 제품실적현황 | 차트 > 묶은 세로 막대형 - 꺽은선형 |
4 | 즐겨찾기 메뉴 | 일반 양식 > 버튼 |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 공지사항 | 표 > 대시보드 |
2 | TO-DO 리스트 | 카드 > 7 |
3 | 일정 | 일반 양식 > 일정 |
4 | 년도별실적현황 | 차트 > 영역형 |
5 | 제품별실적현황 | 차트 > 도넛형 |
Login
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 로그인 | 일반 양식 > 로그인 |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 로그인 | 일반 양식 > 이미지 |
2 | 로그인 | 일반 양식 > 로그인 |
Portal
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 포털 | 일반 양식 > 포털 메인 |
Master Detail
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 부서별 직급 합계 | 카드 > 2 |
2 | 부서별 직급 합계 | 차트 > 원형 |
3 | 부서별 직급 합계 | 차트 > 세로 막대형 |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 인사관리 | 일반 양식 > 검색창 |
2 | 인사관리 | 카드 > 3 |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 인사관리 | 일반 양식 > 검색창 |
2 | 인사관리 | 카드 > 1 |
3 | - | 일반 양식 > 목록(편집) |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 인사관리 | 일반 양식 > 검색창 |
2 | 인사관리 | 표 > 일반 |
3 | - | 일반 양식 > 목록(편집) |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 인사관리 | 일반 양식 > 검색창 |
2 | 인사관리 | 표 > 일반 |
3 | - | 일반 양식 > 목록 |
4 | - | 일반 양식 > 목록(편집) |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 인사관리 | 일반 양식 > 검색창 |
2 | 인사관리 | 표 > 일반 |
3 | 인사관리 | 표 > 일반 |
DATA SOURCE | VIEW TYPE | |
|---|---|---|
1 | 인사관리 | 일반 양식 > 검색창 |
2 | 인사관리 | 표 > 트리 |
3 | 인사관리 | 일반 양식 > 목록(편집) |
Layout
Layout 선택하고 화면 만들기
메뉴에서 [FILE > New Form] 항목 선택 시 New Form 위자드가 표시됩니다.
New Form 위자드 왼쪽 영역에서 Layout을 선택하면 11가지 타입 중 하나를 선택할 수 있습니다.
항목 | 설명 | |
|---|---|---|
1 | Layout | Layout 항목을 선택하고 Layout 타입을 선택할 수 있습니다. |
2 | Layout 타입 | Layout 타입을 미리보기 이미지를 확인하고 선택합니다. |
3 | Form Name | 화면 이름을 설정합니다. |
4 | 화면 크기 | 화면 너비와 높이를 설정합니다. |
Layout 타입을 선택하고 Form Name와 화면 크기를 입력한 후 [Create] 버튼을 클릭하면 화면이 만들어집니다.
화면 확인하기
화면을 만들면 작업영역에 만든 화면이 표시되고 PROJECT EXPLORER에 화면 이름이 표시됩니다.
UI Pattern과 달리 작업영역에서 Layout 타입에 따라 영역만 표시될 뿐 데이터는 표시되지 않습니다. 또한 VIEW를 선택해도 COLUMNS, VIEW TYPE 정보가 표시되지 않습니다.
Layout을 선택한 경우에는 각 VIEW에 대한 Data Source와 VIEW TYPE을 직접 설정해주어야 합니다.
항목 | 설명 | |
|---|---|---|
1 | viewSearch | 화면 상단에 검색 영역을 설정합니다. |
2 | viewMaster | 데이터를 목록 형태로 표시하는 화면을 설정합니다. |
3 | viewDetail (1) | viewMaster에서 선택한 데이터에 대한 상세 데이터를 표시하는 화면을 설정합니다. |
4 | viewDetail (2) | viewMaster에서 선택한 데이터에 대한 상세 데이터를 표시하고 수정할 수 있는 화면을 설정합니다. |
화면 편집하기
작업영역에 표시된 화면 내에서 각 영역을 마우스로 클릭해서 선택한 후 오른쪽 DESIGN 패널에서 COLUMNS 정보와 VIEW TYPE 정보를 추가합니다.
선택한 Layout에 따라 조금씩 다르지만 viewSearch, viewMaster, viewDetail 3개 항목으로 구분할 수 있습니다.
viewSearch
화면 상단에 검색 영역을 설정합니다.
작업영역에서 viewSearch 항목을 선택하고 오른쪽 DESIGN 패널 COLUMNS 정보에서 3번째 [Select Data Source] 아이콘을 클릭하고 목록에서 "인사관리"를 선택합니다.
컬럼 목록이 표시되면 LABEL 항목 옆에 체크박스를 해제하고 컬럼 목록 중 "부서"와 "사원명"만 체크 상태로 변경합니다.
화면 상단에 검색창이 만들어집니다.
viewMaster
데이터를 목록 형태로 표시하는 화면을 설정합니다. 한 화면 안에 viewMaster만 있을 수 있고 viewDetail과 연결되기도 합니다.
작업영역에서 viewMaster 항목을 선택하고 오른쪽 DESIGN 패널 COLUMNS 정보에서 3번째 [Select Data Source] 아이콘을 클릭하고 목록에서 "인사관리"를 선택합니다.
컬럼 목록이 표시되면 LABEL 항목 옆에 체크박스를 해제하고 컬럼 목록 중 "부서", "사원명", "재직부분", "직책", "직급"만 체크 상태로 변경합니다.
검색창 아래에 표 형태로 선택한 컬럼에 대한 데이터가 표시됩니다.
viewDetail
viewMaster 목록에서 선택한 항목에 대한 상세 데이터를 표시하는 화면을 설정합니다. VIEW TYPE에 따라 데이터를 보여주기만 할 수도 있고 편집할 수 있는 상태로 선택할 수 있습니다.
viewSearch, viewMaster와 다르게 COLUMNS 정보를 따로 선택하지 않아도 viewMaster에서 선택한 Data Source가 자동으로 선택됩니다.
작업영역에서 오른쪽 아래에 있는 viewDetail 항목을 선택하고 오른쪽 DESIGN 패널 VIEW TYPE 정보에서 목록 편집 타입을 선택합니다.
Layout 목록
Layout 목록입니다.