racetam_noey.log https://velog.io/ UI5, FIORI, Cloud ABAP, BTP 아키텍처 설계 및 개발 Mon, 17 Apr 2023 13:26:01 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed racetam_noey.log https://velog.velcdn.com/images/racetam_noey/profile/134eac1a-73f1-4f38-8a2a-bb374cf5d348/image.jpg https://velog.io/ Copyright (C) 2019. racetam_noey.log. All rights reserved. <![CDATA[Step 7: JSON Model ]]> https://velog.io/@racetam_noey/Step-7-JSON-Model https://velog.io/@racetam_noey/Step-7-JSON-Model Mon, 17 Apr 2023 13:26:01 GMT

뷰와 컨트롤러를 설정했으니, 이제 MVC의 M에 대해 생각해 볼 차례입니다.

MVC에서 M은 모델(Model)을 의미합니다. 이번 단계에서는 뷰(View)와 컨트롤러(Controller)를 설정한 후 모델(Model)을 추가하고 사용해보겠습니다.

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast",
   "sap/ui/model/json/JSONModel"
], function (Controller, MessageToast, JSONModel) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onInit : function () {
         // set data model on view
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.getView().setModel(oModel);
      },
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

우선 앱에 입력 필드를 추가하고 해당 값(value)을 모델에 바인딩한 다음, 같은 값을 입력 필드의 설명(description)에도 바인딩합니다. 이렇게 하면 사용자가 입력할 때 설명이 실시간으로 업데이트됩니다.

컨트롤러에 init 함수를 추가합니다. onInit은 컨트롤러가 생성될 때 프레임워크에 의해 호출되는 SAPUI5의 라이프사이클 메서드 중 하나로, 컨트롤의 생성자 함수와 유사합니다.

init 함수 내에서 JSON 모델을 인스턴스화합니다. 모델의 데이터는 "recipient"라는 단일 속성만 포함하며, 이 속성 내에는 추가적인 "name" 속성이 있습니다.

XML 뷰에서 이 모델을 사용하려면 뷰의 setModel 함수를 호출하고 새로 생성된 모델을 전달합니다. 이제 모델이 뷰에 설정되었습니다.

현재 MessageToast 는 단순한 "Hello World" 메시지를 표시하고 있습니다. 다국어 지원 기능을 이용하여 텍스트를 표시하는 방법은 다음 단계에서 학습하겠습니다.

webapp/view/App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>
</mvc:View>

뷰에 sap.m.Input 컨트롤을 추가합니다. 이를 통해 사용자가 Hello 뒤에 출력될 내용을 입력할 수 있습니다.

XML 뷰의 선언적 바인딩 구문을 사용하여 값을 SAPUI5 모델에 바인딩합니다

  • 중괄호 {…}는 recipient 객체의 name 속성에서 데이터가 가져와진다는 것을 나타냅니다. 이를 "데이터 바인딩"이라고 합니다.

  • /recipient/name은 모델의 경로를 선언합니다.

webapp/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://sdk.openui5.org/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-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'
        data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
    </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

value 속성의 바인딩은 바인딩 패턴만 포함하는 간단한 바인딩 예제입니다. 더 복잡한 바인딩 결과를 얻기 위해서는 텍스트와 바인딩 패턴을 결합할 수도 있습니다. 복잡한 바인딩 구문을 전역적으로 사용하려면, data-sap-ui-compatVersion 부트스트랩 매개변수를 edge로 설정해야 합니다. 이 설정을 생략하면 표준 바인딩 구문만 허용되므로 "Hello {/recipient/name}"는 작동하지 않지만 "{/recipient/name}"은 정상적으로 작동합니다.

❗ data-sap-ui-compatVersion="edge" , "complex"

data-sap-ui-compatVersion="edge"와 data-sap-ui-bindingSyntax="complex"는 스크립트에서 사용되는 속성으로, 복잡한 바인딩 구문을 활성화하는 데 사용됩니다.

data-sap-ui-compatVersion="edge"를 사용하면, 여러 호환성 기능을 자동으로 활성화합니다. 이는 애플리케이션 개발에 있어 최신 기능들을 사용할 수 있게 하여 생산성과 성능을 높일 수 있습니다.

반면에 data-sap-ui-bindingSyntax="complex"는 복잡한 바인딩 구문만 활성화하므로, 좀 더 세밀한 제어가 가능합니다. 이 설정을 사용하면 일반적인 바인딩 구문 외에도 다양한 데이터 소스를 결합하거나 텍스트와 바인딩 패턴을 섞어서 뷰에 표시할 수 있습니다.

두 속성은 SAPUI5 애플리케이션에서 데이터 바인딩에 관한 고급 기능을 사용하려는 경우에 적용할 수 있는 설정 옵션입니다. data-sap-ui-compatVersion="edge"는 여러 호환성 기능을 한 번에 활성화하는 것이고, data-sap-ui-bindingSyntax="complex"는 복잡한 바인딩 구문만 활성화하는 것입니다.

추후에 "data-sap-ui-bindingSyntax=complex"에 대한 예제를 추가하도록 하겠습니다.

결과

]]> <![CDATA[SAPUI5 Architecture]]> https://velog.io/@racetam_noey/SAPUI5-Architecture https://velog.io/@racetam_noey/SAPUI5-Architecture Sun, 09 Apr 2023 16:30:44 GMT SAPUI5 Architecture

SAPUI5는 자바스크립트, CSS, HTML5를 기반으로 하는 클라이언트 UI 기술입니다.

SAPUI5로 개발된 앱은 모든 디바이스(모바일, 태블릿, 데스크톱 PC)의 브라우저에서 실행됩니다.

