안녕하세요! SAP/UI5 썸네일형 리스트형 [ SAPUI5 ] MessageBox에 대한 기본 이해 이번주는 다시 SAPUI5 학습을 이어서 진행한다. SAP 공식 사이트의 도큐먼테이션을 참고해 전에 했던 코드 소스에 대해 복습하는 시간을 가질 것이다. 다만 좀 더 구체적이고 세분화하는 것보다는 기능이 작동하기까지의 흐름에 익숙해지는 연습을 하는 시간이라고 생각하며 진행한다. 간간이 화면에 구현되지 않는 이유를 좀 더 정밀히 분석하고 기능 구현에 초점을 맞춰서 해보자! MessageBox MessageBox는 다양한 유형의 Message를 User에게 표시하기 위한특수 대화 상자 Control이다. sap.m.MessageBox Control은 sap.m.Dialog와 동일한 반응형 동작을 가진다. 뿐만 아니라, 세부사항 표시 옵션 기능을 사용할 수 있게 해준다. Message는 Error, Warni.. 더보기 [ SAPUI5 ] JSONModel Table Binding in SAPUI5 직원 정보 테이블 생성하기 SAP 공식 홈페이지에 있는 UI5 관련 도큐먼테이션을 참고하여 개인 스터디를 진행하는 도중 문득 한 가지 생각이 스쳐지나 갔다. 그 생각인 즉슨, 무작정 공식 문서를 따라하는 거보다는 가이드라인을 참고하여 나만의 예제들을 만들면서 기능을 구현해 보자는 것이다. 물론 아직까지 내가 할 수 있는 영역은 아주 협소할 것임을 알기에, 결국에는 여러 예시들을 종합해서 모방하는 것에 그칠 수도 있다. 하지만 view와 controller 간의 연결 과정과 data를 binding하는 절차에 대한 이해도가 현저히 낮다고 생각이 들기 때문에 그 순서를 익히는 데에 중점을 두고자 한다. 테이블의 기본 틀 만들기 직원 정보를 화면에서 보여주기 위해서는 테이블을 만들어 해당 정보들을 담아내는 아.. 더보기 [ SAPUI5 ] Page Variant Management ○ 이번 파트는 뭘 말하려고 하는지 잘 모르겠지만 정리라도 해놓자... - VariantManagement 1) Personalization를 위해 페이지 view를 변동시키는 것은 persistenceKey 필요하다. 2) 페이지의 변화가 persistenceKey 속성으로 초기화되고, 여러 스마트 컨트롤의 지속성을 처리 할 수 있게 된다. 3) 각 컨트롤에 대한 관련 콘텐츠는 각 개별 persistenceKey에 따라 적절하게 배포된다. - [ VariantManagement.view.xml ] - 페이지를 변동시킴으로써 view management는 더이상 SmartFilterBar 및 SmartTable 컨트롤의 일부가 아니라 중앙에 표시된다. - SmartFilterBar 컨트롤의 필터 대화상자.. 더보기 [ SAPUI5 ] View Management ○ 기본 view를 변경하거나, 새로운 view를 생성하고 쿼리가 자동으로 실행되도록 해보자. - [ VariantManagement.view.xml ] - [ Component.js ] sap.ui.define([ "sap/ui/core/UIComponent" ], function(UIComponent) { "use strict"; return UIComponent.extend("sap.ui.demo.smartControls.Component", { metadata: { manifest: "json" }, init: function () { UIComponent.prototype.init.apply(this, arguments); }, destroy: function () { UIComponent.pr.. 더보기 [ SAPUI5 ] Table Personalization ○ 데이터의 정보를 자신이 원하는 정렬 방식대로 필터링 해보자. - Table Personalization 1) 테이블에서 표시되는 열과 순서, 데이터 정렬 방법, 데이터 그룹화 활성화 여부 2) 그리고 테이블 항목의 필터링 여부를 지정할 수 있는 정용 대화 상자를 제공한다. - [ Personalization.view.xml ] 1) 'sap:sortable'과 'sap:filterable', 'sap:groupable'을 'false'로 설정한다. 2) 이는 표시되지 않은 필드를 모두 정렬화, 필터링 또는 그룹화 할 수 있다는 것을 의미한다. - 톱니바퀴 모양의 설정 아이콘을 클릭하면 각 요소에 대한 설정을 변경할 수 있다! Next Stage : 더보기 [ SAPUI5 ] Smart Filter Bar and Smart Table ○ enableAutoBinding을 사용해 controller가 아닌 view에서 데이터를 자동으로 바인딩 해보자. - [ SmartTable.view.xml ] 1) 'smartFilterBar'에서 'ControlConfiguration' 컨트롤을 추가한다. * [ metadata.xml ]에 있는 데이터 값을 화면에서 보기 위해 설정한 ''entityType'을 참조하도록 한다. * 'ControlConfiguration' 요소를 사용해 필터가 표시돼 있는 표시줄에 'Category' 필드를 포함시킨다. * 필터 기능을 하는 바를 숨길 수 있는 도구를 사용해 숨기거나 표시할 수 있는 영역을 구현할 수 있다. 2) 'SmartTable'의 설정 값을 환인해보자. * smartFilterId : 's.. 더보기 [ SAPUI5 ] Smart Form ○ 상품에 대한 정보와 공급자의 정보를 편집할 수 있도록 한다. - SmartForm 1) sap.ui.layout.form.Form 컨트롤을 사용한다. 2) SmartField 컨트롤과 함께 SmartForm 컨트롤을 사용하는 경우에는 레이블 및헤더에 대한 필수 정보가 노출되기 때문에 [ view.xml ]을설정하는 데에 있어서 매우 간편하다. 3) 이와 더불어, 읽기 전용 모드와편집 모드 사이를 전환할 수 있는 옵션이있는 경우 토글 편집이 가능하도록 SmartForm에서 지정이 가능하다. - [ SmartForm.view.xml ] 1) 'Product'용과 'Supplier'용의 'SmarForm' 컨테이너 가각 만든다. * 'GroupElement'를 사용해 SmartForm이 OData의 메타데.. 더보기 [ SAPUI5 ] Smart Field with Smart Link ○ 바인딩할 데이터에 링크를 연결해 view에서 보여주기 - [ SmartLink.view.xml ] - [ SmartLink.controller.js ] sap.ui.define([ 'sap/ui/core/mvc/Controller', 'sap/ui/demo/smartControls/test/service/UShellCrossApplicationNavigationMock' ], function(Controller, UShellCrossApplicationNavigationMock) { "use strict"; return Controller.extend("sap.ui.demo.smartControls.SmartLink", { onInit: function() { this.getView().bindEle.. 더보기 이전 1 2 3 4 ··· 11 다음
