메뉴 버튼 위젯(테마 적용 가능)
메뉴 버튼 위젯은 인포테이블 데이터를 사용하여 정의할 수 있는 항목 목록이 있는 메뉴를 여는 버튼을 표시합니다. 메뉴 구성에 따라 선택한 항목 데이터 또는 각 메뉴 항목의 클릭한 이벤트를 바인딩할 수 있습니다. 레이아웃에서 사용 가능한 공간이 제한되어 있고 자주 사용하지 않는 옵션을 숨기려면 이 위젯을 사용합니다. 여러 수준의 탐색을 생성하여 공통 레이블 아래의 메뉴 항목을 그룹화할 수 있습니다.
표준 메뉴 버튼
레이블이 있는 메뉴 버튼
다음 이미지는 왼쪽에서 오른쪽으로 메뉴 버튼에 사용 가능한 변형을 보여줍니다. ButtonType 속성을 사용하여 버튼 변형을 기본, 보조, 3차, 위험 또는 투명으로 설정할 수 있습니다. 기본적으로 버튼은 3차 스타일을 사용하여 표시됩니다.
구조
1. 메뉴 버튼
2. 메뉴
3. 보조 수준 메뉴
레이아웃 방향 선택
MenuDirection 속성을 사용하면 가로 또는 세로 방향으로 메뉴를 열 수 있습니다.
세로(기본값) - 버튼 아래에 있는 메뉴를 엽니다. 이 모드를 사용하면 버튼을 표시하는 데 필요한 가로 공간을 줄일 수 있습니다. 예를 들어, 버튼이 도구 모음에 표시되는 경우입니다.
가로 - 버튼 옆에 있는 메뉴를 엽니다. 이 모드는 버튼이 측면 패널에 표시된 경우 사용합니다.
데이터 형식
MenuEntry 데이터 셰이프를 사용하여 위젯에 대한 인포테이블 데이터를 생성할 수 있습니다. 자세한 내용은 MenuEntry 데이터 셰이프 사용을 참조하십시오.
다음 이미지는 MenuEntry 데이터 셰이프를 사용하여 간단한 메뉴를 표시하는 인포테이블 결과를 보여줍니다.
 | 인포테이블의 첫 번째 행은 루트로 사용되고 메뉴 항목으로 표시되지 않습니다. 루트의 menuId와 일치하는 parentMenuId로 최상위 메뉴 항목을 정의해야 합니다. |