사용자가 SAPUI5 앱에 접속하면, 애플리케이션을 브라우저에 로드하라는 요청이 서버로 전송됩니다. 뷰는 관련 라이브러리를 사용합니다. 일반적으로, 모델도 생성되고 데이터베이스에서 비즈니스 데이터를 가져옵니다.

SAPUI5를 사용하는 환경에 따라, 라이브러리나 애플리케이션을 예를 들어 SAP NetWeaver 애플리케이션 서버나 SAP 비즈니스 기술 플랫폼에 저장할 수 있고, 비즈니스 데이터는 예를 들어 SAP 게이트웨이를 통한 OData 모델을 사용하여 접근할 수 있습니다.

프레임워크의 구성 요소

최상위 구조 단위를 라이브러리라고 합니다. 라이브러리는 확장성 개념에서 핵심 구성 요소입니다. 라이브러리는 일련의 컨트롤 및 관련 유형을 번들로 묶어 웹 애플리케이션에서 사용할 수 있게 합니다. sap.m 과 같은 기본 제공되고 표준 라이브러리는 일반적으로 많이 사용되는 컨트롤이 포함되어 있습니다. 동시에 사용자 정의 UI 라이브러리를 우선적으로 고려하여, 기본 제공된 컨트롤과 함께 자신만의 컨트롤을 쉽게 작성하고 사용할 수 있게 합니다.

UI 요소는 사용자 인터페이스의 기본 구성 요소로, 속성, 이벤트, 메서드 및 관계를 가지는 재사용 가능한 객체입니다. 가장 중요한 관계는 다른 UI 요소와의 집합이며, 이런 식으로 요소의 트리 구조를 만들 수 있습니다.

개발자 관점에서 컨트롤(예: 버튼, 레이블, 텍스트 필드 또는 테이블)이 가장 중요한 구성 요소입니다. 직사각형 화면 영역의 모양과 사용자 상호 작용을 제어하는 객체입니다. 이 트리 구조의 루트로 사용할 수 있는 특수한 종류의 사용자 인터페이스 요소입니다.

트리 구조란 사용자 인터페이스(UI) 요소들이 계층적으로 구성되어 있는 구조를 의미합니다. 이 구조에서 루트(root)는 가장 상위에 있는 요소로, 전체 트리 구조의 시작점입니다.

컨트롤은 루트로 사용할 수 있는 특별한 종류의 UI 요소입니다. 컨트롤은 렌더링(화면에 그려지는 과정)에 있어 중요한 역할을 합니다. 컨트롤은 사용자가 상호작용할 수 있는 화면 영역을 제어하고 관리하는 객체입니다.

그러나 모든 UI 요소가 루트로 사용될 수 있는 것은 아닙니다. 비컨트롤 요소는 루트로 사용할 수 없으며, 트리 구조 내에서 다른 요소에 종속적인 부분으로만 사용할 수 있습니다. 예를 들어, TableRow와 TableCell은 비컨트롤 요소로, 테이블 안에 위치하게 됩니다. 이들은 테이블의 하위 구성 요소로서 테이블의 구조와 레이아웃을 결정하는 역할을 하지만, 독립적으로 화면에 표시되거나 상호 작용할 수는 없습니다.

예제

다음은 XML 뷰 코드에서 테이블 예제입니다. 여기서 TableRow와 TableCell은 비컨트롤 요소로 사용되어 테이블의 구조와 레이아웃을 결정합니다.

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:t="sap.ui.table">
  <t:Table id="exampleTable">
    <t:columns>
      <t:Column>
        <Label text="이름" />
      </t:Column>
      <t:Column>
        <Label text="나이" />
      </t:Column>
      <t:Column>
        <Label text="직업" />
      </t:Column>
    </t:columns>
    <t:items>
      <t:ColumnListItem>
        <t:cells>
          <Text text="{/name}" />
          <Text text="{/age}" />
          <Text text="{/job}" />
        </t:cells>
      </t:ColumnListItem>
    </t:items>
  </t:Table>
</mvc:View>

이 예제에서 sap.ui.table.Table 컨트롤은 테이블을 생성하며, sap.ui.table.Column 컨트롤은 테이블의 각 열을 정의합니다. sap.ui.table.ColumnListItem은 테이블의 각 행을 나타내는 비컨트롤 요소로 작동하며, 그 안의 sap.ui.table.cells 영역에는 각 셀에 들어갈 내용이 들어 있습니다. 이 경우에는 이름, 나이, 직업 데이터를 표시하는 sap.m.Text 컨트롤이 사용됩니다. 이러한 구조로 인해 테이블의 레이아웃이 결정되지만, 각 행과 셀 자체는 독립적으로 상호 작용할 수 없습니다.

데이터 타입은 메타 모델에서 중요한 엔티티로서, 라이브러리 간에 타입을 재사용하고 타입 시스템을 확장할 수 있게 합니다. 기본 라이브러리(기술적으로는 sap.ui.core 라이브러리)는 이미 다른 라이브러리에서 사용할 수 있는 기본 타입들을 정의하고 있습니다.

SAPUI5는 웹 애플리케이션을 구축할 수 있는 도구이며, 그 안에는 라이브러리, UI 요소, 컨트롤 등이 포함되어 있습니다. 라이브러리는 다양한 컨트롤과 관련 유형들을 묶어주는 역할을 합니다. UI 요소는 사용자 인터페이스를 구성하는 기본 구성 요소로, 여러 요소들이 트리 구조를 만들어 조직화됩니다. 컨트롤은 사용자가 상호 작용하는 화면 영역을 제어하는 객체로, 렌더링 과정에서 중요한 역할을 합니다.

]]> <![CDATA[ Model View Controller (MVC)]]> https://velog.io/@racetam_noey/Model-View-Controller-MVC https://velog.io/@racetam_noey/Model-View-Controller-MVC Sun, 09 Apr 2023 16:09:02 GMT MVC는 다음과 같은 구성 요소로 이루어져 있습니다:

  • 모델(Model): 데이터와 관련된 로직을 처리합니다.
  • 뷰(View): 사용자 인터페이스(UI)를 구성하고 화면에 표시합니다.
  • 컨트롤러(Controller): 사용자의 입력을 받아 처리하고, 모델과 뷰 사이의 상호작용을 관리합니다.

