728x90 반응형 Fiori/UI548 [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. [UI5] 예제 first버튼을 누르면 버튼 a의 type이 변하고 last버튼을 누르면 버튼 b의 type이 변한다. all버튼을 누르면 a부터 e버튼까지 type이 변하고 clear버튼을 누르면 type이 초기타입으로 변한다. App.view.xml 먼저 화면을 그려준다. HBox는 가로로 모듈을 나열하고, VBox는 세로로 모듈을 나열한다. 버튼 a-e는 버튼의 type이 바뀌므로 type 속성에서 프로포티를 가져온다. press는 버튼을 클릭했을때 속성이고, 함수를 호출해 버튼을 클릭하면 함수를 실행한다. App.controller.js sap.ui.controller("button2.App", { onInit: function() { var oData = { type : "Default" }; var oMode.. 2023. 3. 7. [UI5] JSON Model 입력필드의 값을 바꾸면 오른쪽의 텍스트도 바로 변경된다. 인사버튼을 누르면 입력필드에 입력한 데이터와 함께 반갑습니다라는 알림창이 뜬다. App.view.xml i18n>showHelloButtonText 프로포티는 /로 가져왔다면 Model을 가져올땐 >로 가져온다. 키워드를 적어주면, 키워드에 해당하는 값을 가져온다. 그래서 버튼의 텍스트는 해당 키워드의 value인 '인사'를 가져오게 된다. press=".onShowHello" .은 명시한 파일의 펑션을 말하고, 버튼을 클릭했을때 onShowHello라는 함수를 실행한다. sap.m.Input control을 view에 추가하면 이를 통해 사용자는 인사말을 받을 사람을 입력할 수 있다. XML 뷰에 대한 선언적 바인딩 구문을 사용하여 모델에 해당 .. 2023. 3. 7. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형