在之前的例子學習了如何使用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>
<!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 Eclipsevar 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 controlvar oTable = new sap.ui.table.Table({editable : true});// define the Table columnsvar oControl = new sap.ui.commons.TextView({text : "{Id}"}); // short binding notationoTable.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 columnsvar oControl = new sap.ui.commons.TextView({text : "{FirstName}"}); // short binding notationoTable.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 columnsvar oControl = new sap.ui.commons.TextView({text : "{LastName}"}); // short binding notationoTable.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 UIoTable.placeAt("content");</script></head><body class="sapUiBody" role="application"><div id="content"></div></body></html>
這裡主要就是建立一個table組件，然後建立一個odata model，然後它們綁定一下就行了。
5.部署項目在Tomcat上，運行：
6.小結：在得到了RESTful的service以後，進行web和移動開發以後就非常方便了，而使用SAPUI5則變得更方便了，不僅介面漂亮，還可以大大提高開發效率。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