이러한 구조를 사용하면, 각 구성 요소를 독립적으로 개발하고 변경할 수 있어, 전체적인 개발 과정이 더 효율적이고 유지보수 측면에서도 이해하기 쉬워집니다.

모델, 뷰, 컨트롤러는 각각 다음 역할을 수행합니다:

  • 뷰: 화면에 보이는 부분을 만들고 그립니다.
  • 모델: 앱의 데이터를 관리합니다.
  • 컨트롤러: 화면과 데이터 사이를 조절하고, 사용자의 동작에 반응합니다.

데이터 바인딩의 목적은 화면(뷰)을 만드는 부분, 데이터(모델)를 관리하는 부분, 그리고 데이터를 처리하는 코드(컨트롤러)를 나누는 것입니다. 이렇게 하면 앱이 더 읽기 쉬워지고, 수정하기 쉬워지며, 더 크게 만들 수 있게 됩니다. 화면을 바꿀 때 기본적인 데이터 처리 코드에 영향을 주지 않고, 여러 가지 화면을 데이터에 연결할 수 있습니다.

뷰와 컨트롤러는 대부분 1:1 관계를 가지지만, 화면이 없는 컨트롤러도 있을 수 있습니다. 이런 컨트롤러를 애플리케이션 컨트롤러라고 부릅니다. 컨트롤러가 없는 뷰도 만들 수 있습니다.

기술적 측면에서 살펴보면, 뷰는 SAPUI5에서 제공하는 여러 UI 요소(컨트롤)들을 사용하여 구성됩니다. 이러한 컨트롤은 버튼, 텍스트 상자, 목록 등과 같은 사용자 인터페이스의 구성 요소입니다.

SAPUI5 모델은 애플리케이션의 데이터를 관리하는데 사용되며, 뷰에 바인딩하여 데이터를 화면에 표시할 수 있습니다. 뷰는 필요에 따라 SAPUI5 모델을 가질 수 있고, 상속을 통해 기존 모델의 기능을 확장할 수도 있습니다.

정리 : 뷰는 사용자에게 보여지는 화면을 구성하는 UI 컨트롤들을 사용하고, 이와 동시에 애플리케이션 데이터를 관리하는 SAPUI5 모델과 연결됩니다. 이렇게 함으로써 데이터와 화면 사이의 상호작용을 원활하게 만들어줍니다.

뷰와 컨트롤러는 재사용 가능한 단위로 만들어져 있어서 여러 개발자들이 같이 작업할 수 있습니다.

MVC 패턴 관련 SAP 블로그 글

]]> <![CDATA[Step 6: Modules]]> https://velog.io/@racetam_noey/Step-6-Modules https://velog.io/@racetam_noey/Step-6-Modules Sun, 09 Apr 2023 15:06:09 GMT SAPUI5에서는 리소스를 모듈이라고 부르기도 합니다. 이 단계에서는 지난 예제의 경고 메시지를 sap.m 라이브러리의 고유한 Message Toast 로 대체합니다. 이렇게 하면 필요한 모듈을 비동기 방식으로 불러오도록 설정할 수 있습니다.

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

필요한 모듈(sap.m.MessageToast)을 로드하려면, 배열에 정규화된 경로를 추가해야 합니다. Controller와 MessageToast가 로드되면 콜백 함수가 실행되고, 매개변수를 통해 두 객체를 사용할 수 있습니다.

비동기 모듈 정의(AMD) 구문을 사용하면 모듈 로드와 코드 실행을 분리하고 애플리케이션 성능을 향상시킬 수 있습니다. 브라우저는 리소스 로드를 코드 실행 전에 결정할 수 있습니다.

비동기 모듈 정의(AMD) 구문을 사용하지 않는 간단한 예

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Non-AMD Example</title>
  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
          id="sap-ui-bootstrap"
          data-sap-ui-theme="sap_horizon"
          data-sap-ui-libs="sap.m">
  </script>
  <script>
    // 이 함수는 SAPUI5 라이브러리가 로드된 후에 호출됩니다.
    sap.ui.getCore().attachInit(function () {
      var oText = new sap.m.Text({text: "Hello, Non-AMD World!"});
      var oPage = new sap.m.Page({
        title: "Non-AMD Example",
        content: [oText]
      });
      var oApp = new sap.m.App("myApp", {
        initialPage: "mainPage"
      });
      oApp.addPage(oPage);
      oApp.placeAt("content");
    });
  </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

이 예제에서는 애플리케이션에 AMD 구문이나 별도의 JavaScript 파일을 사용하지 않습니다. 대신 index.html 파일의 스크립트 태그 내에 sap.m.Text, sap.m.Page, sap.m.App과 같은 UI5 컨트롤의 인스턴스를 직접 생성합니다.

또한 sap.ui.getCore().attachInit 함수를 사용하여 SAPUI5 라이브러리가 로드된 후 코드가 실행되도록 합니다.

이 접근 방식은 체계적이지 않고 유지 관리하기 어려운 코드를 만들 수 있으므로 규모가 크거나 복잡한 애플리케이션에는 권장되지 않습니다. AMD 구문을 사용하고 코드를 모듈로 분리하는 것이 확장 가능하고 유지 관리가 용이한 SAPUI5 애플리케이션을 제작하는 Best Practice 입니다.

