Ribbonbar

GetRibbonbar

리본바 가져오기

Example

import { VIZCore } from "./VIZCore3D/VIZCore.js";
let view = document.getElementById("view");
view.className = "VIZCore";
let vizcore = new VIZ3DCore(view);

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

Returns

Name	Type	Description
object	Object	리본바 오브젝트

Show

리본바 보이기/숨기기

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//리본바 보이기/ 숨기기
ribbonbar.Show(true); 

Parameters

Name	Type	Description
visible	Boolean	리본바 보이기/ 숨기기

ExpandRibbon

리본바 접기 여부 설정

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//리본바 UI 확장
ribbonbar.ExpandRibbon(true); 

//리본바 UI 접힘
ribbonbar.ExpandRibbon(false); 

Parameters

Name	Type	Description
expand	Boolean	리본바 접기 여부

SetExpandBtnPosition

리본바 확대/축소 버튼 위치 설정

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//리본바 확대/축소 버튼 위치 설정
ribbonbar.SetExpandBtnPosition(ui.Enum.EXPAND_BUTTON_POS.LEFT, 100); 

Parameters

Name	Type	Description
pos	Enum	리본바 확대/축소 버튼 위치 설정 vizcore.UIElement.Enum.EXPAND_BUTTON_POS.LEFT (왼쪽정렬) vizcore.UIElement.Enum.EXPAND_BUTTON_POS.CENTER (중앙정렬) vizcore.UIElement.Enum.EXPAND_BUTTON_POS.RIGHT (오른쪽정렬)
x	Number	x축 위치 이동값

Name

Type

Description

pos

Enum

리본바 확대/축소 버튼 위치 설정

vizcore.UIElement.Enum.EXPAND_BUTTON_POS.LEFT

(왼쪽정렬)

vizcore.UIElement.Enum.EXPAND_BUTTON_POS.CENTER

(중앙정렬)

vizcore.UIElement.Enum.EXPAND_BUTTON_POS.RIGHT

(오른쪽정렬)

Number

x축 위치 이동값

SetExpandBtnHoverEffect

리본바 확대/축소 시, 마우스 효과 설정

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//리본바 확대/축소 시 효과 적용
ribbonbar.SetExpandBtnHoverEffect(true); 
//리본바 확대/축소 시 효과 미적용
ribbonbar.SetExpandBtnHoverEffect(false); 

Parameters

Name	Type	Description
enalble	Boolean	효과 적용 여부

GetMenu

리본바 모든 메뉴 가져오기

Example

let ui = vizcore.UIElement

//리본바
let ribbonbar = ui.GetRibbonbar();

// 모든 메뉴 가져오기
let menus = ribbonbar.GetMenu();
console.log("Ribbonbar Menu List:", menus);

Returns

Name	Type	Description
objects	Array	리본바 메뉴 오브젝트 배열

GetMenuById

ID에 해당하는 리본 메뉴 반환

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

let click = () => {
    console.log("Clicked");
    //버튼 클릭 이벤트
}

//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";
button.event.click = click;

//버튼 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.BUTTON, button, "PanelGroup");

//ID에 해당하는 오브젝트 반환
let object = ribbonbar.GetMenuById(button.id);
console.log(object);

Parameters

Name	Type	Description
objectId	String	오브젝트 ID

AddInsertTab

앞 순서로 탭 추가

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

let click = () => {
  console.log("Clicked");
  //버튼 클릭 이벤트
};

//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";
button.event.click = click;

//그룹 오브젝트                            
let group = ui.GetObject(ui.Enum.OBJECT_TYPE.GROUP);
group.id = "Group";
group.text = "Group_Text";
group.style.size = ui.Enum.OBJECT_SIZE.SMALL;
group.buttons = [button];

//탭 오브젝트
let tab = ui.GetObject(ui.Enum.OBJECT_TYPE.TAB);
tab.id = "Tab";
tab.text = "Tab_Text";
tab.groups = [group];

//앞순서에 탭 오브젝트 추가
ribbonbar.AddInsertTab(tab); 

Parameters

