반응형
이 메뉴를 만들어볼거다
<!DOCTYPE html>
<html>
<head>
//UI5 라이브러리를 가져옴
<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"
data-sap-ui-resourceroots='{"solportal": "./"}'>
</script>
<script>
//UI5가 완전히 로드된 후 실행될 함수
sap.ui.getCore().attachInit(function() {
//XML 뷰 생성 시작
sap.ui.xmlview({
//뷰 연결해준다
viewName: "solportal.view.Page"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
index.html 에서 간단 설정을 해준다.
UI5 라이브러리 로드 (CDN에서 가져오기) ➡️ 테마 & 라이브러리 설정 (Horizon 테마, sap.m 사용) ➡️
프로젝트 경로 설정 (solportal = 현재 폴더) ➡️ UI5 로드 완료 대기 ➡️ Page.view.xml 로드
그 다음 Page.view.xml 만들어준다.
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
// 컨트롤러 연결
controllerName="solportal.controller.Page">
<App>
<Page title="첫 화면">
// 페이지 내용 시작
<content>
//VBOX는 세로로 정렬해준다
<VBox class="sapUiSmallMargin"> //작은 여백 스타일 적용
<Button
text="큰 버튼!"
press="onBigButtonPress"/> //클릭하면 Controller의 onBigButtonPress 함수 실행
<Button
id="menuButton"
text="Open Menu"
icon="sap-icon://menu2"
type="Emphasized" // 강조형으로 설정
ariaHasPopup="Menu"
press="onMenuPress"/> //Controller의 onMenuPress 함수 실행
</VBox>
</content>
</Page>
</App>
</mvc:View>
클릭했을 때 메뉴가 열리는 뷰 따로 생성
Menu.fragment.xml
//재사용 가능한 UI 조각임을 선언
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Menu itemSelected="onMenuAction">
<items> //하위 메뉴 아이템들을 담는 컨테이너
<MenuItem text="솔루엠 식당"/>
<MenuItem text="솔루엠 약국"/>
<MenuItem text="솔루엠 카페">
<items>
<MenuItem text="빵"/>
<MenuItem text="우유"/>
<MenuItem text="커피"/>
<MenuItem text="샐러드"/>
<MenuItem text="견과류"/>
</items>
</MenuItem>
<MenuItem text="기타"/>
</items>
</Menu>
</core:FragmentDefinition>
*갑자기 포트 번호가 바뀌는 현상 발생
http://localhost:54557 → UI5 프론트엔드 서버 (자동 할당 포트)
http://localhost:4004 → CAP 백엔드 서버 (고정 포트)
반응형
'SAP HANA CLOUD' 카테고리의 다른 글
| [SAP RAP] 프록시 PROXY로 전달하기 (0) | 2026.02.23 |
|---|---|
| [SAP RAP] Wrapper 란 ? (0) | 2026.02.23 |
| [SAP CAP] 간단한 북스토어 만들기_2 (UI 입혀보기) (0) | 2026.01.28 |
| [SAP CAP] 간단한 북스토어 만들기 (0) | 2026.01.28 |
| [SAP CAP] 트라이얼 처음 셋팅과 기본적인 틀 (1) | 2026.01.23 |