Web编程学习七：使用JPA + RESTful Web Service + SAPUI5来创建Web应用

浏览数：124 / 时间：2015年06月09日

在之前的例子学习了如何使用JPA，如何通过Apache olingo来将JPA数据库自动转化为RESTful Web Service。

学习了如何使用SAPUI5，现在我来把它们整合起来。

开发环境：

开发环境是：Eclipse Juno, MySQL 5.5，olingo 1.2，EclipseLink 2.4, Tomcat 7， SAPUI5 1.18

这里数据层就直接使用上一个练习完成的jpa2项目，它实现了一个对后台数据库表employee操作的RESTful Web Service，

url: http://localhost:8080/jpa2/Employee.svc/

1.安装SAP提供的Eclipse SAPUI5插件。

https://tools.hana.ondemand.com

2.创建一个SAPUI5的Web Project，名字叫sapui5

3.由于我的服务是local的，所以需要使用proxy来访问，修改一下web.xml

添加：

	<servlet>
		<servlet-name>SimpleProxyServlet</servlet-name>
		<servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>SimpleProxyServlet</servlet-name>
		<url-pattern>/proxy/*</url-pattern>
	</servlet-mapping>
<context-param>
		<param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>
		<param-value>http://localhost:8080</param-value>
	</context-param>

4.修改index.html文件：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv=‘Content-Type‘ content=‘text/html;charset=UTF-8‘ />

<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
	data-sap-ui-libs="sap.ui.commons, sap.ui.table"
	data-sap-ui-theme="sap_bluecrystal">
	
</script>
<script>
	//One place for defining service URLs - either in the index.html file, 
	//or in one separate .js file which needs to be included.
	//The application is responsible for exchanging the URLs before checking in and 
	//after checking out to SAPUI5 Repository;
	//or using a helper function getServiceUrl for which also the application 
	//is responsible.

	//var serviceUrl = "/mypath/myservice";       //url when running on the ABAP system
	//var serviceUrl = "proxy/mypath/myservice";  //url when running locally in Eclipse

	var serviceUrl = getServiceUrl("/jpa2/Employee.svc/");

	function getServiceUrl(sServiceUrl) {
		//for local testing prefix with proxy
		//if you and your team use a special host name or IP like 127.0.0.1 for localhost please adapt the if statement below 
		if (window.location.hostname == "localhost") {
			return "proxy" + sServiceUrl;
		} else {
			return sServiceUrl;
		}
	}
</script>

<script>
	// create the DataTable control
	var oTable = new sap.ui.table.Table({
		editable : true
	});

	// define the Table columns
	var oControl = new sap.ui.commons.TextView({
		text : "{Id}"
	}); // short binding notation
	oTable.addColumn(new sap.ui.table.Column({
		label : new sap.ui.commons.Label({
			text : "ID"
		}),
		template : oControl,
		sortProperty : "id",
		filterProperty : "id",
		width : "100px"
	}));

	// define the Table columns
	var oControl = new sap.ui.commons.TextView({
		text : "{FirstName}"
	}); // short binding notation
	oTable.addColumn(new sap.ui.table.Column({
		label : new sap.ui.commons.Label({
			text : "First Name"
		}),
		template : oControl,
		sortProperty : "firstName",
		filterProperty : "firstName",
		width : "100px"
	}));

	// define the Table columns
	var oControl = new sap.ui.commons.TextView({
		text : "{LastName}"
	}); // short binding notation
	oTable.addColumn(new sap.ui.table.Column({
		label : new sap.ui.commons.Label({
			text : "Last Name"
		}),
		template : oControl,
		sortProperty : "lastName",
		filterProperty : "lastName",
		width : "100px"
	}));

	var oModel = new sap.ui.model.odata.ODataModel(serviceUrl);

	oTable.setModel(oModel);
	oTable.bindRows("/Employees");

	// finally place the Table into the UI
	oTable.placeAt("content");
</script>

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

这里主要就是创建一个table组件，然后创建一个odata model，然后它们绑定一下就行了。

5.部署项目在Tomcat上，运行：