규칙

  1. 필요한 모듈을 로드하기 위해 정규화된 경로를 배열에 추가합니다.
  2. 비동기 모듈 정의를 사용하여 모듈 로딩과 코드 실행을 분리합니다.
  3. 전역 네임스페이스를 정의하기 위해 sap.ui.define을 사용합니다.
  4. 다른 코드에서 호출할 필요가 없는 경우, sap.ui.require를 사용하여 비동기적으로 종속성을 로드합니다.
  5. 함수 매개변수 이름을 지정하려면 로드할 아티팩트의 이름을 사용합니다.

결과

]]> <![CDATA[Step 5: Controllers]]> https://velog.io/@racetam_noey/Step-5-Controllers https://velog.io/@racetam_noey/Step-5-Controllers Sun, 09 Apr 2023 14:51:27 GMT 이 단계에서는 텍스트를 버튼으로 바꾸고 버튼을 눌렀을 때 "Hello World" 메시지를 표시합니다. 버튼의 '누름' 이벤트 처리는 뷰의 컨트롤러에서 구현됩니다.

  1. XML 뷰에 컨트롤러 참조와 "Say Hello" 버튼 추가
  2. 뷰의 controllerName 속성을 설정하여 연결된 컨트롤러 이름 지정
  3. 새로운 App.controller.js 파일 생성
  4. App.controller.js 파일에 SAPUI5 코어의 Controller 객체를 확장하여 앱 컨트롤러 정의
  5. onShowHello 함수를 사용하여 버튼 클릭 이벤트 처리

webapp/view/App.view.xml

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press=".onShowHello"/>
</mvc:View>

webapp/view/App.view.xml 파일에서 컨트롤러 참조를 추가하고, 텍스트 컨트롤을 "Say Hello" 버튼으로 변경합니다. 이 버튼은 클릭하면 .onShowHello 이벤트 핸들러 함수가 실행됩니다. 뷰의 controllerName 속성을 설정하여 뷰와 연결된 컨트롤러 이름을 지정해야 합니다. 이 컨트롤러에 .onShowHello 함수가 있습니다.

뷰에는 꼭 컨트롤러가 필요한 것은 아닙니다. 정보만 표시하고 추가 기능이 필요 없으면 컨트롤러를 만들지 않아도 됩니다. 컨트롤러를 지정하면, 뷰 로드 후 인스턴스화됩니다.

webapp/controller/App.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("", {
   });
});

webapp/controller/App.controller.js 파일은 새로 만들어야 합니다. 웹앱의 controller 폴더에 App.controller.js 파일을 만듭니다. 이 파일에서는 필요한 모듈을 관리하는 코드를 무시합니다. 이 부분은 다음 단계에서 설명합니다.

"use strict" 표현식은 ECMAScript 5에서 도입되었습니다. 코드를 엄격 모드에서 실행하도록 브라우저에 지시합니다. 이 모드는 개발 중 잠재적 코딩 문제를 조기 발견하는 데 도움이 됩니다.

webapp/controller/App.controller.js

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

webapp/controller/App.controller.js 파일에서는 SAPUI5 코어의 Controller 객체를 확장하여 앱 컨트롤러를 정의합니다. 이 컨트롤러에는 onShowHello라는 함수가 포함되어 있으며, 버튼 클릭 시 알림을 표시합니다. 이렇게 하면 버튼의 클릭 이벤트를 처리합니다.

규칙

  1. 컨트롤러 이름은 대문자로 표기

  2. 컨트롤러는 관련 뷰와 동일한 이름을 가집니다(1:1 관계가 있는 경우).

  3. 이벤트 핸들러는 접두사 앞에 on이 붙습니다.

  4. 컨트롤러 이름은 항상 *.controller.js로 끝납니다

결론

]]> <![CDATA[Step 4: XML Views]]> https://velog.io/@racetam_noey/Step-4-XML-Views https://velog.io/@racetam_noey/Step-4-XML-Views Sun, 09 Apr 2023 14:28:35 GMT 모든 UI를 index.html 파일에 넣으면 구성이 복잡해지고 앞으로 해야 할 작업이 상당히 많아집니다. 따라서 sap.m.Text 컨트롤을 전용 뷰에 넣어서 첫 번째 모듈화를 진행해보겠습니다.

SAPUI5는 여러 뷰 유형(XML, HTML, JavaScript)을 지원합니다. 가장 가독성이 높은 코드를 생성하고 컨트롤러 로직에서 뷰 선언을 분리해야 하므로 XML을 선택했습니다. 아직 UI의 모양은 달라지지 않습니다.

모듈화는 어플리케이션 구조적인 측면에서 변경이 이루어지지만, 최종 사용자가 볼 UI 화면에는 이전 단계와 동일하게 Hello World가 출력됩니다.

webapp/view/App.view.xml (New)

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
</mvc:View>

앱에서 새로운 화면을 만들기 위해 먼저 뷰 폴더를 만듭니다. 그리고 이 폴더 안에 XML 형식의 뷰 파일을 생성합니다. XML 구조에서 제일 처음 나오는 요소는 뷰로 설정됩니다.

이 예제에서는 SAPUI5에서 주로 사용되는 UI 요소들이 있는 네임스페이스 sap.m을 사용합니다. 또한 SAPUI5의 뷰와 모델-뷰-컨트롤러(MVC) 구조와 관련된 부분을 위해 sap.ui.core.mvc라는 추가적인 네임스페이스를 만들고, 이를 mvc라는 별칭으로 사용합니다.

앱에서 새 화면을 만들려면 뷰 폴더와 XML 형식의 뷰 파일을 생성하고, 여기에 SAPUI5의 기본 UI 요소들과 뷰와 관련된 부분을 처리하는 네임스페이스를 정의합니다. 이를 통해 화면을 구성하고 동작을 설정할 수 있습니다.

