利用gallery在Ubuntu Scope中显示多张图片

在这篇文章中,我们将介绍如何使用gallery PreviewWidget在Scope Preview中显示多幅图片。更多关于PreviewWidget类型可以参阅API

首先,我们来下载我们上一节课里讲到的scopetemplate例程:

git clone https://gitcafe.com/ubuntu/scopetemplates_video.git

为了能够显示多幅图片,我们对我们的程序做了如下的修改:

query.cpp

  // add an array to show the gallary of it
    sc::VariantArray arr;

    for(const auto &datum : icons_) {
        arr.push_back(Variant(datum.toStdString()));
    }

    r["array"] = sc::Variant(arr);

在这里,我们把我们本地的图片压入到一个VariantArray中,并写入到“array”字段里。

preview.cpp

    Result result = PreviewQueryBase::result();
    PreviewWidget listen("tracks", "audio");
    {
        VariantBuilder builder;
        builder.add_tuple({
            {"title", Variant("This is the song title")},
            {"source", Variant(result["musicSource"].get_string().c_str())}
        });
        listen.add_attribute_value("tracks", builder.end());
    }

    PreviewWidget video("videos", "video");
    video.add_attribute_value("source", Variant(result["videoSource"].get_string().c_str()));
    video.add_attribute_value("screenshot", Variant(result["screenshot"].get_string().c_str()));

    sc::PreviewWidget header_gal("gallery_header", "header");
    header_gal.add_attribute_value("title", Variant("Gallery files are:"));

    PreviewWidget gallery("gallerys", "gallery");
    gallery.add_attribute_value("sources", Variant(result["array"]));

    PreviewWidgetList widgets({ image, header, description });

    if ( result["musicSource"].get_string().length() != 0 ) {
        widgets.emplace_back(listen);
    }

    if( result["videoSource"].get_string().length() != 0 ) {
        widgets.emplace_back(video);
    }

    if( result["array"].get_array().size() != 0 ) {
        widgets.emplace_back(header_gal);
        widgets.emplace_back(gallery);
    }

    reply->push( widgets );

在这里,我们创建了一个新的header叫做header_gal。它用来向我们提示一个header,同时,我们直接使用:

    PreviewWidget gallery("gallerys", "gallery");
    gallery.add_attribute_value("sources", Variant(result["array"]));

    PreviewWidget gallery("gallerys", "gallery");
    gallery.add_attribute_mapping("sources", "array");

把array字段的内容映射到sources里,这样就可以让gallery得到正确的显示:

运行我们的Scope:

    

整个项目的源码在:git clone https://gitcafe.com/ubuntu/scopetemplates_gallery.git

时间: 2024-11-05 10:27:20

利用gallery在Ubuntu Scope中显示多张图片的相关文章

利用reviews PreviewWidget在Ubuntu Scope中显示评价等级

我们可以利用reviews PreviewWidget来对我们的结果进行显示评价.比如对点评来说,如果是5星的评价,我们可以显示5个星表示客户对商品最高认可. 参阅我们的API的连接,我们可以看到如下的代码: { PreviewWidget w1("summary", "reviews"); w1.add_attribute_value("rating-icon-empty", Variant("file:///tmp/star-emp

利用video PreviewWidget在Ubuntu Scope中播放video

在先前的例程中,我们探讨了如何利用audio PreviewWidget在Scope中播放音乐.在这篇文章中,我们将介绍如何使用videoPreviewWidget来播放一个video. 我们首先来下载我在上一篇文章中的例程: git clone https://gitcafe.com/ubuntu/scopetemplates_audio.git 为了加入video PreviewWidget,我在我们的例程中加入了如下的句子: query.cpp r["videoSource"]

细细品味Ubuntu Scope中的category renderer模版

当我第一次接触Ubuntu Scope时,我发现这个Category Renderer太神奇.它可以把我们想要的数据很简单而直接的方式呈现给我们.但是由于资料的限制,我们很难知道它最终的显示的形式是什么样的.我们可以在我们的英文的网站的文章"Customization and branding"找到一下信息.但是总觉得意犹未尽,加之没有代码,有时很难理解它到底讲的是什么.在这篇文章中,我们来详细地介绍各种模版,并看看它们的显示格式.详细这对广大的开发者来说非常有用.我们可以修改这些模版

利用audio PreviewWidget在Scope中来播放音乐

在我们的Scope PreviewWidget,我们可以利用audio PreviewWidget来播放我们的音乐.这对一些音乐的Scope来说,非常中要.在今天的练习中,我们来利用这个它来在我们的Scope中来试听我们的音乐. 首先我们来利用我们已经做好的Scope.我们可以下载我们先前做好的Scope: git clone https://gitcafe.com/ubuntu/scopetemplates.git 在我们的query.cpp中,我们来添加如下的项: query.cpp voi

如何在Ubuntu Scope中定义设置变量并读取

在本遍文章中,我们来讲解怎么对我们的Ubuntu Scope进行设置.对Scope而言,有些时候我们希望能够使用设置来改变我们的显示,或对我们的搜索进行重新定义.关于更多Scope的开发,请参阅网站:http://developer.ubuntu.com/scopes/ 1)首先创建一个最基本的Scope 我们首先打开SDK,并选择"Unity Scope"模版.我们选择一个项目的名称为"settingscope": 接下来,我们选择"Empty scop

怎么在Ubuntu Scope中获取location地址信息

Location信息对很多有地址进行搜索的应用来说非常重要.比如对dianping这样的应用来说,我们可以通过地址来获取当前位置的一些信息.在这篇文章中,我们来介绍如何获取Scope架构中的位置信息.这个位置信息可以对我们很多的搜索是非常重要的. 1)创建一个简单的Scope应用 我们首先打开SDK,并选择"Unity Scope"模版: 接下来,我们选择"Empty scope".这样我们就创建了我们的一个最基本的scope了. 我们可以运行我们的Scope.这是

如何在Ubuntu Scope中利用Filter来更加精准地提高搜索的质量

在Ubuntu的Scope,目前正在研发一个新的Filter的功能.我们可以在我们的开发者网站找到有关filter的更多的信息.在那里你可以看到一些关于filter的介绍,但是真正地入手去利用它还是有一定的难度的.今天在我们的例程中,我们来具体展示如何利用filter实现更好的搜索.在实际的应用中,比如我们可以通过filter来实现如下的ctrip的Scope:     在上面的中间的图中,我们可以看到"重庆"被选中了,在第二个列中,我们可以使用我们的department来进行从一个城

如何在Scope中利用keyword来使自己的Scope在聚合Scope中展示自己

在前面的文章"Scopes 关键词 (keyword)及departments探讨(英文视频)"中,我们已经对Scope中的keyword做了一些基本的介绍.但是我们没有相应的教程.在这篇文章中,我们将通过youku Scope来介绍如何使用keyword从而使得一个Scope在不同的聚合Scope中来得到不同的呈现. 如果大家对如何开发Scope还不是很熟的话,请参阅我的教程"在Ubuntu OS上创建一个dianping Scope (Qt JSON)".如果大

自定义圆形滚动条(在自定义标题栏中显示)--利用开源项目ProgressWheel(二)

本篇是ProgressWheel使用的第二篇(尾篇),功能是在自定义标题栏中显示ProgressWheel滚动条. 本篇引用的开源项目依然是ProgressWheel,地址: https://github.com/Todd-Davies/ProgressWheel 本篇效果图: 自定义滚动条(在自定义标题栏中显示)的实现: 1)activity_progress_wheel_test. xml: <RelativeLayout xmlns:android="http://schemas.a