이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여 빌드 해보자
처음에는 JavaScript 컨트롤 인터페이스를 사용하여 UI를 설정하고 컨트롤 인스턴스를 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 응용 프로그램을 표시하기위한 테마 종속 스타일을 추가한다.
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
를 상속된다.
API Reference: sap.ui.core.Control
SAPUI5에서 자원은 모듈이라고 부른다. 이번 튜토리얼에선지난 연습의 Javascript의 alert을 UI5의 sap.m 라이브러리의 Message Toast로 대체 해본다. 이때 해당 모듈을 로드할때 비동기적으로 로드해보자. Preview 06_preview.png Coding Walkthrough - Step 6. we...
이번 튜토리얼에선 text를 button으로 대체하고 버튼을 누르면 "Hello World"메시지를 표시해보자 button 프레스 이벤트 처리는 뷰의 컨트롤러에서 구현한다. Preview 05_preview.png Coding Walkthrough - Step 5. webapp/view/App.view.xml App.co...
이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여 빌드 해보자 처음에는 JavaScript 컨트롤 인터페이스를 사용하여 UI를 설정하고 컨트롤 인스턴스를 HTML 본문에 배치한다. Preview 03_preview.png Coding Walkthrough - Step 3. ...
SAPUI5를 사용하여 작업이 처음 시작될 때 로드 및 초기화 프로세스를 boot strapping이라 한다. 이번 튜토리얼에선 부트스트랩이 끝날 때 경고 창을 표시해 보자. Preview 02_preview.png Coding Walkthrough - Step 2. note: SAPUI5는 응용 프로그램이 위치한 동일한 웹 서버 ...