안녕하세요! 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 ] What is the 'getParent'? getParent getParent - 'getParent'에서 반환되는 부모 요소는 데이터 바인딩, 무효화, 렌더링 등에 사용된다. - Dialog가 내부적으로 숨겨진 VerticalLayout을 사용해 콘텐츠를 저장한다고 가정해보자. Dialog (API parent) \__ VerticalLayout (hidden composite part) \__ Text (API child) - 'Dialog.prototype.addContentAPI'를 호출하여 일부 콘텐츠를 추가하면 다음과 같은 결괏값이 도출된다. oDialog.addContent(oText); console.log(oText.getParent() === oDialog);//false console.log(oText.getParent() i.. 더보기 [ 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 ] What is the 'i18n'? i18n i18n - Internationalization - 각종 언어에 따라 메뉴의 컨텐츠 동적으로 매핑 - i18n 파일은 OData Model 중에 하나임 - OData Model에서 View에 필요한 내용 매핑 1) 브라우저 언어 설정에 따라 언어를 자동으로 매핑 2) multiple parameter 사용해 여러 개의 Text 매핑 * 아래와 같이 중괄호를 이용해 배열을 지정 // i18n appDescription = sample {0} {1} {2} {3} firstLabel = First secoindLabel = Second thirdLabel = Third fourthLabel = Fourth * 'id'를 'oLabel'로 지정 // view * 지정해뒀던 'oLabel'을 'byI.. 더보기 [ SAPUI5 ] What is the 'OData'? OData OData - Entity들의 집합 1) Entity : 전달하고자 하는 정보의기본 정보(타입, 구성 등) 2) Entity를통해 API 호출 시, 어떤 데이터 정보로 API가 구성돼 있는지와 활용하는 밥법들을 구성 가능 - 단순하고 표준적인 방식으로 쿼리 사용 가능 - Restful API 생성 및 사용 가능한 개방형 프토토콜 What is the 'RESTful API'? API(Application Programming Interface) API(Application Programming Interface) - 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙 정의 - REST가 클라이언트-서버 상호작용을 최적화하기 때문에 효율적으 pythonchoboman.tistory.com .. 더보기 [ Concept ] What is the 'RESTful API'? API(Application Programming Interface) API(Application Programming Interface) - 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙 정의 - REST가 클라이언트-서버 상호작용을 최적화하기 때문에 효율적으로 크기 조정 가능 - 무상태는 서버거 과거 클라이언트 요청 정보 유지가 불필요하기 때문에 서버 로드 제거 - 잘 관리된 캐싱은 일부 클라이언트-서버 간의 상오작용을 부분적으로 또는 완전히 제거 - 이로써 통신 병목 현상을 발생시키지 않으므로 확장성 확보하게 됨 REST(Representational State Transfer) REST(Representational State Transfer) - API 작동 방식에 대한 조건을 부과하.. 더보기 [ SAPUI5 ] /OData Worklist App - Creating initial App ○ 워크리스트 앱을 실행해보자. - 샘플을 다운받아 폴더를 실행시키면 이런 오류가 뜬다. - 출력하고자 하는 데이터가 너무 많아서 그런지는 모르겠지만 다음 파트 샘플을 다운받아 봤는데 여전히 안 된다... - Home Page 1) 재고 단위 수를 포함하는 제품 테이블 표시한다. 2) 테이블의 제목은 사용 가능한 항목 수 보여준다. 3) 테이블의 머릿글 도구 모음에 있는 검색 필드 사용하면 이름으로 제품 검색이 가능해진다. 4) 테이블에 있는 각 제품을 클릭하면 제품의 상세 정보 보여주는 페이지로 이동한다. - Data 1) [ mockserver.js ]를 통해 mockserver 구성해 네트워크 연결 없이 코드 실행이 가능하다. 2) mockserver 및 mockdata로 앱 실행하기 위해 브라우저.. 더보기 이전 1 2 3 4 5 6 7 8 ··· 13 다음
