SAP UI5 Week 1 - Unit 2. 컨트롤과 뷰를 사용해 UI 정의하기
페이지 정보
본문
Week 1 - Unit 2: 컨트롤과 뷰를 사용해 UI 정의하기
목차
- View
- Control
1. View
이번 Unit에서는 XML view를 생성하여 DOM에 있는 node에 배치해 보는 토픽을 다뤄보겠습니다.
webapp/view 폴더 아래 App.view.xml이라는 파일을 만들고, 다음의 코드를 App.view.xml에 생성하세요
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
</mvc:View> 위 코드에서는 sap.ui.core.mvc와 sap.m을 불러옵니다. sap.ui.core.mvc의 경우 SAPUI5 view와 Model-View-Controller (MVC) 관련된 코드들이 모여있는 namespace이고, sap.m의 경우 대부분의 UI 관련 코드들이 모여 있는 namespace입니다.
그리고, webapp 폴더 안에 있는 index.html에 다음의 코드를 추가하세요.
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>openSAP - Developing Web Apps with SAPUI5</title> <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "opensap.myapp": "./" }'> </script> <script> sap.ui.getCore().attachInit(function () { sap.ui.xmlview({ viewName: "opensap.myapp.view.App" }).placeAt("content"); }); </script> </head> <body class="sapUiBody" id="content"> </body> </html>
data-sap-ui-sourceroots에 opensap.myapp이라는 해당 프로젝트 고유의 namespace를 추가합니다. 그리고, attachInit function에 opensap.myapp.view.App이라는 view에 대한 주소를 추가시켜줌으로써 SAPUI5 런타임의 초기 콜백 함수가 해당 view를 작동시키도록 합니다.
2. Control
이제 View에 Control을 구현해 볼 것 입니다.
다음의 코드를 App.view.xml에 추가하십시오.
<mvc:View displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <Carousel> <pages> <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Wikipedia_Hello_World_Graphic.svg/2000px-Wikipedia_Hello_World_Graphic.svg.png" height="600px"/> <Image src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Wikipedia_Hello_World_Graphic.svg/2000px-Wikipedia_Hello_World_Graphic.svg.png" height="600px"/> </pages> </Carousel> </mvc:View>
sap.m.Carousel 이라는 컨트롤을 View에 추가하기 위해, 전에 추가했던 sap.m namespace가 필요합니다. 해당 namespace를 정의함으로써 작성할 수 있게 되는 <Carousel> xml tag를 사용하십시오. <Carousel> 안에 페이지를 추가하기 위해서는 <pages>라는 태그를 사용하면 됩니다.
Carousel 안에 이미지를 넣기 위해서는 <Image>라는 tag를 사용하고, 안의 property들을 정의해주면 됩니다. src라는 property를 사용해 이미지 소스 주소를 view에서 참조할 수 있도록 하고, height라는 property를 통해 이미지의 높이를 조정합니다. 추가적인 property에 대해 참고하고 싶다면 SAPUI5 Demo Kit를 참조하십시오.
아래의 이미지는 해당 코드를 구현했을 때의 모습입니다.
- 이전글SAP UI5 Week 1 - Unit 3. Controller와 Module 설계하기 21.08.13
- 다음글SAP UI5 Week 1 - Unit 1. Introducing SAPUI5 21.08.13
댓글목록
