8. SAP UI5 View & Controller Structuring

 

SAP UI5 View & Controller Structuring (구조화)

 이 단계에서는 작업 단위의 뷰와 컨트롤러를 모듈화하고 효율적으로 관리할 수 있도록 화면을 재구성한다.
 (In this step, the screen is reconstructed so that the View and Controller of the work unit can be modularized and managed efficiently.)

실행 결과 (Results of this step)

  이전 단계의 결과와 동일한 UI와 동작을 보여준다. 단, View와 Controller의 구조화를 적용한다.
 (It shows the same UI and operation as the result of the previous step. However, the structure of View and Controller is applied.)

 

실행 순서 (Order of execution of this step):

1. 업무 영역의 화면(View)를 분리하여 신규 생성 및 기존 App.view.xml의 내용을 신규 View로 이동한다.
   (Separate the screen (View) in the business area to move the contents of the new creation and existing App.view.xml to the new View.)
2. 신규 생성한 View와 한 쌍이 되는 Controller 신규 생성 및 App.controller.js의 내용을 신규 Controller로 이동한다.
   (Move the contents of the new Controller and App.controller.js, paired with the newly created View, to the new Controller.)
3. App.view.xml에 신규 생성한 View를 Import 한다.
   (Import a newly created View into App.view.xml.)
4. 필요한 다국어 정보 추가한다.
   (Add the necessary multilingual information.)

1. 업무 영역의 화면(View)를 분리하여 신규 생성 및 기존 App.view.xml의 내용을 신규 View로 이동한다. (Separate the screen (View) in the business area to move the contents of the new creation and existing App.view.xml to the new View.)

•  webapp/view 폴더 하위에 업무 단위로 화면을 관리할 수 있도록 신규 폴더를 생성한다. 신규 폴더 하위에 PageViewSample.view.xml 파일 생성한 후 App.view.xml에 있는 화면 구성 소스를 이동한다. 
   (Create a new folder under the "webapp/view" folder so that you can manage the screen in units of work. Create a "PageViewSample.view.xml" file under the new folder and move the screen configuration source in "App.view.xml".)

        

        

• webapp/view/sample/PageViewSample.view.xml 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<mvc:View     controllerName="ui5_tutorial.controller.sample.PageViewSample"      xmlns:mvc="sap.ui.core.mvc"         xmlns="sap.m"         height="100%">     <Button       text="{i18n>showHelloButtonText}"       press=".onShowHello"/>    <Input       value="{/recipient/name}"       description="Hello {/recipient/name}"       valueLiveUpdate="true"       width="60%"/>     </mvc:View>

