在Scope中利用Comment-input来列举我们的评论

在新的Scope设计中，有一个新的Comment-input PreviewWidget．这个可以帮我用来列举我们收到评论，比如在点评中，对一个餐馆的评论文字．

在上面的显示中，我们显示了Author，时间，及Comments．在今天的实验中，我们将介绍如何实现这样的功能．

我们首先还是从我们以前做过的练习中来讲述．下载我们的代码：

$ git clone https://github.com/liu-xiao-guo/scopetemplates_rating_input

在我们的代码中，我们添加如下的东西：

query.cpp

void Query::pushResult(sc::SearchReplyProxy const& reply,                       const string renderer, int i) {    stringstream ss;    ss << i;    string str = ss.str();    auto cat = reply->register_category( "id" + str, "Template " + str ,                                         "", sc::CategoryRenderer(renderer) );    sc::CategorisedResult r(cat);    r.set_uri( URI.toStdString() );    r.set_art( images_[0].toStdString() );//    r.set_art("http://api.map.baidu.com/images/weather/night/leizhenyu.png");    r["subtitle"] = "Subtitle " + str;    r.set_title("Title " + str);    r["summary"] = "Summary: " + str;    r["fulldesc"] = "fulldesc: " + str;    r["mascot"] = icons_[0].toStdString();    r["emblem"] = icons_[1].toStdString();    r["background"] = background_.toStdString();    r["overlay-color"] = "#FF0000";    r["comment_icon"] = icons_[3].toStdString();    QString likes = QString("%1 %2").arg(qstr(u8"\u261d "), "100");    QString views = QString("%1 %2").arg(qstr(u8"   \u261f "), "99");    std::string both = qstr("%1 %2").arg(likes,views).toStdString();    sc::VariantBuilder builder;    builder.add_tuple({        {"value", Variant(both)}    });    builder.add_tuple({        {"value", Variant("")}    });    r["attributes"] = builder.end();    r["musicSource"] = "http://qqmp3.djwma.com/mp3/魔音神据极品私货这锯子拉的耳膜都要碎了.mp3";    r["videoSource"] = "http://techslides.com/demos/sample-videos/small.mp4";    r["screenshot"] = icons_[2].toStdString();    // 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);    if (!reply->push(r))        return;}

在上面，我们加入了：

    r["comment_icon"] = icons_[3].toStdString();

这是我们需要显示Comment时最左边的图标．

preview.cpp

void Preview::run(sc::PreviewReplyProxy const& reply) {    // Support three different column layouts    ColumnLayout layout1col(1);    std::vector<std::string> ids = { "image", "header", "summary", "tracks",                                    "videos", "gallery_header", "gallerys", "reviews", "exp",                                     "review_input", "rating_input", "inputId" };    ColumnLayout layout2col(2);    layout2col.add_column(ids);    layout2col.add_column({});    ColumnLayout layout3col(3);    layout3col.add_column(ids);    layout3col.add_column({});    layout3col.add_column({});    // Define the header section    sc::PreviewWidget header("header", "header");    // It has title and a subtitle properties    header.add_attribute_mapping("title", "title");    header.add_attribute_mapping("subtitle", "subtitle");    // Define the image section    sc::PreviewWidget image("image", "image");    // It has a single source property, mapped to the result's art property    image.add_attribute_mapping("source", "art");    // Define the summary section    sc::PreviewWidget description("summary", "text");    // It has a text property, mapped to the result's description property    description.add_attribute_mapping("text", "description");    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"]));    gallery.add_attribute_mapping("sources", "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);    }    // The following shows the review    PreviewWidget review("reviews", "reviews");    VariantBuilder builder;    builder.add_tuple({                          {"author", Variant("John Doe")},                          {"review", Variant("very good")},                          {"rating", Variant(3.5)}                      });    builder.add_tuple({                          {"author", Variant("Mr. Smith")},                          {"review", Variant("very poor")},                          {"rating", Variant(5)}                      });    review.add_attribute_value("reviews", builder.end());    widgets.emplace_back(review);    // The following shows the expandable    PreviewWidget expandable("exp", "expandable");    expandable.add_attribute_value("title", Variant("This is an expandable widget"));    expandable.add_attribute_value("collapsed-widgets", Variant(1));    PreviewWidget w1("w1", "text");    w1.add_attribute_value("title", Variant("Subwidget 1"));    w1.add_attribute_value("text", Variant("A text"));    PreviewWidget w2("w2", "text");    w2.add_attribute_value("title", Variant("Subwidget 2"));    w2.add_attribute_value("text", Variant("A text"));    expandable.add_widget(w1);    expandable.add_widget(w2);    widgets.emplace_back(expandable);    // The following shows a review rating-input    PreviewWidget w_review("review_input", "rating-input");    w_review.add_attribute_value("submit-label", Variant("Send"));    w_review.add_attribute_value("visible", Variant("review"));    w_review.add_attribute_value("required", Variant("review"));    std::string reply_label = "Reply";    std::string max_chars_label = "140 characters max";    w_review.add_attribute_value("review-label", Variant(reply_label + ": " + max_chars_label));    widgets.emplace_back(w_review);    // The follwing shows a rating rating-input    PreviewWidget w_rating("rating_input", "rating-input");    w_rating.add_attribute_value("visible", Variant("rating"));    w_rating.add_attribute_value("required", Variant("rating"));    w_rating.add_attribute_value("rating-label", Variant("Please rate this"));    widgets.emplace_back(w_rating);    PreviewWidget w_commentInput("inputId", "comment-input");    w_commentInput.add_attribute_value("submit-label", Variant("Post"));    widgets.emplace_back(w_commentInput);    // In the following, fake some comments data    QList<Comment> comment_list;    std::string comment_str = "Comment ";    for(int i = 0; i < 3;  i++) {        Comment comment;        comment.id         = 1.0;        comment.publishTime = "2015-3-18";        comment.text = comment_str;        comment.text += std::to_string(i+1);        comment_list.append(comment);    }    int index = 0;    Q_FOREACH(const auto & comment, comment_list) {        std::string id = "commentId_" + std::to_string(index++);        ids.emplace_back(id);        PreviewWidget w_comment(id, "comment");        w_comment.add_attribute_value("comment", Variant(comment.text));        w_comment.add_attribute_value("author", Variant("Author"));        w_comment.add_attribute_value("source", Variant(result["comment_icon"].get_string().c_str()));        w_comment.add_attribute_value("subtitle", Variant(comment.publishTime));        widgets.emplace_back(w_comment);    }    layout1col.add_column(ids);    reply->register_layout({layout1col, layout2col, layout3col});    reply->push( widgets );}

在上面的函数中，我们加入了如下的代码：

    PreviewWidget w_commentInput("inputId", "comment-input");    w_commentInput.add_attribute_value("submit-label", Variant("Post"));    widgets.emplace_back(w_commentInput);    // In the following, fake some comments data    QList<Comment> comment_list;    std::string comment_str = "Comment ";    for(int i = 0; i < 3;  i++) {        Comment comment;        comment.id         = 1.0;        comment.publishTime = "2015-3-18";        comment.text = comment_str;        comment.text += std::to_string(i+1);        comment_list.append(comment);    }    int index = 0;    Q_FOREACH(const auto & comment, comment_list) {        std::string id = "commentId_" + std::to_string(index++);        ids.emplace_back(id);        PreviewWidget w_comment(id, "comment");        w_comment.add_attribute_value("comment", Variant(comment.text));        w_comment.add_attribute_value("author", Variant("Author"));        w_comment.add_attribute_value("source", Variant(result["comment_icon"].get_string().c_str()));        w_comment.add_attribute_value("subtitle", Variant(comment.publishTime));        widgets.emplace_back(w_comment);    }    layout1col.add_column(ids);

在上面我们创建了一个叫做comment-input的PreviewWidget．同时，我们在显示每项comment时，使用了一个叫做comment的PreviewWidget．由于没有online数据，我们自己创建了一下fake的数据．运行我们的Scope，我们可以看到结果就像我们上面图显示的那样．

注意在上面的实现中，我们必须动态地添加每个创建的comment PreviewWidget，所以，有上面的语句：

layout1col.add_column(ids);

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