Design and Development of Windows 8 Metro-search and sharing (1)

In this experiment, we will add search and sharing support for contoso cookbook. You will learn first-hand experience in implementing search and sharing contracts, and you will understand how these contracts implement advanced integration between Metro-style applications and Metro itself.

 

Increase recipe sharing

In practice1, We willContosocookbookAdded sharing support to share recipes with other applications. The first recipe must share two types of data: Text data including recipe name, ingredients, and practices, and image data including recipe image display.

Task1-CallShareSuper button

First, let's take a look atContoso cookbookCallingShareSuper button effect.

1.InVisual StudioOpen lab2. If you have not completed the experiment2Alternatively, you can find the complete version of the experiment in the raw material if you want to start with the reference copy.

2.PressF5StartContosocookbook.

3.Click a recipe to display"Item-Detail"Page.

4.If you are using a touch screen device, gently scan the right edge of the screen from right to left; otherwise, pressWin-CKey to display the super button toolbar.

5.Click"Share"Super button, displayedMetroShare pane.

6.BecauseContoso cookbookSharedContracts, So the shared pane displays"Contoso Cookbook can't share(Contoso cookbook)".

7.ReturnVisual StudioAnd stop debugging.

 

 

Task2-Share recipes

Now, we can see that the application does not support sharing times. Next, we will giveContoso cookbookAdd shareContractsTo share recipe data.

1.OpenItemdetailpage. js, Add the following statement toUi. pages. DefineBefore calling (located near the top of the file ):

Javascript

VaR _ currentitem = NULL;

2.Insert the following highlighted statement toReadyFunction:

Javascript

Varitem = options & options. item? Options. Item: Data. Items. getat (0 );

_ Currentitem = item;

Element. queryselector (". titlearea. pagetitle"). textcontent = item. Group. title;

Element. queryselector ("article. item-title"). textcontent = item. title;

Element. queryselector ("article. item-subtitle"). textcontent = item. preptime;

Element. queryselector ("article. item-image"). src = item. backgroundimage;

Element. queryselector ("article. item-image"). Alt = item. Partition title;

3.Now set the followingCodeInsertReadyThe end of the function:

Javascript

Vardtm = windows. ApplicationModel. datatransfer. datatransfermanager. getforcurrentview ();

 

DTM. addeventlistener ("datarequested", function (e ){

Varitem = _ currentitem;

Varrequest = E. request;

Request. Data. properties. Title = item. title;

Request. Data. properties. Description = "recipe ingredients and directions ctions ";

 

// Share recipe text

Varrecipe = "ingredients \ r \ n ";

 

Item. ingredients. foreach (function (ingredient ){

Recipe + = ingredient + "\ r \ n ";

});

 

Recipe + = ("\ r \ ndirections \ r \ n" + item. Directions );

Request. Data. settext (recipe );

});

Note:Share is registered throughDatatransfermanagerOfDatarequestedImplemented by the event processor, when the user activatesShareThis event is triggered when the superbutton is used. In this example, when an event occursDatapackageObjectE. Request. DataOfSettextMethod: Enter the content of the content form. When the shared object list is displayed in the shared object list, the list only contains the shared object that receives the content.

 

4.PressF5Start the applicationProgram.

5.Click a recipe to display"Recipe-Detail"Page.

6.Display the super button toolbar, selectShareSuper button, displayMetro. The shared pane displaysSharing targetList-applications that accept the data provided by the shared source.

Note:If notWindows 8 SDKProvides an example of the sharing target, which can be installed now. The Application name is the shared target sample application, which can demonstrate the development method of the shared target application. More importantly, it provides some test sharing goals that can be used as the sharing source for application development, and it accepts images, text, and other data types. To install the sharing target example, you canVisual StudioOpen and run the application. Then, when you selectMetroApplicationShareThe superbutton is displayed in the shared object list.

7.Select a sharing target in the sharing pane and confirm that it can receive recipe data.1Displayed,Windows 8 SDKThe sharing target sample application of receivedContosocookbookShared recipe content.

Figure1

Share target example show shared recipes

8.ReturnVisual StudioAnd stop debugging.

 

Task3-Achieve recipe Image Sharing

 

Contoso cookbookYou can now share text recipe data, but since each recipe has images attached, it should be able to receive images. Therefore, the shared object that receives images can simultaneously display the recipe content and photos (assuming that the shared object carries text and images ). Modify the shared code to support bitmap and text.

1.InItemdetailpage. jsTo the task2AddedDatarequestedEvent processor.

2.Add the following code to the processor:

Javascript

// Share recipe Image

VaR image = Document. queryselector (". item-image ");

VaR uri = image. getattribute ("src ");

 

If (URI. indexof ("http: //") = 0)

Uri = newwindows. Foundation. Uri (image. SRC); // Remote Image

Else

Uri = newwindows. Foundation. Uri ("MS-appx: //" + image. getattribute ("src"); // local Images

 

VaR reference = windows. Storage. Streams. randomaccessstreamreference. createfromuri (URI );

Request. Data. properties. thumbnail = reference;

VaR deferral = request. getdeferral ();

Request. Data. setbitmap (reference );

Deferral. Complete ();

Description:HtmlShare images on the page.URLPassRandomaccessstreamreference. createfromuriAnd then returnRandomaccessstreamreferencePassDatapackage. setbitmap.CreatefromuriBoth local and remote images are supported,Windows 8In the consumer preview version, it is not supported yet. In the codeIf-ElseThe clause only solves the problem of this version,Windows 8This problem does not exist in the final version.

3.PressF5Start the application.

4.Click a recipe to display"Recipe-Detail"Page.

5.Display the super button toolbar, selectShareSuper button, displayMetro.

6.Select one of the sharing targets listed in the sharing pane and confirm that it has received recipe images.2As shown in, the sharing target sample application receivesContosocookbookRecipe image.

Figure2

Sharing target example application display shared recipe Image

7.ReturnVisual StudioAnd stop debugging.

Note: ThisArticleThis is the script for Windows 8 online lab on msdn. It is for your reference only. If you want to experience the complete experiment, click the msdn online lab below

Http://msdn.microsoft.com/zh-cn/hh968278