글
SAP UI5 Step 3: Controls
Step 3: Controls
이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여, 첫 번째 작은 UI를 Build 할 차례입니다. 처음에는 JavaScript control interface 를 사용하여 UI를 설정하고 control instance를 HTML 본문에 배치합니다.
Preview
아래의 site Demo Kit에서 여기서 작성하는 응용 프로그램의 모든 파일을 보고 다운로드 할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Walkthrough</title> <script id="sap-ui-bootstrap" src="/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-preload="async" > </script> <script> sap.ui.getCore().attachInit(function () { new sap.m.Text({ text : "Hello World" }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html>
대화 상자를 표시하기 위해 기본 JavaScript를 사용하는 대신 간단한 SAPUI5 control을 사용하려고합니다. control은 화면의 각 부분의 모양과 동작을 정의하는 데 사용됩니다.
위 예제에서 init event의 Callback 은 SAPUI5 text control을 인스턴스화 하는 곳입니다. 컨트롤 이름(sap.m.Text)에는 컨트롤 라이브러리 sap.m의 name space가 접두어로 붙어 있으며, 옵션은 JavaScript 객체를 사용하여 생성자에 전달됩니다. 우리가 제어 할 수 있도록 text 속성을 "Hello World"값으로 설정했습니다.
컨트롤의 생성자 호출을 문서 객체 모델 (DOM:Document Object Model)) 또는 다른 SAPUI5 컨트롤 인스턴스의 노드 안에 SAPUI5 컨트롤을 배치하는 데 사용되는 표준 메서드 인 placeAt에 연결합니다. DOM 노드의 ID를 인수로 전달합니다. 대상 노드로 HTML 문서의 body 태그를 사용하고 ID 내용을 제공합니다. sapUiBody 클래스는 SAPUI5 응용 프로그램을 표시하기위한 테마 종속 스타일을 추가합니다.
SAPUI5의 모든 컨트롤에는 고정 된 속성, 집계 및 구성 집합이 있습니다. 데모 키트의 Explored 앱에서 설명을 찾을 수 있습니다. 또한 각 컨트롤에는 API 참조에서 찾을 수있는 일련의 public function이 제공됩니다.
body에서 <p>"Hello World"<p>를 삭제하는 것을 잊지 마십시오.
Note
sap.ui.core.Control 또는 해당 하위 클래스의 인스턴스 만 독립 실행형으로 렌더링되고 placeAt 함수를 가질 수 있습니다. 각 컨트롤은 컨트롤 내부에서만 렌더링 할 수있는 sap.ui.core.Element를 확장합니다. 컨트롤의 상속 계층 구조에 대한 자세한 내용은 API 참조를 확인하십시오. 각 컨트롤의 API 문서는 직접 알려진 서브 클래스를 참조합니다.
'S4/HANA' 카테고리의 다른 글
| SAP UI5 Step 5: Controllers (0) | 2017.03.24 |
|---|---|
| SAP UI5 Step 4: XML Views (0) | 2017.03.24 |
| SAP UI5 Step 2: Bootstrap (0) | 2017.03.23 |
| SAP UI5 Step 1: Hello World! (0) | 2017.03.23 |
| SAP UI5 API 정리 & 예제 site (0) | 2017.03.23 |