메뉴 항목에 사용자 정의 도구 설명 추가
인포테이블 데이터에 tooltip 및 tooltipIcon 열을 추가하여 각 메뉴 항목에 대한 도구 설명을 표시할 수 있습니다. 다음 이미지는 메뉴 항목에 대한 사용자 정의 도구 설명을 보여줍니다.
인포테이블을 사용하여 메뉴 데이터 구성
2. Mashup Builder에서 데이터 패널을 사용하여 메뉴 서비스를 추가합니다.
3. 서비스 인포테이블의 All Data 속성을 메뉴 버튼 위젯의 Data 속성에 바인딩합니다.
4. 저장을 클릭하여 변경 사항을 매쉬업에 저장합니다.
또는 Mashup Builder의 인포테이블 구성 대화 상자를 사용하여 서비스를 사용하지 않고도 인포테이블 데이터를 수동으로 정의할 수 있습니다.
1. Mashup Builder에서 메뉴 버튼 위젯을 선택합니다.
2. 속성 패널에서 Data 속성 옆에 있는 추가를 클릭합니다. 위젯에 대한 인포테이블 데이터를 정의하기 위해 행을 추가할 수 있는 대화 상자가 열립니다.
3. 추가를 클릭한 다음 메뉴 항목에 대한 행 데이터를 정의합니다.
4. 추가를 클릭하여 인포테이블에 행을 추가합니다.
5. 저장을 클릭하여 인포테이블 데이터를 저장합니다.
인포테이블에 정의된 메뉴 항목은 런타임에 표시됩니다.
위젯 속성을 사용하여 메뉴 항목 구성
기본적으로 위젯은 인포테이블 데이터를 사용하여 메뉴 항목을 정의하도록 구성되어 있습니다. SelectedDataChanged 이벤트와 서비스의 SelectedData 속성을 사용하여 선택한 항목을 다른 서비스에 전달할 수 있습니다. 대신 위젯 속성을 사용하여 메뉴 항목을 구성하려면 ItemConfigurationMode 속성을 사용합니다. 이 속성을 위젯 속성으로 설정하면 각 메뉴 항목의 표시 유형 및 비활성화 상태를 구성할 수 있는 Clicked 이벤트와 속성이 속성 패널에 추가됩니다. 이러한 속성을 바인딩하면 매쉬업의 특정 이벤트에 따라 개별 메뉴 항목의 상태를 동적으로 제어할 수 있습니다. 이를 통해 메뉴 상호 작용을 사용자 정의하여 각 메뉴 항목의 표시 유형과 기능을 쉽게 관리할 수 있습니다.
1. Mashup Builder에서 인포테이블 데이터 소스를 데이터와 바인딩하여 메뉴 ID 및 레이블을 정의합니다.
2. 메뉴 버튼 위젯을 선택한 다음 속성 패널에서 ItemConfigurationMode를 위젯 속성으로 설정합니다.
3. 각 메뉴 항목에 대해 다음 속성을 구성하거나 바인딩합니다.
◦ <Item_Name>_Clicked - 메뉴 항목을 클릭할 때 트리거되는 이벤트입니다.
◦ <Item_Name>_Disabled - 메뉴 항목을 비활성화합니다.
◦ <Item_Name>_Visible - 메뉴 항목을 숨깁니다.
4. 저장을 클릭합니다.
메뉴 버튼 스타일 지정
다음과 같은 방법으로 메뉴 버튼 위젯의 스타일을 지정할 수 있습니다.
• 스타일 속성 패널에서 사용 가능한 스타일 속성을 사용하여 위젯 수준에서 가능합니다.
버튼 및 메뉴 스타일은 사용할 수 없음 또는 가리킨 항목과 같은 모든 상태에서 수정할 수 있습니다.
• > 에서 스타일 테마에서 가능합니다.
스타일 테마 사용자 정의에 대한 자세한 내용은 스타일 탭을 사용하여 스타일 테마 사용자 정의를 참조하십시오.
위젯 속성
속성 이름 | 설명 | 기본 유형 | 기본값 | 바인딩 가능 여부(<-, ->) | 로컬리제이션 가능 여부(Y/N) |
|---|---|---|---|---|---|
Data | 메뉴 항목을 정의할 인포테이블을 바인딩합니다. MenuEntry 데이터 셰이프를 사용하여 인포테이블의 형식을 지정해야 합니다. | INFOTABLE | Y | N | |
SelectedData | 마지막으로 선택한 메뉴 항목의 데이터를 포함하는 인포테이블입니다. | INFOTABLE | Y | N | |
SelectedDataChanged | 메뉴 항목을 선택할 때 트리거되는 이벤트입니다. | 이벤트 | Y | N | |
MenuOffset | 메뉴가 열려 있을 때 버튼과 메뉴 사이의 간격입니다. | NUMBER | 8 | N | N |
ButtonType | 메뉴 버튼의 버튼 유형을 설정합니다. 유형마다 다른 스타일이 사용됩니다. 옵션: 기본, 보조 3차, 위험, 투명 | STRING | 3차 | Y | N |
TooltipField | 메뉴 버튼 위젯을 마우스로 가리킬 때 도구 설명을 표시합니다. | STRING | Y | Y | |
TooltipIcon | 메뉴 버튼 위젯의 도구 설명에 대한 아이콘 이미지를 설정합니다. | MEDIA | N | N | |
Disabled | 메뉴 버튼을 비활성화합니다. | BOOLEAN | False | Y | N |
SVGIcon | 메뉴 버튼 위젯 내에 표시할 SVG 아이콘을 선택합니다. 미디어 엔티티를 표시하려면 아이콘 속성을 사용합니다. | MEDIALINK | N | N | |
ButtonIcon | 메뉴 버튼 위젯 내에 표시할 아이콘 이미지를 선택합니다. 이 속성은 SVGIcon 속성을 재정의합니다. | MEDIA | N | N | |
ButtonIconPosition | 아이콘 위치를 버튼 레이블의 왼쪽 또는 오른쪽으로 설정합니다. 옵션: 왼쪽, 오른쪽 | STRING | 오른쪽 | N | N |
ButtonClicked | 버튼을 클릭하고 위젯에 대해 정의된 메뉴 항목이 없을 때 트리거되는 이벤트입니다. | 이벤트 | Y | N | |
ButtonMaxWidth | 버튼의 최대 너비를 설정합니다. | NUMBER | N | N | |
ButtonLabelAlignment | 버튼 레이블을 왼쪽, 오른쪽 또는 가운데로 정렬합니다. 옵션: 왼쪽, 오른쪽, 가운데 | STRING | 가운데 | N | N |
ButtonLabel | 버튼 레이블의 텍스트를 지정합니다. | STRING | Y | Y | |
ButtonSize | 버튼의 크기를 설정합니다. 옵션: 표준, 중간, 큼, 아주 큼, 채우기 | STRING | 표준 | N | N |
DisplayMenuIcons | false로 설정하면 메뉴 항목의 아이콘이 숨겨집니다. | BOOLEAN | False | N | N |
AllowMissingIcons | false이고 DisplayMenuIcons가 true이면 인포테이블 데이터에서 지정된 아이콘 없이 메뉴 항목 옆에 기본 아이콘이 표시됩니다. | BOOLEAN | False | N | N |
MenuMinWidth | 메뉴 및 하위 메뉴가 축소할 수 있는 최소 너비를 픽셀 단위로 설정합니다. 비어 있으면 가장 넓은 항목에 맞게 메뉴 너비가 설정됩니다. | Number | N | N | |
MenuMaxWidth | 메뉴 및 하위 메뉴가 확장할 수 있는 최대 너비를 픽셀 단위로 설정합니다. 비어 있으면 가장 넓은 항목에 맞게 메뉴 너비가 설정됩니다. | Number | N | N | |
MenuMaxItems | 메뉴 및 해당 하위 메뉴의 최대 표시 항목 수를 설정합니다. 데이터에 최대값보다 많은 항목이 포함되어 있는 경우 더 보기 레이블이 있는 하위 메뉴 아래에 항목이 숨겨집니다. | Number | 5 | Y | N |
MenuDirection | 버튼을 기준으로 메뉴가 열리는 방향을 설정합니다. 옵션: 세로, 가로 | STRING | 세로 | Y | N |
ItemConfigurationMode | 인포테이블 데이터 모드 - 인포테이블 데이터를 사용하여 각 메뉴 항목의 표시 유형 및 상태를 구성합니다. SelectedDataChanged 이벤트와 서비스의 SelectedData 속성을 사용하여 선택한 항목을 다른 서비스에 전달할 수 있습니다. 위젯 속성 모드 - 위젯 속성을 사용하여 각 메뉴 항목의 표시 유형 및 상태를 수동으로 구성하거나 바인딩을 사용하여 동적으로 구성합니다. 메뉴 항목의 Clicked 이벤트를 바인딩하여 SelectedData 속성을 다른 서비스에 전달해야 합니다. 옵션: 인포테이블 데이터, 위젯 속성 | STRING | 인포테이블 데이터 | Y | N |
<Item_Name>_Clicked | 메뉴 항목을 클릭할 때 트리거되는 이벤트입니다. | 이벤트 | Y | N | |
<Item_Name>_Disabled | 메뉴 항목을 비활성화합니다. | BOOLEAN | True | Y | N |
<Item_Name>_Visible | 메뉴 항목의 표시 유형을 제어합니다. | BOOLEAN | True | Y | N |