Among the latest Scope widgets is a new Content Sharing Widget. We can use this Widget to share our pictures to messages, Facebook, Twitter and other channels. For example, in our Scope Preview, we can share our content by clicking the share button on the picture.
\
\
Its design is also very simple and straightforward.
Let’s download the code from the exercise we’ve already done:
$ git clone https://github.com/liu-xiao-guo/scopetemplates_comment_input
Copy the code\
1) Add new image resources
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(); r["share_icon"] = icons_[4].toStdString(); r["share_pic"] = icons_[5].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/ the magic sound of god according to gourmet bootleg that saw the eardrum is broken. 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; } void Query::pushResult(sc::SearchReplyProxy const& reply, const std::shared_ptr<const Category>*cat, int i) { stringstream ss; ss << i; string str = ss.str(); sc::CategorisedResult r(*cat); r.set_uri( URI.toStdString() ); r.set_art( images_[i].toStdString() ); 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["comment_icon"] = icons_[3].toStdString(); r["share_icon"] = icons_[4].toStdString(); r["share_pic"] = icons_[5].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"] = ""; r["videoSource"] = ""; r["screenshot"] = ""; // This is to ensure that the preview can well for the grid/carousel/lists... VariantArray arr; r["array"] = sc::Variant(arr);; if (! reply->push(r)) return; }Copy the code\
Above we added two new images:
\
r["share_icon"] = icons_[4].toStdString();
r["share_pic"] = icons_[5].toStdString();
Copy the code\
Notice that the “share_icon” here is the image shown in the Preview window. It can be different from the photos we actually share. What is really defined in “share_pic” is the image we want to share. In a real-world application, the shared image could also be an array. Please refer to our documentation for your own practice.
\
\
2) Add our Widget in Preview
preview.cpp
\
void Preview::run(sc::PreviewReplyProxy const& reply) { Result result = PreviewQueryBase::result(); ColumnLayout layout1col(1); std::vector<std::string> ids = { "image", "header", "summary", "tracks", "videos", "gallery_header", "gallerys", "reviews", "exp", "review_input", "rating_input", "inputId", "img" }; // std::vector<std::string> ids = { "inputId", "img" }; PreviewWidgetList widgets; 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"); widgets.emplace_back(header); // 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"); widgets.emplace_back(image); // 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"); widgets.emplace_back(description); 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())); PreviewWidget header_gal("gallery_header", "header"); header_gal.add_attribute_value("title", Variant("Gallery files are:")); PreviewWidget gallery("gallerys", "gallery"); gallery.add_attribute_mapping("sources", "array"); 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 ", the Variant (" John Doe ")}, {" review ", the Variant (" very good ")}, {" rating ", the 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_image("img", "image"); w_image.add_attribute_value("source", Variant(result["share_icon"].get_string().c_str())); VariantMap share_data; / / share_data [" uri "] = the Variant (" http://img2.imgtn.bdimg.com/it/u=442803940, 143587648 21 & gp & FM = = 0. JPG "); share_data["uri"] = Variant(result["share_pic"].get_string().c_str()); share_data["content-type"] = Variant("pictures"); w_image.add_attribute_value("share-data", sc::Variant(share_data)); widgets.emplace_back(w_image); 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; The 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 ); }Copy the codeIn the code above, we add
\
PreviewWidget w_image("img", "image"); w_image.add_attribute_value("source", Variant(result["share_icon"].get_string().c_str())); VariantMap share_data; / / share_data [" uri "] = the Variant (" http://img2.imgtn.bdimg.com/it/u=442803940, 143587648 21 & gp & FM = = 0. JPG "); share_data["uri"] = Variant(result["share_pic"].get_string().c_str()); share_data["content-type"] = Variant("pictures"); w_image.add_attribute_value("share-data", sc::Variant(share_data)); widgets.emplace_back(w_image);Copy the codeWe also added the new img ID to the Ids below:
\
std::vector<std::string> ids = { "image", "header", "summary", "tracks",
"videos", "gallery_header", "gallerys", "reviews", "exp",
"review_input", "rating_input", "inputId", "img" };
Copy the codeThis way, when our photos are displayed, a share button appears in the lower left of the image.
\
\
Click our button to share the photo we defined in “share_pic” above. This picture can also be a picture on the Internet.
\
The entire project source at: github.com/liu-xiao-gu…
\