티스토리 뷰

SAPUI5

Step 12: Shell Control as Container

선즈반 2018. 12. 6. 10:25

Step 설명

app의 컨테이너로써 shell 컨트롤을 사용하고 새로운 root 요소로 이것을 사용합니다 . shell은 데스크탑 화면에 letterbox를 도입하여 기기의 화면 사이즈에 맞춰 application의 시각적으로 조정합니다. 


webapp/index.html

<!DOCTYPE html>
<html>
   <head>
      …
      <script>
         sap.ui.getCore().attachInit(function () {
            new sap.m.Shell({
               app : new sap.ui.core.ComponentContainer({
                  name : "sap.ui.demo.walkthrough",
                  settings : {
                      id : "walkthrough"
                  }
               })
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

shell 컨트롤은 app에서 가장 가장자리에 있는 컨트롤이고 만약 화면 사이즈가 정의한 넓이보다 크다면 자동적으로 letterbox가 표시됩니다.  우리가 해야 하는 일은 shell의 aggregation app에 구성요소를 할당하기만 하면 욉니다.

커스텀 배경 또는 이미지, 색상등을 설정하는 것과 같은 shell을 커스텀하기 위한 추가 옵션이 있습니다. API를 통해 더 많은 정보를 확인하십시오.


letterbox이란?(클릭하시면 더많은 정보를 얻으실 수 있습니다)

화면이 설정된 넓이 제한보다 넓으면 사용자 인터페이스의 왼쪽, 오른쪽의 빈 부분이 나타납니다. 많은 경우에 이 부분들은 광고로 채워집니다. 이런 디자인 요소를 letterboxing이라고 합니다. 왜냐하면 이 요소가 클래식 우체통과 비슷하게 일정한 폭으로 사용자 인터페이스를 제한하기 때문입니다.(영화에서 보는 빨간색 우체통을 상상하시면 될 듯. 구멍이 있어서 구멍 넓이보다 큰것은 못 넣죠) 이전 버전(아마도 1.60 이전)에서는 1024px로 letterbox가 자동으로 지원됐는데 이후 버전에서는 기능이 옵션이 되었습니다.

letterbox를 언제 적용해야 하나...

  • UI를 심플하고 집중적으로 만들고 싶을 때
  • 화면의 전체 witdh를 사용을 요구하는 UI가 거의 없을 때
  • 컨텐츠가 너무 큰 사이즈 차이에 대응할 수 없고 app을 늘렸을 경우 컨테츠가 왜곡되어 사용성이 나빠질 수 있을 때


깊게 들어가면 어렵겠지만 단순하게 가장 바깥쪽 영역을 잡아주는 컨트롤이라고 이해하면 될 듯 싶네요.

저작자표시 비영리

'SAPUI5' 카테고리의 다른 글

Step 14: Custom CSS and Theme Colors  (0) 2018.12.06
Step 13: Margins and Paddings  (0) 2018.12.06
Step 11: Pages and Panels  (0) 2018.12.06
Step 10: Descriptor for Applications  (0) 2018.12.06
Step 9: Component Configuration  (0) 2018.12.06
댓글