본문 바로가기
728x90
반응형

분류 전체보기243

[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.
[UI5] Aggregation Binding 🙄 invoice를 생성해보자. App.view.xml InvoiceList.view.xml view폴더에서 새로운 파일 InvoiceList.view.xml을 생성한다. List 모듈은 배열을 사용하는 모듈이기 때문에 invoice라는 모델안의 Invoices 프로포티로 배열로 된 데이터 Invoices를 바인딩 해준다. 그럼 현재 List의 items에는 배열 Invoices가 바인딩 되어있는데, 바인딩된 배열안에 객체들이 있다. aggregation안에 있는 모듈이 반복되면서 객체를 순서대로 하나씩 가져오게 된다. 배열사용하는 모듈에는 List, Table, Select, ComboBox가 있다. 이 모듈들은 배열로 된 데이터를 바인딩 해줘야 하고 aggregation 부분을 length만큼 반복시.. 2023. 3. 7.
[UI5] Dialogs and Fragments view를 구성하는데 사용할 수 있는 또 다른 요소를 살펴본다. 버튼이 클릭되었을 때 dialog를 open한다. HelloPanel.view.xml dialog를 열기 위해 view의 어그리게이션 content 하위에 버튼을 하나 추가해준다. 기존의 버튼과 약간의 간격을 위해 SmallMargin을 추가한다. HelloDialog.fragment.xml fragment에 dialog를 선언적으로 정의하기 위해 새로운 XML 파일을 생성한다. 재사용성을 높이기 위해 view와 분리한다. fragment assets은 코어 네임스페이스에 있기 때문에 FragmentDefinition 태그에 xml 네임스페이스를 추가한다. Fragment fragment는 화면을 그려주는 기능면과 구문면에서 view와 매우.. 2023. 3. 7.
[UI5] Pages, Panels, Shell, Margins, Nested View, Custom CSS 이전 JSON Model에서 만들었던 프로그램이 준비물이다. 이 게시물의 모든 구문을 수행하고나면, 화면이 이렇게 더 보기좋게 변할것이다. 파일의 관계는 이러하다. 현재 index.html에서 언어는 ko이다. App.view.xml app의 컨테이너로써 컨트롤을 사용하고 새로운 root 요소로 사용한다 . shell은 데스크탑 화면에 letterbox를 도입하여 기기의 화면 사이즈에 맞춰 application의 시각적으로 조정한다. ** letterbox? ** 화면이 설정된 넓이 제한보다 넓으면 사용자 인터페이스의 왼쪽, 오른쪽의 빈 부분이 나타난다. 이런 디자인 요소를 letterboxing이라고 한다. 컨트롤 안에 input 필드와 버튼을 넣는다. page는 라고 하는 다른 컨트롤들과 0..N으로.. 2023. 3. 7.
[UI5] 화면 개선 이전 JSON Model에서 만들었던 프로그램이 준비물이다. App.view.xml HelloPanel.view.xml App.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast", ], function(Controller, MessageToast){ "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.App", { onInit : function() { }, }); }); HelloPanel.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast.. 2023. 3. 7.
728x90
반응형

티스토리툴바