3. SAP UI5 Controller Create & Module Add

SAP UI5 Controller Create & Module Add

이전 단계에서는 UI5의 MVC 패턴 중 V(view)에 해당하는 내용을 살펴보았다. 이번 단계에서는 C(Controller)에 해당하는 UI5 동작 적용에 대한 내용을 작성한다.
(In the previous step, contents corresponding to V (view) among the MVC patterns of UI5 were examined. In this step, contents for application of UI5 operation corresponding to C (controller) are created.)

실행 결과(Results of this step)

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

1. XML view에 버튼 추가 및 Controller를 지정한다.
   (Add a button and specify a controller in the XML view.)
2. 동작을 제어할 Controller 생성한다.
   (Create a controller to control the behavior.)

1. XML view에 버튼 추가 및 Controller 지정
   (Add a button and specify a controller in the XML view.)

• webapp/view/App.view.xml에 아래의 노란색 부분 코드를 수정한다.
  (Modify the yellow partial code below in webapp/view/App.view.xml.)

1 2 3 4 5 6

<mvc:View    controllerName="ui5_tutorial.controller.App"    xmlns="sap.m"    xmlns:mvc="sap.ui.core.mvc">    <Button text="Say Hello" press=".onShowHello"/> </mvc:View>

• 코드 해석(Code description)

• controllerName="ui5_tutorial.controller.App"
  : App.view.xml과 연결된 controller가 webapp/controller/App.controller.js 임을 선언한다.
  (Declares that the controller associated with App.view.xml is webapp/controller/App.controller.js.)
  
  
• <Button text="Say Hello" press=".onShowHello"/>
  : sap.m 라이브러리에 포함되어 있는 Button Module을 사용한다. 버튼에 표시되는 Text는 "Say Hello"이고, Button을 눌렀을 때 동작하는 로직은 위에서 연결한 Controller의 "onShowHello" 함수를 실행한다.
  (Use the button module included in the sap.m library. The text displayed on the button is "Say Hello", and the logic that operates when button is pressed executes the "onShowHello" function of the controller connected above.)

 

2. 동작을 제어할 Controller 생성
   (Create a controller to control the behavior.)

• webapp/controller/App.controller.js 파일을 신규로 생성한다.
  (Create a new webapp/controller/App.controller.js file)
• controller 들은 모두 "controller이름.controller.js" 로 생성하는 규칙이 정해져 있다.
  (All controllers have a rule that generates "controller name.controller.js".)

• 신규 생성한 "App.controller.js"에 아래의 코드를 작성한다.
  (Write the code below in the newly created "App.controller.js".)

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

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

cs

• 코드 해석(Code description)

• "sap/ui/core/mvc/Controller" , "sap/m/MessageToast"
  : sap.ui.core.mvc 라이브러리에 Controller Module과 sap.m 라이브러리에 MessageToast Module을 사용하기 위해 Import를 하겠다는 선언이다.
  (It is a declaration to import to use the "Controller" Module in the "sap.ui.core.mvc" library and the "MessageToast" Module in the "sap.m" library.)
  
  
• (Controller , MessageToast) => { ........... }
  : define 영역에서 첫 번째로 선언한 Module을 "Controller"라는 이름으로 두 번째 선언한 Module을 "MessageToast"라는 이름으로 상세 로직 작성시 사용하겠다는 의미이다.
  ( This means that the first module declared in the define area will be used when writing detailed logic under the name "MessageToast" after the second module declared under the name "Controller".) 
  
  
• return Controller.extend("ui5_tutorial.controller.App", { .......... }
  : callback으로 실행된 함수의 결과를 "ui5_tutorial.controller.App" 이름으로 "Controller"를 리턴한다.
  ( Returns the result of a function executed with callback to the name "ui5_tutorial.controller.App".)
  
  
• onShowHello() {
              MessageToast.show("Hello World");
  }
  : onShowHello() 함수가 실행되었을 때 inport한 "sap.m.MessageToast" 모듈을 사용하여 "Hello World" 메시지가 Toast 되도록 한다.
  (When the "onShowHello()" function is executed, use the imported "sap.m.MessageToast" module to make the "Hello World" message toast.)

cs

cs