안녕하세요! SAP 썸네일형 리스트형 [ 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에 설정해 둔 문구가 잘 나와있다!! 더보기 [ SAPUI5 ] Navigation and Routing - 16 ○ 유효하지 않은 해시값이 불러졌을 때 오류 문구 확인하기 - [App.controller.js] 1) Log.setLevel(Log.level.INFO) : 'INFO' 레벨의 Log 사용(?) 2) attachByPassed * oRouter : getRouter() 메서드 사용 * sHash : 'hash'를 파라미터로 갖는 'oEvent'로 인스턴스화 - F12를 눌르고, 옳지 않은 경로에 접근하게 되면 Log에 설정해둔 텍스트를 확인할 수 있다! Next Stage : Navigation and Routing - last SAPUI5 / Navigation and Routing - last ○ 라우터 일치 여부 확인하기 - [App.controller.js] 1) attachRouteMatche.. 더보기 [ SAPUI5 ] Navigation and Routing - 15 ○ 직원 테이블에서 직원 상세 이력 사항 확인하는 페이지로 이동하기 - [EmployeeOverviewContent.view.xml] 1) 'itemPress' 이벤트 핸들러 등록 2) 항목 선택 및 navigation을 작동시킬 수 있도록 'ColumListItem' 타입을 'Active'로 설정 - [EmployeeOverviewContent.controller.js] 1) oItem : 'listItem' 파라미터를 매개로 하는 'oEvent'로 인스턴스화 2) oCtx : 선택한 항목을 바인딩 컨텍스트에서 읽도록 하는 'oItem'으로 설정 3) employeeId : 'EmployeeID' 속성을 가지는 'oCtx' 값으로 지정 4) ?query : 'Info'로 초기화 5) 직원 테이블에서 각.. 더보기 [ SAPUI5 ] Navigation and Routing - 14 ○ 정렬 대화상자의 북마크 설정하기 - [EmployeeOverviewContent.controller.js] 1) showDialog : 딥 링크가 있는 페이지로 이동할 때 대화상자가 직접 열리는지 여부 제어하는 쿼리 매개변수 * showDialog가 '1'로 설정되면 대화상자 'open' 2) '?query' 값이 내장돼 있는 '_oRouterArgs' 배열함수에 'showDialog' 매개변수를 호출 3) '_oRouterArgs' 값을 기준으로 두는 경로를 가지는 'employeeOverview' view 화면에 출력 4) delete * viewSettingsDialog의 'confirm' 및 'cancel' 이벤트 핸들러에서 * 'navTo() 호출하기 전에 'this._oRouterArgs[.. 더보기 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음