Esercizio 1: aggiungere la condivisione delle ricette

Nell'esercizio 1 aggiungeremo all'app Contoso Cookbook il supporto alla condivisione per condividere le ricette con altre applicazioni. Potrete condividere due tipi di dati per ogni ricetta: dati testuali, che includono il nome della ricetta, gli ingredienti e le istruzioni, e dati visuali (immagini) che contengono una rappresentazione visuale della ricetta.

Task 1 - richiamare la Share charm

Per iniziare, vediamo si comporta la Share charm quando viene richiamata in Contoso Cookbook prima che venga aggiunto il supporto alla condivisione.

1. In Visual Studio, aprite il progetto ContosoCookbook che abbiamo completato nel Lab 2. Se non avete completato il Lab 2, o volete iniziare con una copia di riferimento, troverete una versione completa del lab tra i materiali di partenza.

2. Premete F5 per avviare Contoso Cookbook.

3. Toccate una delle ricette per visualizzare la pagina di dettaglio della ricetta.

4. Visualizzate le charm scorrendo un dito, partendo dal bordo destro dello schermo, da destra a sinistra o premendo i tasti Logo Windows + C.

5. Toccate la Share charm per visualizzare il riquadro di condivisione.

6. Poiché Contoso Cookbook attualmente non implementa un contratto per la condivisione, il riquadro vi informerà che "Questa applicazione non può condividere."

7. Tornate a Visual Studio e interrompete il debug.

Task 2 - Implementiamo la condivisione delle ricette

Ora che avete visto come appare il pannello di condivisione quando un'applicazione non supporta la condivisione, aggiungiamo un contratto all'app Contoso Cookbook in modo da poter condividere le informazioni delle ricette.

1. Aprite il file itemDetail.js e aggiungere il seguente codice quasi all'inizio del file, dopo l'istruzione "use strict".

var storage = Windows.Storage;
var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager;
var item;

2. Rimuovete "var" dalla prima linea della funzione ready in modo che, questa prima riga, diventi così:

item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);

3. Aggiungete il seguente codice alla fine della funzione ready:

// Register for datarequested events for sharing
dtm.getForCurrentView().addEventListener("datarequested", this.onDataRequested);

4. Terminate la modifica aggiungendo le seguenti funzioni dopo la funzione ready (da notare che è necessario aggiungere una virgola dopo la parentesi graffa di chiusura della funzione ready).

onDataRequested: function (e) {
    var request = e.request;
    request.data.properties.title = item.title;
    request.data.properties.description = "Recipe ingredients and directions";
    // Share recipe text
    var recipe = "\r\nINGREDIENTS\r\n" + item.ingredients.join("\r\n");
    recipe += ("\r\n\r\nDIRECTIONS\r\n" + item.directions);
    request.data.setText(recipe);
},
unload: function () {
    WinJS.Navigation.removeEventListener("datarequested", this.onDataRequested);
}

Nota: Si implementa la condivisione quando si registra un handler per gli eventi DataRequested di DataTransferManager. Questi eventi si attivano quando l'utente richiama la Share charm. In questo esempio rispondiamo a quell'evento richiamando setText sull'oggetto DataPackage, il quale viene esposto tramite e.request.data per fornire la ricetta in forma di testo. Quando nel riquadro di condivisione appare la lista degli share target, questa lista comprenderà solo gli elementi che possono gestire informazioni testuali.

5. Premete F5 per avviare l'app.

6. Toccate una delle ricette per mostrare la pagina di dettaglio.

7. Mostrate le charm e selezionate la Share charm per mostrare il pannello di condivisione. Nel pannello di condivisione ora verrà mostrato un elenco di share targets - app che possono gestire i dati condivisi dalle share sources installate sul vostro dispositivo

Nota: Se non lo avete già fatto, installate l'app di esempio per gli share target che viene fornita con il Windows 8 SDK Samples pack. L'applicazione illustra come progettare un app share target e, cosa ancora più importante, offre uno share target per eseguire test mentre si sviluppano applicazioni che fungono da fonti di condivisione (share source). Accetta sia immagini, sia testo, sia altri tipi di dati. Per installare nel sistema lo share target apritelo in Visual Studio ed eseguitelo una volta. Dopo questa azione, lo share target dovrebbe apparire tra la lista dei target ogni volta che si invoca la share charm da qualsiasi applicazione Windows Store.

8. Selezionate una delle destinazioni elencate nel riquadro di condivisione e verificate che abbia ricevuto il testo della ricetta. La figura 1 mostra la app di esempio del Windows 8 SDK dopo che ha accettato il testo della ricetta condiviso dall'app Contoso Cookbook.

9. Tornate a Visual Studio e interrompete il debug.

Task 3 - Implementiamo la condivisione delle immagini delle ricette

Contoso Cookbook ora può condividere i dati testuali delle ricette, ma, poiché ogni ricetta include anche un'immagine, dovrebbe poter condividere anche quelle. In questo modo, uno share target che accetta immagini potrebbe mostrare, assieme al testo, anche una foto della ricetta (supponendo che supporti sia testo sia immagini). Ritocchiamo il nostro codice di condivisione per aggiungere il supporto, oltre che al testo, anche alle immagini bitmap.

1. Nel file itemDetail.js, cercate la funzione onDataRequested che abbiamo aggiunto nel Task 2.

2. Aggiungete le seguenti linee di codice alla fine della funzione.

// Share recipe image
var uri = item.backgroundImage;
if (item.backgroundImage.indexOf("http://") != 0)
    uri = "ms-appx:///" + uri;
uri = new Windows.Foundation.Uri(uri);
var reference = storage.Streams.RandomAccessStreamReference.createFromUri(uri);
request.data.properties.thumbnail = reference;
request.data.setBitmap(reference);

3. Premete F5 per avviare l'app.

4. Toccate una delle ricette per mostrare la pagina di dettaglio.

5. Mostrate le charm e selezionate la Share charm per mostrare il pannello di condivisione.

6. Selezionate una delle destinazioni elencate nel riquadro di condivisione e verificate che abbia ricevuto l'immagine della ricetta. La Figura 2 mostra l'app di esempio del Windows 8 SDK dopo che ha accettato l'immagine della ricetta condivisa dall'app Contoso Cookbook.

7. Tornate a Visual Studio e interrompete il debug.