본문 바로가기

SAP 사용자들의 오픈 커뮤니티

SAP Business Technology Platform(BTP)

SAP UI5 Week 1 - Unit 2. 컨트롤과 뷰를 사용해 UI 정의하기

페이지 정보

profile_image
작성자 no_profile SAPBTP가이드 쪽지보내기 아이디로 검색 전체게시물
댓글 1건 조회 384회 작성일 21-08-13 15:49

본문

Week 1 - Unit 2: 컨트롤과 뷰를 사용해 UI 정의하기


목차

  1. View
  2. 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를 참조하십시오.


아래의 이미지는 해당 코드를 구현했을 때의 모습입니다.


d9e65f4a889bfa2153cd7006eabda0a3_1628837388_257.png
 



댓글목록

profile_image

KSUG님의 댓글

no_profile KSUG 쪽지보내기 아이디로 검색 전체게시물 작성일 0

잘 알겠습니다

이용약관
개인정보처리방침