1. SAP UI5 Bootstraping(UI5 연동, 초기화)

SAP UI5 Bootstraping(UI5 연동)이란?

이전 단계는 UI5 서버를 이용해 단순 HTML을 호출한 것으로 UI5 Framework를 사용하지 않았다. 이번에 작성하는 Bootstraping 과정을 통해 UI5 Framework가 초기화되고 실제 연동되게 된다.
( The previous step was to call simple HTML using a UI5 Server, and the UI5 Framework was not used. Through the Bootstraping process created this time, the UI5 Framework is initialized and actually linked.)

실행 결과(Results of this step):



실행 순서(Order of execution of this step):

  1. 필요한UI5 라이브러리를 추가한다.
    (Add the required UI5 library.)
  2. webapp/index.html 파일에 bootstrap 관련 코딩한다.
    (Coding related to bootstrap in the webapp/index.html file.)
  3. index.html과 연동되어 실행될 webapp/index.js 신규 생성한다.
    (Create a new webapp/index.js that will run in conjuction with index.html.)

1. 필요한UI5 라이브러리를 추가(Add the required UI5 library)

  • Terminal 창에서 아래 명령어 실행을 통해 필요한 라이브러리를 추가한다.
    (In the Terminal window, add the required libraries by running the following commands.)
    • ui5 add sap.ui.core
    • ui5 add sap.m
    • ui5 themelib_sap_horizon

  • Terminal에서 명령어 실행하면, 신규 추가되는 라이브러리는 ui5.yaml 파일에 자동으로 작성된다.
    (When the command is executed in Terminal, the newly added library is automatically created in the ui5.yaml file.)

2. webapp/index.html 파일에 bootstrap 관련 코딩
   (Coding related to bootstrap in the webapp/index.html file.)

  • webapp/index.html 파일에 아래 내용 추가한다.
    (Add the following to the webapp/index.html file.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI5 Tutorial</title>
    <script
        id="sap-ui-bootstrap"
        src="resources/sap-ui-core.js"
        data-sap-ui-theme="sap_horizon"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-onInit="module:ui5_tutorial/index"
        data-sap-ui-resourceroots='{
            "ui5_tutorial": "./"
        }'>
    </script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
 
