728x90 반응형 Fiori/UI548 [UI5] Fragment dialog this.pDialog의 역할 뷰에 전역으로 변수를 설정해놓고 Fragment가 열린 이력이 있다면 열린애 다시 오픈해주고 없으면 새로만들어줘서 로드하려는 목적 this._Dialog = sap.ui.xmlfragment("Test.view.fragments.Month", this); console.log(this._Dialog); this._Dialog.open(); var oView; oView = sap.ui.fragment({ fragmentName: "Test.view.fragments.Month", type: sap.ui.core.mvc.FragmentType.XML }); if (!this._Dialog) { //this._Dialog가 선언된적없으면 프레그만트가 열린적이 없으므로 Fragm.. 2023. 3. 8. [UI5] Routing Detail Page 항목을 선택하고 Detail 버튼을 클릭하면 Detail Page로 이동해 해당 데이터를 보여준다. 🌞 이전 게시물에서 다 했던 내용들을 종합적으로 다시 해본거기때문에 자세한 설명은 생략한다. 1. manifest.json 수정 (라우팅 설정) "routing": { "config": { "routerClass": "sap.m.routing.Router", "viewType": "XML", "viewPath": "product.view", "controlId": "app", "controlAggregation": "pages", "async": true }, "routes": [{ "pattern": "", "name": "list", "target": "list" }, { "pattern": "deta.. 2023. 3. 8. [UI5] Dialog Detail Page Link column에 링크를 걸어보자. 링크가 걸린 필드를 클릭하면 해당 필드의 값이 Dialog로 뜨게 해본다. App.view.xml 링크는 Link모듈을 사용하면 된다. 링크를 걸 column안에 Label이었던 기존 모듈을 Link로 변경하고 이벤트 함수를 실행시킨다. Dialog.fragment.xml 함수를 구현하기 전에 다이얼로그 창을 먼저 만들어준다. 컨트롤러의 함수에서 Dialog를 사용해야 되서 id를 부여한다. 사용자가 Product Id에서 선택한 값을 띄워야 하기 때문에 VBox의 text에는 사용자가 선택한 Product Id가 들어간다. App.controller.js 먼저 fragment를 사용하기 위해 경로와 매개변수에 fragment를 정의해준다. onDetailDial.. 2023. 3. 8. [UI5] Table에 Select 추가하기 Select 테이블에 select 기능을 추가해보자. 매니저일때와 캐셔일때 볼 수 있는 항목을 다르게 설정해본다. App.view.xml Title과 같은 라인에 Select를 추가해주기 위해 OverflowToolbar안에 Select를 추가한다. ToolbarSpacer는 타이틀과 Select를 띄워서 보여준다. 이후 table:Table에 id를 productTable로 지정한다. id="productTable" onSelect함수에서 이 테이블의 id를 가지고 테이블 데이터를 가지고 올것이기 때문이다. App.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller) { "use strict"; return .. 2023. 3. 8. [UI5] 배열을 바인딩하는 모듈(Table) 먼저 데이터가 있는 json파일을 불러온다. component.js var that = this; $.ajax({ url:"./json/products.json", type: "get", success: function (oResult) { /*결과가 oResult 변수에 들어감*/ var oProductModel = new JSONModel(oResult); that.setModel(oProductModel, "product"); } });this는 Component를 가리키는데 ajax 안에서 this를 하게되면 다른걸 가리키게 된다. App.view.xml component.js에서 모델이름을 product로 줬기 때문에 데이터를 바인딩할때 {모델명>프로포티명}으로 바인딩한다. table:Table.. 2023. 3. 8. [UI5] 배열을 바인딩하는 모듈(Select, ComboBox) 배열을 바인딩하는 모듈에는 List, comboBox, Table, Select.. 등이 있다. 앞에서는 List를 해봤고 이번 스텝에서는 Select와 comboBox를 진행해본다. select와 comboBox의 가장 큰 차이점은 comboBox는 필드에서 타이핑이 가능해 키워드를 알고 있으면 값을 검색해서 찾을 수 있다는 점이다. select는 리스트에서 선택만 가능하다. enabled 체크박스를 해제하면 comboBox도 enabled로 값을 선택할 수 없게 한다. view 배열을 바인딩하는 모듈은 모듈안의 aggregation을 반복해서 수행하기 때문에 한번만 있어도 된다. default모델일 경우 모델명을 생략할 수 있기때문에 프로포티 명만 입력해 데이터를 가져온다. 바인딩된 모델 데이터가 객.. 2023. 3. 8. 이전 1 2 3 4 5 ··· 8 다음 728x90 반응형