[UI5] Pages, Panels, Shell, Margins, Nested View, Custom CSS

이전 JSON Model에서 만들었던 프로그램이 준비물이다. 이 게시물의 모든 구문을 수행하고나면,

화면이 이렇게 더 보기좋게 변할것이다.

---

파일의 관계는 이러하다. 현재 index.html에서 언어는 ko이다.

App.view.xml

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Shell>
        <App>
            <pages>
                <Page title="{i18n>homePageTitle}">
                    <content>
                        <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel" />
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

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

** letterbox? **
화면이 설정된 넓이 제한보다 넓으면 사용자 인터페이스의 왼쪽, 오른쪽의 빈 부분이 나타난다. 이런 디자인 요소를 letterboxing이라고 한다.

<Page> 컨트롤 안에 input 필드와 버튼을 넣는다. page는 <content>라고 하는 다른 컨트롤들과 0..N으로
aggregation을 제공한다. content 상단 header 섹션에 제목 속성을 표시한다. page 자체는 또 다른 컨트롤
sap.m.App의 aggregation <pages>안에 위치한다.

App view에 panel과 컨텐츠를 직접 넣는 대신에 새로 분리하는 HelloPanel.view로 옮긴다. 원래 panel이 들어갈자리에 생성한 뷰의 경로를 입력해준다.

Nested View
panel 컨텐츠는 점점 더 복잡해져서 view를 분리해야한다. 이 방법을 사용하면 application 구조가 이해하기 훨씬 쉬워지고 app의 각 부분을 재사용할 수 있다.

HelloPanel.view.xml

view폴더에 판넬과 컨텐츠를 넣어줄 view파일을 하나 생성한다.

panel에는 화면의 상단 헤더나, 버튼, 입력필드 등의 구문들이 들어간다. content는 aggregation이기 때문에 대문자로 쓰지않는다.

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.HelloPanel" xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Panel headerText="{i18n>helloPanelTitle}"
        class="sapUiResponsiveMargin" width="auto">
        <content>
            <Button text="{i18n>showHelloButtonText}" 
                    press=".onShowHello"
                    class="myCustomButton" />
            <Input  value="{/recipient/name}" 
                    valueLiveUpdate="true"
                    width="60%" />
            <Text text="Hello {/recipient/name}" 
                    class="sapUiSmallMargin myCustomText" />
        </content>
    </Panel>
</mvc:View>

sapUiResponsiveMargin으로 헤더 텍스트 판넬에 약간의공간을 추가한다. margin이 기본 넓이 100%에 추가되고 page 사이즈를 초과하므로 auto로 panel의 width를 설정해야 한다.

다른 내용과 이것을 맞추기 위해 sapUiSmallMargin으로 작은 margin을 사용한다. 비슷하게 panel과 같이 컨테이너 컨트롤의 안쪽 부분에 배치하기 위해 스탠다드 padding 클래스들을 추가할 수도 있다

가능한한 layout에 SAPUI5의 스탠다드 CSS 클래스를 사용한다.

i18n_ko.properties

showHelloButtonText = 인사  
helloMsg= {0}님 반갑습니다. 
helloPanelTitle=Hello World!
homePageTitle=walkthrough

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

---

App.controller.js

재사용 가능한 asset(자산)을 가지려면 메소드 onShowHello 를 app 컨트롤러에서 HelloPanel 컨트롤러로 옮긴다. app 컨트롤러에서는 HelloPanel 컨트롤러의 경로를 지정해준다.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
], function(Controller, MessageToast){
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
        onInit :  function() {
      },
    });
});      

HelloPanel.controller.js

controller 폴더에서 새로운 HelloPanel 컨트롤러 파일을 생성해준다.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
], function(Controller, MessageToast){
    "use strict";
    return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
        onInit :  function() {

      },    

        onShowHello : function () {
            var oBundle = this.getView().getModel("i18n").getResourceBundle(); //리소스모델을 가져와서 객체로 만들고 객체를 가져와 변수에 담는다
            var sRecipient = this.getView().getModel().getProperty("/recipient/name"); //디폴트모델에서 name프로포티 글자 읽어와 변수에 담는다, getProperty: 모델의 데이터 가져옴
            var sMsg = oBundle.getText("helloMsg", [sRecipient]);    //("키워드",[ ]) 인사라는 문자열이 키워드에 리턴됨 //helloMsg= {0}님, 반갑습니다. , sRecipient = Niom
            MessageToast.show(sMsg);
        }
});

---

때로는 좀 더 fine-granular 레이아웃을 정의해야 필요가 있다. 컨트롤에 커스텀 스타일 클래스들을 추가하고 원하는대로 스타일을 지정함으로써 유연한 CSS를 사용할 수 있다.

style.css (Custom CSS)

먼저 Webcontent폴더에 하위폴더 css를 생성해준다. 새로 생성한 css 폴더에 style.css 파일을 추가한다.

html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {
    margin-right : 0.125rem
}
html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {
    margin-right : 0.125rem
}

.myAppDemoWT .myCustomText {
    display : inline-block;
    font-weight :  bold;
}

오른쪽에서 왼쪽으로 진행되는 rtl(right-to-left)의 경우 왼쪽 margin을 설정하고 app 화면이 거꾸로 표시될 때 오른쪽 margin을 재설정한다. Custom CSS를 사용하는 경우에 이러한 정보를 추가해야 한다.

클래스에 띄어쓰기를 하는 이유는, 다른 클래스이기 때문이고 뒤에오는 클래스는 앞에오는 부모클래스의 자식으로 부모클래스에 꼭 있어야한다.

띄어쓰기를 안하는 경우는 하나의 태그안에 클래스가 같이 들어있을때만인데 그렇게 해야 css 적용이 가능하다.

추가 클래스 myCustomText에 bold 텍스트를 정의하고 display inline-block을 설정한다.

색상을 지정할 땐, Custom CSS에서 색상을 지정하지 말고 스탠다드 theme-dependent를 사용한다.

이후 App.view에서 <App>컨트롤에 클래스 myAppDemoWT를 추가하고,
<Button>컨트롤에 클래스 myCustomButton을 추가한다. <Text>컨트롤에는 클래스 myCustomText을 추가한다.

manifest.json

{
  "_version": "1.12.0",
  "sap.app": {
    "id": "sap.ui.demo.walkthrough",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
    }
  },
  "sap.ui5": { 
    "rootView": {
        "viewName": "sap.ui.demo.walkthrough.view.App",
        "type": "XML",
        "async": true,
        "id": "app"
    },
    "dependencies": {
      "minUI5Version": "1.60",
      "libs": {
        "sap.m": {}
      }
    },

여기까지의 구문은 셋팅일 뿐이므로 구문을 해석하려고 하지 않아도 된다.

sap.ui5 네임스페이스의 resources 섹션에서 app의 추가 resources를 로드할 수 있다. 아래의 구문을 추가함으로써 css파일을 브라우저에서 로드할수 있게 된다.

    "resources" : {
        "css" : [
            {"uri" : "css/style.css"}
          ]
        }
  }
}

component와 상대경로로 URI를 정의하여
CSS 스타일을 로드한다. 일반적인 웹 페이지에서처럼 SAPUI5는 HTML 페이지 header에 <link>태그로 이 파일을 추가하고, 브라우저는 자동으로 이 파일을 로드한다.