• 코드 해석 (Code description)
• controllerName="ui5_tutorial.controller.sample.PageViewSample"
  : PageViewSample.view.xml과 한 쌍으로 화면의 동작(control)을 관리할 Controller를 지정한다.
   (Specifies the controller to manage the screen's behavior (control) in a pair with "PageViewSample.view.xml".)
  
  : 다음 단계에서 webapp/controller/sample/PageViewSample.controller.js로 신규 Controller를 생성한다.
   (In the next step, create a new controller with "webapp/controller/sample/PageViewSample.controller.js".)
  
  : 위에 노란색 로직 외에는 App.view.xml 에 로직을 그대로 옮겨온 것이다.
   (Other than the yellow code above, the code was moved to "App.view.xml".)

2. 신규 생성한 View와 한 쌍이 되는 Controller 신규 생성 및 App.controller.js의 내용을 신규 Controller로 이동한다.
 (Move the contents of the new Controller and App.controller.js, paired with the newly created View, to the new Controller.)

• webapp/controller 폴더 하위에 업무 단위로 Controller를 관리할 수 있도록 신규 폴더를 생성한다. 신규 폴더 하위에 PageViewSample.controller.js 파일 생성한 후 App.controller.js 에 있는 로직을 이동한다.
   (Create a new folder under the "webapp/controller" folder so that you can manage the controller in units of work. Create a "PageViewSample.controller.js" file under the new folder and move the controller configuration source in "App.controller.js".)

        

        

• webapp/controller/sample/PageViewSample.controller.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

sap.ui.define([     "sap/ui/core/mvc/Controller" ,     "sap/m/MessageToast"  ], (Controller , MessageToast) => {     "use strict";       return Controller.extend("ui5_tutorial.controller.sample.PageViewSample", {               onShowHello() {          const oBundle = this.getView().getModel("i18n").getResourceBundle();          const sRecipient = this.getView().getModel().getProperty("/recipient/name");          const sMsg = oBundle.getText("helloMsg", [sRecipient]);                    MessageToast.show(sMsg);        }     });  });

• 코드 해석 (Code description)
• "ui5_tutorial.controller.sample.PageViewSample"
  :  App.controller.js에 내용을 그대로 옮겨온 후 노란색 부분의 Contoller 이름을 새로 생성한 controller 이름으로 수정한다.
  (After transferring the contents to "App.controller.js", modify the Controller name in the yellow part to the newly created controller name.)

• webapp/controller/sample/App.controller.js

1 2 3 4 5 6 7 8 9 10

sap.ui.define([     "sap/ui/core/mvc/Controller"   ], (Controller) => {     "use strict";       return Controller.extend("ui5_tutorial.controller.App", {                   });  });

3. App.view.xml에 신규 생성한 View를 Import 한다.
   (Import a newly created View into App.view.xml.)

• webapp/view/App.view.xml 내용을 새로 생성한 PageViewSample View가 import되도록 수정한다. 
   (Modify the "webapp/view/App.view.xml" content to import the newly created PageView Sample View.)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<mvc:View    controllerName="ui5_tutorial.controller.App"    xmlns="sap.m"    xmlns:mvc="sap.ui.core.mvc">    <Shell>         <App class="myAppTutorial">                 <Page title="{i18n>homePageTitle}">                  <content>                      <mvc:XMLView viewName="ui5_tutorial.view.sample.PageViewSample"/>                  </content>               </Page>         </App>     </Shell> </mvc:View>

• 코드 해석 (Code description)
• <Shell> ....... </Shell>
  : View 양쪽에 여백을 자동으로 생성한다.(아래 빨간색 영역이 자동 생성된다.)
   (Automatically create margins on both sides of the View (the red area below is automatically created))
  
  
  
  
  
• <App> ........ </App>
  : App Tag에 포함되는 화면 전체를 하나의 App으로 묶어 화면을 관리한다.(화면 길이에 따라 자동으로 스크롤 생성 등을 관리함)
   (The entire screen included in the App Tag is grouped into one App to manage the screen. (Automatically manages scroll generation, etc. according to the screen length.))
  
  
• <Page title="{i18n>homePageTitle}"> ........ </Page>
  : 화면을 Header, Content, Footer 로 나눠주는 역할을 한다.  
    이번 단계에서는 Header 영역에는 Title을 표시, Content 영역에는 PageViewSample.view.xml을 import, footer는 보이지 않도록 한다.
    Header 영역의 Title을 i18n(다국어)을 참조하여 표시할 수 있도록 한다.  
    (It serves to distribute the screen to Header, Content, and Footer.
     In this step, only display Titles in the Header area and insert PageViewSample.xml in the Content area and not see the & footer.
    Configure Titles in the header area to be displayed by referring to i18n (multilingual).)
  
  
  
  
  
• <content> ......... </content>
  : Page 영역 중 content 영역을 선언하여 작성한다.
    (Declare and create the content area of the page area.)
  
  
• <mvc:XMLView viewName="ui5_tutorial.view.sample.PageViewSample"/>
  : sap.ui.core.mvc 라이브러리에 XMLView Component를 사용하여 PageViewSample.view.xml View를 해당 위치에 import 한다.
   (Import PageViewSample.view.xmlView to that location using the XMLView Component in the sap.ui.core.mvc library.)

4. 필요한 다국어 정보 추가한다.
   (Add the necessary multilingual information.)

• Title 에 사용한 homePageTitle 다국어 정보를 webapp/i18n/i18n_ko.properties 파일에 추가한다.
  (Add the homePageTitle multilingual information used in Title to the webapp/i18n/i18n_ko.properties file.)

1

homePageTitle=샘플 화면