Step 6: Modules

SAPUI5에서 자원은 모듈이라고 부른다. 이번 튜토리얼에선지난 연습의 Javascript의 alert을 UI5의 sap.m 라이브러리의 Message Toast로 대체 해본다.
이때 해당 모듈을 로드할때 비동기적으로 로드해보자.

Preview

Coding

Walkthrough - Step 6.

webapp/controller/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", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

sap.ui.define에 sap.m.MessageToast를 종속성으로 추가 한다.
Controller와 MessageToast 모듈이 모두 로드되면 콜백 함수가 호출되고 함수에 전달 된 매개 변수에 액세스하여 두 객체를 모두 사용할 수 있다.

비동기 모듈 정의(AMD) 구문을 사용하면 모듈 로드를 코드 실행과 명확하게 구분할 수 있으며 응용 프로그램의 성능이 향상된다.
브라우저는 코드가 실행되기 전에 리소스가 로드 되는 시기와 방법을 결정할 수 있다.

Conventions

• 전역 namespac를 정의하려면 controller와 다른 모든 JavaScript Module에 sap.ui.define을 사용한다. namespace를 사용하면 응용 프로그램 전체에서 객체를 처리 할 수 있다.

• namespace를 선언하지 않고, 종속적인 비동기 로드를 하려면  sap.ui.require를 사용한다. 실행 되고 다른 코드에서 호출 할 필요는 부분일 때 사용한다.

• namespace가없는 함수 매개 변수의 로드 하려면 이슈의 이름을 사용한다.

Related Information

API Reference: sap.ui.define

API Reference: sap.ui.define