Guida introduttiva: Registrare un'app per contenuto AutoPlay (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Puoi registrare le app come opzioni per eventi contenuto AutoPlay. Gli eventi contenuto AutoPlay vengono generati quando si inserisce nel PC un dispositivo del volume, come la scheda di memoria di una fotocamera, una chiavetta USB o un DVD.

In questo articolo mostriamo come identificare l'app come opzione di AutoPlay quando si inserisce il dispositivo di volume di una fotocamera.

Obiettivo: creare un'app per gestire un evento contenuto di AutoPlay.

Prerequisiti

Microsoft Visual Studio

Istruzioni

1. Crea un nuovo progetto e aggiungi dichiarazioni di AutoPlay

Apri Visual Studio e scegli Nuovo progetto dal menu File. Nella sezione Javascript seleziona Windows Store. Assegna all'app il nome AutoPlayDisplayOrCopyImages e fai clic su OK.
Apri il file Package.appxmanifest e fai clic sulla scheda Funzionalità. Seleziona le funzionalità Archivio rimovibile e Raccolta di immagini. In questo modo l'app può accedere ai dispositivi di archiviazione rimovibili della memoria della fotocamera e alle immagini locali.
Nel file manifesto seleziona la scheda Dichiarazioni. Seleziona Contenuto AutoPlay nell'elenco a discesa Dichiarazioni disponibili, quindi fai clic su Aggiungi. Seleziona il nuovo elemento di Contenuto AutoPlay aggiunto all'elenco Dichiarazioni supportate.
Una dichiarazione Contenuto AutoPlay identifica l'app come opzione quando AutoPlay genera un evento di contenuto. L'evento si basa sul contenuto di un dispositivo del volume, quale un DVD o una chiavetta USB. AutoPlay esamina il contenuto del dispositivo del volume e determina quale evento contenuto generare. Se la radice del volume contiene una cartella DCIM, AVCHD o PRIVATE\ACHD o se un utente ha abilitato l'opzione Selezionare l'operazione da eseguire con ogni tipo di supporto in AutoPlay nel Pannello di controllo e sono presenti immagini in tale radice, AutoPlay genera l'evento ShowPicturesOnArrival.

Nella sezione Azioni di avvio immetti i seguenti valori per la prima azione di avvio.

Impostazione Valore

Verbo show

Nome visualizzato azione Mostra immagini

Evento contenuto ShowPicturesOnArrival

L'impostazione Nome visualizzato azione identifica la stringa che AutoPlay visualizza per la tua app. L'impostazione Verbo identifica un valore che viene passato all'app per l'opzione selezionata. Puoi specificare più azioni di avvio per un evento AutoPlay e usare l'impostazione Verbo per determinare quale opzione ha selezionato un utente per la tua app. Puoi verificare l'azione che l'utente ha selezionato controllando la proprietà verb degli argomenti dell'evento di avvio passati alla tua app. Puoi usare qualsiasi valore per l'impostazione Verbo eccetto open, che è riservata.
Nella sezione Azioni di avvio per l'elemento Contenuto AutoPlay fai clic su Aggiungi nuova per aggiungere una seconda azione di avvio. Immetti i seguenti valori per la seconda azione di avvio.

Impostazione Valore

Verbo copy

Nome visualizzato azione Copia immagini nella raccolta

Evento contenuto ShowPicturesOnArrival
Seleziona Associazione tipi file nell'elenco a discesa Dichiarazioni disponibili e fai clic su Aggiungi. Nelle Proprietà della nuova dichiarazione Associazioni tipi file imposta il campo Nome visualizzato su AutoPlay Copy or Show Images e il campo Nome su image_association1. Nella sezione Tipi di file supportati fai clic su Aggiungi nuovo. Imposta il campo Tipo di file su .jpg. Nella sezione Tipi di file supportati fai di nuovo clic su Aggiungi nuovo. Imposta il campo Tipo di file della nuova associazione di file su .png. Per quanto riguarda gli eventi contenuto, AutoPlay filtra ed esclude tutti i tipi di file non esplicitamente associati alla tua app.
Salva e chiudi il file manifesto.

Impostazione	Valore
Verbo	show
Nome visualizzato azione	Mostra immagini
Evento contenuto	ShowPicturesOnArrival

Impostazione	Valore
Verbo	copy
Nome visualizzato azione	Copia immagini nella raccolta
Evento contenuto	ShowPicturesOnArrival

2. Aggiungi l'interfaccia utente HTML

Apri il file Default.html e aggiungi il codice HTML seguente alla sezione <body>.

<label>File List</label>
<div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>

3. Aggiungi il codice di inizializzazione

Il codice in questo passaggio controlla il valore del verbo nella proprietà verb degli argomenti di avvio passati all'app. Quindi, il codice chiama la funzione correlata all'opzione selezionata dall'utente. Per quanto riguarda l'evento memoria fotocamera, AutoPlay passa la cartella radice di archiviazione della fotocamera negli argomenti di avvio passati all'app. Puoi recuperare la cartella dal primo elemento della proprietà detail.files.

