【SAPUI5】Shell Control로 디바이스에 맞추어 폭을 조정

소개

지금까지 만든 어플리케이션은 PC에서의 표시만을 상정하고 있었습니다.
이 때문에 장치의 폭이 바뀌면 문자가 작아서 읽을 수 없었습니다.

※주
Fiori Launchpad에서 실행하는 앱의 경우 Launchpad에 Shell bar가 포함되어 있으므로 앱 측에 Shell Control을 넣을 필요가 없습니다. 이 기사는 독립형 앱을 가정합니다.

PC로 표시하는 경우


iPoneX로 표시한 경우



※디버그 툴의 "Toggle device tool bar"라고 하는 버튼을 누르면, 다양한 디바이스에서 실행한 결과를 시뮬레이션 할 수 있습니다

Shell Control이란?

sap.m.Shell이라는 컨트롤을 사용하면 장치에 맞게 너비를 자동으로 조정할 수 있습니다.
index.html 파일의 attachInit 메서드에서 Shell 인스턴스를 만들면 Shell이 ​​응용 프로그램의 가장 바깥쪽 컨트롤로 작동합니다.
이것에 의해, 뷰측에서는 폭을 의식할 필요가 없습니다.

쓰기

입문편의 기사 정리 에서 작성한 어플리케이션을 준비합니다.
index.html 파일의 attachInit 메소드를 다음과 같이 변경하십시오.

변경 전

        <script>
           sap.ui.getCore().attachInit(function () {
                new sap.ui.core.ComponentContainer({
                    name : "test.helloworld"
              }).placeAt("content");      
           })
        </script>

변경 후

        <script>
           sap.ui.getCore().attachInit(function () {
                new sap.m.Shell({
                    app : new sap.ui.core.ComponentContainer({
                        name : "test.helloworld"
                    })              
                }).placeAt("content");
           })
        </script>

원래 있던 "new sap.ui.core.ComponentContainer"이후의 기술을 sap.m.Shell로 둘러싼 형태입니다.

실행 결과

PC로 표시하는 경우
별다른 차이를 모르겠지만 상단에 파란색 막대가 표시됩니다.


iPoneX로 표시한 경우
문자를 읽을 수 있는 크기로 표시되게 되었습니다.

참고로 한 페이지

Get Started: Setup and Tutorials-Walkthrough-Step 12: Shell Control as Container