【SAPUI5】Page와 Panel 컨트롤로 보기 좋게

소개

이번에는 Page와 Panel이라는 두 가지 컨트롤을 사용하여 앱의 모양을 향상시킵니다.

컨트롤에 대해서는 여기

기본 앱은 여기

목표

Before
다음과 같은 앱이


After
이렇게 됩니다. 대부분 Fiori다운 외형이 된 것은 아닐까요.

단계

1. 외부 테두리 만들기

먼저 App.view의 구조는 다음과 같습니다.


외부 App, pages라는 태그는 페이지 전환을 위해 존재합니다. 이번 경우에는 있어도 없어도 외형은 변하지 않습니다.
안쪽의 Page, content 안에 화면에 표시하는 요소를 넣습니다.
일반적으로 대문자로 시작하는 태그(예: Page)가 컨트롤이고 소문자로 시작하는 태그(예: content)가 그렇지 않은 경우(예: 콘텐츠 모음)를 나타냅니다.
코드는 다음과 같습니다.

<mvc:View 
    controllerName="test.helloworld.controller.App" 
    xmlns="sap.m" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc">
    <App>
        <pages>
            <Page title="Page1">
                <content>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

이 시점에서 실행하면 제목 만 표시됩니다.

2. content 안에 Panel 컨트롤을 넣는다

Panel은 컨트롤의 일종으로, 나는 화면의 요소를 태우는 "접시"와 같은 것이라고 이해합니다. (공식 참조는 여기)


content의 안쪽에 Panel, 또한 그 내부의 content 안에 UI 요소를 배치합니다. content는 요소를 정리하는 역할인 것 같고, 없어도 외형은 변하지 않습니다.

2020/7/24 추가
존재하거나 변경하지 않는 이유는 content가 Panel의 기본 aggregation이기 때문입니다. 기본 aggregation의 경우 명시적으로 지정할 필요가 없습니다. (뷰가 복잡해지므로 지정하지 않는 것이 좋습니다)

Panel을 넣은 코드는 다음과 같습니다.

<mvc:View 
    controllerName="test.helloworld.controller.App" 
    xmlns="sap.m" 
    xmlns:l="sap.ui.layout" 
    xmlns:mvc="sap.ui.core.mvc">
    <App>
        <pages>
            <Page title="Page1">
                <content>
                    <Panel headerText="panel1">
                        <content>
                            <l:VerticalLayout class="sapUiContentPadding">
                                <Button text="Say Hello!" press="onShowHello"/>
                                <Text text="{mPrice>/product/name}"/>
                                <Text text="{mPrice>/product/price}"/>
                            </l:VerticalLayout>                             
                        </content>
                    </Panel>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

3. 실행 결과

실행 결과는 다음과 같습니다.

덤

Page 안에 Panel을 여러 개 넣을 수 있습니다.<Panel> 에서 </Panel> 를 복사하여 </Panel> 아래에 추가하면 다음과 같습니다.


그렇다면 페이지에 여러 페이지를 넣을 수 있습니까?
시도해 보면 첫 페이지의 내용만 표시되었습니다.

참고로 한 페이지

Get Started: Setup and Tutorials-Walkthrough-Step 11: Pages and Panels