이번주는 다시 SAPUI5 학습을 이어서 진행한다. SAP 공식 사이트의 도큐먼테이션을 참고해 전에 했던 코드 소스에 대해 복습하는 시간을 가질 것이다. 다만 좀 더 구체적이고 세분화하는 것보다는 기능이 작동하기까지의 흐름에 익숙해지는 연습을 하는 시간이라고 생각하며 진행한다. 간간이 화면에 구현되지 않는 이유를 좀 더 정밀히 분석하고 기능 구현에 초점을 맞춰서 해보자!
MessageBox
MessageBox는 다양한 유형의 Message를 User에게 표시하기 위한특수 대화 상자 Control이다.
sap.m.MessageBox Control은 sap.m.Dialog와 동일한 반응형 동작을 가진다.
뿐만 아니라, 세부사항 표시 옵션 기능을 사용할 수 있게 해준다.
Message는 Error, Warning, Success, Information, Confirm 5가지로 분류된다.
| UI 요소 | 특성 |
| sap.m.Label | Label의 Text는 CarrierId이다. |
| sap.m.Input | value 속성을 JSONModel의 carrierId 속성에 Binding 한다. 추후에 Model Name으로 입력한 값이 이 JSONModel에 지정된다. Data를 Binding 할 때 이 Model Name을 잘 활용해야 한다. Model 속성은 data type으로 sap.ui.model.type.String을 사용하고 문자열의 최소 길이는 1, 최대 길이는 3이 된다. |
| sap.m.Button | Button의 Text는 Show Carrier Name이다. press 이벤트는 onShowCarrier 이벤트 핸들어에 Binding 된다. |
| sap.m.Label | Label의 Text는 Carrier Name이다. |
| sap.m.Input | enabled 특성을 사용해 User가 Field Content를 편집 불가토록 한다. value 특성을 OData 서비스에서 가져온 Entity 유형 항공사의 Carrname 속성에 Binding 한다. 관련 OData Model은 Model Name으로 travel로 설정한다. Data Binding을 할 때 이 Model Name을 잘 활용해야 한다. |
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TryMessageBox</title>
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data.sap.ui.libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{
"com.try.trymb": "./"
}'
data-sap-ui-compatVersion="edge">
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachment(function() {
new sap.m.Shell({
height : "100%",
name : "com.try.trymb"
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Application script를 사용함으로써 Component를 초기화하고 component Container를 사용해 HTML 페이지에 배치한다.
연습을 하다보니 예전 버전이라 그런지 업데이트 된 게 많다...
OData를 직접 만들어 URL을 연결해 나만의 UI를 만들어 보자...!
728x90
반응형
'SAP > UI5' 카테고리의 다른 글
| [ SAPUI5 ] JSONModel Table Binding in SAPUI5 (12) | 2023.03.13 |
|---|---|
| [ SAPUI5 ] Page Variant Management (4) | 2023.03.10 |
| [ SAPUI5 ] View Management (4) | 2023.03.10 |
| [ SAPUI5 ] Table Personalization (16) | 2023.03.09 |
