Apache Cordova介绍

转载 2015年11月17日 16:28:31

Web编程学习八:通过Apache Cordova将Web应用移动化

http://blog.csdn.net/starshus/article/details/22710933

分类: J2EE 9352人阅读 评论(1) 收藏 举报

上一个练习,做了一个简单但是完整的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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <!--  
  3.     Licensed to the Apache Software Foundation (ASF) under one  
  4.     or more contributor license agreements.  See the NOTICE file  
  5.     distributed with this work for additional information  
  6.     regarding copyright ownership.  The ASF licenses this file  
  7.     to you under the Apache License, Version 2.0 (the  
  8.     "License"); you may not use this file except in compliance  
  9.     with the License.  You may obtain a copy of the License at  
  10.   
  11.     http://www.apache.org/licenses/LICENSE-2.0  
  12.   
  13.     Unless required by applicable law or agreed to in writing,  
  14.     software distributed under the License is distributed on an  
  15.     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY  
  16.      KIND, either express or implied.  See the License for the  
  17.     specific language governing permissions and limitations  
  18.     under the License.  
  19. -->  
  20. <html>  
  21.     <head>  
  22.         <meta charset="utf-8" />  
  23.   
  24.         <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"  
  25.             data-sap-ui-libs="sap.ui.commons, sap.ui.table"  
  26.             data-sap-ui-theme="sap_bluecrystal">  
  27.               
  28.             </script>  
  29.           
  30.         <script>  
  31.             // create the DataTable control  
  32.             var oTable = new sap.ui.table.Table({  
  33.                                                 editable : true  
  34.                                                 });  
  35.               
  36.             // define the Table columns  
  37.             var oControl = new sap.ui.commons.TextView({  
  38.                                                        text : "{Id}"  
  39.                                                        }); // short binding notation  
  40.             oTable.addColumn(new sap.ui.table.Column({  
  41.                                                      label : new sap.ui.commons.Label({  
  42.                                                                                       text : "ID"  
  43.                                                                                       }),  
  44.                                                      template : oControl,  
  45.                                                      sortProperty : "id",  
  46.                                                      filterProperty : "id",  
  47.                                                      width : "100px"  
  48.                                                      }));  
  49.               
  50.             // define the Table columns  
  51.             var oControl = new sap.ui.commons.TextView({  
  52.                                                        text : "{FirstName}"  
  53.                                                        }); // short binding notation  
  54.             oTable.addColumn(new sap.ui.table.Column({  
  55.                                                      label : new sap.ui.commons.Label({  
  56.                                                                                       text : "First Name"  
  57.                                                                                       }),  
  58.                                                      template : oControl,  
  59.                                                      sortProperty : "firstName",  
  60.                                                      filterProperty : "firstName",  
  61.                                                      width : "100px"  
  62.                                                      }));  
  63.               
  64.             // define the Table columns  
  65.             var oControl = new sap.ui.commons.TextView({  
  66.                                                        text : "{LastName}"  
  67.                                                        }); // short binding notation  
  68.             oTable.addColumn(new sap.ui.table.Column({  
  69.                                                      label : new sap.ui.commons.Label({  
  70.                                                                                       text : "Last Name"  
  71.                                                                                       }),  
  72.                                                      template : oControl,  
  73.                                                      sortProperty : "lastName",  
  74.                                                      filterProperty : "lastName",  
  75.                                                      width : "100px"  
  76.                                                      }));  
  77.               
  78.             var oModel = new sap.ui.model.odata.ODataModel(  
  79.                                                            "http://localhost:8080/jpa2/Employee.svc/");  
  80.               
  81.             //var oModel = new sap.ui.model.odata.ODataModel(serviceUrl);  
  82.               
  83.             oTable.setModel(oModel);  
  84.             oTable.bindRows("/Employees");  
  85.               
  86.             // finally place the Table into the UI  
  87.             oTable.placeAt("content");  
  88.             </script>  
  89.           
  90.         <script type="text/javascript" src="cordova.js"></script>  
  91.           
  92.         <title>Hello World</title>  
  93.     </head>  
  94.       
  95.     <body class="sapUiBody" role="application">  
  96.         <div id="content"></div>  
  97.     </body>  
  98.   
  99. </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开发智能手机应用。



在使用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。

Apache Cordova介绍

在看一些公司招聘的工作描述中看到跨平台框架Cordova,但对它是一点都不了解,于是在网上找了一些小资料作为笔记!...
  • itluochen
  • itluochen
  • 2016年08月09日 11:09
  • 696

科尔多瓦(Cordova)系列1 -- Cordova是什么?

鸣谢:本系列文章是我在阅读 John M. Wargo 所著的 期间,作为读书笔记记录下来的。感谢作者! PS:有条件的同学请购买正版图书参阅。Cordova是什么?Cordova是一个开源框架,...
  • simonezhlx
  • simonezhlx
  • 2016年09月09日 12:06
  • 654

cordova

Cordova+Ionic+Angularjs开发研究之Cordova Cordova Ionic Angularjs Cordova概念Cordova是Apache的一个开源移动端开发框架。可以使用...
  • u013108408
  • u013108408
  • 2016年07月04日 21:08
  • 536

Web编程学习八:通过Apache Cordova将Web应用移动化

上一个练习,做了一个简单但是完整的Web应用,使用HTML5技术实现的。 现在我再通过Apache Cordova来将其封装为iOS上的移动应用。 我们可以看到基本上不需要做任何修改就可以迁移到iOS...
  • starshus
  • starshus
  • 2014年04月02日 12:29
  • 17909

Apache Cordova介绍

Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头、加速计。它可以与UI框架(如jQuery Mobile或Dojo Mobil...
  • u011127019
  • u011127019
  • 2015年07月21日 10:24
  • 524

Cordova的使用

Cordova的使用一、cordova简介 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。 Cordova还提...
  • XiaBuDongDongDeHan
  • XiaBuDongDongDeHan
  • 2016年07月05日 10:25
  • 289

Cordova封装WepApp

基于cordova的butterfly应用 Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头、加速计。它可以与UI框架(如j...
  • u010436741
  • u010436741
  • 2015年04月29日 10:45
  • 1245

apache cordova 开发环境搭建

apache cordova 开发环境搭建 由于本人第一次写博客,会存在许多的书写问题,请大家多多谅解         APP开发现在火得一塌糊涂,许多公司需要引进相关的技术人员,即android,...
  • yangshiman
  • yangshiman
  • 2015年03月06日 14:22
  • 544

Tools for Apache Cordova for VS2013 的跨平台开发

vs2013 Apache Cordova的下载安装及环境配置
  • Yy921117
  • Yy921117
  • 2016年12月14日 21:26
  • 1162

浅谈Cordova框架

本章节讲述Cordova框架。 目录 为何要用Cordova 什么是Cordova Cordova中UML类图 Cordova实现机制 小结 为何要用Cordova...
  • weixin_37730482
  • weixin_37730482
  • 2017年06月29日 17:22
  • 826
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Apache Cordova介绍
举报原因:
原因补充:

(最多只允许输入30个字)