SAP UI5 Week 1 - Unit 5. Data Model과 Internationalization > SAP Business Technology Platform(BTP)

SAP Business Technology Platform(BTP)

SAP UI5 Week 1 - Unit 5. Data Model과 Internationalization

페이지 정보

작성자 SAPBTP가이드 쪽지보내기 아이디로 검색 전체게시물
댓글 1건 조회 451회 작성일 21-08-13 16:28

본문

Week 1 - Unit 5 : Data Model과 Internationalization

Data Model 처리하기
Internationalization

1. Data Model 처리하기

이 단계에서는 입력 필드를 추가하고, 새 모델 내의 데이터에 바인딩하며 옆에 있는 설명에 사용자 입력을 표시합니다.

webapp/model/HelloPanel.json (NEW)

{ 
	"recipient" : {
		"name" : "World"
	}
}

이를 달성하기 위해 애플리케이션이 작동하는 데이터의 컨테이너로 JSON 모델을 추가합니다. 따라서 앱의 webapp 폴더 내에 폴더 모델을 생성하고 이 폴더 안에 HelloPanel.json 파일을 생성합니다. 파일의 내용으로 이름에 대한 추가 속성이 있는 수신자가 하나만 필요합니다.

webapp/manifest.json

{
	...
	"sap.ui5": {
		…
		"models": {
			"helloPanel": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/HelloPanel.json"
			}
		},
		…
	}
}

이제 manifest.json 내에서 모델을 정의해야 합니다. 설명자의 sap.ui5 섹션에 새로운 모델 helloPanel을 추가합니다.

JSON 모델을 사용하므로 유형을 sap.ui.model.json.JSONModel로 설정합니다. uri 속성은 구성 요소를 기준으로 테스트 데이터에 대한 경로를 보유합니다.

이 작은 구성으로 구성 요소는 HelloPanel.json 파일에서 데이터를 로드하는 새 JSON 모델을 자동으로 인스턴스화합니다.

마지막으로 인스턴스화된 JSON 모델을 구성 요소에서 이름이 지정된 helloPanel로 사용할 수 있습니다.

webapp/view/App.view.xml

<mvc:View	…>
	…
	<Button
		text="Say Hello!"
		press="onShowHello"/>
	<Input
		value="{helloPanel>/recipient/name}"
		description="Hello {helloPanel>/recipient/name}"
		valueLiveUpdate="true"
		width="60%"/>
</mvc:View>

바인딩 경로(바인딩 구문)를 묶는 중괄호는 자동으로 데이터 바인딩으로 해석됩니다. 이러한 바인딩 인스턴스를 property binding 이라고 합니다.

컨트롤의 value property는 앞서 언급된 모델의 루트에 있는 수신자 이름 속성에 바인딩됩니다.

설명은 텍스트와 데이터 바인딩의 조합이므로 복합 바인딩 구문을 사용합니다. 복잡한 구문은 기본적으로 활성화되어 있지 않으므로 앱 내에서 명시적으로 활성화해야 합니다.

이는 SAPUI5 부트스트랩 태그의 data-sap-ui-compatVersion="edge" 매개변수를 사용하여 index.html 내에서 수행할 수 있습니다.

webapp/index.html

<!DOCTYPE html>
<html>
<head>
	…
	<script
		id="sap-ui-bootstrap"
		src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-preload="async"
		data-sap-ui-resourceroots='{
			"opensap.myapp": "./"
		}'>
	</script>
	…
</head>
…
</html>

마지막으로 앱은 위와 같아야 합니다. 입력 필드 내에서 변화를 주면 옆에 있는 레이블이 자동으로 업데이트됩니다.

이러한 현상에 대한 이유는 다음과 같습니다.

입력 필드에서 valueLiveUpdate활성화
두 컨트롤의 속성이 JSON 모델 내에서 동일한 속성에 바인딩된 것
양방향 바인딩을 모델에 사용

2. Internationalization

이 단계에서 internationalization(i18n)을 준비합니다.

webapp/i18n/i18n.properties (NEW)

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}

방금 수행한 내용은 언어별 텍스트를 JSON 모델 객체에 직접 저장했기 때문에 어렵지 않았습니다. 언어별 텍스트가 번역을 처리하는 백엔드에서 직접 파생되지 않는 한, 텍스트를 모델에 직접 배치하는 것은 권유드리는 프로그래밍 방법이 아닙니다. 따라서 모든 번역 가능한 텍스트(예: 필드 레이블)를 번역 가능한 리소스 번들에 배치하여 수정하겠습니다.

webapp 폴더 내에 i18n 폴더를 만듭니다. 이 폴더 안에 i18n.properties라는 새 파일을 만듭니다. 파일 내에서 텍스트를 name-value 쌍으로 넣습니다.

텍스트에 매개변수가 필요한 경우 텍스트의 적절한 위치에 있는 각 매개변수에 대한 표시로 중괄호 안에 숫자(0부터 시작)를 넣으십시오.

단어 순서는 언어마다 다를 수 있으므로 번역된 문자열을 연결하지 마십시오.

지금은 기본 i18n 파일만 만들었습니다. 이 파일은 앱에 사용되는 언어에 대한 특정 언어 파일을 제공하지 않는 경우에 사용됩니다. 실 사용 목적의 앱에서는 지원하는 각 언어에 대해 다른 i18n 파일을 제공하십시오(예: 영어 i18n_en.properties).

