728x90 반응형 분류 전체보기244 [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. [UI5] JSON Model 입력필드의 값을 바꾸면 오른쪽의 텍스트도 바로 변경된다. 인사버튼을 누르면 입력필드에 입력한 데이터와 함께 반갑습니다라는 알림창이 뜬다. App.view.xml i18n>showHelloButtonText 프로포티는 /로 가져왔다면 Model을 가져올땐 >로 가져온다. 키워드를 적어주면, 키워드에 해당하는 값을 가져온다. 그래서 버튼의 텍스트는 해당 키워드의 value인 '인사'를 가져오게 된다. press=".onShowHello" .은 명시한 파일의 펑션을 말하고, 버튼을 클릭했을때 onShowHello라는 함수를 실행한다. sap.m.Input control을 view에 추가하면 이를 통해 사용자는 인사말을 받을 사람을 입력할 수 있다. XML 뷰에 대한 선언적 바인딩 구문을 사용하여 모델에 해당 .. 2023. 3. 7. [UI5] Binding (Two-way& One-way) 체크박스를 해제하면 입력가능하게 필드를 열어준다. App.view.xml 바인딩을 하려면 중괄호 {}를 사용한다. property를 가져오려면 /프로포티로 사용한다. 함수를 실행할땐 앞에 .을 붙여 사용한다. App.controller.js sap.ui.controller("test.App", { onInit: function() { var oModel = new sap.ui.model.json.JSONModel({ firstName: "Harry", lastName: "Hawk", enabled: false }); this.getView().setModel(oModel); }, //양방향 //값이 변경되었을때 firstChange : function () { var oModel = this.getVie.. 2023. 3. 7. [UI5] UI5 구성 순서는 첫시작으로 html파일 index.html을 만들고 oninit을 통해 index.js를 읽어온다. view.xml으로 화면을 그리는 영역을 구성한다. controller.js로 화면을 구성한다. 현재 작업들을 수행할 파일을 모두 포함하는 가장 상위 폴더 sap.ui.demo.walkthrough를 먼저 생성한다. 생성한폴더에 하위폴더인 WebContent을 생성한다. index.html WebContent 폴더에 새로운시작 html파일인 index.html파일을 생성해준다. src="/resources/sap-ui-core.js" src 속성은 브라우저에 SAPUI5 코어 라이브러리를 찾을 위치를 알려준다. SAPUI5 런타임을 초기화하고 data-sap-ui-libs 속성에 지정된 라이브러리와.. 2023. 3. 7. 이전 1 ··· 11 12 13 14 15 16 17 ··· 41 다음 728x90 반응형