❗ Note

네임스페이스는 프로젝트의 모든 요소를 구별하는 역할을 하며, 겹치지 않게 유일하게 설정되어야 합니다. 만약 여러분이 자신만의 애플리케이션 코드나 컨트롤을 만들 때에는, SAP 리소스에 사용되는 네임스페이스 접두사인 'sap'를 사용할 수 없습니다.

대신, 여러분만의 고유한 네임스페이스를 만들어 사용하면 됩니다. 예를 들어, 'myCompany.myApp'과 같이 설정할 수 있습니다.

네임스페이스는 프로젝트 내의 각 요소를 구분하고 식별하는 역할을 하며, 여러분의 코드나 컨트롤에는 고유한 네임스페이스를 사용해야 합니다. SAP에서 사용되는 'sap' 접두사 대신, 자신만의 네임스페이스를 만들어 사용하면 됩니다.

webapp/view/App.view.xml

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

뷰의 태그 안에서 텍스트 컨트롤을 추가하려면 이전 단계에서 사용한 속성을 가진 XML 태그를 사용합니다. XML 태그는 컨트롤과 연결되며, 태그의 속성들은 컨트롤의 속성들과 연결됩니다.

webapp/index.js

sap.ui.define([
    "sap/ui/core/mvc/XMLView"
], function (XMLView) {
    "use strict";
    // create a view with the name of the view and the type of the view    
    XMLView.create({
        viewName: "sap.ui.demo.walkthrough.view.App"
    }).then(function (oView) {
        oView.placeAt("content");
    });

});

새로운 App XML 뷰로 sap.m.Text 컨트롤 인스턴스를 대체합니다. 이 뷰는 SAPUI5의 팩토리 함수를 통해 생성되어, 뷰가 올바르게 설정되고 사용자가 확장할 수 있도록 합니다. 이 리소스를 구별하기 위해 네임스페이스 'sap.ui.demo.walkthrough.view'를 이름 앞에 붙입니다.

❗ Note

참고로, 이 단계부터 앱을 웹 서버에서 실행해야 합니다. 앱은 여러 파일로 구성되어 로컬 파일 시스템에서 실행하려면 보안 문제로 인해 브라우저가 실행을 막습니다. 브라우저의 개발자 도구에서 "sap is not defined" 오류 메시지가 나타나면 부트스트랩에서 리소스 경로를 확인해야 합니다.

웹 서버를 설치하는 대신, SAP 사이트 외부에서 제공되는 UI5 도구를 사용해 로컬 개발 서버를 실행할 수도 있습니다. 자세한 정보는 개발 환경 설명서를 참조하세요.

오류 정상 동작

규칙

  1. 뷰 이름은 대문자로 시작합니다.
  2. 모든 뷰는 'view' 폴더에 저장됩니다.
  3. XML 뷰의 파일 이름은 항상 "*.view.xml"로 끝납니다.
  4. 기본 XML 네임스페이스는 'sap.m'입니다.
  5. 다른 XML 네임스페이스는 SAP 네임스페이스의 마지막 부분을 별칭으로 사용합니다(예: 'sap.ui.core.mvc'의 경우 'mvc').

결과

이제 'Hello World' 텍스트가 SAPUI5 컨트롤로 표시됩니다( 이전 단계와 비주얼 변경 사항은 없음).

]]> <![CDATA[Step 3: Controls ]]> https://velog.io/@racetam_noey/Step-3-Controls https://velog.io/@racetam_noey/Step-3-Controls Sun, 09 Apr 2023 13:54:59 GMT 이제 HTML 본문(body)의 "Hello World" 텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여 간단한 첫 번째 UI를 만들 차례입니다. 처음에는 자바스크립트 컨트롤 인터페이스를 사용하여 UI를 설정한 다음 컨트롤 인스턴스를 HTML 본문에 배치합니다.

webapp/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://sdk.openui5.org/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 클래스는 SAPUI5 앱을 표시하기 위한 추가적인 테마 종속 스타일(additional theme-dependent styles)을 추가합니다."

"테마 종속 스타일"이라는 표현은 SAPUI5 앱을 표시하는 데 사용되는 테마에 따라 변경되는 스타일을 설명하는 것입니다.

webapp/index.js

sap.ui.define([
    "sap/m/Text" //ui5 라이브러리 네임스페이스

], function (Text) {
    "use strict";

    new Text({
        text: "Hello World"
    }).placeAt("content");

});

SAPUI5를 이용하여 대화 상자를 만들기 위해 기본적인 컨트롤을 사용하려고 합니다. 컨트롤은 화면의 일부분을 꾸미고, 어떻게 동작할지 정하는 데 사용됩니다.

위 예시에서, 초기화 이벤트에서 콜백 함수는 SAPUI5 텍스트 컨트롤을 만드는 곳입니다. 컨트롤의 이름 앞에는 sap/m/이라는 접두어가 붙습니다. 이는 컨트롤이 어떤 라이브러리에 속해 있는지 나타냅니다. 옵션은 JavaScript 객체 형태로 생성자에 전달되며, 이 경우 텍스트의 내용을 "Hello World"로 설정했습니다.

컨트롤을 만든 후, 표준 메서드인 placeAt를 사용하여 문서 객체 모델(DOM) 노드나 다른 SAPUI5 컨트롤 인스턴스에 추가합니다. 여기서는 DOM 노드의 ID를 사용하여 HTML 문서의 본문 태그에 컨트롤을 추가하였습니다.

SAPUI5 컨트롤은 설정을 위한 속성, 집합, 연결 등을 가지고 있습니다. 이러한 내용은 데모 키트에서 확인할 수 있습니다. 각 컨트롤은 공용 함수들을 가지고 있어, API 참조에서 확인할 수 있습니다.

