如何在Scope的query界面中创建按钮并捕获按钮事件

在实际的Scope中，如果我们的搜寻的结果多过一个屏幕，这个时候，我们可以通过创建一些按钮来帮我们进行翻页．当然我们也可以使用按钮来做一些其它的功能，这完全依赖于我们对我们的Scope的具体的设计．比如，在下面的Scope的画面中，我们创建了＂Next＂，＂Previous＂及＂Top＂.在这篇文章中，我们将介绍如何创建这些按钮，并捕获这些按钮的事件．

下面，我们来介绍如何创建这些按钮．

１）在query中创建按钮

query.cpp

我们定义如下的函数：

void Query::showNext(sc::SearchReplyProxy const& reply, sc::CategorisedResult res, int next_breadcrumb)
{
    res.set_uri("http://ubuntu.com");
    //Translators: this means show the next page of results
    std::string show_more =  _("Next");
    res.set_title("<b>" + show_more + "</b>");
    res["get_next"] = "true";
    res.set_intercept_activation();
    res["api_page"] = sc::Variant(next_breadcrumb);
    if (!reply->push(res)) {
        return;
    }
}

void Query::showPrevious(sc::SearchReplyProxy const& reply, sc::CategorisedResult res)
{
    res.set_uri("http://ubuntu.com");
    //Translators: this means show the previous page of results
    std::string show_prev =  _("Previous");
    res.set_title("<b>" + show_prev + "</b>");
    res["get_previous"] = "true";
    res.set_intercept_activation();
    if (!reply->push(res)) {
        return;
    }
}

void Query::showTop(sc::SearchReplyProxy const& reply, sc::CategorisedResult res)
{
    res.set_uri("http://ubuntu.com");
    //Translators: this means return to the top page (the first page) of results
    std::string top = _("Top");
    res.set_title("<b>" + top + "</b>");
    res["go_to_top"] = "true";
    res.set_intercept_activation();
    if (!reply->push(res)) {
        return;
    }
}

void Query::createButtons(const unity::scopes::SearchReplyProxy &reply) {
    auto buttons_cat = reply->register_category("buttons", "", "",
                                                sc::CategoryRenderer(BUTTONS_TEMPLATE));
    // Show the next button
    sc::CategorisedResult res(buttons_cat);
    showNext(reply, res, 1);

    // show the preview button
    sc::CategorisedResult prev_res(buttons_cat);
    showPrevious(reply, prev_res);

    // show the top button
    sc::CategorisedResult top_res(buttons_cat);
    showTop(reply, top_res);
}

它们被用来创建我们所需要的按钮．注意上面的＂res.set_intercept_activation()＂．它可以让我们在我们下面的Action中捕获这个事件．．在这里，BUTTONS_TEMPLATE的定义如下：

const static string BUTTONS_TEMPLATE =
        R"(
{
        "schema-version": 1,
        "template": {
        "category-layout": "vertical-journal",
        "card-size": "small",
        "card-background":"color:///#12a3d8"
        },
        "components": {
        "title": "title"
        }
        }
        )";

我们在query的run方法中调用我们上面创建的createButtons:

void Query::run(sc::SearchReplyProxy const& reply) {
    try {

        // We can play a two buttons on the top
        createButtons(reply);
        ...

 } catch (domain_error &e) {
        // Handle exceptions being thrown by the client API
        cerr << e.what() << endl;
        reply->error(current_exception());
    }
}

这样我们就可以在最上面显示我们所需要的按钮．事实上，就是通过push的方法来生产一个我们喜欢颜色的方块．

２）捕获按钮事件

按照如下的方法来捕获我们的按钮事件．我们必须在scope.cpp中创建如下的方法：

scope.cpp

sc::ActivationQueryBase::UPtr Scope::activate(sc::Result const& result,
                                              sc::ActionMetadata const& metadata)
{
    cerr << "activate" << endl;
    return sc::ActivationQueryBase::UPtr(new Action(result, metadata, *this));
}

action.cpp

创建我们所需要的构造函数：

Action::Action(us::Result const& result,
               us::ActionMetadata const& metadata,
               scope::Scope & scope):
    result_(result),
    scope_(scope),
    ActivationQueryBase(result, metadata)
{
}

在activate()方法中处理我们所需要的按键事件．

sc::ActivationResponse Action::activate()
{
    qDebug() << "in activate()";

    try {
        std::string val = result_["get_previous"].get_string();
        qDebug() << "PREVIOUS button is clicked!";
        us::CannedQuery cq("scopetemplates.xiaoguo_scopetemplates");
        // restore the previous search. We can save the state in query
        // and save the states into the members of scope.
        //        cq.set_filter_state(scope_.filter_state);
        //        cq.set_query_string(scope_.previous_query);
        return us::ActivationResponse(cq);
    }
    catch ( unity::LogicException &e){
    }

    try {
        std::string val = result_["get_next"].get_string();
        qDebug() << "NEXT button is clicked!";
        us::CannedQuery cq("scopetemplates.xiaoguo_scopetemplates");
        // restore the previous search
        //        cq.set_filter_state(scope_.filter_state);
        //        if (scope_.previous_query.empty())
        //            cq.set_department_id(scope_.previous_dept_id);
        //        cq.set_query_string("");
        return us::ActivationResponse(cq);
    }
    catch ( unity::LogicException &e){
    }

    ...
}

我们可以在Activation中捕获这些按钮的事件．当我们返回的时候，我们可以参照文章＂ 如果在Scope中的Preview中发起一个query请求＂及文章＂ 运用link query特性query自己的Scope中department或其它scope中的department＂调到我们需要的department中或通过 set_query_string生产一个新的query．

在Desktop下运行，我们可以看到我们在按下按钮时的事件：

整个项目的源码在： https://github.com/liu-xiao-guo/scopetemplates_buttons