[ SAPUI5 ] DynamicPage 사용 방법

경기가 어려워서인지 프로젝트가 딱히 없는 상황이다. 걱정할 거까지는 없지만, 놀고 있을 순 없으니 예전에 했던 것들을 복기한다는 마인드로 이것저것 리뷰를 해보려고 한다. 2월말 즈음에는 짧은 프로젝트에 투입되기도 하기에 여러 가지 경험치를 축적해두자!

---

 

DynamicPage

---

 

sap.f.DynamicPage는 SAPUI5의 sap.f 라비으러리에 혹하는 컨트롤이다.

Fiori 2.0/3.0 디자인 가이드라인에 따라 동적 페이지 레이아웃을 제공한다.

---

 

속성	설명
headerExpanded	초기 Header 부분이 확장되어 있는 상태인지 여부 (default : true)
toggleHeaderOnTitleClick	Title 클릭 시, Header가 확장 및 축소되는지 여부
PreserveHeaderStateOnScroll	스크롤을 할 때 Header가 상단에 유지될지 여부
showFooter	Footer 표시 여부

---

 

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.f">
    <f:DynamicPage showFooter="true" headerExpanded="true">
        
        <!-- 타이틀 -->
        <f:title>
            <f:DynamicPageTitle>
                <f:heading>
                    <Title text="상품 목록" level="H1" />
                </f:heading>
                <f:actions>
                    <Button text="추가" type="Emphasized"/>
                </f:actions>
            </f:DynamicPageTitle>
        </f:title>
        
        <!-- 헤더 -->
        <f:header>
            <f:DynamicPageHeader>
                <VBox>
                    <Text text="필터 또는 검색 바를 추가 가능" />
                </VBox>
            </f:DynamicPageHeader>
        </f:header>
        
        <!-- 컨텐츠 -->
        <f:content>
            <List>
                <StandardListItem title="상품 A" />
                <StandardListItem title="상품 B" />
                <StandardListItem title="상품 C" />
            </List>
        </f:content>
        
        <!-- 푸터 -->
        <f:footer>
            <Toolbar>
                <ToolbarSpacer />
                <Button text="저장" type="Accept" />
                <Button text="취소" type="Reject" />
            </Toolbar>
        </f:footer>
        
    </f:DynamicPage>
</mvc:View>

 

구성 요소	설명	UI5 컨트롤
heading	페이지의 주요 제목 설정	sap.m.Title
subheading	서브타이틀 및 추가 설명	sap.m.Text
actions	타이틀 우측에 위치, 버튼 등으로 사용	sap.m.Button, sap.m.OverflowToolbar
snappedTitleOnMobile	모바일에서 축소된 헤더의 제목 대체	sap.m.Title
headerContent	확장된 상태에서 추가 정보(필터, 입력 폼 등)를 포함하는 컨테이너	sap.m.FlexBox, sap.m.VBox
content	메인 컨텐츠 영역	sap.m.List, sap.m.Table, sap.ui.layout.form.SimpleForm
footer	하단 푸터 영역	sap.m.Toolbar, sap.m.Button