본문 바로가기
728x90
반응형

분류 전체보기243

[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.
[UI5] DatePicker datepicker는 기본으로 제공하는 위젯 중 하나이며, 날짜를 다룰 때 UI 형식으로 달력에서 쉽게 날짜를 선택 하도록 도와주는 역할을 한다. datepicker 모듈을 이용하면 많은 기능을 포함한 디자인된 달력을 간단한 코딩으로 만들 수 있다. 달력버튼을 누르면 날짜를 선택할 수 있게 나온다. 선택할 수 있는 범위를 지정해줄수 있다. 날짜를 선택하면 함수를 실행시켜 메세지 토스트를 출력하는것까지 해본다. App.view.xml value로 default값을 설정한다. 이때 value는 데이터의 타입이 string이어야 하고, dateValue는 데이터 타입이 date여야 한다. valueFormat은 날짜의 순서를 지정한다. 데이터를 가져올때 일월년으로 가져오기 때문에 년-월-일로 보여주기 위해 y.. 2023. 3. 8.
[UI5] Routing (+뒤로가기버튼) 지금까지 모든 앱 콘텐츠를 한 페이지에 넣었다. 점점 더 많은 기능을 추가함에 따라 컨텐츠를 분할하여 별도의 페이지에 배치해보자. 이 단계에서는 SAPUI5 탐색 기능을 사용하여 나중에 송장에 대한 세부 사항을 표시하는 데 사용할 수있는 별도의 세부 사항 페이지를 로드하고 표시한다. SAPUI5 라우터 클래스를 사용하여 페이지를 로드하고 URL을 자동으로 업데이트한다. 인보이스 항목중 하나를 클릭하면 다른페이지로 detail page가 나온다. Detail Page 라우팅 설정 (manifest.json) manifest에서는 라우팅을 설정한다. 앱의 라우팅 및 탐색 구조를 정의하는 3개의 하위 섹션인 Config, Routes, Targets 이 있다. Config 사용하려는 라우터 클래스와 앱에서 뷰.. 2023. 3. 8.
[UI5] Filtering 이 단계에서는 제품 목록에 대한 검색 필드를 추가하고 검색 용어를 나타내는 필터를 정의힌다. 검색 할 때 검색어가 일치하는 항목만 표시되도록 목록이 자동으로 업데이트된다. invoiceList.view.xml invoiceList.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "../model/formatter", "sap/ui/model/Filter", "sap/ui/model/FilterOperator" ], function (Controller, JSONModel, formatter, Filter, FilterOperator) { "use strict"; return Controlle.. 2023. 3. 8.
[UI5] Formatters invoiceList.view.xml 이전에 사용했던 invoices.json파일에서 invoice모델의 status프로포티의 값인 status A,B,C가 반복하면서 데이터가 들어온다. 그 값이 formatter 함수의 인자에 들어가게 된다. { path: '경로', formatter: '.함수명' } 바인딩에 뭔가 추가할때 path에 데이터 경로를 입력해 데이터를 가져오고, formatter 프로포티를 통해 그 데이터를 가지고 함수를 실행한다. invoiceList.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "../model/formatter" ], fu.. 2023. 3. 8.
728x90
반응형

티스토리툴바