직원 정보 테이블 생성하기
SAP 공식 홈페이지에 있는 UI5 관련 도큐먼테이션을 참고하여 개인 스터디를 진행하는 도중 문득 한 가지 생각이 스쳐지나 갔다. 그 생각인 즉슨, 무작정 공식 문서를 따라하는 거보다는 가이드라인을 참고하여 나만의 예제들을 만들면서 기능을 구현해 보자는 것이다.
물론 아직까지 내가 할 수 있는 영역은 아주 협소할 것임을 알기에, 결국에는 여러 예시들을 종합해서 모방하는 것에 그칠 수도 있다. 하지만 view와 controller 간의 연결 과정과 data를 binding하는 절차에 대한 이해도가 현저히 낮다고 생각이 들기 때문에 그 순서를 익히는 데에 중점을 두고자 한다.
테이블의 기본 틀 만들기
직원 정보를 화면에서 보여주기 위해서는 테이블을 만들어 해당 정보들을 담아내는 아주 기본적인 방법이 있다.
- [ JSONView.view.xml ]
<mvc:View controllerName="ns.html5.controller.JSONView"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Shell id ="shell">
<App id="app">
<Page id="page" title="{i18n>title}">
<content>
<Table>
<columns>
<Column>
<Text text="Name"> </Text>
</Column>
<Column>
<Text text="Salary"> </Text>
</Column>
<Column>
<Text text="Designation"> </Text>
</Column>
<Column>
<Text text="Phone Number"> </Text>
</Column>
<items>
<ColumnListItem>
<cells>
<Text text=""> </Text>
<Text text=""> </Text>
<Text text=""> </Text>
</cells>
</ColumnListItem>
</items>
</columns>
</Table>
</content>
</Page>
</App>
</Shell>
</mvc:View>
1) '<content>' 안에 '<Table>'을 입력한 후, 해당 테이블에서 보여줄 '<columns>'를 넣어준다.
* coulmns에 s가 붙는 이유는 상위 항목이 여러 개임을 나타낸다.
2) '<columns>'에 '<Column>'이라는 하위 목록을 입력한다.
* 즉 직원에 대한 동적 정보가 무엇을 의미하는지에 대한 열의 이름을 설정하는 곳이다.
* '<Text>'를 사용해 해당 열의 'text' 이름을 설정한다.
3) '<items>'에는 컨트롤러에 지정해둔 데이터의 이름들과 연결하기 위해 아이디를 연결하는 곳이라고 보면된다.
view에서 만들어 둔 테이블에서 직원 정보를 보여주기 위해서는 임의의 데이터가 있어야 한다.
원래는 ABAP으로 생성한 데이터를 서버를 통해 연결하여 데이터를 바인딩해야 하지만, 사용할 수 있는 서버가 없는 관계로 임시 데이터를 만들어 진행한다. 이때 데이터는 'JSONModel'을 사용해 보여줄 수 있다.
[ SAPUI5 ] JSONModel
○ JSONModel을 활용해 보자. - JSONModel 정의 - onInit : View 로딩 시, 무조건 1번 실행됨 * onBeforeRendering : Xml View가 브라우저 랜더링(화면 생성) 전에 실행되는 function * onAfterRendering : Xml View가 브라우저
pythonchoboman.tistory.com
- [ JSONView.controller.js ]
sap.ui.define([
"sap/ui/core/mvc/Controller"
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller) {
"use strict";
return Controller.extend("ns.html5.controller.JSONView", {
onInit: function () {
var data = {
"EmployeeDetails":[
{
"firstName" : "이",
"lastName" : "신입",
"salary" : 2000000,
"designation" : "신입사원",
"phoneNumber" : "010-1234-5678"
}, {
"firstName" : "김",
"lastName" : "이박",
"salary" : 2152000,
"designation" : "신입사원",
"phoneNumber" : "010-4567-5678"
}, {
"firstName" : "박",
"lastName" : "김우",
"salary" : 3000000,
"designation" : "컨설팅",
"phoneNumber" : "010-4852-5678"
}, {
"firstName" : "이",
"lastName" : "로운",
"salary" : 5000000,
"designation" : "컨설팅 매니저",
"phoneNumber" : "010-1234-0894"
}, {
"firstName" : "최",
"lastName" : "백설",
"salary" : 2000000,
"designation" : "경영 관리",
"phoneNumber" : "010-7788-5678"
}, {
"firstName" : "이",
"lastName" : "명박",
"salary" : 2000000,
"designation" : "신입사원",
"phoneNumber" : "010-1954-5678"
}, {
"firstName" : "김",
"lastName" : "대중",
"salary" : 4500000,
"designation" : "팀장",
"phoneNumber" : "010-7777-5678"
}, {
"firstName" : "온",
"lastName" : "누리",
"salary" : 3500000,
"designation" : "경리",
"phoneNumber" : "010-9852-5678"
}
]
};
}
});
});
1) 'data'라는 변수를 설정하고, 그 안에 'EmployeeDetails'라는 배열 함수를 선언한다.
* 이처럼 하게 되면 변수 'data'에 배열함수 'EmployeeDetails'에 입력한 데이터 값들이 저장된다.
2) view에 입력해두었던 열의 개수와 맞게 해당 데이터 정보의 이름을 헷갈리지 않게 입력해 둔다.
* 직원 이름의 경우에는 추후에 검색 기능을 고려해 성과 이름을 구분해두는 것이 좋다.
- [ JSONView.controller.js ]
var oModel = new sap.ui.model.json.JSONModel(data);
this.getView().setModel(oModel, "TableModel");
1) 'oModel' 변수에서 변수 'data'의 정보들을 사용하기 위해 'JSONModel()' 메서드를 사용한다.
* 'JSONModel()'에서 'data' 변수 값을 사용한다.
2) 'setModel()' 메서드에서 사용할 모델인 'oModel'을 파라미터로 넣어준다.
* 'TableModel'은 view와 model을 연결시켜주는 item에 해당한다.
- [ JSONView.view.xml ]
<Table items="{TableModel>/EmployeeDetails}">
1) view에서 '<Table>'에 control과 연결시키는 'items'를 설정해준다.
2) controller에서 입력해둔 'TableModel'을 매개로 'EmployeeDetails' 경로를 사용하도록 해준다(?)
- 정말 어의없게도 테이블을 보여주지 않는 상황이다.
'SAP > UI5' 카테고리의 다른 글
| [ SAPUI5 ] MessageBox에 대한 기본 이해 (2) | 2023.03.27 |
|---|---|
| [ SAPUI5 ] Page Variant Management (4) | 2023.03.10 |
| [ SAPUI5 ] View Management (4) | 2023.03.10 |
| [ SAPUI5 ] Table Personalization (16) | 2023.03.09 |
