在以前的例子“利用ContentHub API来import图片”及“使用ContentHub来导入我们需要的照片”中，我们已经讲述了如何从别的应用中提取一个图片到我们的应用中。我们也在我们的另外一个文章“如何通过ContentHub把内容从一个地方传到另外一个地方”介绍了如何把我们应用的照片存放到我们想要的目录中。这一切都是通过ContentHub API来实现的。在今天的文章中，我们将着重介绍如何使自己的应用变成一个exporter，从而别的应用可以从我们的应用中import图片等到它的应用中。同时我们也可以把我们的照片分享或传人到其它的应用中去。
我们可以用我们常用的方法来创建一个叫做“contenhub-exporter”的qmlproject项目：
我们想把我们的应用变为一个可以export图片的应用。更多的类型可以在地址找到。
| Type | Description |
|---|---|
| ContentType.Uknown | Unknown type |
| ContentType.Documents | Documents |
| ContentType.Pictures | Pictures |
| ContentType.Music | Music |
| ContentType.Contacts | Contacts |
| ContentType.Videos | Videos |
| ContentType.Links | Links |
| ContentType.EBooks | EBooks |
| ContentType.All | Any of the above content types |
我们在我们项目的根目录里，同时创建一个叫做“content-hub”的目录，同时也创建一个叫做“hub-exporter.json”的文件，它的内容为：
{
"source": [
"pictures"
]
}
为了应用这个文件，我们必须同时也修改我们mainifest.json文件：
{
"name": "contenthub-exporter.liu-xiao-guo",
"description": "description of contenthub-exporter",
"architecture": "all",
"title": "contenthub-exporter",
"hooks": {
"contenthub-exporter": {
"apparmor": "contenthub-exporter.apparmor",
"desktop": "contenthub-exporter.desktop",
"content-hub": "content-hub/hub-exporter.json"
}
},
"version": "0.1",
"maintainer": "XiaoGuo, Liu <xiaoguo.liu@canonical.com>",
"framework": "ubuntu-sdk-15.04"
}
好了，我们来设计我们的应用界面。我们的界面如下：
显然，这是一个GridView的界面。它里面显示了一些图片。我们为此定义了如下的ListModel以便使用。
ListModel {
id: images
// Text
ListElement {
src: "Some text to share"
selected: false
contentType: ContentType.Text
}
// Images
ListElement {
src: "images/1.jpg"
selected: false
contentType: ContentType.Pictures
}
ListElement {
src: "images/2.jpg"
selected: false
contentType: ContentType.Pictures
}
...
}
为了能够显示我们的GridView，我们必须有相应的delegate:
Component {
id: imageDelegate
Item {
id: curItem
width: units.gu(19)
height: width
property string url: contentType === ContentType.Text ? src : Qt.resolvedUrl(src)
property string preview: root.__getImageFromItem(images.get(index))
property bool selected: selected
UbuntuShape {
height: parent.width
width: height
image: Image {
id: image
source: preview
height: parent.width
width: height
sourceSize.height: height
sourceSize.width: width
fillMode: Image.PreserveAspectFit
smooth: true
}
Image {
id: selectionTick
anchors.right: parent.right
anchors.top: parent.top
width: units.gu(5)
height: units.gu(5)
visible: curItem.selected && root.pickMode
source: "photo-preview-selected-overlay.png"
}
}
MouseArea {
anchors.fill: parent
enabled: root.pickMode
onClicked: {
selected = !selected;
images.setProperty(index, "selected", selected);
}
}
MouseArea {
anchors.fill: parent
enabled: !root.pickMode
onPressAndHold: {
PopupUtils.open(actPopComp, emptyItemForCaller);
}
onClicked: {
if (!actPopComp.visible)
{
// PopupUtils.open(actPopComp, emptyItemForCaller);
pageStack.push(imageView, {"url": url,
"preview": preview,
"contentType": contentType});
}
}
}
/* create an empty item centered in the image to align the popover to */
Item {
id: emptyItemForCaller
anchors.centerIn: parent
z: 100
}
Component {
id: actPopComp
ActionSelectionPopover {
id: actPop
delegate: ListItem.Standard {
text: action.text
}
actions: ActionList {
Action {
text: "Open with..."
onTriggered: {
PopupUtils.close(actPop);
if (contentType === ContentType.Text) {
pageStack.push(picker, {"url": src,
"handler": ContentHandler.Destination,
"contentType": contentType});
} else {
pageStack.push(picker, {"url": url,
"handler": ContentHandler.Destination,
"contentType": contentType});
}
}
}
Action {
text: "Share"
onTriggered: {
PopupUtils.close(actPop);
if (contentType === ContentType.Text) {
pageStack.push(picker, {"url": src,
"handler": ContentHandler.Share,
"contentType": contentType});
} else {
pageStack.push(picker, {"url": url,
"handler": ContentHandler.Share,
"contentType": contentType});
}
}
}
}
}
}
}
}
UbuntuShape {
height: parent.width
width: height
image: Image {
id: image
source: preview
height: parent.width
width: height
sourceSize.height: height
sourceSize.width: width
fillMode: Image.PreserveAspectFit
smooth: true
}
Image {
id: selectionTick
anchors.right: parent.right
anchors.top: parent.top
width: units.gu(5)
height: units.gu(5)
visible: curItem.selected && root.pickMode
source: "photo-preview-selected-overlay.png"
}
}
当我们点击它时，在作为exporter时，也即pickMode为真时：
property bool pickMode: (root.activeTransfer.state === ContentTransfer.InProgress &&
root.activeTransfer.direction === ContentTransfer.Import)
MouseArea {
anchors.fill: parent
enabled: root.pickMode
onClicked: {
selected = !selected;
images.setProperty(index, "selected", selected);
}
}
右上角出现一个折起来的角，表明被选中。我们可以选择“Select”按钮，并实现把图片传人到importer的应用中。
当我们的应不处于pickMode时，我们点击图片：
MouseArea {
anchors.fill: parent
enabled: !root.pickMode
onPressAndHold: {
PopupUtils.open(actPopComp, emptyItemForCaller);
}
onClicked: {
if (!actPopComp.visible)
{
// PopupUtils.open(actPopComp, emptyItemForCaller);
pageStack.push(imageView, {"url": url,
"preview": preview,
"contentType": contentType});
}
}
}
如果只是点击，就会出现如下的画面：
照片被打开并显示于屏幕上，同时，在应用的标题上，我们可以点击“+”来选择应用来传人照片及一个分享的图标。这是通过如下的imageView来实现的：
Page {
id: imageView
visible: false
property var url
property var contentType
title: i18n.tr("Image detais")
property alias preview: image.source
tools: ToolbarItems {
ToolbarButton {
action: Action {
text: "Open with..."
iconName: "add"
onTriggered: {
pageStack.push(picker, {"url": imageView.url, "handler": ContentHandler.Destination, "contentType": imageView.contentType });
}
}
}
ToolbarButton {
action: Action {
text: "Share"
iconName: "contact-group"
onTriggered: {
pageStack.push(picker, {"url": imageView.url, "handler": ContentHandler.Share, "contentType": imageView.contentType });
}
}
}
}
Image {
id: image
anchors.fill: parent
sourceSize.height: height
sourceSize.width: width
}
}整个应用的代码在：git clone https://gitcafe.com/ubuntu/contenthub-exporter.git
同时，为了配合我们的测试，我也设计了我们的contenthub-importer应用：git clone https://gitcafe.com/ubuntu/contenthub-importer.git
contenthub importer 的应用界面：
我们通过点击位于contenthub-exporter位置中的“import”按钮，就可以把我们想要的图片导入到我们的应用(contenthub-importer)中了。
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文：http://blog.csdn.net/ubuntutouch/article/details/47780431
