Ryan's Log

UI5 Exam #1 - Simple List (Editable) 본문

카테고리 없음

UI5 Exam #1 - Simple List (Editable)

Ryan c 2016. 11. 8. 09:38
728x90


UI5 Exam #1 - Simple List (Editable)



편집이 가능한 간단 리스트 (Simple List Editable)






UI5는 Debug 모드로 동작할 예정이므로 -dbg.js 파일로 작성한다.



SimpleList-dbg.js


sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control'], function($, BaseObject){
	'use strict';
	
	var SimpleList = BaseObject.extend('ext.SimpleList', {
		metadata: {
    		defaultAggregation: "rows",
    		aggregations: {
    			rows : {type : "sap.ui.core.Control", multiple : true, singularName : "row", bindable : "bindable"},
    		}
        }
	});
	
	return SimpleList;
	
}, true);


간단히 rows 이름의 aggregation만 추가한다.



Control을 화면에 그려낼 Renderer가 필요하다.


SimpleListRenderer-dbg.js


sap.ui.define(['jquery.sap.global'], function(jQuery) {
	"use strict";

	return {
		render: function(oRm, oControl) {
			var rm = oRm,
				aCols = oControl.getRows();

			rm.write('<div ');
			rm.writeControlData(oControl);	//write id and data-sap-ui property
			rm.writeStyles();
			rm.writeClasses();	//write class property by addStyleClass
			rm.write(">");

			for(var i = 0; i < aCols.length; i++){
				oRm.renderControl(aCols[i]);	//add a control column object
			}
			rm.write("</div>");
		}
	};

}, /* bExport= */ true);



Renderer는 실제 UI5가 판단하는 랜더링 시점에 HTML을 DOM을 생성한다. 

생성과 함꼐 UI5 Control들도 랜더링시킨다. 





위 두 SimpleList와 SimpleListRender는 ext namespace에 포함하였다.


실행을 위한 HTML 페이지 작성


<!DOCTYPE html>
<html>
<head>

<title>UI5 Exam</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core-dbg.js"
	id="sap-ui-bootstrap"
	data-sap-ui-libs="
		sap.ui.commons,
		sap.ui.ux3,
		sap.ui.table
	"
	data-sap-ui-debug="true"
	data-sap-ui-logLevel="TRACE"
	data-sap-ui-resourceroots='{
		"ext": "../externals"
	}'
	data-sap-ui-theme="sap_bluecrystal">
</script>

<script type="text/javascript">

	var dataObject = {
		data: [{
			SEQ: 1,
			NAME: 'HELLO'
		}, {
			SEQ: 2,
			NAME: 'WORLD'
		}]
	};
	

	jQuery.sap.require('ext.SimpleList');
	
	var oModel = new sap.ui.model.json.JSONModel();
	oModel.setData(dataObject);
	sap.ui.getCore().setModel(oModel, 'DETAIL');
	

	var list = new ext.SimpleList().addStyleClass("list list1");
	list.bindRows('DETAIL>/data', new sap.ui.commons.layout.MatrixLayout({
		width: '50%',
		rows: [
			new sap.ui.commons.layout.MatrixLayoutRow({
				cells: [
					new sap.ui.commons.layout.MatrixLayoutCell({
						content: new sap.ui.commons.TextField({ value: '{DETAIL>SEQ}' })
					}),
					new sap.ui.commons.layout.MatrixLayoutCell({
						content: new sap.ui.commons.TextField({ value: '{DETAIL>NAME}' })
					}),
					new sap.ui.commons.layout.MatrixLayoutCell({
						content: new sap.ui.commons.Label({ text: '{DETAIL>SEQ}' })
					}),
					new sap.ui.commons.layout.MatrixLayoutCell({
						content: new sap.ui.commons.Label({ text: '{DETAIL>NAME}' })
					})
				] 
			})
		]
	}));
	//list.setModel(oModel);
	list.placeAt('container');

	new sap.ui.commons.Button({
		text: 'Show Data',
		press: function(e){
			console.log(oModel.getProperty('/'));
		}
	}).placeAt('container');
	
</script>

</head>

<body class="sapUiBody" role="application">
<div id="container" ></div>
</body>
</html>


간략히 설명하면


Line 34.

jQuery.sap.require 를 이용하여 "ext.SimpleList"를 로드한다. (UI5는 필요한 라이브러리를 동적으로 로드한다.)

"ext.SimpleList"의 ext는 실제 externals 폴더이다. Line 16에 data-sap-ui-resourceroots 로 externals 를 ext 네임스페이스로 사용할 수 있도록 지정하였다.



Line 41 ~ 64.

new ext.SimpleList() 생성하며 placeAt()으로 생성하여 랜더링 될 위치를 지정한다.

또한 랜더링될 TextField 및 Label등을 적절한 Layout (MatrixLayout 사용)에 담아는 소스코드와 이를 Model의 "/data" 리스트와 바인드 한다.



UI5의 특징인 Model과 Control 간의 바인드가 잘 동작하는 모습을 확인 할 수 있다.

728x90
저작자표시