SAP UI5 Step 5: Controllers

Step 5: Controllers

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

Preview

Coding

아래의 site Demo Kit에서 여기서 작성하는 응용 프로그램의 모든 파일을 보고 다운로드 할 수 있습니다. 

Walkthrough - Step 5.

webapp/view/App.view.xml

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

controller 에 대한 참조를 추가하고 text control 을 텍스트 "Say Hello"가 있는 button으로 바꿉니다. 이 버튼은 누를 때 onShowHello 라는 이름의 event handller function을 트리거합니다. 또한 뷰에 연결된 컨트롤러의 이름을 지정하고 뷰의 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 와 새로운 파일 App.controller.js 를 만듭니다. 지금은 필요한 모듈을 관리하는 코드를 무시합니다. 이 부분은 다음 단계에서 설명 할 것입니다.

Note

"use strict"; 리터럴 표현식은 JavaScript 1.8.5 (ECMAScript 5)에서 소개되었습니다. 브라우저에 코드를 "엄격 모드 (strict mode)"로 실행하도록 지시합니다. strict 모드는 개발 초기에 잠재적인 코딩 문제를 감지하는데 도움이됩니다. 즉, 변수가 사용되기 전에 변수가 선언되도록 합니다. 따라서 일반적인 JavaScript 함정을 예방하는 데 도움이되므로 엄격 모드를 사용하는 것이 좋습니다.

webapp/controller/App.controller.js

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

SAPUI5 core의 Controller 객체를 확장하여 응용 프로그램 controller를 자체 파일에 정의합니다. 처음에는 alert을 표시하여 button의 press event를 처리하는 onShowHello라는 단일 함수만 보유합니다.

Conventions

* controller 이름은 대문자로 표기됩니다.

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

* event handller 앞에는 "on" 이라는 접두어가 붙습니다.

* controller 파일 이름은 항상 * .controller.js 로 끝납니다.