이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여 빌드 해보자
처음에는 JavaScript 컨트롤 인터페이스를 사용하여 UI를 설정하고 컨트롤 인스턴스를 HTML 본문에 배치한다.
Preview
Coding
webapp/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>sapUiBody 클래스를 통해 OpenUI5 응용 프로그램을 표시하기위한 테마 종속 스타일을 추가한다.
webapp/index.js
sap.ui.define([
"sap/m/Text"
], function (Text) {
"use strict";
new Text({
text: "Hello World"
}).placeAt("content");
});OpenUI5 컨트롤은 화면의 일부 모양과 동작을 정의하는 데 사용된다. init 이벤트의 콜백은 OpenUI5 텍스트 컨트롤을 인스턴스화하는 곳이다.
컨트롤 이름에는 컨트롤 라이브러리 sap/m/의 네임 스페이스가 접두어로 붙어 있으며 옵션은 JavaScript 객체로 생성자에 전달된다.
텍스트 속성을 ”sap/m/Text Hello World"값으로 설정했다.
컨트롤의 생성자 호출을 문서 객체 모델(DOM) 또는 다른 OpenUI5 컨트롤 인스턴스의 노드 안에 OpenUI5 컨트롤을 배치하는 데 사용되는 표준 메서드인 placeAt에 연결한다.
DOM 노드의 ID를 인수로 전달한다.
대상 노드로 HTML 문서의 body 태그를 사용하고 ID 내용을 제공한다.
OpenUI5의 모든 컨트롤에는 고정된 속성 집계 및 구성 집합이 있고 API 참조에서 찾을 수 있는 일련의 공용 함수가 제공된다.
note:
sap.ui.core.Control또는 Sub Class의 instance만 Stand-alone로 렌더링되고 placeAt 함수를 가질 수 있다. 각 Control은 컨트롤 내부에서만 렌더링 할 수있는sap.ui.core.Element를 상속된다.
Related Information
API Reference: sap.ui.core.Control
