Step 5: Controllers

Step 설명

이 step에서는 텍스트를 버튼으로 대체하고 버튼을 누르면 "Hello World"메시지가 표시됩니다. 버튼의 press event 처리는 뷰의 컨트롤러에서 구현됩니다.

Preview

Say Hello 버튼이 추가됩니다.

webapp/view/App.view.xml

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

<mvc:View
   // controller에 대한 참조 추가
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   // text controller를 "Say Hello"라는 text를 가신 Button으로 
   <Button
      text="Say Hello"
      press="onShowHello"/>
</mvc:View>

버튼이 눌리면 onShowHello event 핸들러 함수가 실행됩니다. view에 연결된 controller의 이름을 특정하고 view의 controllerName 속성을 설정한 다음 onShowHello를 가지고 있어야 합니다.

view에 반드시 명시적으로 할당 된 controller가 필요한 건 아닙니다. view가 단지 정보를 표시하고 추가 함수가 필요하지 않은 경우 controller를 만들 필요는 없습니다. controller가 지정되면 view가 로드된 후 인스턴스화됩니다.

webapp/controller/App.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("", {
   });
});

webapp 폴더 밑에 controller 폴더(webapp/controller)를 만들고 controller 폴더에 App.controller.js 파일을 생성합니다. 지금은 필요한 모듈을 관리하는 코드를 무시합니다. 해당 내용은 다음 단계에서 설명합니다.

Note

The "use strict"; literal expression was introduced by JavaScript 1.8.5 (ECMAScript 5). It tells the browser to execute the code in a so called “strict mode”. The strict mode helps to detect potential coding issues at an early state at development time, that means, for example, it makes sure that variables are declared before they are used. Thus, it helps to prevent common JavaScript pitfalls and it’s therefore a good practice to use strict mode.

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

SAPUI5 코어의 Controller 객체를 확장하여 app controller를 자체 파일에 정의합니다. 처음에 이 controller는 단지 press event를 핸들링해서 alert창만 띄어 주는 onShowHello 함수 하나만 가지고 있습니다. 

Conventions

- controller의 이름은 대문자로 시작합니다.

- controller는 관련된 view와 동일한 이름을 사용합니다.(1:1 관계일 경우)

- event handlers는 on으로 시작합니다.(예: onShowHello)

- controller의 이름은 항상 *.controller.js로 끝납니다.

이번 step에서는 view에 event와 controller를 정의하고 view에서 정의한 event를 controller에서 처리하는 과정을 확인했습니다. view에서 controllerName에 정의한 값과 Controller.extend 메소드의 첫번째 인자가 같은 것을 볼 수 있습니다. 여기서 Controller.extend의 첫번째 인자 에 controllerName이 들어가는 걸 알 수 있습니다. 두번째 인자로는 함수들을 정의한 객체쯤 되겠네요. 아직은 초반이라 인자가 없는 event만 있습니다.

이전 내용 - Step 4: XML Views

다음 내용 - Step 6: Modules