이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여 빌드 해보자
처음에는 JavaScript 컨트롤 인터페이스를 사용하여 UI를 설정하고 컨트롤 인스턴스를 HTML 본문에 배치한다.

Preview

03_preview.png

Coding

Walkthrough - Step 3.

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를 상속된다.

Working with Controls

API Reference: sap.m.Text

Samples: sap.m.Text

API Reference: sap.ui.core.Control

API Reference: sap.ui.core.Element

API Reference: sap.ui.base.ManagedObjectElement