今天做个更加有趣的小练习,现在我再通过Apache Cordova来将其封装为iOS上的移动应用。
我们可以看到基本上不需要做任何修改就可以迁移到iOS平台上了。
Cordova就是以前的PhoneGap。
主页地址:https://cordova.apache.org/
1.安装Cordova
我这里安装的cordova 3.0.6
2.创建一个项目Apache Cordova 项目,名称叫employee
cordova -d create ~/Documents/CordovaProjects/employee com.sample employee
增加对iOS的支持:
cordova -d platform add ios
3.下载sapui5的包,解压缩后将resource文件夹拷贝到employee/www下
4.修改一下index.html
- <!DOCTYPE html>
- <!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied. See the License for the
- specific language governing permissions and limitations
- under the License.
- -->
- <html>
- <head>
- <meta 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>
- // 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(
- "http://localhost:8080/jpa2/Employee.svc/");
- //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>
- <script type="text/javascript" src="cordova.js"></script>
- <title>Hello World</title>
- </head>
- <body class="sapUiBody" role="application">
- <div id="content"></div>
- </body>
- </html>
5.拷贝文件到项目中去:
cordova -d prepare ios
6.用XCode打开employee项目,在iOS模拟器上运行:
小结:这就是使用Html5来开发的好处了,我们可以非常方便地通过Cordova将web应用迁移到各个不同的手机平台上。