안녕하세요! SAP/UI5 썸네일형 리스트형 [ SAPUI5 ] Flexible Column Layout App - Adding a Detail Page ○ 데이터의 상세 정보를 확인하기 위해 해당 정보를 클릭하면 앱 사이즈가 작아지며 상세 페이지로 이동한다. - [ Detail.view.xml ] - [ App.view.xml ] ... 1) 'midColumnPages'를 'FlexibleColumnLayout' 하위 페이지로 추가한다. 2) 'id'는 'detailView'로 지정해두고, [ manifest.json ]에 설정해 두었던 'rootView'로 경로 이동이 가능토록 view 설정 - [ List.view.xml ] ... ... 1) 'press' 이벤트 핸들러를 추가한다. 2) 컨트롤러에서 기능이 구현될 매개로 'press' 형식을 '.onListItemPress'로 지정해둔다. - [ List.controller.js ] sap.ui.. 더보기 [ SAPUI5 ] Flexible Column Layout App / Using Dynamic Page for the List View ○ 동적 페이지 생성 및 검색을 통해 원하는 데이터 화면에 출력하기 - [ manifest.json ] ... }, "dependencies" : { "minUI5Version": "1.60.0", "libs": { "sap.ui.core": {}, "sap.m": {}, "sap.f": {} } }, ... 1) 의존 요소 중 하나에 'sap.m' 라이브러리를 추가한다. 2) sap.m * 데스크톱 브라우저뿐만 아니라 터치가 가능한 모바일 등에서도 사용할 수 있는 반응현 컨트롤이다. * 기본 UI5 컨트롤 라이브러리이다. - [ index.html ] ... ... - [ Component.js ] sap.ui.define([ 'sap/ui/model/json/JSONModel' ], function(.. 더보기 [ SAPUI5 ] Flexible Column Layout App / Creating an Empty Flexible Column Layout ○ 루트 뷰 설정을 통해 화면의 기본 설정을 해둔다. - [ manifesr.json ] ... }, "sap.ui5": { "rootView": { "viewName": "sap.ui.demo.fiori2.view.App", "type": "XML", "async": true, "id": "fcl" }, "dependencies": { "minUI5Version": "1.60.0", "libs": { "sap.ui.core": {}, "sap.f": {} } }, ... } 1) viewName : [ App.view.xml ]을 'rootView'로 설정한다. 2) type : view의 타입은 'XML'을 사용할 것을 입력한다. 3) async * 동기식으로 호출함을 'true'로 설정한다. * 비.. 더보기 [ SAPUI5 ] /OData Worklist App - Creating initial App ○ 워크리스트 앱을 실행해보자. - 샘플을 다운받아 폴더를 실행시키면 이런 오류가 뜬다. - 출력하고자 하는 데이터가 너무 많아서 그런지는 모르겠지만 다음 파트 샘플을 다운받아 봤는데 여전히 안 된다... - Home Page 1) 재고 단위 수를 포함하는 제품 테이블 표시한다. 2) 테이블의 제목은 사용 가능한 항목 수 보여준다. 3) 테이블의 머릿글 도구 모음에 있는 검색 필드 사용하면 이름으로 제품 검색이 가능해진다. 4) 테이블에 있는 각 제품을 클릭하면 제품의 상세 정보 보여주는 페이지로 이동한다. - Data 1) [ mockserver.js ]를 통해 mockserver 구성해 네트워크 연결 없이 코드 실행이 가능하다. 2) mockserver 및 mockdata로 앱 실행하기 위해 브라우저.. 더보기 [ SAPUI5 ] / OData V2 Mock Server - Calling a function Import ○ 시간 설정을 통해 이미 지나간 스케줄은 화면에서 제외하고 이제 남은 스케줄만 보여주기 - [ metadata.xml ] - [ App.view.xml ] 1) 보여주고자 하는 리스트의 경로를 설정한다. 2) '{/FindUpcomingMeetups}'로 수정해 사용하고자 하는 JSON 데이터로 변경한다. - [ mockserver.js ] 1) jQuery 종속성 추가하자. What is the 'jQuery'? jQuery ○ 제이쿼리 - 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 - 문서 객체 모델(DOM)과 이벤트에 관한 처리 손쉽게 구현 가능 - Ajax pythonchoboman.tistory.com 2) aRequests : 'getR.. 더보기 [ SAPUI5 ] / OData V2 Mock Server - Handling Custom URL Parameters ○ 사용자 정의 URL 구현하기 - [ mockserver.js ] 1) fnCustom * oXhr : 'oXhr'을 파라미터로 가지는 'oEvent'로 인스턴스화한다. * 'oXhr'의 값을 가지며, 'first' 문자열을 가지는 oXhr의 url 주소의 위칫값이 '-1'보다 큰 값일 때, 'oFilteredData'를 파라미터로 가지며, 3번 인덱스에서 100개 요소 제거한 결괏값을 가지는 'oEvent' 값을 도출한다. 2) attachAfter : 'GET' 요청 사용, 위에서 설정해둔 'fnCustom' 콜백함수에 연결, mockdata 'Meetups' entity 집합이다. * 실제 XHR 객체와 애플리케이션에 반환할 mockdata 포함한다. How to use 'attachAfter'?.. 더보기 [ OData ] OData V2 Mock Server - Creating a Mock Server to Simulate Data ○ 테스트 서버에서 모의 데이터 정보 확인하기 - [ mockServer.html ] 1) mockdata로 테스트 모드에서 앱 실행 2) initMockServer : 애플리케이션 구성요소가 인스턴스화되기 전에 필요한 설정 단계 수행 3) 실제 서비스로 가는 모든 요청을 확인할 수 있고, 앱 시작 시 모의 서버로 로컬에서 처리 가능 4) 모의 서버는 코드의 다른 곳에서 호출할 필요가 없음 * 'sap.ui.require'를 사용해 전역 네임스페이스를 정의하지 않음 * 종속성을 비동기식으로 로드 - [ initMockServer.js ] 1) webapp/localService 폴더에 있는 mockserver.js 파일에 대한 종속성 로드 * 로컬 mockServer 포함돼 있음 2) 응용 프로그램 구성.. 더보기 [ SAPUI5 ] Navigation and Routing - last ○ 라우터 일치 여부 확인하기 - [App.controller.js] 1) attachRouteMatched : 이벤트 핸들러에서 이벤트 매개변수과 일치하는 경로의 이름을 경정 및 타임스탬프에 기록 2) sRouteName : 'name'을 파라미터로 두는 'oEvent'로 인슨턴스화 - Log에 설정해 둔 문구가 잘 나와있다!! 더보기 이전 1 2 3 4 5 6 ··· 11 다음
