목차

1. Formatting에 데이터 타입 이용하기

2. Form Validation에 데이터 타입 이용하기

1. Formatting에 데이터 타입 이용하기

이번 유닛에서는, 데이터 타입을 이용해 서로 다른 통화에 대한 standard formatting 하는 법을 실습해보겠습니다.

먼저 App.view.xml에 코드를 추가합니다.

<mvc:View …>
	…
											<ObjectListItem
												title="{Name}"
												number="{
													parts: [
														{path: 'Price'},
														{path: 'CurrencyCode'}
													],
													type: 'sap.ui.model.type.Currency',
													formatOptions: {
														showMeasure: false
													}
												}"
											numberUnit="{CurrencyCode}"
												…>
												…
</mvc:View>

이를 통해 List에 보여지는 가격에 대한 정보를 Currency data type을 적용하여 나타낼 수 있게 됩니다. 이는 type: 'sap.ui.model.type.Currency'라는 바인딩 방법을 통하여 세팅됩니다.

showMeasure의 경우 Currency 에 대한 단위를 나타나게 해주는 요소로, 지금은 numberUnit에서 따로 이를 나타내고 있으므로 false로 해줍니다.

저번에 설명했듯이, 필요한 데이터는 parts: [ {path: ~}, {path: ~}] 와 같은 방식으로 불러옵니다. Currency 데이터 타입이 Price와 CurrencyCode를 필요로 하기 때문입니다.

실습 완료시 다음과 같은 화면이 됩니다.

2. Form Validation에 데이터 타입 이용하기

이번에는 data type을 input control에 적용시켜 이를 form validation에 사용해보겠습니다.

App.view.xml 파일에 다음과 같은 코드를 추가하십시오.

<mvc:View …>
	…
							<IconTabFilter id="start" …>
								…
								<Input
									value="{
										path: 'helloPanel>/recipient/amount',
										type: 'sap.ui.model.type.Float',
										formatOptions: {minFractionDigits: 2},
										constraints: {maximum : 3000}
									}"
									description="Hello {helloPanel>/recipient/name}"
									valueLiveUpdate="false"
									width="60%"/>
							</IconTabFilter>
…

Input Control에 type property를 추가함으로써 Input Control에 들어갈 데이터 타입을 강제할 수 있습니다. 해당 예시에서는 sap.ui.model.type.Float 데이터 타입만이 해당 Input에 들어올 수 있게 만들었습니다. 또한 constraints를 설정해주어 3000보다 높은 숫자가 올 수 없도록 만들었습니다.

다음으로는 manifest.json 파일에 다음의 코드를 추가합니다.

{
…
	"sap.ui5": {
		"_version": "1.2.0",
		"rootView": {
			"viewName": "opensap.myapp.view.App",
			"type": "XML",
			"id": "app"
		},
		"handleValidation": true,
		"autoPrefixId": true,
		…
	}
}

manifest.json 파일에 다음의 코드를 추가함으로써 input 필드에서 데이터 타입에 맞추어 Validation 작업이 이루어질 수 있게 됩니다.

이번 실습을 완료하면 다음과 같은 화면이 될 것이며,

String 데이터 타입이나 3000이상의 숫자가 올 경우 다음과 같이 validation에 문제가 있음을 input control에서 알려줄 것입니다.