Web编程学习八:通过Apache Cordova将Web应用移动化
2014-04-02 12:29
435 查看
上一个练习,做了一个简单但是完整的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
5.拷贝文件到项目中去:
cordova -d prepare ios
6.用XCode打开employee项目,在iOS模拟器上运行:
小结:这就是使用HTML5来开发的好处了,我们可以非常方便地通过Cordova将web应用迁移到各个不同的手机平台上。
今天做个更加有趣的小练习,现在我再通过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将Web应用移动化
- apache的Cordova,编译运行能通过,打包报file not find错误
- 在windows下iis与apache共存80端口!通过各自的域名分别访问,不用加端口号(虚拟主机+代理)
- 如何通过不同的域名访问发布到Apache上不同的Appeon Web应用?
- Apache Cordova:一个跨平台移动应用程序开发的很好选择
- (二)使用apache的commons-httpclient-3.1.jar之通过Java实现发起HTTP请求【使用代理】
- 通过Docker快速部署启动Apache Hadoop及Cloudera
- 通过Apache的httpClient的post方式连接服务器
- 通过开启Apache的Keep-Alive属性来支持php对mysql的持久连接
- [转]深入Android通过Apache HTTP访问HTTP资源
- 小程序通过apache服务器利用php连接mySQL
- Apache相同ip通过多个端口配置虚拟主机
- 通过apache创建一个yum仓库
- 闰年2月29号 通过apache的ftp工具从ftp上下载文件失败
- 通过修改apache改变域名指向
- 通过Apache Write-through proxy实现SVN Master-Slave主从架构
- apache httped 与tomcat 通过jk实现负载均衡
- XAMPP配置Apache禁止通过IP直接访问网站
- Apache Cordova介绍
- linux服务器通过设置mysql,apache为系统服务,实现开机启动