[i-AUD] Tab 컨트롤이 추가되었습니다.

page no. 88935628

기능 설명

탭마다 Group 컨트롤처럼 여러 컨트롤을 배치할 수 있는 컨트롤입니다.

요소 및 용어 설명

요소명	요소 설명
Tab	Tab 컨트롤 자체를 가리킵니다.
TabButton	아래 TabPage 와 1:1로 대응합니다. 누르면 TabPage 와 함께 활성화 상태(status: Active)로 바뀌고, 다른 TabButton 은 비활성화 상태(status: Inactive)로 바뀝니다.
PreviewButton	TabButton 이 많아 버튼 영역의 너비를 넘으면 나타나며, 누르면 이전 탭으로 이동합니다. NextButton 과 함께 나타납니다.
NextButton	TabButton 이 많아 버튼 영역의 너비를 넘으면 나타나며, 누르면 다음 탭으로 이동합니다. PreviewButton 과 함께 나타납니다. PreviewButton 과 NextButton 기능 PreviewButton 이나 NextButton 을 누르면 이전 · 다음 탭이 자동으로 선택되고, 선택한 탭에 맞춰 TabPage 가 바뀌며 탭 버튼 영역이 자연스럽게 스크롤됩니다. (7.0.500.20260205-11 부터)
TabPage	Group 컨트롤처럼 컨트롤을 배치할 수 있는 영역입니다.
TabItem	TabButton 과 TabPage 를 묶어 부르는 이름입니다. Tab 컨트롤의 TabItems 에서 확인할 수 있습니다.

사용 방법

기능 위치 : i-AUD Designer > 상단 메뉴 [UI Bot] > [Container] > [Tab]
Group 컨트롤과 같이 컨트롤을 끌어다 TabPage 안에 넣거나 뺄 수 있습니다.

Tab 컨트롤을 우클릭한 후 [디자인] 을 선택하면 [탭 속성] 창이 열립니다. 이 창에서 탭별 속성을 설정합니다.

[기본] 속성	설명 (기본값)
탭 이름	탭의 이름입니다. 우클릭 메뉴 [활성화 탭 설정] 에 이 이름으로 목록이 표시되며, 목록에서 활성화할 탭을 고를 수 있습니다.
화면 표시명	탭 버튼에 표시할 텍스트입니다.
툴팁	탭 버튼에 마우스를 올리면 표시할 툴팁입니다.
너비 유형 / 너비	두 가지 중에서 고릅니다. 글자 길이에 맞춤 : 탭 버튼의 너비가 글자 길이에 맞춰집니다. Pixel 설정 : 글자 길이와 상관없이 지정한 값만큼 너비를 주며, 넘치는 글자는 말줄임으로 표시됩니다. (기본값 100, 최소 34, 최대 2000)
Visible	표시 여부입니다. false 이면 활성화 탭으로 설정할 수 없습니다.
Cursor 유형	탭 버튼에 마우스를 올리거나 누를 때의 커서 모양입니다. (기본값 pointer)

Edit 모드에서도 탭 버튼을 누르거나 우클릭 메뉴 [활성화 탭 설정] 으로 활성화 탭을 바꿀 수 있습니다.

참고 사항

사용할 수 있는 API 는 API DOCS 를 참고해 주세요.

사용자 스크립트에서 TabItem 속성을 제어할 수 있도록 관련 API 가 확장되었습니다. (7.0.500.20250515-11 부터)

코드 예시

    var tab = Matrix.getObject('TAB_MAIN');
    tab.OnActiveTabChanged = function(s,e){
        if(e.TabName === 'Chart'){
            var item = tab.TabItems.Get('Dashboard');
            item.Text = item.Text + "click";
            item.Tooltip = "clicked";
            item.Visible = false;


            tab.Update();


            Matrix.doRefresh(['CHT_TEAM','CHT_DETAIL','CHT_PLAN','CHT_DISTRIBUTION']);
        
        }
    }

API 가 지원하는 항목은 {도메인 주소}/help/aud/interfaces/aud.control.tabs.TabItem.html 에서 자세히 확인할 수 있습니다.