Name	Type	Description
object	Object	탭 오브젝트

Add

오브젝트 추가

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

let click = () => {
    console.log("Clicked");
    //버튼 클릭 이벤트
}

//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";
button.event.click = click;

//그룹 오브젝트                             
let group = ui.GetObject(ui.Enum.OBJECT_TYPE.GROUP);
group.id = "Group";
group.text = "Group_Text";
group.style.size = ui.Enum.OBJECT_SIZE.SMALL;
group.buttons = [button];

//탭 오브젝트
let tab = ui.GetObject(ui.Enum.OBJECT_TYPE.TAB);
tab.id = "Tab";
tab.text = "Tab_Text";
tab.groups = [group];

//탭 오브젝트 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.TAB, tab);

//그룹 오브젝트 추가
//ribbonbar.Add(ui.Enum.OBJECT_TYPE.GROUP, group, tab.id);

//버튼 오브젝트 추가
//ribbonbar.Add(ui.Enum.OBJECT_TYPE.BUTTON, button, group.id);

Parameters

Name	Type	Description
type	Enum	추가할 항목의 오브젝트 타입 - vizcore.UIElement.Enum.OBJECT_TYPE.TAB - vizcore.UIElement.Enum.OBJECT_TYPE.GROUP - vizcore.UIElement.Enum.OBJECT_TYPE.BUTTON
object	Object	추가할 항목 오브젝트
parentId	string	부모 오브젝트 ID

Name

Type

Description

type

Enum

추가할 항목의 오브젝트 타입

- vizcore.UIElement.Enum.OBJECT_TYPE.TAB

- vizcore.UIElement.Enum.OBJECT_TYPE.GROUP

- vizcore.UIElement.Enum.OBJECT_TYPE.BUTTON

object

Object

추가할 항목 오브젝트

parentId

string

부모 오브젝트 ID

Edit

오브젝트 편집

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

let click = () => {
    console.log("Clicked");
    //버튼 클릭 이벤트
}

let Changed_Click = () => {
    console.log("Clicked(Changed)");
    //편집 버튼 클릭 이벤트
}
  
//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";
button.event.click = click;

//그룹 오브젝트                              
let group = ui.GetObject(ui.Enum.OBJECT_TYPE.GROUP);
group.id = "Group";
group.text = "Group_Text";
group.style.size = ui.Enum.OBJECT_SIZE.SMALL;
group.buttons = [button];

//탭 오브젝트
let tab = ui.GetObject(ui.Enum.OBJECT_TYPE.TAB);
tab.id = "Tab";
tab.text = "Tab_Text";
tab.groups = [group];

//탭 오브젝트 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.TAB, tab);

//ID에 해당하는 탭 오브젝트 반환
let editTab = ribbonbar.GetMenuById(tab.id);
//ID에 해당하는 그룹 오브젝트 반환
let editGroup = ribbonbar.GetMenuById(group.id);
//ID에 해당하는 버튼 오브젝트 반환
let editButton = ribbonbar.GetMenuById(button.id);

//탭 오브젝트 편집
editTab.text = "Changed_Tab";
ribbonbar.Edit(ui.Enum.OBJECT_TYPE.TAB, editTab);

//그룹 오브젝트 편집
editGroup.text = "Changed_Group"
editGroup.style.size = ui.Enum.OBJECT_SIZE.ALL;
ribbonbar.Edit(ui.Enum.OBJECT_TYPE.GROUP, editGroup, editTab.id);

//버튼 오브젝트 편집
editButton.text = "Changed_Button";
editButton.event.click = Changed_Click
ribbonbar.Edit(ui.Enum.OBJECT_TYPE.BUTTON, editButton, editGroup.id);

Parameters

Name	Type	Description
type	Enum	수정할 항목의 오브젝트 타입 - vizcore.UIElement.Enum.OBJECT_TYPE.TAB - vizcore.UIElement.Enum.OBJECT_TYPE.GROUP - vizcore.UIElement.Enum.OBJECT_TYPE.BUTTON
object	Object	수정할 항목 오브젝트
parentId	string	부모 오브젝트 ID

