글

5. SAP UI5 Resource Model Apply

이미지
SAP UI5 Resource Model Apply (다국어 처리 - Translatable Texts) 이 단계에서는 UI5의 Data 처리를 위한 Model 중 하나 인 Resource Model을 활용하여 다국어를 적용하는 방법에 대해 살펴본다.  (In this step, we will look at how to apply multiple languages using the Resource Model, one of the models for data processing in UI5.) 실행 결과(Results of this step) 실행 순서(Order of execution of this step): i18n property 파일 생성한다. (Create the i18n property file.) Controller에서 ResourceModel 선언 및 View에 할당한다. (The Controller assigns ResourceModel Declaration and View.) View에서 ResourceModel 연동한다. (In View, link ResourceModel.) 1. i18n property 파일 생성한다.    (Create the i18n property file.) webapp/i18n/i18n.properties 파일 생성 및 코드 작성한다. 파일 이름은 사전에 약속된 Naming Rule로 정해져 있다. (Create and code the "webapp/i18n/i18n.properties file." The file name is set to the Naming Rule that was previously promised.)      1 2 showHelloButtonText=Say Hello helloMsg=Hello {0}           코드 해석(Code description) hel...
댓글 쓰기
자세한 내용 보기

4. SAP UI5 JSON Model Apply

이미지
SAP UI5 JSON Model Apply 이번 단계에서는 화면에 JSON 형태의 data를 담을 수 있는 JSONModel 변수를 사용하여 화면에 Text 문구를 표시하는 방법을 작성한다.  (In this step, a method of displaying text phrases on the screen is created using the JSONModel variable that can contain JSON-type data on the screen.) 실행 결과(Results of this step) 실행 순서(Order of execution of this step): Controller에 JSON Model 선언 및 Data를 할당한다. (Assign JSON Model Declaration and Data to Controller.) View에서 JSON Model을 참조하여 UI 표시할 수 있도록 처리한다. (Process to display UI by referring to JSON Model in View.) 1. Controller에 JSON Model 선언 및 Data를 할당한다.     (Assign JSON Model Declaration and Data to Controller.) webapp/controller/App.controller.js 에 JSON Model 선언 및 Data를 할당한다. (Assign JSON Model declaration and Data to webapp/controller/app.controller.js.)      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 sap.ui.define([      "sap/ui/core/mvc/Controller"  ,      "sap/m/MessageTo...
댓글 쓰기
자세한 내용 보기

[참조] SAP UI5 Model Type

이미지
SAP UI5 Model Type 여기서는 UI5의 MVC 패턴 중 M(Model)에 해당하는 3가지 Type의 Model에 대해서 작성한다. 3가지 Type은 JSON Model, Resource Model, ODataModel이다. 이 장에서는 간단한 소개만 작성하고, 실제 사용 방법은 다음 글에서 작성한다.   (Three types of models corresponding to M (Model) among the MVC patterns of UI5 are created. The three types are JSON Model, Resource Model, and OData Model.) JSON Model JSON 형식({id:value} 구조)의 Data를 관리하기 위한 Model로 UI5에서 Data를 처리하기 위해 사용되는 가장 기본이 되는 Data Model이다. (It is a model for managing data in JSON format ({id:value} structure) and is the most basic data model used to process data in UI5.) 예시(Example):       1 2 3 4 5  {recipient: [                 {name:"Tom"},                   {name:"Joe"}              ] } cs Resource Model UI Module(...
댓글 쓰기
자세한 내용 보기

3. SAP UI5 Controller Create & Module Add

이미지
SAP UI5 Controller Create & Module Add 이전 단계에서는 UI5의 MVC 패턴 중 V(view)에 해당하는 내용을 살펴보았다. 이번 단계에서는 C(Controller)에 해당하는 UI5 동작 적용에 대한 내용을 작성한다. (In the previous step, contents corresponding to V (view) among the MVC patterns of UI5 were examined. In this step, contents for application of UI5 operation corresponding to C (controller) are created.) 실행 결과(Results of this step) 실행 순서(Order of execution of this step): XML view에 버튼 추가 및 Controller를 지정한다. (Add a button and specify a controller in the XML view.) 동작을 제어할 Controller 생성한다. (Create a controller to control the behavior.) 1. XML view에 버튼 추가 및 Controller 지정    (Add a button and specify a controller in the XML view.) webapp/view/App.view.xml에 아래의 노란색 부분 코드를 수정한다. (Modify the yellow partial code below in webapp/view/App.view.xml.)      1 2 3 4 5 6 < mvc:View     controllerName = "ui5_tutorial.controller.App"    xmlns = "sap.m"    xmlns:mvc = "sap.ui.core.mvc" > ...
댓글 쓰기
자세한 내용 보기

2. SAP UI5 XML Views Create

이미지
SAP UI5 XML View 란? 이전 단계인 UI5 Bootstraping 단계를 통해서 UI5 Framework를 연동하였다. 이번 단계에서는 UI5 Framework의 MVC 패턴 중 V(View)에 해당하는 UI를 XML 파일을 통해 연동한다. (UI5 Framework was linked through the previous step, UI5 Bootstrapping. In this step, the UI corresponding to the V (View) of the MVC pattern of the UI5 Framework is linked through the XML file.) 실행 결과(Results of this step) 실행 순서(Order of execution of this step): 신규 XML View(App.view.xml) 파일 생성한다. (Create a new XML View (App.view.xml) file) index.html의 <body> tag에 속성 및 ID 부여한다. (Attribute and ID to <body> tag in index.html) index.js에서 index.html에 신규 생성하는 XML View를 <body> tag에 추가하는 로직 작성한다. (Write the logic of adding XML View, which is newly created in index.js to index.html, to the <body> tag.) 1. 신규 XML View(App.view.xml) 파일 생성    (Create a new XML View (App.view.xml) file) webapp/view/App.view.xml 파일 신규 생성한다. (Create a new webapp/view/App.view.xml file.) XML 양식의 View 파일은 "이름.view.xml" 형식으로 약속되어 있다. (View fi...
댓글 쓰기
자세한 내용 보기

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): 필요한UI5 라이브러리를 추가한다. (Add the required UI5 library.) webapp/index.html 파일에 bootstrap 관련 코딩한다. (Coding related to bootstrap in the webapp/index.html file.) 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 파일에 자동으...
댓글 쓰기
자세한 내용 보기