Step 11: Pages and Panels

Step 설명

app 구조에 대한 모든 작업을 끝내고 app의 화면을 개선할 차례입니다. sap.m 라이브러리에서 두개의 컨트롤을 사용하여 UI에 좀 더 풍부한 "bling"을 추가 하려고 합니다. 이 스텝에서는 컨트롤의 aggregations에 대해 배우게 됩니다.

webapp/view/App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true">
   <App>
      <pages>
         <Page title="{i18n>homePageTitle}">
            <content>
               <Panel
                  headerText="{i18n>helloPanelTitle}">
                  <content>

                     <Button
                        text="{i18n>showHelloButtonText}"
                        press="onShowHello"/>
                     <Input
                        value="{/recipient/name}"
                        description="Hello {/recipient/name}"
                        valueLiveUpdate="true"
                        width="60%"/>
                  </content>
               </Panel>
            </content>
         </Page>
      </pages>
   </App>
</mvc:View>

sam.m.Page 컨트롤 안에 input 필드와 버튼을 넣습니다. page는 content라고 하는 다른 컨트롤들과 0..N으로 aggregation을 제공합니다. content 상단 header 섹션에 제목 속성을 표시합니다. page 자체는  또 다른 컨트롤 sap.m.App의 aggregation 'pages'안에 위치합니다. 이 컨트롤은 다음과 같은 중요한 작업을 수행합니다.

• 모바일 기기에 적합한 화면을 표시하기 위해 필요한 property들을 index.html의 header에 넣습니다.
• 페이지 이동 네비게이션에 애니메이션이 있는 기능을 제공합니다. 곧 사용할 수 있습니다.

view의 fullsreen 높이를 제대로 작동 시키기 위해 view에 displayBlock 속성에 'true'를 추가합니다. 실제 content는 관련 컨텐트를 그룹화하기 위해 'Panel' 컨트롤 안에 래핑됩니다.

webapp/i18n/i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World

시작 페이지 제목과 panel 제목을 텍스트 bundle에 새로운 key/value 쌍을 추가합니다.

Conventions

- 기본 aggregation을 은연중에 사용하지 말고 view에서 항상 aggregation 이름을 명시적으로 .선언하십시오. 위의 예에서 'content' aggregation은 'Panel' 컨트롤이 기본값으로 이것을 선언하는 것처럼 생략할수도 있지만 view를 읽는데 더 힘들게 만듭니다.