Name

Type

Description

type

Enum

수정할 항목의 오브젝트 타입

- vizcore.UIElement.Enum.OBJECT_TYPE.TAB

- vizcore.UIElement.Enum.OBJECT_TYPE.GROUP

- vizcore.UIElement.Enum.OBJECT_TYPE.BUTTON

object

Object

수정할 항목 오브젝트

parentId

string

부모 오브젝트 ID

Delete

오브젝트 삭제

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";

//그룹 오브젝트                              
let group = ui.GetObject(ui.Enum.OBJECT_TYPE.GROUP);
group.id = "Group";
group.text = "Group_Text";
group.buttons = [button];

//탭 오브젝트
let tab = ui.GetObject(ui.Enum.OBJECT_TYPE.TAB);
tab.id = "Tab";
tab.text = "Tab_Text";
tab.groups = [group];

//탭 오브젝트 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.TAB, tab);

//탭 오브젝트 삭제
ribbonbar.Delete(ui.Enum.OBJECT_TYPE.TAB, tab.id);

//그룹 오브젝트 삭제
//ribbonbar.Delete(ui.Enum.OBJECT_TYPE.GROUP, group.id);

//버튼 오브젝트 삭제
//ribbonbar.Delete(ui.Enum.OBJECT_TYPE.BUTTON, button.id);

Parameters

Name	Type	Description
type	Enum	삭제할 항목의 오브젝트 타입 - vizcore.UIElement.Enum.OBJECT_TYPE.TAB - vizcore.UIElement.Enum.OBJECT_TYPE.GROUP - vizcore.UIElement.Enum.OBJECT_TYPE.BUTTON
objectId	String	오브젝트 ID

Name

Type

Description

type

Enum

삭제할 항목의 오브젝트 타입

- vizcore.UIElement.Enum.OBJECT_TYPE.TAB

- vizcore.UIElement.Enum.OBJECT_TYPE.GROUP

- vizcore.UIElement.Enum.OBJECT_TYPE.BUTTON

objectId

String

오브젝트 ID

GetComboSetting

콤보박스 생성

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

let click = function (combo) {
  //콤보 클릭 이벤트
};

//콤보박스 생성
let combo1 = ribbonbar.GetComboSetting(
  "Combo1",              //콤보 ID
  "Combo1_text",         //콤보 텍스트
  './Resource/normal.png' //콤보 아이콘 이미지
);
let combo2 = ribbonbar.GetComboSetting("Combo2", "Combo2_text", './Resource/normal.png');
let combo3 = ribbonbar.GetComboSetting("Combo3", "Combo3_text", './Resource/normal.png');

//콤보 버튼
let comboItems = [combo1, combo2, combo3];

//버튼 오브젝트
let comboBtn = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
comboBtn.id = "ComboButton";
comboBtn.text = "ComboButton_Text";
comboBtn.icon.normal = './Resource/normal.png';
comboBtn.icon.check =  './Resource/check.png'
comboBtn.event.click = click;
comboBtn.style.type =ui.Enum.BUTTON_STYLE.COMBO;
comboBtn.subButton = comboItems;

//버튼 오브젝트 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.BUTTON, comboBtn, "SelectGroup");

parameters

Name	Type	Description
id	string	버튼 ID
text	string	버튼 텍스트
icon	string	버튼 아이콘 이미지

SetCheckButton

버튼 체크 선택/해제

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

let click = () => {
    console.log("Clicked");
    //버튼 클릭 이벤트
}

//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";
button.event.click = click;
button.status.check = true;  

//버튼 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.BUTTON, button, "PanelGroup");

//버튼 체크
ribbonbar.SetCheckButton(button.id, true);

Parameters

Name	Type	Description
id	String	버튼 ID
check	Boolean	버튼 체크/ 체크해제

SetCheckButtons

복수개의 버튼 체크 선택/해제

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//버튼 오브젝트1
let button1 = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button1.id = "Button1";
button1.text = "Button1_Text";
button1.style.type = ui.Enum.BUTTON_STYLE.CHECK;
button1.status.check = true;

