[SAP UI5/Fiori] - Layout 종류 및 예시

SAP UI5에서 사용되는 레이아웃 컨테이너는 다양한 종류가 있습니다. 이러한 레이아웃 컨테이너는 UI 요소를 배치하고 정렬하는 데 사용됩니다. 주요 레이아웃 컨테이너와 그 예시는 다음과 같습니다:

 

1. Vertical Layout (sap.ui.layout.VerticalLayout)

 

- 수직으로 UI 요소를 배치합니다.

new sap.ui.layout.VerticalLayout({
    content: [
        new sap.m.Button({ text: "Button 1" }),
        new sap.m.Button({ text: "Button 2" }),
        new sap.m.Button({ text: "Button 3" })
    ]
});

​

 

 

 

2. Horizontal Layout (sap.ui.layout.HorizontalLayout)

 

- 수평으로 UI 요소를 배치합니다.

new sap.ui.layout.HorizontalLayout({
    content: [
        new sap.m.Button({ text: "Button 1" }),
        new sap.m.Button({ text: "Button 2" }),
        new sap.m.Button({ text: "Button 3" })
    ]
});

 

 

3. Grid Layout (sap.ui.layout.Grid)

 

- 격자형으로 UI 요소를 배치합니다.

new sap.ui.layout.Grid({
    content: [
        new sap.ui.layout.GridData({ span: "L3 M6 S12" }),
        new sap.m.Button({ text: "Button 1" }),
        new sap.ui.layout.GridData({ span: "L3 M6 S12" }),
        new sap.m.Button({ text: "Button 2" })
    ]
});

 

 

4. FixFlex (sap.ui.layout.FixFlex)

 

- 고정된 영역과 유연한 영역을 포함하는 레이아웃입니다.

new sap.ui.layout.FixFlex({
    fixContent: new sap.m.Button({ text: "Fixed Content" }),
    flexContent: new sap.m.List({
        items: [
            new sap.m.StandardListItem({ title: "Item 1" }),
            new sap.m.StandardListItem({ title: "Item 2" })
        ]
    })
});

 

5. VBox (sap.m.VBox)

 

- 수직 상자 레이아웃으로, 요소를 수직으로 정렬합니다.

new sap.m.VBox({
    items: [
        new sap.m.Button({ text: "Button 1" }),
        new sap.m.Button({ text: "Button 2" }),
        new sap.m.Button({ text: "Button 3" })
    ]
});

 

 

6. HBox (sap.m.HBox)

 

- 수평 상자 레이아웃으로, 요소를 수평으로 정렬합니다.

new sap.m.HBox({
    items: [
        new sap.m.Button({ text: "Button 1" }),
        new sap.m.Button({ text: "Button 2" }),
        new sap.m.Button({ text: "Button 3" })
    ]
});

 

7. ResponsiveGridLayout (sap.ui.layout.form.ResponsiveGridLayout)

 

- 반응형 그리드 레이아웃으로, 다양한 화면 크기에 적응합니다.

new sap.ui.layout.form.ResponsiveGridLayout({
    singleContainerFullSize: true
});

 

 

8. SimpleForm (sap.ui.layout.form.SimpleForm)

 

- 간단한 폼 레이아웃으로, 폼 요소를 쉽게 배치할 수 있습니다.

new sap.ui.layout.form.SimpleForm({
    content: [
        new sap.m.Label({ text: "Name" }),
        new sap.m.Input({ placeholder: "Enter Name" }),
        new sap.m.Label({ text: "Age" }),
        new sap.m.Input({ placeholder: "Enter Age" })
    ]
});

 

정리 

• Vertical Layout과 Horizontal Layout:
  • 수직 또는 수평으로 버튼을 배치하여 다양한 버튼 배열을 만듭니다.
• Grid Layout:
  • 버튼을 그리드 레이아웃으로 배치하여 다양한 화면 크기에 적응할 수 있는 레이아웃을 만듭니다.
• FixFlex:
  • 고정된 콘텐츠와 유연한 리스트 콘텐츠를 포함하는 레이아웃을 만듭니다.
• VBox와 HBox:
  • 수직 또는 수평으로 버튼을 배치하여 다양한 UI 요소 배열을 만듭니다.
• ResponsiveGridLayout:
  • 반응형 그리드 레이아웃으로, 폼 요소를 다양한 화면 크기에 적응할 수 있도록 만듭니다.
• SimpleForm:
  • 폼 요소를 간단하게 배치하여 사용자가 쉽게 입력할 수 있는 폼을 만듭니다.