cs

  • 코드 해석(Code description):
    • id="sap-ui-bootstrap"
      : 약속된 ID 값으로 반드시 "sap-ui-bootstrap"으로 작성한다.
       (Make sure to write "sap-ui-bootstrap" with the promised ID value.)

    • src="resources/sap-ui-core.js"
      : UI5 core 모듈인 sap-ui-core.js 파일의 경로를 표시한다.
        (Displays the path of the "sap-ui-core.js" file, which is a UI5 core module.)
      • "resources/sap-ui-core.js"는 로컬 ui5 서버에 해당 파일이 존재해야만 하며, 개발 용도로만 사용을 권장한다.
        ("resources/sap-ui-core.js" must exist on the local ui5 server and is recommended for development puposes only.)

      • src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"로 작성하면, SAP Web Page에 있는 파일을 직접 사용하는 것으로 배포 시 사용을 권장한다.
        (If you write src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js", it is recommended to use the file directly on the SAP Web Page for deployment.)

      • 자체 CDN(Content Delivery Network)를 구성하여 관리할 수도 있다.
        (A content delivery network(CDN) may be configured and managed.)

    • data-sap-ui-theme="sap_horizon"
      : SAP 기본 테마를 "sap_horizon"으로 설정하는 것이다. 설정 가능한 테마 종류는 SAP Site를 참조.
      (Set SAP default theme to "sap_horizon". See SAP Site for configurable theme types.)
    • data-sap-ui-libs="sap.m"
      : UI5 동작을 제어하기 위한 가장 기본이 되는 라이브러리를 추가한다.
      (Add the most basic library for controlling UI5 behavior.)

    • data-sap-ui-compatVersion="edge"
      : UI5 모듈의 적용 버전 셋팅으로 "edge"는 최신 버전을 의미한다.
      ("edge" means the latest version by setting the applied version of the UI5 module.)
      • 특정 Version으로 고정하고 싶으면 버전 정보를 직접 입력하면 된다.
        (If you want to fix it with a specific version, you can enter the version information directly.)
    • data-sap-ui-async="true"
      : Bootstrap 과정을 비동기 방식으로 동작하도록 셋팅한다.
      (Set the Bootstrap process to operate in an asynchronous manner.)

    • data-sap-ui-onInit="module:ui5_tutorial/index"
      : Html 에서 초기화를 위해 사용할 javascript 파일의 경로와 파일명을 setting한다.
      (Set the path and filename of the javascript file to be used for initialization in HTML.)
      Html 에서 직접 javascript 로직 코딩 및 실행을 회피하여 보안을 높이기 위한 방법이다.
      (It is a method to increase security by avoiding javascript logic coding and execution directly from HTML.)

    • data-sap-ui-resourceroots='{"ui5_tutorial":"./"}'
      : ui5_tutorial 이라는 이름으로 최상위 root 경로(project 폴더/webapp)를 선언하는 의미이다.
      (The name ui5_tutorial means declaring the top root path(project folder/webapp).)

  • webapp/index.js 파일을 신규 추가 후 아래 내용으로 작성한다.
    (After adding a new webapp/index.js file, write the contents below.
    • index.html에서 초기화 동작을 위한 index.js 파일을 호출하였고, 현재는 alert 팝업이 나타나도록 초기화한다.
      (I called the index.js file for the initialization action in index.html, and now I initialize the alert pop-up to appear.)
1
2
3
4
5
sap.ui.define([], () => {
    "use strict";
    alert("UI5 is ready");
});
 
cs


- 끝(End) -

댓글

댓글 쓰기

이 블로그의 인기 게시물

SAP UI5 개발환경 구성하기(Creating a Development Environment)

이미지
  SAP UI5 개발 환경 설치해보자. 설치 필요 항목( List of required installations ) Node.Js - javascript runtime & npm 사용을 위함 VS Code(Visual Studio Code) Install -  소스 코드 편집기 VS Code Extensions install UI5 CLI(Command Line Interface) - CMD 명령어를 통해서 UI5를 활용 가능 SAP Fiori Tools Extension Pack - 기본 제공되는 Fiori 구성 요소 활용 가능  Node.Js Install Node.Js 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the Node.Js site.)   Node.Js URL:  https://nodejs.org 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)  VS Code(Visual Studio Code) Install Visual Studio Code 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the VS Code site.)   Visual Studio Code URL:   https://code.visualstudio.com 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)    ...
자세한 내용 보기

9. SAP UI5 Custom CSS 적용(Apply)

이미지
SAP UI5 Custom CSS 적용 (Apply) 이 단계에서는 SAP UI5에서 제공하는 Margin 관련 CSS 적용 방법과 사용자가 직접 구성한 Custom CSS를 적용하는 방법을 알아본다. (In this step, we will find out how to apply the Margin-related CSS provided by SAP UI5 and how to apply the custom CSS configured by the user.) 실행 결과 (Results of this step)   UI5의 Text Component를 사용하여 UI5 표준 Margin 및 글씨체와 Bold를 적용한다.   (Apply UI5 standard Margin and font & Bold using the Text Component in UI5.) 실행 순서 (Order of execution of this step): UI5 Standard Margin CSS 적용하기 (Apply UI5 standard Margin.) Custom CSS 적용하기 (Apply the Custom CSS.) 1. UI5 Standard Margin CSS 적용하기    (Apply UI5 standard Margin.) webapp/view/sample/Pageviewsample.view.xml에 Text 컴포넌트 추가 및 CSS 내용 추가한다. (Add text components and CSS content to "webapp/view/samples/pageviewsample.view.xml".) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 < mvc:View      controllerName = "ui5_tutorial.controller.sample.PageViewSample"        x...
자세한 내용 보기

7. SAP UI5 Multilingual Application (다국어 적용)

이미지
  SAP UI5 Multilingual Application (다국어 적용)  이번 단계에서는 ResourceModel을 활용하여 Application에 다국어를 적용하는 방법에 대해서 살펴본다.  (In this step, we will look at how to apply multilingualism to applications using ResourceModel.) 실행결과(Results of this step)   브라우저의 언어가 한국어인 경우를 가정하여 i18n 파일을 활용하여 한국어가 적용된 application을 만든다.   (Assuming that the browser's language is Korean, use the i18n file to create an application to which Korean is applied.)      실행 순서(Order of execution of this step): i18n_ko.properties 파일 생성하여 한국어 등록한다. (Create the "i18n_ko.properties" file and register in Korean.) manifest.json 파일에 한국어 정보를 추가한다. (Add Korean information to the "manifest.json" file.) 1. i18n_ko.properties 파일 생성하여 한국어 등록한다.    (Create the "i18n_ko.properties" file and register in Korean.) webapp/i18n/i18n_ko.properties 파일을 신규 생성한 후 한국어 번역 정보를 추가한다. (Add Korean translation information after creating a new "webapp/i18n/i18n_ko.properties" file.) 한국어 외에 다른 언어를 추가할 때에는 로케일 접미사...
자세한 내용 보기