[UI5] 화면 개선

이전 JSON Model에서 만들었던 프로그램이 준비물이다.

App.view.xml

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

HelloPanel.view.xml

<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>openDialogButtonText}"
                    press=".onOpenDialog"
                    class="sapUiSmallMarginEnd" />
            <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>

App.controller.js

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

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/core/Fragment"
], function(Controller, MessageToast, Fragment){
    "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 = Hugh
            MessageToast.show(sMsg);
        },

        //fragment는 화면을 그려주는 기능면에서 view와 매우 흡사, view는 controller를 1대1로 가지고있지만 fragment는 1대1로 가지고있지않음
        //재사용성 높이기위해 view와 분리 
        onOpenDialog : function () { //Dialog 버튼 눌렀을때 Hellodialog.fragment 불러옴 
            var oView = this.getView();

            //if문 없으면 처음 버튼눌렀을때 창 잘열리지만 두번째부터 안열림 
            if(!this.byId("helloDialog")) { //helloDialog라는 id찾는 메소드
                Fragment.load({     //fragment 객체를 가져와서 load라는 함수 실행, load는 파일을 읽어옴
                    id: oView.getId(),
                    name: "sap.ui.demo.walkthrough.view.HelloDialog",    //Fragment.load로 .fragment.xml 생략
                    controller: this
                }).then(function (oDialog) {    //load함수 끝나는순간 then함수실행, load한 객체 불러옴
                    oView.addDependent(oDialog);    //이 dialog를 컨트롤러가 연결되있는 뷰에 보여줌 
                    oDialog.open();
                });
            } else {
                this.byId("HelloDialog").open(); //Dialog ID 
            }
        },

        onCloseDialog : function () {
            this.byId("HelloDialog").close();
        }
    });
});

i18n_ko.properties

showHelloButtonText = 인사  
helloMsg= {0}님 반갑습니다. 
#helloMsg: 키워드 , {0}: 구멍뚫어줌, placeHolder
#showHelloButtonText: 키워드, 인사: value
helloPanelTitle=Hello World!
homePageTitle=walkthrough
openDialogButtonText=Dialog
dialogCloseButtonText=OK

Component.js

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
],function(UIComponent,JSONModel,ResourceModel){
   "use strict";

   return UIComponent.extend("sap.ui.demo.walkthrough.Component",{
      metadata:{
//          rootView : {
//         "viewName" : "sap.ui.demo.walkthrough.view.App",
//         "type" : "XML",
//         "async" : true,
//         "id" : "app"
//      } //json파일에 있는내용 
          manifest: "json"
   },
      init: function(){
         UIComponent.prototype.init.apply(this,arguments);

         var oData = {
               recipient :{
                  name : "Nion"
               }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);

         var i18nModel = new ResourceModel({
            bundleName: "sap.ui.demo.walkthrough.i18n.i18n"
         });
         this.setModel(i18nModel,"i18n");
      }
   })
});

HelloDialog.fragment.xml

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Dialog
        id="HelloDialog"
        title="Hello {/recipient/name}"
        contentWidth="50%"
        contentHeight="40%">
    <VBox>
        <Text text="First Dialog" />        
    </VBox>
    <beginButton>    <!-- 창닫기버튼 -->
        <Button
            text="{i18n>dialogCloseButtonText}"
            press=".onCloseDialog" />
        </beginButton>
    </Dialog>
</core:FragmentDefinition>

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;
}

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": {}
      }
    },
    "resources" : {
        "css" : [
            {"uri" : "css/style.css"}
          ]
        }
  }
}