http://blog.csdn.net/starshus/article/details/22710933
上一个练习,做了一个简单但是完整的Web应用,使用HTML5技术实现的。
今天做个更加有趣的小练习,现在我再通过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应用迁移到各个不同的手机平台上。
Apache Cordova介绍
作者:chszs,转载需注明。博客主页:http://blog.csdn.net/chszs
Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头、加速计。它可以与UI框架(如jQuery Mobile或Dojo Mobile或Sencha Touch)等相结合使用,这些UI框架可以使用HTML、CSS和JavaScript开发智能手机应用。
![](https://img-my.csdn.net/uploads/201303/07/1362640992_3440.jpg)
在使用Cordova API时,应用程序的构建可以无需本地代码(如Java或对象C等),使用的是Web技术。
由于这些JavaScript API在多个设备平台上是一致的,而且是基于Web标准创建的,因此应用程序的移植很方便,基本不做什么改变。
使用Cordova的应用使用平台SDK打包成应用程序,可以从每种设备的应用程序商店下载安装。
Cordova提供了一套统一的JavaScript库供调用,它支持iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian。
如果想用Cordova开发移动应用,先看看它的文档。文档中包含了入门指南、JavaScript API参考、例子程序、Cordova升级的事宜、怎样编写自己的Cordova插件等。
Apache Cordova于2012年10月成为Apache的顶级项目,它使用Apache 2.0许可证。当前最新版本为2.5。