[UI5] SAPUI5 View 만드는 방법 설명 (View, Controller, Manifest, 디버깅)
2025.12.08 - [Ⅰ. ERP/7. 프로젝트] - [UI5] SAP UI5 셋업, BTP 연결, SAP Cloud Connector세팅, SAP 배포
[UI5] SAP UI5 셋업, BTP 연결, SAP Cloud Connector세팅, SAP 배포
Destination(대상) 생성 항목 키(Key) 값(Value) 설명1HTML5.DynamicDestinationtrueHTML5 앱 실행 시 동적 Destination 사용 허용2HTML5.Timeout60000HTML5 앱 요청 타임아웃(밀리초 단위, 60초)3sap-client100SAP 시스템 클라이언
green98.tistory.com
SAPUI5 View
SAPUI5에서 화면을 만드는 부분이 VIEW 입니다.
SAPUI5에서 화면(View)을 만드는 방식은 크게 3가지예요.
XML View (거의 100% 이걸 씀)
- UI를 XML 태그로 만드는 방식
- 보기 쉽고, 구조적이고, 표준 앱도 다 XML
- SAPUI5 개발하면 무조건 XML View가 메인
JSON View (사실상 안 씀)
- UI를 JSON으로 표현
- 가독성 떨어져서 실제 프로젝트에서 거의 사용 안 함
JS View (특수 상황용)
- UI를 JavaScript 코드로 직접 생성
- 동적 UI 만들 때만 가끔 사용
- 아래 글은 Module을 사용해서 화면을 만든 방식인데 이 글은 HTML에 VIEW를 넣는 방식이다.
- VIEW로 화면 구성하는게 맞음, 아래는 Module설명을 위한 예시일 뿐.
2025.12.09 - [Ⅰ. ERP/7. 프로젝트] - [UI5] Bootstrap, Module 설명
[UI5] Bootstrap, Module 설명
Bootstrap- UI5 엔진을 로딩하고 설정을 읽고 앱을 시작하는 기본 스크립트- BAS를 통해 자동으로 생성된 Bootstrap 소스는 삭제처리한다. Bootstrap 설명 - ID : - SRC : 코어가 어디에 있는지에 대한 정보 - da
green98.tistory.com
SAPUI5 View 예시
- VIEW에서 ID 꼭 지정안해도 되지만, 안하면 빨간 지렁이 뜬다.
- ID 지정해주는것을 추천한다.
- Pages로 묶어주는 이유는 다음 화면 갔다가 이전 화면 왔다가 하려면 여러 페이지가 있어야하니까 해당 태그로 묶어줘야한다.
Controller을 통해 Message 출력
- View에 Controllername으로 지정되어 있기 때문에 짝인 것을 알 수 있다.
어떤 소스를 어떻게 쓰는지 모르겠으면 UI5 Demo Kit 사이트에 가서 예제문을 참고하면 된다.
https://sapui5.hana.ondemand.com/#/entity/sap.m.MessageBox/sample/sap.m.sample.MessageBox/code
SAPUI5 SDK - Demo Kit
sapui5.hana.ondemand.com
Controller에 있는 기능 coply and paste할 때 주의점
define에 해당 기능을 추가해줘야 한다.
MessageBox 변수(모듈화) 하고 아래에 써야된다.
만약 Copy & paste했는데 오류 났을경우 define에 해당 변수가 선언되어 있는지 확인해보세요.
빨간 줄 뜬 이유는 여러개 쓸 때 , 로 구분을 해줘야하는데 내가 놓친 부분이다.
잠시 떴다가 사라지는 메시지는 Toast 형태이다.
sap/m/MessageToast 를 활용해서 모듈화 하고 사용하면 된다.
Controller을 통해 버튼 생성
UI5 Demo Kit에 돌아가서 button이 들고 있는 기능을 확인한다.
웹 디버깅 방법
디버깅이란 말 그대로 소스를 파헤치면서 분석하는거라고 보면된다.
보통 에러 떴을때 한 줄 한 줄 결과값이랑 비교하거나 에러 상태를 확인하면서 문제 해결을 한다.
F12 눌러서 개발자 도구 켠 다음 소스로 들어간다.
Break point는 소스 라인 숫자 누르면 걸리고 F10 누르면 다음 한 줄로 넘어가면서 디버깅이 가능하다.
F8누르면 끝까지 실행하고 F12 누르면 다시 개발자 도구가 꺼지면서 디버깅이 종료된다.
Watch 포인트 설정은 오른쪽 Watch에서 걸고 디버깅을 걸면 그 포인트에 멈추게 된다.
Component
- Component = SAPUI5 앱의 “시작점(Entry Point)” + “앱 전체 설정 파일”.
- 무조건 프로그램당 Component 1개
- UI5 모든 기본 설정의 값을 여기에 넣음( Bootstrap과 유사)
Manifest
- SAPUI5 앱의 모든 설정을 정의한 공식 문서.
앱이 시작할 때 Component가 이 파일을 읽고 앱 전체를 구성한다.
index.html에서 UI5 엔진을 켜고 → Component.js에서 앱을 시작하고 → manifest.json에서 앱 설정을 읽는다.
2025.12.08 - [Ⅰ. ERP/7. 프로젝트] - [UI5] SAP Fiori Tools BAS에서 UI5 앱 개발 세팅 및 설명
[UI5] SAP Fiori Tools BAS에서 UI5 앱 개발 세팅 및 설명
체험판은 Space 두개까지 생성가능합니다.개발 스페이스는 우리 회사 모든 개발자들이 사용하는 공간이니까 실제로는 신중하게 생성해야합니다.컴퓨터 껐다 키면 STOP되어있으니까 재시작 눌러
green98.tistory.com
2025.12.08 - [Ⅰ. ERP/7. 프로젝트] - [UI5] JAVA JDK 다운 및 등록방법
[UI5] JAVA JDK 다운 및 등록방법
1. JDK 설치하기① 다운로드🔗https://www.oracle.com/kr/java/technologies/downloads/#jdk25-windows 2. JAVA_HOME 환경 변수 등록 (중요)✔ 방법 (Windows)윈도우 검색 → ‘환경 변수’ 검색시스템 환경 변수 편집 클릭
green98.tistory.com
2025.12.08 - [Ⅰ. ERP/7. 프로젝트] - [UI5] BAS 설정 가이드 (Cloud Connector 필요 여부 포함)
[UI5] BAS 설정 가이드 (Cloud Connector 필요 여부 포함)
SAP Fiori 앱 F1866A (S31PCE) 간단 설명F1866A는 SAP Fiori에서 제공하는 하나의 업무용 앱이에요.이 앱은 사용자가 특정 업무 데이터를 쉽고 빠르게 조회·처리할 수 있도록 만들어져 있어요.SAP Fiori Apps Lib
green98.tistory.com
2025.12.08 - [Ⅰ. ERP/7. 프로젝트] - [UI5] UI5 Demo Kit 사용법 /버전 확인 / 버전 정보/ BTP 계정생성
[UI5] UI5 Demo Kit 사용법 /버전 확인 / 버전 정보/ BTP 계정생성
UI5 Demo KitUI5 Demo Kit은 SAPUI5/OpenUI5를 처음 만나는 사람도 바로 감을 잡을 수 있게, 컨트롤 예제·API 문서·데모 앱을 한 곳에 모아둔 공식 놀이터예요. https://sapui5.hana.ondemand.com/1.120.40/#/api SAPUI5 SDK -
green98.tistory.com
'Ⅰ. ERP > 7. 프로젝트' 카테고리의 다른 글
| [UI5] SAPUI5 Dark Theme 적용 방법 (0) | 2025.12.10 |
|---|---|
| [UI5] 화면 XML View 만드는 방법( 입력 칸, 아이콘, 버튼 넣기 ) (1) | 2025.12.09 |
| [UI5] Bootstrap, Module 설명 (0) | 2025.12.09 |
| [UI5] SAP UI5 셋업, BTP 연결, SAP Cloud Connector세팅, SAP 배포 (0) | 2025.12.09 |
| [UI5] UI5 Demo Kit 사용법 /버전 확인 / 버전 정보/ BTP 계정생성 (0) | 2025.12.09 |
댓글