SAPUI5 【SAPUI5】입문편의 기사 정리 SAPUI5의 입문으로서 이하 6개의 기사를 작성했습니다. 여기에서는 각 기사에의 링크와 6회를 마친 시점에서의 소스를 게재합니다. ※입문편으로서 이하의 기사를 추가했습니다. 입문편을 마친 분에게 : 도 있기 때문에, 좋으면 부디. 폴더 구성은 다음과 같습니다. index.html Component.js manifest.json App.view.xml App.controller.js Pric... mvcSAPUI5SAP 【SAPUI5】MVC를 완성하자 전회의 기사 ( )에서는 뷰, 컨트롤러의 구현까지 실시했습니다. 이번에는 모델을 사용하여 데이터를 표시합니다. 이것으로 모델, 뷰, 컨트롤러가 갖추어져 MVC가 완성됩니다. 【전제 스텝】 SAPUI5에서는 다음 모델을 사용할 수 있습니다. OData 모델 : 서버와 데이터를 교환하는 데 사용됩니다. 데이터는 서버 측에 있습니다. JSON 모델: 클라이언트측에서 가지는, JSON 형식의 데이터... mvcSAPUI5SAP 【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (5) 검색 기능 목록 위에 Search Field를 추가하고 입력한 내용과 일치하는 결과가 표시되는지 테스트합니다. 이번 포인트는 OPA5로 입력 조작을 하는 곳입니다. 참고할 자습서 튜토리얼을 보면서 Test Driven Development 체험 시리즈의 목차는 목록에서 특정 단어 ( "Bear") 검색 리스트에 1건만 표시된다 (좁힌 결과) 이번에는 WorklistJourney.js와 Worklist.... SAPUI5SAPTDDopa5피오리 【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (2) QUnit 이번에는 Test Driven(테스트를 먼저 쓰는 방식)으로 포맷터의 기능을 구현합니다. 튜토리얼을 보면서 Test Driven Development 체험 시리즈의 목차는 이번 테스트에서 사용하는 파일은 test/unit 폴더 아래에 저장됩니다. QUnit 테스트를 실행할 때 unitTests.qunit.html을 실행합니다. 여기에서 unitTests.qunit.js가 호출되고 AllTes... SAPUI5SAPTDDqunit피오리 【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (1) 개요 테스트 자동화에 대해 SDK의 에 대한 설명을 이해하기 쉽기 때문에 튜토리얼을 구현하면서 테스트 자동화의 개념과 방법을 소개합니다. QUnit에 대해서는 소개했으므로, 이 시리즈에서는 OPA5에 초점을 맞추고 싶습니다. 튜토리얼은 16단계가 있지만 아래 5개의 기사에 집계합니다. 1. 개요 참고 : 어플리케이션을 개발할 때는, 개발 사이클의 처음부터 테스트를 검토해 두는 것. 왜냐하면... ... SAPUI5피오리TDDSAP 【SAPUI5】라이브러리의 컴퍼넌트를 테스트하는 방법 다음과 같이 로직과 UI가 통합된 컴포넌트를 라이브러리에 정의합니다. 컴포넌트는 앱에 통합할 부품으로 사용하지만, 통합하기 전에 동작을 확인할 수 있도록 하고 싶습니다. 이를 위해서는 라이브러리에서 구성 요소를 호출하고 테스트할 수 있는 것이 바람직합니다. 간단한 예로서, 버튼을 표시하는 것만의 컴퍼넌트를 테스트해 보겠습니다. 버튼을 누르면 대화 상자가 나옵니다. QUnit은 로직 테스트용이... SAPUI5피오리맞춤 라이브러리SAP 【SAPUI5】라이브러리의 messagebundle을 어플리케이션으로 사용하는 방법 의 기사에서는, 라이브러리의 i18n 파일을 다른 앱에 넣는 방법을 소개했습니다. 더 좋은 방법이 있다는 것을 알았으므로 쓰고 싶습니다. 라이브러리 단위로 가지고 있는, 번역 가능한 텍스트의 파일입니다. 쓰기는 i18n과 동일합니다. 컨트롤러에서 호출하는 방법 컨트롤러 안에서만 사용하고 싶다면이 방법은 간단합니다. sap.ui.getCore().getLibraryResourceBundle("... SAPUI5피오리맞춤 라이브러리SAP 【SAPUI5】C_FIORDEV_20시험에서 UI5 이외에 눌러야 할 것 ## 소개 오늘, (C_FIORDEV_20) 시험에 합격할 수 있었습니다. SAPUI5의 개발의 기본에 대해서는 누르고 있을 생각이었습니다만, 시험에서는 Cloud Platform이나 HAT(mobile app의 개발 툴) 등 폭넓게 출제되어 꽤 빠듯한 합격이었습니다. 복습도 하지 않고, 기본적인 부분 이외로 누르면 좋았던 것에 대해 정리합니다. ## 출제 범위 다음은 C_FIORDEV_20... SAPUI5피오리SAP 【SAP Fiori】테크니컬 카탈로그, 비즈니스 카탈로그란? 둘 다 카탈로그를 가리키는 것처럼 보이지만 무엇이 다른가요? 앱의 경우 런치패드 카탈로그에 대해 지난 기사에서 썼습니다. 카탈로그에는 앱을 실행하기위한 타일, 대상 매핑 설정이 있습니다. 동일한 앱을 여러 카탈로그에서 사용하려는 경우(예: 구매 담당자 카탈로그 및 구매 관리자 카탈로그), 여러 카탈로그에서 동일하게 타일 및 대상 매핑을 설정하는 것은 번거롭습니다. 그래서 업무 영역마다 모든 ... SAPUI5피오리AuthorizationSAP 【SAPUI5】학습에 도움이 되는 동영상집과 개발에 도움이 되는 툴 3선 이쪽의 Youtube 동영상에서는 폭넓은 주제에 대해 접해지고 있어 「이런 기술이 있는가」라고 하는 식을 알 수 있는 좋은 콘텐츠라고 생각합니다. JSON 형식이 올바른지 확인하는 서비스입니다. JSON 데이터를 붙여넣고 "Validate JSON"버튼을 누르면 체크가 실행됩니다. 체크할 수 있는 것은 닫는 태그가 제대로 있는가 등 일반적인 내용으로, SAPUI5의 구문으로서 올바른가는 체크... SAPUI5SAPODataPostman피오리 【SAPUI5】XML 뷰에는 무엇을 어떤 순서로 쓰면 좋은가 문제 SAPUI5의 XML 뷰에 사용되는 태그에는 컨트롤을 나타내는 (대문자로 시작하는) 것과 그렇지 않은 (소문자로 시작하는) 태그가 있습니다. 다음 예제에서 <List>는 전자이고 <items>는 후자입니다. SAPUI5를 시작했을 무렵, <List>는 알겠습니다만, 그 아래에 <items>가 붙는다는 것은 어떤 법칙에 의한 것인가, 머리를 괴롭히고 있었습니다. 이 기사에서는 "XML 뷰에 무... SAPUI5피오리SAP 【SAPUI5】Uncaught ReferenceError: sap is not defined의 해결 방법 Fiori 스타일의 응용 프로그램을 만들고 index.html 파일에서 실행하면 다음과 같은 오류가 발생했습니다. Uncaught SyntaxError: Unexpected token : Uncaught ReferenceError: sap is not defined 스크립트에 일본어 코멘트가 있기 때문에 sap-ui-core.js 파일의 일부가 깨졌습니다. 이 때문에 후속의 라이브러리가 읽어... SAPUI5피오리SAP 【SAPUI5】OData(8) OData를 사용한 SAPUI5 어플리케이션의 만드는 방법 개발편-1 WebIDE를 사용하면 마법사에 따라 설정하는 것만으로 OData를 사용하여 응용 프로그램을 만들 수 있습니다. SAP Gateway Demo System의 OData를 사용하여 판매 오더 문서 목록을 표시합니다. (SAP Gateway Demo System에 대한 자세한 내용은 문서를 참조하십시오) 템플릿에서 앱 만들기 데이터 소스(OData) 지정 ---이 페이지에서는 여기까지--- 뷰 ... SAPUI5ODataSAP 【SAPUI5】OData(7) OData를 사용한 SAPUI5 어플리케이션을 만드는 방법 준비편 SAP Gateway Demo System의 OData 서비스를 사용하여 SAPUI5 앱을 만들고 싶습니다. 이번에는 준비편으로 SAP Gateway Demo System에 연결 설정을 합니다. 이번에 할 일 SAP Gateway Demo System에 사용자 등록 SAP Cloud Platform Cockpit에서 대상 설정 WebIDE에서 연결 확인 다음 페이지를 참조하여 SAP Gate... SAPUI5ODataSAP 【SAPUI5】OData(4) SAP에서 OData 서비스를 만드는 방법 환경편 SAP 백엔드(예: ERP)에서 데이터를 추출하는 OData 서비스를 만들 때 SAP Netweaver Gateway라는 서버가 필요합니다. 이 기사에서는 SAP Netweaver Gateway 개요와 SAP Netweaver Gateway 배포 패턴에 대해 설명합니다. SAP Netweaver Gateway는 SAP 시스템과 다른 시스템을 연결할 때 허브가 되는 시스템입니다. OData 서... SAPUI5ODataSAP 【SAPUI5】OData(3) OData의 Query options를 사용해 본다 의 기사에서, OData는 URI라는 식별자로 액세스하는 것, URI의 형식은 이하와 같이 되어 있는 것을 설명했습니다. 보다 인용 Query options는 자원에 대한 추가 조건을 지정하여 결과를 좁히거나 필요한 항목만 검색하는 데 사용됩니다. ※OData 관련의 투고 일람은 이하의 기사를 참조해 주세요. 아래에 쿼리 옵션의 유형과 사용 사례를 게재합니다. 브라우저에 사용 사례를 복사하여... SAPUI5ODataSAP 【SAPUI5】뷰 포함 지금까지는 한 뷰(App.view.xml)에 모든 콘텐츠를 작성했습니다. 콘텐츠가 늘어나고 복잡해지면 콘텐츠마다 별도의 보기로 하는 것이 깔끔합니다. 이번에는 다음과 같이 App.view.xml 콘텐츠의 일부를 다른 뷰로 잘라내고 뷰를 App.view.xml에 포함하는 것을 시도해 보겠습니다. 보기마다 컨트롤러가 필요하므로 컨트롤러도 신설합니다. 전제: 임베디드 뷰 만들기 컨트롤러 만들기 A... SAPUI5SAP 【SAPUI5】리스트 필터링 목록에 표시되는 레코드를 특정 조건으로 필터링하려는 경우 필터를 사용합니다. 목록에 검색 기준을 추가하여 제품 이름별로 결과를 좁힐 수 있습니다. 컨트롤러에 검색 메소드 추가 App.view.xml의 List 다음을 다음과 같이 변경합니다. 변경 전 변경 후 List의 시작 부분에 Toolbar를 놓고 그 안에 Title과 SearchField를 배치합니다. 그런데 Toolbar 안에는 어떤... SAPUI5SAP 【SAPUI5】Custom Formatter의 사용법 Custom Fomatter를 사용하면 데이터 내용에 맞는 표시 내용을 고유하게 정의할 수 있습니다. 예를 들어, 데이터의 값에 따른 구분을 표시하도록 할 수 있습니다. 상품의 재고 수에 따라 재고 상태를 텍스트로 표시해 봅니다. 재고가 100개 이상: "재고 초과" 10개 이상 99개 이하: "재고 적정" 9개 이하: "재고 부족" JSON 모델에 항목 추가 formatter.js를 신규 ... SAPUI5SAP 【SAPUI5】Data Type을 지정하여 표시 형식을 정돈한다 문서에서 여러 항목을 목록으로 표시했습니다. 결과를 살펴보면 금액에는 여러 통화가 있지만 모두 정수로 표시됩니다. 본래, EUR이면 소수점 이하 2자리까지 표시되어야 합니다. 이 때 컨트롤의 type이라는 속성에 "통화"라는 데이터 형식을 지정하면 통화에 맞는 형식으로 금액을 표시할 수 있습니다. 이라는 클래스에 다양한 데이터형이 준비되어 있으므로, 이번에는 그것들을 사용해 데이터 형식을 정... SAPUI5SAP 【SAPUI5】Aggregation binding으로 복수 아이템을 표시 보기에 데이터를 표시하기 위해 지금까지는 단일 데이터를 뷰에 묶었습니다. 이번에는 여러 데이터를 표 형식으로 표시하는 방법을 소개합니다. 그 전에 데이터 바인딩 유형을 정리해 둡니다. 데이터 바인딩에는 다음 세 가지 유형이 있습니다. Property binding 컨트롤의 속성에 모델 데이터를 직접 설정하는 것입니다. Context binding(또는 Element binding) 컨트롤에 ... SAPUI5SAP 【SAPUI5】Page와 Panel 컨트롤로 보기 좋게 이번에는 Page와 Panel이라는 두 가지 컨트롤을 사용하여 앱의 모양을 향상시킵니다. 컨트롤에 대해서는 기본 앱은 다음과 같은 앱이 이렇게 됩니다. 대부분 Fiori다운 외형이 된 것은 아닐까요. 1. 외부 테두리 만들기 먼저 App.view의 구조는 다음과 같습니다. 외부 App, pages라는 태그는 페이지 전환을 위해 존재합니다. 이번 경우에는 있어도 없어도 외형은 변하지 않습니다.... SAPUI5SAP 【SAPUI5】컨트롤과 컨트롤러는 무엇이 다른가? 의 기사로, Shellcontrol에 대해 소개했습니다만, 문득 「원래 컨트롤은 무엇? 에 의하면, 화면의 파트의 외형이나 동작을 정의하기 위해서 사용되는 것이라고 합니다. 예를 들어, 화면에 버튼을 표시하기 위해 다음과 같은 소스를 작성했습니다. 여기에서 사용되는 Button은 Control의 일종입니다. 한편 컨트롤러는 뷰를 조작하기 위한 로직이었지요. 의 API 참조를 살펴 보겠습니다.... SAPUI5SAP 【SAPUI5】Shell Control로 디바이스에 맞추어 폭을 조정 지금까지 만든 어플리케이션은 PC에서의 표시만을 상정하고 있었습니다. 이 때문에 장치의 폭이 바뀌면 문자가 작아서 읽을 수 없었습니다. ※주 Fiori Launchpad에서 실행하는 앱의 경우 Launchpad에 Shell bar가 포함되어 있으므로 앱 측에 Shell Control을 넣을 필요가 없습니다. 이 기사는 독립형 앱을 가정합니다. PC로 표시하는 경우 iPoneX로 표시한 경우 ... SAPUI5반응형SAP 【SAPUI5】Component.js와 manifest.json 그래서 이번에는 Component.js와 manifest.json의 역할을 정리합니다. 까지 작성한 어플리케이션에서는, 폴더 구성은 다음과 같이 되어 있었습니다. Component.js와 manifest.json은 없어도 움직였습니다. Component.js와 manifest.json은 index.html에서 기능을 세분화하고 독립적으로 만든 것으로 이해했습니다. 그렇다면 구체적으로 어떤 역... SAPUI5SAP 【SAPUI5】Bootstrap이란? Bootstrap은 일반적으로 다음과 같이 정의됩니다. 전원을 켠 후 또는 리셋 후에 컴퓨터의 메모리에 기본 소프트웨어를 로드하는 것을 말합니다. 출처 : 무료 백과 사전 "Wikipedia (Wikipedia)" SAPUI5는 페이지가 열릴 때 처음에 SAPUI5 라이브러리, 테마 등을 로드하는 스크립트를 말합니다. SAPUI5의 어플리케이션으로서 움직이기 위해서 필수이군요. (Bootst... SAPUI5SAP 【SAPUI5】Hello World SAPUI5는 SAP 웹 화면 개발을 위한 도구로 HTML5, Javascript, CSS를 기반으로 합니다. 이 기사에서는 SAPUI5에 대한 입문으로서 개발자 계정 취득부터 "Hello world"의 실행 방법까지를 설명합니다. 덧붙여 이 기사는 openSAP의 아래 코스의 내용을 참고로 하고 있습니다. 1. SAP Cloud Platform Cockpit 개발자 계정 얻기 2. Web ... SAPUI5SAP
【SAPUI5】입문편의 기사 정리 SAPUI5의 입문으로서 이하 6개의 기사를 작성했습니다. 여기에서는 각 기사에의 링크와 6회를 마친 시점에서의 소스를 게재합니다. ※입문편으로서 이하의 기사를 추가했습니다. 입문편을 마친 분에게 : 도 있기 때문에, 좋으면 부디. 폴더 구성은 다음과 같습니다. index.html Component.js manifest.json App.view.xml App.controller.js Pric... mvcSAPUI5SAP 【SAPUI5】MVC를 완성하자 전회의 기사 ( )에서는 뷰, 컨트롤러의 구현까지 실시했습니다. 이번에는 모델을 사용하여 데이터를 표시합니다. 이것으로 모델, 뷰, 컨트롤러가 갖추어져 MVC가 완성됩니다. 【전제 스텝】 SAPUI5에서는 다음 모델을 사용할 수 있습니다. OData 모델 : 서버와 데이터를 교환하는 데 사용됩니다. 데이터는 서버 측에 있습니다. JSON 모델: 클라이언트측에서 가지는, JSON 형식의 데이터... mvcSAPUI5SAP 【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (5) 검색 기능 목록 위에 Search Field를 추가하고 입력한 내용과 일치하는 결과가 표시되는지 테스트합니다. 이번 포인트는 OPA5로 입력 조작을 하는 곳입니다. 참고할 자습서 튜토리얼을 보면서 Test Driven Development 체험 시리즈의 목차는 목록에서 특정 단어 ( "Bear") 검색 리스트에 1건만 표시된다 (좁힌 결과) 이번에는 WorklistJourney.js와 Worklist.... SAPUI5SAPTDDopa5피오리 【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (2) QUnit 이번에는 Test Driven(테스트를 먼저 쓰는 방식)으로 포맷터의 기능을 구현합니다. 튜토리얼을 보면서 Test Driven Development 체험 시리즈의 목차는 이번 테스트에서 사용하는 파일은 test/unit 폴더 아래에 저장됩니다. QUnit 테스트를 실행할 때 unitTests.qunit.html을 실행합니다. 여기에서 unitTests.qunit.js가 호출되고 AllTes... SAPUI5SAPTDDqunit피오리 【SAPUI5】튜토리얼을 보면서 Test Driven Development를 체험한다 (1) 개요 테스트 자동화에 대해 SDK의 에 대한 설명을 이해하기 쉽기 때문에 튜토리얼을 구현하면서 테스트 자동화의 개념과 방법을 소개합니다. QUnit에 대해서는 소개했으므로, 이 시리즈에서는 OPA5에 초점을 맞추고 싶습니다. 튜토리얼은 16단계가 있지만 아래 5개의 기사에 집계합니다. 1. 개요 참고 : 어플리케이션을 개발할 때는, 개발 사이클의 처음부터 테스트를 검토해 두는 것. 왜냐하면... ... SAPUI5피오리TDDSAP 【SAPUI5】라이브러리의 컴퍼넌트를 테스트하는 방법 다음과 같이 로직과 UI가 통합된 컴포넌트를 라이브러리에 정의합니다. 컴포넌트는 앱에 통합할 부품으로 사용하지만, 통합하기 전에 동작을 확인할 수 있도록 하고 싶습니다. 이를 위해서는 라이브러리에서 구성 요소를 호출하고 테스트할 수 있는 것이 바람직합니다. 간단한 예로서, 버튼을 표시하는 것만의 컴퍼넌트를 테스트해 보겠습니다. 버튼을 누르면 대화 상자가 나옵니다. QUnit은 로직 테스트용이... SAPUI5피오리맞춤 라이브러리SAP 【SAPUI5】라이브러리의 messagebundle을 어플리케이션으로 사용하는 방법 의 기사에서는, 라이브러리의 i18n 파일을 다른 앱에 넣는 방법을 소개했습니다. 더 좋은 방법이 있다는 것을 알았으므로 쓰고 싶습니다. 라이브러리 단위로 가지고 있는, 번역 가능한 텍스트의 파일입니다. 쓰기는 i18n과 동일합니다. 컨트롤러에서 호출하는 방법 컨트롤러 안에서만 사용하고 싶다면이 방법은 간단합니다. sap.ui.getCore().getLibraryResourceBundle("... SAPUI5피오리맞춤 라이브러리SAP 【SAPUI5】C_FIORDEV_20시험에서 UI5 이외에 눌러야 할 것 ## 소개 오늘, (C_FIORDEV_20) 시험에 합격할 수 있었습니다. SAPUI5의 개발의 기본에 대해서는 누르고 있을 생각이었습니다만, 시험에서는 Cloud Platform이나 HAT(mobile app의 개발 툴) 등 폭넓게 출제되어 꽤 빠듯한 합격이었습니다. 복습도 하지 않고, 기본적인 부분 이외로 누르면 좋았던 것에 대해 정리합니다. ## 출제 범위 다음은 C_FIORDEV_20... SAPUI5피오리SAP 【SAP Fiori】테크니컬 카탈로그, 비즈니스 카탈로그란? 둘 다 카탈로그를 가리키는 것처럼 보이지만 무엇이 다른가요? 앱의 경우 런치패드 카탈로그에 대해 지난 기사에서 썼습니다. 카탈로그에는 앱을 실행하기위한 타일, 대상 매핑 설정이 있습니다. 동일한 앱을 여러 카탈로그에서 사용하려는 경우(예: 구매 담당자 카탈로그 및 구매 관리자 카탈로그), 여러 카탈로그에서 동일하게 타일 및 대상 매핑을 설정하는 것은 번거롭습니다. 그래서 업무 영역마다 모든 ... SAPUI5피오리AuthorizationSAP 【SAPUI5】학습에 도움이 되는 동영상집과 개발에 도움이 되는 툴 3선 이쪽의 Youtube 동영상에서는 폭넓은 주제에 대해 접해지고 있어 「이런 기술이 있는가」라고 하는 식을 알 수 있는 좋은 콘텐츠라고 생각합니다. JSON 형식이 올바른지 확인하는 서비스입니다. JSON 데이터를 붙여넣고 "Validate JSON"버튼을 누르면 체크가 실행됩니다. 체크할 수 있는 것은 닫는 태그가 제대로 있는가 등 일반적인 내용으로, SAPUI5의 구문으로서 올바른가는 체크... SAPUI5SAPODataPostman피오리 【SAPUI5】XML 뷰에는 무엇을 어떤 순서로 쓰면 좋은가 문제 SAPUI5의 XML 뷰에 사용되는 태그에는 컨트롤을 나타내는 (대문자로 시작하는) 것과 그렇지 않은 (소문자로 시작하는) 태그가 있습니다. 다음 예제에서 <List>는 전자이고 <items>는 후자입니다. SAPUI5를 시작했을 무렵, <List>는 알겠습니다만, 그 아래에 <items>가 붙는다는 것은 어떤 법칙에 의한 것인가, 머리를 괴롭히고 있었습니다. 이 기사에서는 "XML 뷰에 무... SAPUI5피오리SAP 【SAPUI5】Uncaught ReferenceError: sap is not defined의 해결 방법 Fiori 스타일의 응용 프로그램을 만들고 index.html 파일에서 실행하면 다음과 같은 오류가 발생했습니다. Uncaught SyntaxError: Unexpected token : Uncaught ReferenceError: sap is not defined 스크립트에 일본어 코멘트가 있기 때문에 sap-ui-core.js 파일의 일부가 깨졌습니다. 이 때문에 후속의 라이브러리가 읽어... SAPUI5피오리SAP 【SAPUI5】OData(8) OData를 사용한 SAPUI5 어플리케이션의 만드는 방법 개발편-1 WebIDE를 사용하면 마법사에 따라 설정하는 것만으로 OData를 사용하여 응용 프로그램을 만들 수 있습니다. SAP Gateway Demo System의 OData를 사용하여 판매 오더 문서 목록을 표시합니다. (SAP Gateway Demo System에 대한 자세한 내용은 문서를 참조하십시오) 템플릿에서 앱 만들기 데이터 소스(OData) 지정 ---이 페이지에서는 여기까지--- 뷰 ... SAPUI5ODataSAP 【SAPUI5】OData(7) OData를 사용한 SAPUI5 어플리케이션을 만드는 방법 준비편 SAP Gateway Demo System의 OData 서비스를 사용하여 SAPUI5 앱을 만들고 싶습니다. 이번에는 준비편으로 SAP Gateway Demo System에 연결 설정을 합니다. 이번에 할 일 SAP Gateway Demo System에 사용자 등록 SAP Cloud Platform Cockpit에서 대상 설정 WebIDE에서 연결 확인 다음 페이지를 참조하여 SAP Gate... SAPUI5ODataSAP 【SAPUI5】OData(4) SAP에서 OData 서비스를 만드는 방법 환경편 SAP 백엔드(예: ERP)에서 데이터를 추출하는 OData 서비스를 만들 때 SAP Netweaver Gateway라는 서버가 필요합니다. 이 기사에서는 SAP Netweaver Gateway 개요와 SAP Netweaver Gateway 배포 패턴에 대해 설명합니다. SAP Netweaver Gateway는 SAP 시스템과 다른 시스템을 연결할 때 허브가 되는 시스템입니다. OData 서... SAPUI5ODataSAP 【SAPUI5】OData(3) OData의 Query options를 사용해 본다 의 기사에서, OData는 URI라는 식별자로 액세스하는 것, URI의 형식은 이하와 같이 되어 있는 것을 설명했습니다. 보다 인용 Query options는 자원에 대한 추가 조건을 지정하여 결과를 좁히거나 필요한 항목만 검색하는 데 사용됩니다. ※OData 관련의 투고 일람은 이하의 기사를 참조해 주세요. 아래에 쿼리 옵션의 유형과 사용 사례를 게재합니다. 브라우저에 사용 사례를 복사하여... SAPUI5ODataSAP 【SAPUI5】뷰 포함 지금까지는 한 뷰(App.view.xml)에 모든 콘텐츠를 작성했습니다. 콘텐츠가 늘어나고 복잡해지면 콘텐츠마다 별도의 보기로 하는 것이 깔끔합니다. 이번에는 다음과 같이 App.view.xml 콘텐츠의 일부를 다른 뷰로 잘라내고 뷰를 App.view.xml에 포함하는 것을 시도해 보겠습니다. 보기마다 컨트롤러가 필요하므로 컨트롤러도 신설합니다. 전제: 임베디드 뷰 만들기 컨트롤러 만들기 A... SAPUI5SAP 【SAPUI5】리스트 필터링 목록에 표시되는 레코드를 특정 조건으로 필터링하려는 경우 필터를 사용합니다. 목록에 검색 기준을 추가하여 제품 이름별로 결과를 좁힐 수 있습니다. 컨트롤러에 검색 메소드 추가 App.view.xml의 List 다음을 다음과 같이 변경합니다. 변경 전 변경 후 List의 시작 부분에 Toolbar를 놓고 그 안에 Title과 SearchField를 배치합니다. 그런데 Toolbar 안에는 어떤... SAPUI5SAP 【SAPUI5】Custom Formatter의 사용법 Custom Fomatter를 사용하면 데이터 내용에 맞는 표시 내용을 고유하게 정의할 수 있습니다. 예를 들어, 데이터의 값에 따른 구분을 표시하도록 할 수 있습니다. 상품의 재고 수에 따라 재고 상태를 텍스트로 표시해 봅니다. 재고가 100개 이상: "재고 초과" 10개 이상 99개 이하: "재고 적정" 9개 이하: "재고 부족" JSON 모델에 항목 추가 formatter.js를 신규 ... SAPUI5SAP 【SAPUI5】Data Type을 지정하여 표시 형식을 정돈한다 문서에서 여러 항목을 목록으로 표시했습니다. 결과를 살펴보면 금액에는 여러 통화가 있지만 모두 정수로 표시됩니다. 본래, EUR이면 소수점 이하 2자리까지 표시되어야 합니다. 이 때 컨트롤의 type이라는 속성에 "통화"라는 데이터 형식을 지정하면 통화에 맞는 형식으로 금액을 표시할 수 있습니다. 이라는 클래스에 다양한 데이터형이 준비되어 있으므로, 이번에는 그것들을 사용해 데이터 형식을 정... SAPUI5SAP 【SAPUI5】Aggregation binding으로 복수 아이템을 표시 보기에 데이터를 표시하기 위해 지금까지는 단일 데이터를 뷰에 묶었습니다. 이번에는 여러 데이터를 표 형식으로 표시하는 방법을 소개합니다. 그 전에 데이터 바인딩 유형을 정리해 둡니다. 데이터 바인딩에는 다음 세 가지 유형이 있습니다. Property binding 컨트롤의 속성에 모델 데이터를 직접 설정하는 것입니다. Context binding(또는 Element binding) 컨트롤에 ... SAPUI5SAP 【SAPUI5】Page와 Panel 컨트롤로 보기 좋게 이번에는 Page와 Panel이라는 두 가지 컨트롤을 사용하여 앱의 모양을 향상시킵니다. 컨트롤에 대해서는 기본 앱은 다음과 같은 앱이 이렇게 됩니다. 대부분 Fiori다운 외형이 된 것은 아닐까요. 1. 외부 테두리 만들기 먼저 App.view의 구조는 다음과 같습니다. 외부 App, pages라는 태그는 페이지 전환을 위해 존재합니다. 이번 경우에는 있어도 없어도 외형은 변하지 않습니다.... SAPUI5SAP 【SAPUI5】컨트롤과 컨트롤러는 무엇이 다른가? 의 기사로, Shellcontrol에 대해 소개했습니다만, 문득 「원래 컨트롤은 무엇? 에 의하면, 화면의 파트의 외형이나 동작을 정의하기 위해서 사용되는 것이라고 합니다. 예를 들어, 화면에 버튼을 표시하기 위해 다음과 같은 소스를 작성했습니다. 여기에서 사용되는 Button은 Control의 일종입니다. 한편 컨트롤러는 뷰를 조작하기 위한 로직이었지요. 의 API 참조를 살펴 보겠습니다.... SAPUI5SAP 【SAPUI5】Shell Control로 디바이스에 맞추어 폭을 조정 지금까지 만든 어플리케이션은 PC에서의 표시만을 상정하고 있었습니다. 이 때문에 장치의 폭이 바뀌면 문자가 작아서 읽을 수 없었습니다. ※주 Fiori Launchpad에서 실행하는 앱의 경우 Launchpad에 Shell bar가 포함되어 있으므로 앱 측에 Shell Control을 넣을 필요가 없습니다. 이 기사는 독립형 앱을 가정합니다. PC로 표시하는 경우 iPoneX로 표시한 경우 ... SAPUI5반응형SAP 【SAPUI5】Component.js와 manifest.json 그래서 이번에는 Component.js와 manifest.json의 역할을 정리합니다. 까지 작성한 어플리케이션에서는, 폴더 구성은 다음과 같이 되어 있었습니다. Component.js와 manifest.json은 없어도 움직였습니다. Component.js와 manifest.json은 index.html에서 기능을 세분화하고 독립적으로 만든 것으로 이해했습니다. 그렇다면 구체적으로 어떤 역... SAPUI5SAP 【SAPUI5】Bootstrap이란? Bootstrap은 일반적으로 다음과 같이 정의됩니다. 전원을 켠 후 또는 리셋 후에 컴퓨터의 메모리에 기본 소프트웨어를 로드하는 것을 말합니다. 출처 : 무료 백과 사전 "Wikipedia (Wikipedia)" SAPUI5는 페이지가 열릴 때 처음에 SAPUI5 라이브러리, 테마 등을 로드하는 스크립트를 말합니다. SAPUI5의 어플리케이션으로서 움직이기 위해서 필수이군요. (Bootst... SAPUI5SAP 【SAPUI5】Hello World SAPUI5는 SAP 웹 화면 개발을 위한 도구로 HTML5, Javascript, CSS를 기반으로 합니다. 이 기사에서는 SAPUI5에 대한 입문으로서 개발자 계정 취득부터 "Hello world"의 실행 방법까지를 설명합니다. 덧붙여 이 기사는 openSAP의 아래 코스의 내용을 참고로 하고 있습니다. 1. SAP Cloud Platform Cockpit 개발자 계정 얻기 2. Web ... SAPUI5SAP