728x90
반응형
안녕하세요
이번 포스팅에서는 Walkthrough Tutorial Step7(JSON Model) 입니다.
먼저 입력필드를 만들고 입력필드의 값을 표시할 수 있는 페이지를 만들겠습니다.
App.controller.js 소스 추가
밑에 나오는 소스에 onInit은 컨트롤러가 생성될 떄 호출로디는 메서드 중 하나입니다.
함수안에서 JSON모델을 인스턴스화합니다.
컨트롤러에 해당하는 XML뷰 내에서 이 모델을 사용가능하도록 setModel뷰에서 함수를 호출하여 새로 만든 모델을 전달합니다.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/ui/model/json/JSONModel"
], (Controller, MessageToast, JSONModel) => {
"use strict";
return Controller.extend("ui5.walkthrough.controller.App", {
onInit() {
// set data model on view
const oData = {
recipient : {
name : "World"
}
};
const oModel = new JSONModel(oData);
this.getView().setModel(oModel);
},
onShowHello() {
MessageToast.show("Hello World");
}
});
});
XML 소스추가하기
Input태그를 이용해서 입력창 만들고
뷰에 컨트롤러 추가해서 XML뷰에 값을 바인딩
<mvc:View
controllerName="ui5.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button
text="Say Hello"
press=".onShowHello"/>
<Input
value="{/recipient/name}"
description="Hello {/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
</mvc:View>
최종결과
감사합니다.
반응형
