You are here

LabVIEW Tech-Tip 23호: 탭컨트롤을 활용한 효율적인 프론트 패널의 구성

 

개요

대형 어플리케이션의 개발 시, 프론트 패널이 본의 아니게 복잡해지는 경우를 만나게 됩니다. 이번 Tech-Tip에서는 이와 같은 경우의 프론트패널을 효율적으로 구성하기 위해, 탭컨트롤을 활용하는 방법을 살펴보고자 합니다.탭컨트롤의 사용방법을 알아보기 위해, NI의 데이터 분석 소프트웨어인 DIAdem의 인터페이스와 유사하도록 UI를 만들어 보도록 합니다.

 

예제 파일 다운로드

 

1. Ctrl+N을 입력하여 새 VI를 엽니다.
2. 컨트롤 팔레트에서 클래식>>클래식 컨테이너>> 탭 컨트롤을 선택하여 클래식 탭 컨트롤을 추가합니다. 일반 탭 컨트롤을 사용할 수도 있지만 외형상 DIAdem과 더 비슷한 클래식 탭 컨트롤을 사용한다는 점을 유의하십시오. 하지만 시스템 탭 컨트롤은 사용하지 마십시오. 왜냐하면, 시스템 탭 컨트롤은 운영체제에 의해 정의되어 사용자 정의 옵션이 부족하기 때문입니다.
 
 
3. 기본적으로 탭 컨트롤은 왼쪽 상단에 몇 개의 텍스트 라벨이 있는 탭으로 구성되어 있습니다.
 
 
4. 우선 탭을 컨트롤의 왼쪽으로 이동합니다. 이를 위해 탭 중 하나를 마우스 오른쪽 클릭하고 고급>>탭 위치>>왼쪽을 선택합니다.
 
 
5. 탭을 측면으로 이동시키면 텍스트가 회전하는 것을 확인할 수 있습니다. 텍스트의 방향을 변경할 수는 없지만 텍스트 위치에 아이콘을 추가할 수 있습니다. DIAdem과 유사하게 보이도록 만들기 위해 필요한 소스 이미지를 각 탭의 텍스트에 추가합니다.
 
 
6. 탭에 이미지를 추가하기 위해 클립보드에 이미지를 반입해야 합니다. 이를 위해 편집>>클립보드에 그림 반입을 선택하고 다운로드한 예제파일의 Icons 폴더에서 Navigate Icon.png를 선택합니다.
 
 
7. 첫 번째 탭을 마우스 오른쪽 버튼을 클릭하고 고급>>탭 레이이웃>>이미지만을 선택합니다.
 
 
8. 그 다음 다시 첫 번째 탭을 마우스 오른쪽 버튼을 클릭하고 이번에는 고급>>탭 레이아웃>>클립보드에서 이미지 반입을 선택합니다. 탭 컨트롤이 아래와 같이 나타나는지 확인합니다.
 
 
9. DIAdem과 비슷하게 만들기 위해 배경색도 변경합니다. 이를 위해 Shift 키를 누른 상태에서 마우스 오른쪽 버튼을 클릭하여 도구 팔레트를 불러오고 색 설정 도구를 선택합니다.
 
 
10. 색 설정 도구가 선택된 상태에서 탭 컨트롤을 마우스 오른쪽 버튼을 클릭하고 패널 & 객체 색상 (시스템 아래 나열된 첫 번째 색상)을 선택합니다.
 
 
11. 이제 나머지 탭에도VIEW, ANALYSIS, REPORT 순으로 동일한 작업을 진행합니다. 또는 DIAdem Style Tabs.vi를 열어 최종 결과를 확인합니다.
 
12. 추가적으로 DIAdem Style Tabs.vi에서, 선택된 탭에 하이라이트 효과를 제공하기 위해 몇 가지 코드를 추가했음을 확인합니다. 탭이 변경될 때마다 모든 탭이 약간 어두운 회색으로 변경하고 선택된 탭을 보다 밝은색으로 변경하는 코드를 프로퍼티 노드를 통하여 구현하였습니다.
 
이와 같이 탭컨트롤을 활용하면 프론트패널의 많은 항목들을 효율적으로 분류하여 배치함으로서 공간 활용 및 효과적인 UI를 개발할 수 있습니다.