index.html 본문 내용에서 "Hello World"를 제거하는 것을 잊지 마세요.

이 예시에서는 SAPUI5를 사용하여 텍스트 컨트롤을 만들고, 이 텍스트 컨트롤에 "Hello World"라는 내용을 넣습니다. 그 다음, 이 컨트롤을 웹 페이지에 넣어 사용자에게 보여주는 작업을 진행합니다.

SAPUI5에서 컨트롤은 화면에 보이는 요소들을 만드는 데 사용됩니다. sap.ui.core.Control은 기본 컨트롤 클래스로, 다른 모든 컨트롤들은 이 클래스를 기반으로 만들어집니다. 이 기본 클래스의 인스턴스와 그 하위 클래스들만 화면에 직접 보이도록 만들 수 있으며, placeAt 함수를 사용하여 웹 페이지에 추가할 수 있습니다.

요약

이러한 컨트롤들은 또한 sap.ui.core.Element를 확장합니다. 이것은 실제로 화면에 보이지 않지만, 다른 컨트롤 내부에서 렌더링하는데 도움을 줍니다.

API 참조에서 컨트롤의 상속 구조를 살펴보면, 어떤 컨트롤이 어떤 다른 컨트롤을 기반으로 만들어졌는지 이해할 수 있습니다. 각 컨트롤의 API 문서에는 이 컨트롤을 기반으로 만들어진 하위 클래스들도 참조되어 있습니다. SAPUI5에서 컨트롤은 화면에 나타나는 구성 요소를 만드는 데 사용되며, 기본 컨트롤 클래스와 그 하위 클래스들을 사용하여 웹 페이지에 추가할 수 있습니다. 이들은 다른 컨트롤 내부에서 렌더링하는데 도움을 주는 Element를 확장하며, API 참조에서 상속 구조와 관련 정보를 확인할 수 있습니다.

결과

UI5 배경 색상을 변경하고 폰트를 SAP-72 폰트로 변경했습니다.

변경 전

변경 후

]]> <![CDATA[Step 2: Bootstrap]]> https://velog.io/@racetam_noey/Step-2-Bootstrap https://velog.io/@racetam_noey/Step-2-Bootstrap Sun, 09 Apr 2023 13:08:08 GMT SAPUI5 작업을 시작하기 전에 앱을 불러오고 초기화해야 합니다. 이 과정을 부트스트래핑이라고 합니다. 부트스트래핑이 완료되면 경고 메시지가 표시 되도록 경고 메시지를 추가해 보세요.

SAPUI5는 앱이 있는 동일한 웹 서버에서 로드하거나 다른 서버에서 로드할 수 있는 JavaScript 라이브러리입니다.

SAPUI5가 서버의 다른 곳에 배포되었거나 다른 서버를 사용하려는 경우 이 튜토리얼의 부트스트랩 ( 참조: src="/resources/sap-ui-core.js")에서 해당 경로를 사용자의 특정 조건에 맞게 조정해야 합니다.

webapp/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://sdk.openui5.org/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:sap/ui/demo/walkthrough/index"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'>
    </script>
</head>
<body>
<div>Hello World</div>

</body>
</html>

이 단계에서는 로컬 웹서버에서 SAPUI5 프레임워크를 로드하고 다음 구성 옵션을 사용하여 핵심 모듈을 초기화합니다:

  • script 태그의 src 속성은 브라우저에 SAPUI5 코어 라이브러리를 찾을 수 있는 위치를 알려주며, SAPUI5 런타임을 초기화하고 data-sap-ui-libs 속성에 지정된 라이브러리 등의 추가 리소스를 로드합니다.

  • SAPUI5 컨트롤은 다양한 테마를 지원하며, 기본 테마로 sap_horizon을 제공합니다. (1.112. 버전 기준)

  • 이 튜토리얼에 필요한 UI 컨트롤이 포함된 필수 UI 라이브러리 sap.m을 지정합니다.

  • SAPUI5의 최신 기능을 활용하기 위해 호환성 버전을 edge로 정의합니다.

  • 비동기적으로 실행되도록 "부트스트랩" 프로세스를 구성합니다.

  • 즉, 성능상의 이유로 SAPUI5 리소스를 백그라운드에서 동시에 로드할 수 있습니다.

  • 처음에 로드할 모듈을 명시적으로 정의합니다. 이를 통해 HTML 파일에서 직접 런타임되는 자바스크립트 코드를 생성하지 않습니다. 이런 방식으로 앱의 보안을 강화할 수 있습니다. 이 단계의 뒷부분에서 이 모듈이 참조하는 스크립트를 만들 것입니다.

  • SAPUI5 코어에 sap.ui.demo.walkthrough 네임스페이스의 리소스가 index.html과 같은 폴더에 있음을 알립니다. 이는 SAP Fiori 런치패드에서 실행되는 앱에 필요합니다.

webapp/index.js (New)

sap.ui.define([

], function () {
    "use strict";


    alert("UI5 is ready");
});

이제 튜토리얼 단계의 애플리케이션 로직을 포함하는 새로운 index.js 파일을 생성합니다. 보안적인 측면에서 안정성을 더하기 위해 HTML 파일에 직접 실행 코드를 넣지 않고 해당 파일에 작성합니다. 이 스크립트는 index.html에서 호출됩니다. 여기서는 선언적 방식으로 모듈을 정의했습니다.

결과

UI5 is ready "alert" 형식의 메시지를 확인할 수 있습니다.

]]> <![CDATA[Step 1: Hello World!]]> https://velog.io/@racetam_noey/Step-1-Hello-World https://velog.io/@racetam_noey/Step-1-Hello-World Sun, 09 Apr 2023 12:46:06 GMT Preview

