43.Tab

43.1Tab 소개

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

그림 43-1sample_tab_00_01

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

구성 요소

설명

탭 버튼(Tab Button)

텝 페이지와 1대1로 맵핑되어 탭 페이지를 전환하는 데 사용하는 버튼입니다.

엑스트라 버튼(Extra Button)

이벤트 처리를 통해 기능을 수행할 수 있는 버튼입니다.

일반적으로는 탭 페이지를 화면에서 제거하는 용도로 사용합니다.

프리뷰 버튼(Preview Button)

탭 버튼의 수가 많아 Tab 컴포넌트의 너비를 넘어갔을 때 생기는 버튼으로

앞쪽으로 스크롤 할 수 있습니다.

넥스트 버튼(Next Button)

탭 버튼의 수가 많아 Tab 컴포넌트의 너비를 넘어갔을 때 생기는 버튼으로

뒤쪽으로 스크롤 할 수 있습니다.

탭 페이지(Tab Page)

UI 요소나 폼을 출력할 수 있는 페이지입니다.

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

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

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

43.1.1사용 예

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

그림 43-2sample_tab_00_00

43.1.2Tab 만들기

그림 43-3sample_tab_00_01

1

Tab 컴포넌트 생성하기

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

2

탭 페이지 생성하기

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

그림 43-4sample_tab_00_03

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

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

3

엑스트라 버튼 생성하기

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

4

프리뷰/넥스트 버튼 생성하기

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

5

QuickView로 확인하기

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

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

43.2멀티 라인 Tab 구성하기

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

43.2.1예제

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

그림 43-5sample_tab_01_01

sample_tab_02.xfdl

43.2.2예제에서 사용한 핵심 기능

multiline 속성

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

43.2.3예제 구현 방법

1

Tab 컴포넌트 생성하기

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

2

multiline 속성 설정하기

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

3

TagPage 추가하기

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

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

그림 43-6sample_tab_00_03

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

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

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

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

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

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

4

onclick 이벤트 함수 작성하기

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);
};

5

QuickView로 확인하기

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

43.3탭 버튼 위치 조정하기

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

43.3.1예제

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

그림 43-7sample_tab_02_01

sample_tab_03.xfdl

43.3.2예제에서 사용한 핵심 기능

tabposition 속성

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

43.3.3예제 구현 방법

1

Tab 컴포넌트 생성하기

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

2

Radio 컴포넌트 설정하기

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

  1. 라디오 메뉴 구성

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

그림 43-8sample_tab_02_02

  1. Radio 속성 설정

속성

columncount

4

index

0

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

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

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

};

3

QuickView로 확인하기

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

43.4탭 버튼 비활성화

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

43.4.1예제

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

그림 43-9sample_tab_03_01

sample_tab_04.xfdl

43.4.2예제에서 사용한 핵심 기능

enable 속성

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

postindex 속성

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

43.4.3예제 구현 방법

1

Tab 컴포넌트 생성하기

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

2

탭 페이지 생성하기

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

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

그림 43-10sample_tab_00_03

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

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

3

탭 페이지의 enable 속성 설정하기

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

탭 페이지 이름

enable 속성값

Tabpage1

true

Tabpage2

false

Tabpage3

false

Tabpage4

true

4

QuickView로 확인하기

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