【SAPUI5】OData(8) OData를 사용한 SAPUI5 어플리케이션의 만드는 방법 개발편-1

개요

WebIDE를 사용하면 마법사에 따라 설정하는 것만으로 OData를 사용하여 응용 프로그램을 만들 수 있습니다. (거의 프로그래밍 불필요!)
각 구성 요소(파일 등)에 어떤 설정이 있고, 어떻게 OData가 연결되는지 이해하고 싶기 때문에, 우선은 마법사로 작성해 그 후 설정 내용을 확인해 가려고 생각합니다.

※OData 관련의 투고 일람은 이하의 기사를 참조해 주세요.
【SAPUI5】OData(1) OData란?

목표

SAP Gateway Demo System의 OData를 사용하여 판매 오더 문서 목록을 표시합니다.
(SAP Gateway Demo System에 대한 자세한 내용은 지난번 문서를 참조하십시오)

단계

템플릿에서 앱 만들기

데이터 소스(OData) 지정
---이 페이지에서는 여기까지---

뷰 레이아웃 만들기

1. 템플릿에서 앱 만들기

WebIDE 홈 화면에서 New Project from Template을 선택합니다.

SAPUI5 Application을 선택합니다. 다양한 템플릿이 있지만, 이 템플릿은 간단한 갈라만을 만들어 줍니다.

프로젝트 이름, 네임스페이스를 입력합니다.

뷰 이름을 입력하고 Finish를 누릅니다.

아래와 같이 폴더, 파일이 만들어졌습니다.
이러한 파일의 의미는 아래 문서를 참조하십시오. (설명이 없는 것도 있습니다만)
【SAPUI5】입문편의 기사 정리

이 단계에서 실행해 보겠습니다.

팝업이 나오면 index.html을 선택합니다.

제목만의 간단한 앱이 생겼습니다.

2. 데이터 소스(OData) 지정

manifest.json 파일을 열고 화면 하단의 "Descriptor Editor"탭을 엽니 다.
지금까지는 json 형식으로 편집하고 있었습니다만, 실은 설정 화면이 준비되어 있었습니다.

데이터 소스 탭을 열고 + 버튼을 누릅니다.

"서비스 카탈로그"를 선택하고 풀다운에서 ES5를 선택합니다.
Services 곳에 "GWSAMPLE_BASIC"라고 입력하여 검색하면 서비스가 표시되므로 그것을 선택합니다.

"Use default model"을 선택하면 선택한 데이터 소스가 기본 모델로 설정됩니다. 기본 모델은 앱 실행 시 자동으로 로드됩니다.

이것으로 데이터 소스 지정이 완료되었습니다.

데이터 소스 탭에서는 다음과 같이 보입니다.

Models 탭에서는 "Default"의 행이 추가되어 데이터 소스에 위의 서비스가 설정되어 있습니다.

자동 등록된 것

여기까지의 설정 결과, 자동으로 등록된 것을 확인합니다.

manifest.json

manifest.json 파일을 Descriptor Editor에서 Code Editor로 전환해 보겠습니다.
"sap.app"아래에 다음 코드가 추가되었습니다. OData의 출처와 버전에 대한 정보임을 알 수 있습니다.

        "dataSources": {
            "GWSAMPLE_BASIC": {
                "uri": "/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "localService/metadata.xml"
                }
            }
        }

"models"아래에 다음과 같이 기본 모델이 설정됩니다. 디폴트의 모델이므로 모델명이 공백 ""이 되어 있습니다.

            "": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "OneWay",
                    "defaultCountMode": "Request"
                },
                "dataSource": "GWSAMPLE_BASIC",
                "preload": true
            }