안녕하세요! UI5 썸네일형 리스트형 [ 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.. 더보기 [ Javascript ] How to use 'json.stringify()'? JSON(JavaScript Object Notation) JSON(JavaScript Object Notation) - 데이터를 문자열의 형태로 나타내기 위해 사용 - 네트워크를 통해 서로 다른 시스템들이 데이터를 주고 받을 때 사용 json.parse() JSON.parse() - JSON 문자열을 인자로 받아 결괏값 JavaScript 객체로 변환 1) JSON 문자열을 'aaa'라는 변수에 저장 * JSON 문자열에서는 키(name, age, married, jobs)를 나타낼 때 쌍따옴표 반드시 사용 const aaa = '{ "name" : "derrik", "age" : 30, "married" : false, "jobs" : "Pythonchobo" }'; 2) 'JSON.parse()' .. 더보기 [ 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'?.. 더보기 [ SAPUI5 ] How to use 'attachAfter()'? attachAfter(sHttpMethod, fnCallback, sEntitySet) attachAfter(sHttpMethod, fnCallback, sEntitySet) shttpMethod string - HTTP Method에 따른 이벤트 종류 fnCallback function - 콜백함수는 request 유형에 따라 매개변수가 있는 이벤트 노출 - oXhr : 요청 객체 - oEvent.getParameters() : 요청에 따라 매개변수 나열 - oFilteredData : response에서 반환될 mockdata 항목 - oEntry : response으로 반환될 mockdata 항목 sEntitySet string - (선택사항) entity 집합 이름 OData V2 Mock Ser.. 더보기 [ 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) 직원 테이블에서 각.. 더보기 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음