webapp/manifest.json

{
	"_version": "1.3.0",
	"sap.app": {
		"_version": "1.3.0",
		"id": "opensap.myapp",
		"type": "application",
		"i18n": "i18n/i18n.properties",
...
	"sap.ui5": {
		…
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "opensap.myapp.i18n.i18n"
				}
			},
			"helloPanel": {
				"type": "sap.ui.model.json.JSONModel",
				"uri": "model/HelloPanel.json"
			}
		},
	...
	}
}

manifest.json에 ResourceModel을 정의하고 bundleName에 i18n 파일의 위치를 명시합니다.

번들 이름은 응용 프로그램 이름 공간(index.html에 정의된 응용 프로그램 루트), 폴더 이름 i18n, 마지막으로 확장자가 없는 파일 이름 i18n으로 구성됩니다.

SAPUI5 런타임은 리소스에 대한 올바른 경로를 계산합니다.

이 경로는 i18n.properties 파일에 대한 경로입니다. 다음으로, 모델 인스턴스는 i18n이라는 모델로 뷰에 설정됩니다.

webapp/controller/App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller, MessageToast) {
	"use strict";

	return Controller.extend("opensap.myapp.controller.App", {

		onShowHello : function () {
			// read msg from i18n model
			var oBundle = this.getView().getModel("i18n").getResourceBundle();
			var sRecipient = this.getView().getModel("helloPanel").getProperty("/recipient/name");
			var sMsg = oBundle.getText("helloMsg", [sRecipient]);

			// show message
			MessageToast.show(sMsg);
		}
	});
});

이제 i18n 텍스트를 사용하려고 합니다.

리소스 번들은 ResourceModel의 getResourceBundle 메서드를 통해 액세스할 수 있습니다.

번역 가능한 텍스트를 수동으로 연결하는 대신 getText의 두 번째 매개변수를 사용하여 텍스트의 일부를 동적 데이터로 바꿀 수 있습니다.

런타임 동안 SAPUI5는 사용자의 현재 언어를 기반으로 올바른 i18n_.properties 파일을 로드하려고 시도합니다. 자체 HTML 파일을 통해 시작된 SAPUI5 애플리케이션에서 이 언어는 브라우저 설정과 locale에 따라 다릅니다.

앱이 SAP Fiori 런치패드에서 실행될 때 효과적인 언어에 영향을 미치는 몇 가지 측면이 더 있습니다. 브라우저 개발자 도구의 network trace에서 SAPUI5가 기본 i18n.properties 파일로 연결되기 전에 하나 이상의 i18n_.properties 파일을 로드하려고 시도하는 것을 볼 수 있습니다.

onShowHello 이벤트 핸들러에서 i18n 모델에 액세스하여 메시지 번들 파일에서 텍스트를 가져오고 기호 {0}를 데이터 모델의 수신자 이름으로 바꿉니다.

getProperty 메서드는 모든 모델에서 호출할 수 있으며 모델의 경로를 인수로 사용합니다.

webapp/view/App.view.xml

<mvc:View	…>
	…
	<Button
		text="{i18n>showHelloButtonText}"
		press="onShowHello"/>
	<Input
		value="{helloPanel>/recipient/name}"
		description="Hello {helloPanel>/recipient/name}"
		valueLiveUpdate="true"
		width="60%"/>
</mvc:View>

마지막 단계로 데이터 바인딩을 사용하여 버튼 텍스트를 i18n 모델의 sayHelloButtonText 속성에 연결합니다.

리소스 번들은 플랫 구조이므로 경로에서 선행 슬래시(/)를 생략할 수 있습니다.

이제 입력란에 무언가를 입력하고 버튼을 누르면 MessageToast에 정보가 표시됩니다.

참고: SAP Web IDE 개발자를 위한 특수 번역 기능

SAP Translation Hub의 제안 서비스로 텍스트를 입력할 때 시간을 절약하세요.

• 중앙 텍스트 저장소를 기반으로 보기 파일에 입력한 텍스트 자동 완성

• i18n.properties 파일의 속성에 버튼 텍스트 자동 연결

서비스를 호출하려면 코드 편집기에서 Ctrl + Space를 누르기만 하면 됩니다. 자세한 내용은 SCN에서 이 블로그를 확인하세요.

webapp/i18n/i18n.properties

# App Descriptor 
appTitle=My demo app 
appDescription=A simple demo app 

# Hello Panel 
showHelloButtonText=Say Hello 
helloMsg=Hello {0}

또한 이제 manifest.json에서 사용하는 i18n.properties 파일에 앱 제목과 앱 설명을 추가합니다.

참고자료

Data Binding and Backend Services (OData)

Instantiating a JSON Model

Instantiating a Resource Model

SAP Translation Hub - SAP Hana Cloud Platform service

SCN Blog - Translation Hub Tutorial

이전글SAP UI5 Week 1 - Unit 6. 컨테이너와 레이아웃 21.08.13
다음글SAP UI5 Week 1 - Unit 4. App Component 만들기 21.08.13

댓글목록

KSUG님의 댓글

KSUG 쪽지보내기 아이디로 검색 전체게시물

쪽지보내기 아이디로 검색 전체게시물

작성일 22-12-27 14:15 0

잘 읽었습니다.

SAP 사용자들의 오픈 커뮤니티

페이지 정보

본문

댓글목록