通过Apache Cordova将Web应用移动化
2017-01-12 11:24
337 查看
今天做个更加有趣的小练习,现在我再通过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
[html] view
plain copy
<!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应用迁移到各个不同的手机平台上。
我们可以看到基本上不需要做任何修改就可以迁移到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
[html] view
plain copy
<!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应用迁移到各个不同的手机平台上。
相关文章推荐
- Web编程学习八:通过Apache Cordova将Web应用移动化
- apache的Cordova,编译运行能通过,打包报file not find错误
- Apache配置——通过rewrite限制某个目录
- 深入Android通过Apache HTTP访问HTTP资源(一)(转)
- 通过浏览器http://ip:端口+目录访问服务器:apache的安装
- Apache下通过shell脚本提交网站404死链
- 通过Apache转发和Tomcat共用80端口
- Apache Cordova-Android框架原理研究笔记 I
- apache 通过urlrewrite防盗链功能配置
- 通过apache 访问日志access.log 统计IP 和每个地址访问的次数
- Cordova(PhoneGap)通过CordovaPlugin插件调用 Activity 实例
- 通过CM启动hive报错.org.apache.hadoop.hive.metastore.HiveMetaException: Failed to load driver
- 通过命令行快速启动Apache Tomcat
- apache通过mod_deflate打开gzip
- CentOS-6.4-minimal版中通过JK-1.2.40整合Apache-2.2.29与Tomcat-6.0.41
- 通过脚本案例学习shell(三) --- 通过交互式脚本自动创建Apache虚拟主机 推荐
- Apache HttpComponents Custom protocol interceptors通过拦截器自定义压缩
- 在MAC中搭建Apache Cordova + Sencha Touch2的开发环境——1安装Apache Cordova 3.3
- 通过手机访问电脑上Apache的端口
- Apache - 模块 - mod_rewrite - RewriteCond - 通过检查HTTP_REFERER避免静态图片盗链对性能有严重影响