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 files in XML form are promised in the form "name.view.xml".) - UI5 Text control을 활용하여 App.view.xml에 UI 구현한다.
(UI is implemented in App.view.xml using UI5 Text control.)
| <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Text text="Hello World"/> </mvc:View> | cs |
- 코드 해석(Code description):
- <mvc:View……… >…………</mvc:View>
: sap.ui.core.mvc 라이브러리에 View Module를 사용하며, <mvc:View ……….> Tag 안에 있는 속성값은 해당 View에서 사용할 라이브러리를 선언함. <mvc:View >……….</mvc:View> View Tag 사이에 있는 내용이 사용자에게 표시될 UI이다.
(Use View Module for sap.ui.core.mvc library, <mvc:View………The property values in the tag declare the library for use in that View. <mvc:View>………</mvc:View>The UI where the contents between the View Tag will be displayed to the user.) - xmlns="sap.m"
: sap.m 라이브러리를 import 하며 해당 xml에서 tag에 namespace가 붙어 있지 않는 것은 해당 라이브러리로 사용하여 UI를 생성한다. 예: <Text text=”Hello World”/>
(Import the sap.m library and use the xml that does not have namespace attached to the tag to create a UI. - e.g. <Texttext="Hello World"/> ) - xmlns:mvc="sap.ui.core.mvc"
: sap.ui.core.mvc 라이브러리를 import하며 해당 xml에서 “mvc:” 가 앞에 있는 tag는 해당 라이브러리를 사용하여 UI를 생성한다. 예: <mvc:View …….> </mvc:View>
(The sap.ui.core.mvc library is imported and the tag preceded by "mvc:" in that xml uses that library to create a UI. - e.g. <mvc:View …….> </mvc:View> ) - <Text text="Hello World"/>
: sap.m 라이브러리에 포함되어 있는 Text Module를 사용하여 화면에 “Hello World” 글자를 표시한다.
(Use the Text Module included in the sap.m library to display the letter "Hello World" on the screen.)
2. index.html의 <body> tag에 속성 및 ID 부여
(Attribute and ID to <body> tag in index.html)
- 이전에 작성된 webapp/index.html 파일에 <body> tag 속성을 아래 코드의 노란색 부분으로 변경 및 기존 <div> 내용을 삭제한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>UI5 Tutorial</title> <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/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 class="sapUiBody" id="content"></body> </html> |
- 코드 해석(Code description):
- <body class="sapUiBody" id="content"></body>
: 신규 생성한 App.view.xml을 index.html 파일의 <body> ... </body>에 추가하기 위해서 body tag에 id 값 부여한다. class="sapUiBody" 는 UI5에 body 관련 디자인(CSS)를 적용하기 위한 기본 속성 값 선언이다.
(To add the newly created App.view.xml to <body>...</body> in the index.html file, an id value is assigned to the body tag. class="sapUiBody" is a basic attribute value declaration for applying body-related design (CSS) to UI5.) - src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
: 향후 실습의 편의성을 높이기 위해 UI5 Core 라이브러리를 SAP의 Web Site에서 연동하여 사용하기 위한 코드이다.
(It is a code for using the UI5 Core library in conjunction with SAP's website to increase the convenience of future practice.)
3. 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.)
- webapp/index.js 파일의 내용을 아래와 같이 변경한다.
(Change the contents of the webapp/index.js file as follows.)
1 2 3 4 5 6 7 8 | sap.ui.define(["sap/ui/core/mvc/XMLView"], (XMLView) => { "use strict"; XMLView.create({ viewName: "ui5_tutorial.view.App" }).then((oView) => oView.placeAt("content")); }); |
- 코드 해석(Code description):
- "sap/ui/core/mvc/XMLView"
: 해당 controller에서 sap.ui.core.mvc 라이브러리에 XMLView Module를 사용하겠다는 선언이다.
(It is a declaration that the controller will use the XMLView Module in the sap.ui.core.mvc library.) - (XMLView) => { ........ }
: define에서 import한 첫 번째 Module를 XMLView라는 이름으로 import 한 후 {………}의 로직을 callback으로 수행한다는 의미이다.
(After importing the first module imported from define under the name XMLView {...……This means that the logic of } is performed by callback.) - "use strict";
: 해당 구문 아래의 내용은 일반적인 javascript에서 허용되는 느슨한 문법 및 동작 오류에 대해 엄격한 문법 및 엄격한 동작 오류를 적용한다는 선언이다.
(The content below that phrase is a declaration that it applies strict grammar and strict motion errors for loose grammar and motion errors allowed in general javascripts.) - XMLView.create({
viewName: "ui5_tutorial.view.App"
}).then((oView) => oView.placeAt("content"));
: 신규로 생성한 App.view.xml을 XML View로 읽어와서 oView에 할당하고, 할당된 oView를 id가 “content” 인 tag(index.js를 index.html에서 호출하여 실행하였기 때문에 index.html 내용 중 id가 “content” 인 tag) 안에 추가한다는 의미이다.
(This means that the newly created App.view.xml is read into XML View and assigned to the oView, and the assigned oView is added to the tag with id "content" in index.html.)
: viewName이 ui5_tutorial.view.App인 이유는 index.html에 선언한 resourceroots가 ui5_tutorial 이름이므로, viewName에 선언된 ui5_tutorial은 ui5_tutorial/webapp 폴더를 의미하며, ui5_tutorial.view.App의 “.”은 하위 폴더를 의미하기에 최종적으로 ui5_tutorial/webapp/view 폴더에 App.view.xml 파일을 의미한다.
(The reason why viewName is ui5_tutorial.view.App is that the resourceceroots declared in index.html was the ui5_tutorial, so the ui5_tutorial declared in viewName means the ui5_tutorial/webapp folder, and the "." in the ui5_tutorial.view.App means the subfolder, so it finally means App.view.xml in the ui5_tutorial/webapp/view folder.)
댓글
댓글 쓰기