SAPUI5는 HTML5를 기반으로 하고 있습니다. 이 스텝에서는 HTML만을 이용하여 첫 번째 "Hello World"를 만들어 보겠습니다.!

Fiori App Generator를 사용하지 않고 UI5 구성 요소를 단계별로 추가하는 방식으로 진행됩니다. Generator를 사용하지 말고 프로젝트 폴더와 webapp 폴더, 그리고 index.html을 생성해주세요.

프로젝트 폴더 생성

폴더 구조 : Walkthrow/webapp

webapp/index.html (New)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SAPUI5 Walkthrough</title>
</head>
<body>
    <div>Hello World</div>
</body>
</html>

이 튜토리얼을 통해 만들 앱의 모든 소스가 포함될 새 폴더 webapp을 만듭니다. 그리고 이 폴더를 "앱 폴더"라고 부릅니다.

이제 앱 폴더에 index.html이라는 루트 HTML 파일을 새로 만듭니다. HTML 문서는 기본적으로 헤드와 바디의 두 섹션으로 구성됩니다. 헤드 부분은 브라우저에서 문서를 처리하는 데 사용됩니다. 메타 태그를 사용하여 브라우저의 동작에 영향을 줄 수 있습니다.

이 경우 브라우저에 문서 문자 집합으로 UTF-8을 사용하도록 설정합니다. 또한 브라우저에 표시될 앱의 제목을 지정합니다. 하드코딩된 제목은 사용자의 언어로 제목을 표시하는 등 앱에서 재정의할 수 있다는 점도 참고하세요.

본문 부분은 페이지의 레이아웃을 설명합니다. 여기서는 div 태그를 사용하여 "Hello World"를 간단히 표시합니다.

작성 후 GoLive 확장을 사용하여 확인

]]> <![CDATA[UI5 Walkthrough - 2023]]> https://velog.io/@racetam_noey/Walkthrough-Intro-2023 https://velog.io/@racetam_noey/Walkthrough-Intro-2023 Sun, 09 Apr 2023 11:50:57 GMT

이 문서는 SAPKR Velog 글과 UI5 SDK 내용을 참고하여 2023년 기준으로 작성되었습니다.

먼저 모델-뷰-컨트롤러와 같은 기본 개발 패러다임을 소개하고 애플리케이션의 모범 사례 구조를 설정합니다. "Hello World"라는 클래식한 예제를 따라 이 단계를 수행하고 새 앱을 처음부터 시작하겠습니다. 다음으로 SAPUI5의 기본 데이터 바인딩 개념을 소개하고 인보이스 목록을 표시하도록 앱을 확장하겠습니다. 내비게이션 추가, 컨트롤 확장, 반응형 앱 만들기 등을 통해 계속해서 더 많은 기능을 추가할 것이고, 마지막으로 SAPUI5의 테스트 기능과 기본적으로 제공되는 지원 도구에 대해 살펴보겠습니다.

]]> <![CDATA[UI5&FIORI 테마 종류]]> https://velog.io/@racetam_noey/UI5FIORI-%ED%85%8C%EB%A7%88-%EC%A2%85%EB%A5%98 https://velog.io/@racetam_noey/UI5FIORI-%ED%85%8C%EB%A7%88-%EC%A2%85%EB%A5%98 Wed, 08 Sep 2021 09:23:24 GMT

테마 ID를 입력하면 해당 테마 사용이 가능하다.

기존 테마는 적용이 불가능한것도 있음.

]]> <![CDATA[[SAP교육사업본부] (무료 웨비나) 교육에 대해 무엇이든 물어보SAP!]]> https://velog.io/@racetam_noey/SAP%EA%B5%90%EC%9C%A1%EC%82%AC%EC%97%85%EB%B3%B8%EB%B6%80-%EB%AC%B4%EB%A3%8C-%EC%9B%A8%EB%B9%84%EB%82%98-%EA%B5%90%EC%9C%A1%EC%97%90-%EB%8C%80%ED%95%B4-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%93%A0-%EB%AC%BC%EC%96%B4%EB%B3%B4SAP https://velog.io/@racetam_noey/SAP%EA%B5%90%EC%9C%A1%EC%82%AC%EC%97%85%EB%B3%B8%EB%B6%80-%EB%AC%B4%EB%A3%8C-%EC%9B%A8%EB%B9%84%EB%82%98-%EA%B5%90%EC%9C%A1%EC%97%90-%EB%8C%80%ED%95%B4-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%93%A0-%EB%AC%BC%EC%96%B4%EB%B3%B4SAP Wed, 08 Sep 2021 05:47:32 GMT

필요한 교육 검색 방법

SAP Learning Journeys 에서 교육 과정 검색 가능

Overview : 기초적인 지식부터 시작

Become competent : 필수 과정 SAP를 모르는 사람이 들으면 프로젝트에 들어갈 수 있는 최소한의 자격 습득 가능

Expand your skills : 추가적인 내용에 대한 교육

교육 방식은 온라인 오프라인 두가지 방식으로 진행 중이다.

어떤 교육이 효과적일까?

SAP에 대한 운영이 전무하고 지식이 없다면 가급적 SAP Overview 부터 강사님과 함께 하기를 추천

이후에는 러닝허브와 이북을 통해서 셀프 스터디 가능

오프라인 온라인 모두 실질적 다루는 과정은 동일하다. 그러나 수강 방식에서 약간의 차이가 있다.

온라인도 오프라인 만큼 강사님과의 소통이 가능하니 본인에게 맞는 과정 수강 추천.

지방 재직자는 어떤식으로 수강이 가능할까?

온라인 수업과 러닝허브를 적극적으로 활용하는 방식으로 수강이 가능하다.

