728x90 반응형 Fiori/UI548 [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. [UI5] 예제 (구구단) 1단부터 9단까지 구구단을 만들어본다. 1보다 작거나 9보다 큰 값을 입력하고 실행하면 에러메세지를 출력하고 빈값인 채로 실행버튼을 누른 경우에도 에러메세지를 출력한다. 화면 구성 App.view.xml 사용자가 입력한 값을 inputValue로 받고, 버튼을 눌렀을때 함수 onGugudan을 실행한다. 자바스크립트 객체 생성 App.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel", "sap/m/MessageBox" ], function(Controller, JSONModel, MessageBox) { "use strict"; return Controller.extend("gugudan.con.. 2023. 3. 8. [UI5] Data types 😁 금액과 단위를 추가해보자. Invoice는 이미 멋지게 꾸며졌지만, 가격이 나와있지 않다면 그냥 목록일 뿐이다! InvoiceList.view.xml controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"List의 바깥에 밑에서 새로 생성할 InvoiceList 컨트롤러를 연결해준다. 보통은 하나의 프로포티에 하나의 값만을 불러왔는데, 하나의 프로포티에 여러 값, 배열을 불러올땐 객체로 넘기고 parts 프로포티를 사용해 path로 여러 프로포티 값을 불러온다. view>/currency가 EUR이므로 EUR의 숫자타입인 소숫점 두번째자리까지 표시해준다. formatOptions로 옵션을 줄수 있고, showMeasure를 false로 하면 .. 2023. 3. 8. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 반응형