在这篇文章中,我们将详细介绍如何使用Cordova Camera HTML5 应用。更多关于Cordova的开发指南,开发者可以参考文章“the Cordova Guide”。通过这个例程,我们可以学习在Ubuntu平台上如何利用Cordova API来完成一个我们所需要的照相机功能。关于如何创建一个Cordova架构的简单的应用,开发者可以参阅文章“如何在Ubuntu手机平台中开发Cordova HTML5应用”。在那篇文章中,它介绍了如何设置自己的环境。建议开发者先阅读该文章。
在我们做练习之前,我们可以在我们想要创建应用目录的下面,打入如下的命令:
$ bzr branch lp:ubuntu-sdk-tutorials
在上面的代码中,有一个已经完成好的Camera代码。
1)创建一个最基本的Cordova框架应用
由于一些原因,Cordova的开发环境没有集成到Qt Creator中去,所以我们只有通过命令行来完成我们的操作。我们可以参阅文章“
如何在Ubuntu手机平台中开发Cordova HTML5应用”来创建一个叫做Camera的简单应用:
$ cordova create cordovacam cordovacam.mycompany "CordovaCam"
$ cd cordovacam
2)定义应用自己的图标
我们可以自己设计一个图标为我们想要创建的应用。为了方便,我们可以直接从我们已经下载好的应用ubuntu-sdk-tutorials/html5/html5-tutorial-cordova-camera目录中直接拷贝过来我们所需要的图标:
$ cp ../ubuntu-sdk-tutorials/html5/html5-tutorial-cordova-camera/www/icon.png ./www/img/logo.png
然后,我们需要修改我们的config.xml文件,添加如下的项到它里面去:
<icon src="www/img/logo.png" />
当然,我们也有必要修改作者自己的邮件地址。修改完后,config.xml的显示如下:
<?xml version='1.0' encoding='utf-8'?>
<widget id="cordovacam.mycompany" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>CordovaCam</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="myname@mycompany.com" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<icon src="www/img/logo.png" />
</widget>
注意: 这一步必不可少,否则我们的应用通过不了package的验证。
3)添加Ubuntu平台支持代码到项目中
我们可以利用如下的命令来添加我们的Ubuntu支持代码:
$ cordova platform add ubuntu
现在你的项目中将有如下的目录:
- platforms/ubuntu/
由于我们需要使用到Camera的功能,所有我们需要在如下的文件中添加camera的security policy:
cordovacam/platforms/ubuntu/apparmor.json
{
"policy_groups": ["networking", "camera”, "audio"],
"policy_version":1
}
否则我们的照相机功能在手机中将不能工作。
4)添加Camera API支持
通过如下的命令:
$ cordova plugin add org.apache.cordova.camera
来添加Cordova runtime到你的项目中去。
5)运行我们的应用
$ cordova run --device --debug
就像在我们之前文章“ 如何在Ubuntu手机平台中开发Cordova HTML5应用”中介绍的那样,这个命令是在利用默认的平台进行运行的(目前是14.10)。在其它的平台上,你需要在它的后面加上平台的参数:
$ cordova run --device -- --framework ubuntu-sdk-15.04
如果没有任何问题的话,你将看到如下的画面:
到目前位置,我们已经完创建了我们的最基本的Cordova Camera框架应用,但是我们还是没有做任何的界面及Camera功能的调用。
6)定义HTML 5用户界面
在这节里,我们将设计我们的HTML 用户界面。我们修改index.html(cordovacam/www/index.html)文件如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An Ubuntu HTML5 application</title>
<meta name="description" content="An Ubuntu HTML5 application">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- Ubuntu UI Style imports - Ambiance theme -->
<link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
<!-- Ubuntu UI javascript imports - Ambiance theme -->
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
<!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
<script src="cordova.js"></script>
<!-- Application script and css -->
<script src="js/app.js"></script>
<link href="css/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="mainview">
<header data-role="header">
<ul data-role="tabs">
<li data-role="tabitem" data-page="camera">Camera</li>
</ul>
</header>
<div data-role="content">
<div data-role="tab" id="camera">
<div id="loading">
<header>Loading...</header>
<progress class="bigger">Loading...</progress>
</div>
<div id="loaded">
<button data-role="button" class="ubuntu" id="click">Take Picture</button>
<img id="image" src="" />
</div>
</div> <!-- tab: camera -->
</div> <!-- content -->
</div> <!-- mainview -->
</body>
</html>
这里的界面非常简单,一个progress及一个可以按下照相的按钮。这里注意一下下面的代码:
<!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
<script src="cordova.js"></script>
<!-- Application script and css -->
<script src="js/app.js"></script>
<link href="css/app.css" rel="stylesheet" type="text/css" />
这里有一个app.css文件,一个app.js文件。我们需要把原来的index.css及index.js文件换成它们。
app.css
#loading {
position: absolute;
left:45%;
}
#loaded {
display: none;
}
app.js
/**
* Wait before the DOM has been loaded before initializing the Ubuntu UI layer
*/
window.onload = function () {
var UI = new UbuntuUI(); // This must be called after window is loaded
UI.init();
document.addEventListener("deviceready", function() {
if (console && console.log)
console.log('Platform layer API ready');
//hide the loading div and display the loaded div
document.getElementById("loading").style.display = "none";
document.getElementById("loaded").style.display = "block";
// event listener to take picture
UI.button("click").click( function() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 100,
targetWidth: 400,
targetHeight: 400,
destinationType: Camera.DestinationType.DATA_URL,
correctOrientation: true
});
console.log("Take Picture button clicked");
}); // "click" button event handler
}, false); // deviceready event handler
}; // window.onload event handler
// show new picture in html and log
function onSuccess(imageData) {
var image = document.getElementById('image');
image.src = "data:image/jpeg;base64," + imageData;
image.style.margin = "10px";
image.style.display = "block";
}
// log failure message
function onFail(message) {
console.log("Picture failure: " + message);
}
在这里,
我们必须注意的是:
var UI = new UbuntuUI(); // This must be called after window is loaded
这里的设计非常简单。我不在累述。我们选择试着来运行我们的应用到手机上去。运行的显示如下:
显然,它没有我们所希望看到的结果。为什么呢?
我们回头来看看我们的UI设计:
<body>
<div data-role="mainview">
<header data-role="header">
<ul data-role="tabs">
<li data-role="tabitem" data-page="camera">Camera</li>
</ul>
</header>
<div data-role="content">
<div data-role="tab" id="camera">
<div id="loading">
<header>Loading...</header>
<progress class="bigger">Loading...</progress>
</div>
<div id="loaded">
<button data-role="button" class="ubuntu" id="click">Take Picture</button>
<img id="image" src="" />
</div>
</div> <!-- tab: camera -->
</div> <!-- content -->
</div> <!-- mainview -->
</body>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
<script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
它依赖于手机系统提供的ambiance。这有可能造成我们的UI和目前的最新的ambiance不能够完全匹配。为了解决这个问题,我们参考连接 https://code.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/+merge/253498
来解决这个问题。在我的博客文章中“
为HTML5应用创建独立于平台的Theme”我也做了详细的介绍。
我们做如下的步骤:
$ ubuntu-html5-theme install 14.10
$ ubuntu-html5-theme convert
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>An Ubuntu HTML5 application</title>
<meta name="description" content="An Ubuntu HTML5 application">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- Ubuntu UI Style imports - Ambiance theme -->
<link href="ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
<!-- Ubuntu UI javascript imports - Ambiance theme -->
<script src="ambiance/js/fast-buttons.js"></script>
<script src="ambiance/js/core.js"></script>
<script src="ambiance/js/buttons.js"></script>
<script src="ambiance/js/dialogs.js"></script>
<script src="ambiance/js/page.js"></script>
<script src="ambiance/js/pagestacks.js"></script>
<script src="ambiance/js/tabs.js"></script>
<!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
<script src="cordova.js"></script>
<!-- Application script and css -->
<script src="js/app.js"></script>
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="mainview">
<header data-role="header">
<ul data-role="tabs">
<li data-role="tabitem" data-page="camera">Camera</li>
</ul>
</header>
<div data-role="content">
<div data-role="tab" id="camera">
<div id="loading">
<header>Loading...</header>
<progress class="bigger">Loading...</progress>
</div>
<div id="loaded">
<button data-role="button" class="ubuntu" id="click">Take Picture</button>
<img id="image" src="" />
</div>
</div> <!-- tab: camera -->
</div> <!-- content -->
</div> <!-- mainview -->
</body>
</html>
我们可以看出如下的部分已经发生改变:
<!-- Ubuntu UI javascript imports - Ambiance theme -->
<script src="ambiance/js/fast-buttons.js"></script>
<script src="ambiance/js/core.js"></script>
<script src="ambiance/js/buttons.js"></script>
<script src="ambiance/js/dialogs.js"></script>
<script src="ambiance/js/page.js"></script>
<script src="ambiance/js/pagestacks.js"></script>
<script src="ambiance/js/tabs.js"></script>
并且在当前的cordovacam/www目录下多了一个叫做“ ambiance”的目录。这样应用再也不依赖于系统所提供的ambiance了。
特别需要支持的是:如果你的界面不需要使用
HTML5 UI Toolkit,你可以不做上面的步骤。
重新运行我们的应用:
$ cordova run --device --debug