SAP에서는 교육을 원한다면 해당 기업에 방문해서 수강이 가능한 방식도 존재한다.

SAP 교육은 이론과 활용 중 어디에 더 중점이 있을까?

오프라인으로 교육을 할 시에 교재에 실습 시나리오를 통해서 데이터를 쌓아나가면서 교육 마지막에 실습을 한다.

이론 보다는 실습이 비중이 많이 차지한다. 반드시 실습을 병행 할 수 있는 교육을 선택 권유.

SAP 관련 역량을 지속적으로 키울 수 있는 방법을 추천한다면?

지속적으로 지식을 넓히는게 중요하다. 요즘 같은 언텍트 시대에는 러닝허브에서 제공하는 온라인 교육을 수강하거나, 유튜브등 다양한 오픈 플랫폼에도 교육이 가능하다.

지식을 끊임 없이 학습하고, 엮어서 사용하는걸 시도한다.

시도를 할 수 있는 미니 프로젝트 등 다양하게 지속적으로 하는게 역량 성장에 도움이 된다.

ECC를 운영한지 약 10년이 됬는데 S/4HANA 교육이 꼭 필요할까요?

세부적인 과정을 들을때 40일 가량의 시간이 소모된다면

ECC 운영 10년차일 경우 델타 과정, 업스킬 과정을 통해 직접적으로 필요한 부분을 수강 할 수 있다. (약 20일 가량 모듈별 2~3일)

SAP SuccessFactors 교육과 자격증 정보를 알고 싶습니다.

위에서 언급한 SAP Learning Journeys 에서 교육 과정 검색 가능.

처음 필수 과정 역시 Become competent로 동일하다.

현재 SAP 교육센터에서 진행중인 기초 및 아카데미 과정을 수강하게 되면 실무에 바로 적용을 할 수 있을까요?

수강생의 이해도가 얼마나 다르냐에 따라 다를 수 있다.

만약 바로 실무에서 사용하는 환경과 어느정도 지식이 있다면 바로 적용이 가능 할 것이다

SAP 교재만 별도로 구매 가능한지 궁금합니다.

교재가 필요할 경우 러닝허브에서 제공되는 이북을 활용하는것을 추천.

현업 사용자에게는 필수가 아닌데, 교육에 대한 평가를 측정 할 수 있는 방법은 없을까?

현업 사용자에게는 자격증이 필수는 아니라고 생각.

자격증은 그 분야에 대한 지식을 가지고 있는지 검증이 가능하다.

자격증을 가지고 있으면 도움은 된다, 엔드 유저는 본인이 잘 사용하고 있는지 확인 하고 싶은 경우 SAP Enable now 를 활용 가능하다.

SAP 프로젝트 공고를 보면 경력이 있어야 지원 가능한데, 신입으로써 SAP프로젝트 참여를 위한 교육과정과 자격증을 추천해주세요.

지식보다는 경험과 연륜이 많이 필요하기 때문에 신입이 많이 진입하기 어려운 부분이 있다.

ABAP이 개발자가 많다면 수요가 늘어나는 Fiori는 진입이 원할하다고 생각.

SAP 자격증의 종류/레벨을 알고 싶어요. 관련 자격증 정보는 어떻게 확인이 가능한가요?

SAP Learning Journeys

자격증 레벨링에 관해서는 Association 레벨과 Professional 레벨이 존재한다.

한국에서는 최근 10년동안 Professional 레벨의 자격증을 따신 분이 몇 존재 하지 않는다.

따라서 한국에서는 Association 레벨 하나로 통용된다고 생각.

자격증을 취득하기 위해서는 꼭 교육을 받아야만 하나요?

꼭 교육을 받아야만 응시를 할 수 있다.

글로벌 정책은 아니지만 한국에서는 반드시 교육을 받아야지만 시험 응시 가능.

교육은 받지 않았지만 관련 업무에 종사한 기록이 있다면?

해당 기업 인사팀에서 모듈당 2년 경력을 인정받고 SAP에 공문을 보내면 응시가 가능하다.

단 S/4HANA와 기타 클라우드 환경은 아직 반드시 교육을 수강 해야한다.

SAP 직원분들도 자격증 취득하시나요?

1년에 최소 하나씩은 따려고 한다.(팀 별로 다르겠지만)

자격증 유효기간이 궁급합니다. 업데이트에 대한 교육은 어떻게 해야되나요?

자격증 유효기간은 SAP Learning System에는 10년간 자료 보관을 한다.

그 이후에는 자격증에 대한 History를 증명 해줄수 없다.

S/4HANA와 클라우드 경우에는 추가 교육을 통해 지속적으로 업데이트 교육을 받아야 한다.

시험 합격 후 자격증을 원본으로 안 주시나요?

최근에는 디지털 뱃지를 발행한다.

활용 예시 (출처 : SAP 웨비나 라이브)

실제 자격증 증명 역할을 하며 소셜 계정에 업로드가 가능하다.

시험 합격 후에는 디지털 뱃지 발급을 꼭 추천.

프로젝트 PM이 되기 위한 자격증이 무엇인지 알고 싶습니다.

SAP 프로젝트 PM이 되기 위해서는 많은것을 요구한다.

* 어디에 클레임 해야 하는가
* 어떻게 해결해야 하는가

SAP에 프로젝트가 A-Z를 알아야하므로 엑티베이트 자격증 취득 필요

SAP 교육과 자격증이 해외 취업에 도움이 되는지 궁금합니다.

기본적으로 해외로 진출하게되면 어떠한 자격증을 땃는지 어떠한 모듈을 다룰줄 아는지는 필수이다.

아주 기본적인 자신을 증명하는 자료.

교육 설계 방향 제시 (출처 : SAP 웨비나 라이브)

]]>