Tab 소개

Tab은 좁은 화면에 많은 수의 컴포넌트를 배치할 필요가 있을 때 사용하는 컴포넌트입니다. 색인표라는 Tab의 사전적 의미처럼 사용자는 탭 페이지라는 색인표를 보며 필요한 정보를 효율적으로 탐색할 수 있습니다.

Tab의 구성 요소는 다음과 같습니다.

Tab은 한 화면에 여러 개의 논리적으로 구분된 공간을 중첩하여 배치할 수 있는데 이런 공간을 탭 페이지라고 합니다. 각각의 탭 페이지는 유사한 내용의 정보를 모아 표시하는 공간으로 사용되며 구조상 한 번에 하나의 페이지만 볼 수 있습니다.

탭 페이지는 url 속성을 설정해서 다른 폼을 불러올 수도 있습니다. 이때, preload 속성의 설정에 따라 Tab의 로딩 성능에 영향을 미칠 수 있습니다.

• preload를 설정하면 메인 폼을 로딩할 때 탭 페이지와 연결된 모든 폼을 로딩하기 때문에 탭 페이지나 표시할 데이터가 많은 경우 화면의 초기 로딩이 느려집니다.

• preload를 설정하지 않으면 메인 폼을 로딩할 때 화면에 표시되는 탭 페이지와 연결된 폼만 로딩하기 때문에 화면의 초기 로딩은 빠르나 탭 페이지 전환 시마다 로딩 딜레이가 발생할 수 있습니다.

따라서 탭 페이지나 출력할 데이터가 얼마나 되는지 사용자가 모든 탭을 사용할 필요가 있는지 등을 고려하여 어떻게 하는 것이 효율적인지 판단해야 합니다.

사용 예

아래는 Tab을 사용해 화면을 구성한 어느 포털 사이트의 모습을 보여줍니다. '대표 카페', '랭킹 Top100', '급상승 Top 100', '전체'라는 총 4개의 탭 페이지로 구성되어 있으며 각 탭 페이지별로 관련된 정보가 나열되어 있음을 확인할 수 있습니다.

Tab 만들기

툴바에서 Tab 을 선택한 후, 폼 위에 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성되며 2개의 탭 페이지가 자동 생성됩니다.

생성된 Tab을 선택한 후 마우스 오른쪽 버튼을 누르면 탭 페이지 컨텍스트 메뉴가 뜹니다. [Add Tabpage]를 선택하면 마지막 탭 페이지 뒤로 새로운 탭 페이지가 추가됩니다.

탭 페이지를 삭제하려면 [Delete Tabpage]를 선택합니다. 그러면 현재 활성화되어 있는 탭 페이지가 삭제됩니다.

탭 페이지 간의 전환은 [Previous Tabpage], [Next Tabpage], [Go to Tabpage] 메뉴를 사용합니다.

Tab 컴포넌트의 showextrabutton 속성을 'true'로 설정하면 탭 버튼 위에 엑스트라 버튼이 생성됩니다. 생성만으로는 어떤 동작도 하지 않으므로 onextrabuttonclick 이벤트를 통해 버튼의 기능을 정의해줘야 합니다.

프리뷰, 넥스트 버튼은 Tab 컴포넌트의 너비 이상으로 탭 버튼의 수가 증가하면 자동으로 생성됩니다. 탭 버튼의 수가 늘어나도록 탭 페이지를 적당히 생성합니다.

QuickView(Ctrl + F6)로 실행한 후 탭 페이지를 전환하여 동작에 이상이 없는지 확인합니다.

Tab은 별도로 탭 페이지를 추가하지 않으면 기본적으로 2개의 탭 페이지를 가집니다.

멀티 라인 Tab 구성하기

표시할 정보가 많고 어떤 정보들이 있는지 한눈에 보여줄 필요가 있을 때 Tab의 멀티 라인 기능을 사용하면 편리합니다. 멀티 라인 기능은 다수의 탭 페이지로 구성된 Tab에서 탭 버튼을 여러 줄로 배치하여 어떤 탭 페이지가 있는지 사용자가 한눈에 확인할 수 있게 합니다.

예제

multiline 속성을 설정하고 탭 버튼의 너비가 Tab의 너비보다 크도록 탭 페이지를 추가하면 멀티 라인 Tab으로 구성됩니다. 버튼을 클릭하면 TabPage가 추가됩니다.

sample_tab_02.xfdl

예제에서 사용한 핵심 기능

multiline

Tab 컴포넌트에 일정 수 이상으로 탭 페이지를 추가했을 때 탭 버튼을 여러 줄로 배치할지 설정하는 속성입니다.

예제 구현 방법

툴바에서 Tab 을 선택한 후, 폼 위에 적당한 크기로 드래그하여 생성합니다.

Tab 컴포넌트를 선택한 후 Properties 창에서 multiline 속성을 'true'로 설정합니다.

기본 생성된 Tab은 2개의 탭 페이지를 갖습니다. 멀티 라인 Tab을 구성하기 위해 탭 페이지를 추가합니다.