Tab 의 우클릭 메뉴를 제어할 수 있도록 관련 Event API 가 추가되었습니다. (7.0.500.20251023-11 부터)

코드 예시

var Tab = Matrix.getObject('Tab');

/**
 * 컨텍스트 메뉴가 열리기 전에 발생합니다.
 * * arguments :  
 *		string Id (Readonly:False) : 탭 컨트롤의 Id 
 *		aud.control.ContextMenu Menu (Readonly:False) : 컨텍스트 메뉴 객체
 *		boolean Cancel (Readonly:False) : 컨텍스트 메뉴를 열지 여부 
 *		aud.control.tabs.TabItem TabItem (Readonly:False) : 우클릭 된 TabItem. 없을 경우 undefined
 */
Tab.OnContextMenuOpening = function(sender, args){
	if((args.TabItem && args.TabItem.Text == "view")
		|| Tab.ActiveTabItem.Text == "view"){
		args.Cancel = true; //화면 표시명이 view인 tabitem일 때는 contextmenu를 보여주지 않는다.
	} else {
		var tabMenu = args.Menu;
		tabMenu.AddLine();
		tabMenu.AddMenu("Alert", function(){
			Matrix.Alert("Click Alert Menu");
		})
	}
}

API 가 지원하는 항목은 {도메인 주소}/help/aud/interfaces/aud.control.Tab.html#oncontextmenuopening 에서 자세히 확인할 수 있습니다.

주의 사항

Tab 컨트롤 안에는 Tab 컨트롤과 Group 컨트롤을 넣을 수 없습니다.
Group 컨트롤 안에는 Tab 컨트롤을 넣을 수 없습니다.
Edit 모드에서 탭 버튼으로 활성화 탭을 바꿀 때
- Tab 컨트롤 하나만 선택된 상태에서 동작합니다. 다른 컨트롤과 함께 여러 개 선택된 상태에서는 탭 버튼을 눌러도 활성화 탭이 바뀌지 않습니다.
- Ctrl 키를 누른 채 누르면 활성화 탭은 바뀌지 않고 선택만 추가됩니다.
- 탭 버튼이 아닌 TabPage 영역을 드래그하면 기존과 같이 Tab 컨트롤이 이동합니다.
- 활성화 탭이 바뀌어도 Edit 모드에서는 OnActiveTabChanged 이벤트가 발생하지 않습니다. (기존과 동일)

변경 사항

변경 전

변경 후

릴리즈 번호

PreviewButton · NextButton 을 누르면 고정값(100) 기준으로 탭 버튼 영역만 스크롤되었습니다.

이전 · 다음 탭이 자동으로 선택됩니다.
선택한 탭에 맞춰 TabPage 가 자동으로 바뀝니다.
탭을 이동할 때 자연스럽게 스크롤됩니다.

7.0.500.20260205-11

Edit 모드에서는 TabButton 을 눌러도 활성화 탭이 바뀌지 않았습니다.
우클릭 메뉴 [활성화 탭 설정] 으로만 활성화 탭을 바꿀 수 있었습니다.
PreviewButton · NextButton 도 Edit 모드에서는 동작하지 않았습니다.

Preview · View 모드와 같이 TabButton 을 누르면 해당 탭이 활성화되고 TabPage 가 바뀝니다.
PreviewButton · NextButton 을 누르면 이전 · 다음 탭으로 이동합니다.
우클릭 메뉴 [활성화 탭 설정] 은 기존과 같이 사용할 수 있습니다.

7.0.610.20260917-11

- i-AUD : 7.0.610.0-202609141756

기능 정보	API Open	UI Open	Read Only	Not Use	Hidden	Not Recommend	해당 없음
시작 버전 정보	Release No : 7.0.500.20240613-11

샘플 정보

샘플 URL :
샘플 파일

	파일	변경됨
	마이크로소프트 엑셀 스프레드시트 탭 컨트롤 설계안v5.xlsx	2024-06-07 by AUD팀
	레이블 레이블 없음 Preview 보기

공간 바로가기

페이지 트리