Step 11: Validation Using the Message Manager

이번 튜토리얼에선 currency 데이터 유형에서 사용자 입력이 currency 요구 사항을 준수하는지 체크하는 기능을 살펴본다.
데이터 형식 유효성 검사는 사용자(UI)에게 알려줄 수 없는 SAPUI5에서 관리한다.
따라서 유효성 검사 기능으로 발생하는 오류 메시지를 다시 사용자에게 알려줘야 한다.
전체view를 "Message Manager"라는 기능에 연결합니다.
이 연결이 설정되면 사용자 입력을 기반으로 생성 된 모든 유효성 검사 오류 메시지가 메시지 관리자로 전달되고 메시지 관리자는 오류를 일으킨 적절한view 및 control에 메시지 관리자를 연결한다.

Preview

Coding

Data Binding - Step 11.

webapp/index.js

sap.ui.require([
	"sap/ui/model/json/JSONModel",
	"sap/ui/core/mvc/XMLView",
	"sap/ui/model/resource/ResourceModel"
], function (JSONModel, XMLView, ResourceModel) {
	"use strict";

	// Attach an anonymous function to the SAPUI5 'init' event
	sap.ui.getCore().attachInit(function () {
		var oModel = new JSONModel({
			firstName: "Harry",
			lastName: "Hawk",
			enabled: true,
			address: {
				street: "Dietmar-Hopp-Allee 16",
				city: "Walldorf",
				zip: "69190",
				country: "Germany"
			},
			"salesToDate": 12345.6789,
			"currencyCode": "EUR"
		});

		// Assign the model object to the SAPUI5 core
		sap.ui.getCore().setModel(oModel);

		var oResourceBundle = new ResourceModel({
			bundleName: "sap.ui.demo.db.i18n.i18n"
		});

		sap.ui.getCore().setModel(oResourceBundle, "i18n");

		// Display the XML view called "App"
		var oView = new XMLView({
			viewName: "sap.ui.demo.db.view.App"
		}).placeAt("content");

		// Register the view with the message manager
		sap.ui.getCore().getMessageManager().registerObject(oView, true);


		// Insert the view into the DOM
		oView.placeAt("content");
	});
});

• 이제 XMLView가 아닌 oView라는 객체로 명명된다.

• sap.ui.getCore().getMessageManager().registerObject(oView, true); oView를 MessageManager에 등록한다.

• 등록이 되면 DOM에 삽입된다.

이제 Sales To Date 필드에 숫자가 아닌 값을 입력하고 엔터를 누르거나 포커스를 인풋으로 하면 onenter, onchange로 이벤트를 트리거한다음
OpenUI5의 sap.ui.model.type.Currency 데이터 유형에 속한 유효성 검사 함수를 실행한다.

view가 MessageManager에 등록되어 있으므로 유효성 검사의 오류 메세지는 등록된 객체 목록을 확인한 다음 오류 메세지를 전달하여 표시한다.

Related Information

Error, Warning, and Info Messages