//버튼 오브젝트2 
let button2 = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button2.id = "Button2";
button2.text = "Button_Text2";
button2.style.type = ui.Enum.BUTTON_STYLE.CHECK;
button2.status.check = true;

//버튼 오브젝트 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.BUTTON, button1, "PanelGroup");
ribbonbar.Add(ui.Enum.OBJECT_TYPE.BUTTON, button2, "PanelGroup");
 
//여러 버튼 체크
ribbonbar.SetCheckButtons([button1.id, button2.id], true);

Parameters

Name	Type	Description
ids	Array	버튼 ID 배열
check	Boolean	버튼 체크/ 체크해제

SetVisibleTab

탭 보이기/ 숨기기

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//리본바 탭 보이기/숨기기
ribbonbar.SetVisibleTab("SectionTab", true); // 탭 보이기
ribbonbar.SetVisibleTab("SectionTab", false); // 탭 숨기기

Parameters

Name	Type	Description
id	String	탭 ID
visible	Boolean	탭 보이기/ 숨기기

SetEnableTab

탭 활성화/ 비활성화

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//리본바 탭 보이기/숨기기
ribbonbar.SetEnableTab("SectionTab", true); // 탭 활성화
ribbonbar.SetEnableTab("SectionTab", false); // 탭 비활성화

Parameters

Name	Type	Description
id	String	탭 ID
enable	Boolean	탭 활성화/ 비활성화

SetVisibleGroup

그룹 보이기/ 숨기기

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//리본바 탭 보이기/숨기기
ribbonbar.SetVisibleGroup("PanelGroup", true); // 그룹 보이기
ribbonbar.SetVisibleGroup("PanelGroup", false); // 그룹 숨기기

Parameters

Name	Type	Description
id	String	그룹 ID
visible	Boolean	그룹 보이기/ 숨기기

SetVisibleButton

버튼 오브젝트 보이기/ 숨기기

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";

//그룹 오브젝트                              
let group = ui.GetObject(ui.Enum.OBJECT_TYPE.GROUP);
group.id = "Group";
group.text = "Group_Text";
group.buttons = [button];

//탭 오브젝트
let tab = ui.GetObject(ui.Enum.OBJECT_TYPE.TAB);
tab.id = "Tab";
tab.text = "Tab_Text";
tab.groups = [group];

//탭 오브젝트 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.TAB, tab);

//버튼 오브젝트 보이기/ 숨기기
ribbonbar.SetVisibleButton(button.id, false);

Parameters

Name	Type	Description
id	String	버튼 ID
visible	Boolean	버튼 보이기/ 숨기기

SetEnableButton

오브젝트 활성화/ 비활성화

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//버튼 오브젝트
let button = ui.GetObject(ui.Enum.OBJECT_TYPE.BUTTON);
button.id = "Button";
button.text = "Button_Text";

//그룹 오브젝트                              
let group = ui.GetObject(ui.Enum.OBJECT_TYPE.GROUP);
group.id = "Group";
group.text = "Group_Text";
group.buttons = [button];

//탭 오브젝트
let tab = ui.GetObject(ui.Enum.OBJECT_TYPE.TAB);
tab.id = "Tab";
tab.text = "Tab_Text";
tab.groups = [group];

//탭 오브젝트 추가
ribbonbar.Add(ui.Enum.OBJECT_TYPE.TAB, tab);

//그룹 오브젝트 활성화/ 비활성화
ribbonbar.SetEnableButton(group.id, false);

//버튼 오브젝트 활성화/ 비활성화
ribbonbar.SetEnableButton(button.id, false);

Parameters

Name	Type	Description
id	String	버튼 or 그룹 ID
enable	boolean	버튼 or 그룹 활성화/ 비활성화

SelectTab

기본 선택 탭 설정

Example

let ui = vizcore.UIElement;

//리본바
let ribbonbar = ui.GetRibbonbar();

//실행시 기본 선택 탭 설정
ribbonbar.SelectTab("ControlTab");

Parameters

Name	Type	Description
id	String	탭 ID

Last modified: 07 October 2024