Apri la cartella js. Apri il file Default.js e sostituisci la funzione predefinita onactivated con il codice seguente.

var filesDiv;

app.onactivated = function (args) {
    if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
        filesDiv = document.getElementById("files");

        if (args.detail.verb === "show") {
            // Call displayImages with root folder from camera storage.
            displayImages(args.detail.files[0]);
        }
        else if (args.detail.verb === "copy") {
            // Call copyImagesToLibrary with root folder from camera storage.
            copyImagesToLibrary(args.detail.files[0]);
        }
    }
    args.setPromise(WinJS.UI.processAll());
};

4. Aggiungi codice alle immagini da visualizzare

Nel file Default.js aggiungi il codice seguente dopo la funzione onactivated.

function displayImages(rootFolder) {
    // Display images from first folder in root\DCIM.
    rootFolder.getFolderAsync("DCIM").then(
    function (dcimFolder) {
        dcimFolder.getFoldersAsync().then(
        function (cameraFolders) {
            cameraFolders[0].getFilesAsync().then(
            function (files) {
                files.forEach(function (file) {
                    filesDiv.innerHTML += file.name + "<br />";
                    displayImage(file);
                });
            });
        });
    });
}

function displayImage(file) {
    try {
        var element = document.createElement("img");
        element.src = window.URL.createObjectURL(file, { oneTimeOnly: true });
        element.height = 100;
        element.width = 100;
        filesDiv.appendChild(element);
        filesDiv.innerHTML += "<br>";
    }
    catch (e) {
        filesDiv.innerHTML += e.message;
    }
}

5. Aggiungi codice alle immagini da copiare

Nel file Default.js, aggiungi il codice seguente dopo la funzione displayImage.

function copyImagesToLibrary(rootFolder) {
    try {
        var now = new Date();
        var folderName =
            "Images " + now.toDateString() + " " + now.getHours() +
                        now.getMinutes() + now.getSeconds();

        Windows.Storage.KnownFolders.
        picturesLibrary.createFolderAsync(folderName).then(
                function (imageFolder) {
                    // Copy images from first folder in root\DCIM.
                    rootFolder.getFolderAsync("DCIM").then(
                function (dcimFolder) {
                    dcimFolder.getFoldersAsync().then(
                function (cameraFolders) {
                    cameraFolders[0].getFilesAsync().then(
                function (files) {
                    files.forEach(function (file) {
                        copyImage(file, imageFolder);
                    });
                });
                });
                });
                });
    } catch (e) {
        filesDiv.innerHTML = "Failed copy images.<br />" + e.message;
    }
}

function copyImage(file, imageFolder) {
    try {
        file.copyAsync(
            imageFolder, file.fileName,
                Windows.Storage.NameCollisionOption.replaceExisting).then(
                    function (newFile) {
                        filesDiv.innerHTML += file.name + " copied.<br />";
                    });
    } catch (e) {
        filesDiv.innerHTML += "Failed to copy image.<br />" + e.message;
    }
}

6. Compila ed esegui l'app

Premi F5 per compilare e distribuire l'app in modalità debug.
Per eseguire l'app, inserisci nel PC la scheda di memoria di una fotocamera o un altro dispositivo di archiviazione. Seleziona quindi una delle opzioni dell'evento contenuto che hai specificato nel file package.appxmanifest dall'elenco di opzioni AutoPlay. Questo codice di esempio si limita a visualizzare o copiare immagini nella cartella DCIM della scheda di memoria di una fotocamera. Se la tua scheda di memoria archivia le immagini in una cartella AVCHD o PRIVATE\ACHD, dovrai aggiornare il codice di conseguenza.Nota Se non disponi di una scheda di memoria di una fotocamera, puoi usare un'unità flash USB purché nella radice sia disponibile una cartella denominataDCIM e nella cartella DCIM sia presente una sottocartella contenente immagini.

Riepilogo e passaggi successivi

In questa esercitazione hai creato un'app che visualizza i file di immagine o li copia in Immagini. Hai registrato l'app per l'evento contenuto ShowPicturesOnArrival di AutoPlay.

AutoPlay genera eventi contenuto per il contenuto condiviso tra PC tramite prossimità (tocco). Puoi usare il codice e i passaggi qui illustrati per gestire file condivisi tra PC che usano la prossimità. La tabella seguente contiene un elenco degli eventi contenuto di AutoPlay disponibili per la condivisione del contenuto tramite prossimità.

Azione	Evento contenuto AutoPlay
Condivisione musica	PlayMusicFilesOnArrival
Condivisione video	PlayVideoFilesOnArrival

Quando i file vengono condivisi usando la prossimità, la proprietà Files dell'oggetto FileActivatedEventArgs contiene un riferimento a una cartella radice contenente tutti i file condivisi.

Argomenti correlati

Avvio automatico con AutoPlay

Condividi tramite