Tab을 선택한 후 마우스 커서를 탭 페이지 영역에 놓고 마우스 오른쪽 버튼을 클릭하면 아래 그림과 같이 컨텍스트 메뉴가 나옵니다. [Add Tabpage]를 클릭하여 탭 버튼이 여러 줄이 될 때까지 새로운 탭 페이지를 생성합니다.

Tab 관련 메뉴의 기능은 다음과 같습니다.

• [Add Tabpage] 새로운 탭 페이지를 생성합니다.

• [Delete Tabpage] 현재 선택된 탭 페이지를 제거합니다.

• [Previous Tabpage] 현재 선택된 탭 페이지 바로 앞의 인덱스를 가진 탭 페이지를 선택합니다.

• [Next Tabpage] 현재 선택된 탭 페이지 바로 뒤의 인덱스를 가진 탭 페이지를 선택합니다.

• [Go to Tabpage] 특정 탭 페이지를 지정하여 선택합니다.

Tab 컴포넌트 위에 Button 컴포넌트를 배치하고 onclick 이벤트를 추가합니다.

this.btnInsert_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var i = this.Tab00.getTabpageCount()+1;
	this.Tab00.insertTabpage("TabPage"+i, -1);
};

QuickView(Ctrl + F6)로 실행합니다. TagButton이 여러 줄로 구성되어 보이는지 확인합니다.

탭 버튼 위치 조정하기

화면 구성에 따라 탭 버튼의 위치를 왼쪽이나 오른쪽 혹은 아래쪽으로 위치시켜야 할 때가 있습니다. 이때, Tab 컴포넌트의 tabposition 속성을 사용하면 탭 버튼의 위치를 변경할 수 있습니다.

예제

tabposition 속성을 설정하여 탭 버튼의 위치를 설정합니다. 탭 버튼의 위치는 왼쪽, 오른쪽, 위, 아래로 설정할 수 있습니다.

sample_tab_03.xfdl

예제에서 사용한 핵심 기능

tabposition

Tab 컴포넌트에서 탭 버튼이 표시되는 위치를 설정하는 속성입니다.

예제 구현 방법

툴바에서 Tab , Radio 컴포넌트를 생성하여 예제 화면과 같이 폼에 배치합니다.

Tab 컴포넌트의 tabposition 속성을 설정하기 위해 라디오 버튼을 사용합니다. tabposition 속성은 'top', 'left', 'right', 'bottom'의 총 4가지 값으로 설정할 수 있습니다.

1. 라디오 메뉴 구성

4개의 라디오 버튼을 생성하기 위해 Radio 컴포넌트를 선택한 후 속성창의 innerdataset 속성에서 [...] 버튼을 눌러 innerDataset을 다음과 같이 설정합니다.

2. Radio 속성 설정

3. onitemchanged 이벤트 함수 등록하기

라디오 버튼의 선택에 따라 Tab의 tabposition 속성을 설정하기 위해 Radio 컴포넌트에 onitemchanged 이벤트 함수를 작성하여 등록합니다.

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.Tab00.set_tabposition(e.postvalue);

};

QuickView(Ctrl + F6)로 실행합니다. 라디오 버튼을 클릭하여 탭 버튼의 위치가 바뀌는지 확인합니다.

탭 버튼 비활성화

상황에 따라 사용자에게 탭 페이지를 선별해서 제공해야 할 경우가 있습니다. 이때, 탭 버튼을 비활성화하면 사용자의 불필요한 접근을 막을 수 있습니다.

예제

총 4개의 탭 페이지 중 2, 3번을 비활성화한 예제입니다. 화면에는 보이나 비활성화되어 선택할 수 없습니다.

sample_tab_04.xfdl

예제에서 사용한 핵심 기능

enable

탭 페이지의 사용 가능 여부를 설정하는 속성입니다.

postindex

새로 변경된 탭 페이지의 index 값을 갖는 TabIndexChangeEventInfo 이벤트 정보 오브젝트의 속성입니다.

예제 구현 방법

툴바에서 Tab 컴포넌트를 생성하여 예제 화면과 같이 Form에 배치합니다.

기본 생성된 Tab은 2개의 탭 페이지를 갖습니다. 4개의 탭 페이지를 가질 수 있도록 추가합니다.

Tab을 선택한 후 마우스 오른쪽 버튼을 클릭하면 탭 페이지 관련 컨텍스트 메뉴가 뜹니다. [Add Tabpage]를 선택하면 마지막 탭 페이지 뒤로 새로운 탭 페이지가 추가됩니다.

탭 페이지를 삭제하려면 [Delete Tabpage]를 선택합니다. 그러면 현재 활성화되어 있는 탭 페이지가 삭제됩니다.

탭 페이지 간의 전환은 [Previous Tabpage], [Next Tabpage], [Go to Tabpage] 메뉴를 사용합니다.

비활성화 처리하려는 Tabpage2와 Tabpage3를 각각 선택하여 enable 속성을 'false'로 설정합니다.

QuickView(Ctrl + F6)로 실행합니다. 탭 버튼 클릭하여 탭 페이지를 전환하며 설정한 데로 동작하는지 확인합니다.