Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: registrar una aplicación para un dispositivo de Reproducción automática (aplicaciones de la Tienda Windows con JavaScript y HTML)

Puedes registrar aplicaciones como opciones para eventos de dispositivo de Reproducción automática. Los eventos de dispositivo de Reproducción automática se generan cuando se conecta un dispositivo en un equipo.

En esta muestra se ve cómo identificar tu aplicación como una opción de Reproducción automática cuando se conecta una cámara a un equipo. La aplicación se registra como un controlador del evento de Reproducción automática WPD\ImageSource. Esto es un evento común que el sistema de Dispositivos portátiles de Windows (WPD) genera cuando las cámaras y otros dispositivos de imagen notifican que son un ImageSource con MTP. Para obtener más información, consulta Dispositivos portátiles de Windows.

Si eres un fabricante de dispositivos y quieres asociar una aplicación específica como controlador del dispositivo, puedes identificar la aplicación en la base de datos de Windows Metadata and Internet Services. Si asocias la aplicación como una aplicación de instalación automática para la identificación del modelo o la identificación del hardware de tu dispositivo en la base de datos de WMIS, Windows detectará la asociación cuando el dispositivo está conectado a un equipo. Si el equipo no tiene instalada la aplicación, Windows la descargará y la instalará automáticamente. Reproducción automática presentará la aplicación como primera opción para que el usuario elija como controlador del dispositivo. Para obtener información sobre cómo agregar metadatos para el dispositivo en la base de datos de WMIS, consulta Asistente para crear metadatos del dispositivo.

Objetivo: Crea una aplicación para administrar un evento de dispositivo de Reproducción automática.

Requisitos previos

Microsoft Visual Studio Express 2012 para Windows 8

Instrucciones

1. Crear un nuevo proyecto y agregar declaraciones de Reproducción automática

  1. Abre Visual Studio Express 2012 para Windows 8 y selecciona Nuevo proyecto en el menú Archivo. En la sección Javascript, selecciona Tienda Windows. Asigna el nombre AutoPlayDevice_Camera a la aplicación y haz clic en Aceptar.
  2. Abre el archivo Package.appxmanifest y selecciona la pestaña Capacidades. Selecciona la funcionalidad Almacenamiento extraíble. Esto proporcionar a la aplicación acceso a los datos de la cámara dispositivo de volumen de almacenamiento extraíble.
  3. En el archivo de manifiesto, selecciona la pestaña Declaraciones. En la lista desplegable Declaraciones disponibles, selecciona Dispositivo de Reproducción automática y haz clic en Agregar. Selecciona el nuevo elemento Dispositivo de Reproducción automática que se agregó a la lista Declaraciones admitidas.
  4. Una declaración Dispositivo de Reproducción automática identifica a la aplicación como opción cuando Reproducción automática genera un evento de dispositivo para eventos conocidos.

    En la sección Acciones de inicio, especifica los siguientes valores para la primera acción de inicio.

    ConfiguraciónValor
    Verboshow
    Nombre para mostrar de la acciónMostrar imágenes
    Evento de contenidoWPD\ImageSource

     

    La configuración Nombre para mostrar de la acción identifica la cadena que Reproducción automática muestra para tu aplicación. La configuración Verbo identifica un valor que se pasa a la aplicación para la opción seleccionada. Puedes especificar varias acciones de inicio para un evento de Reproducción automática y usar la configuración Verbo para determinar qué opción seleccionó un usuario para tu aplicación. Para saber qué opción seleccionó el usuario, comprueba la propiedad verb de los argumentos del evento de inicio que se pasaron a la aplicación. Puedes usar cualquier valor para la configuración Verbo a excepción de open, que está reservado. Para ver un ejemplo del uso de varios verbos en una sola aplicación, consulta Inicio rápido: registrar una aplicación para el contenido de Reproducción automática.

  5. En la lista desplegable Declaraciones disponibles, selecciona Asociaciones de tipo de archivo y haz clic en Agregar. En las propiedades de la declaración Asociaciones de tipo de archivo nueva, establece el campo Nombre para mostrar en Show Images from Camera y el campo Nombre en camera_association1. En la sección Tipos de archivo admitidos, haz clic en Agregar nuevo. Establece el campo Tipo de archivo en .jpg. En la sección Tipos de archivo admitidos, vuelve a hacer clic en Agregar nuevo. Establece el campo Tipo de archivo de la nueva asociación de archivos en .png. Para los eventos de contenido, Reproducción automática filtra todos los tipos de archivo que no están asociados explícitamente a la aplicación.
  6. Guarda y cierra el archivo de manifiesto.

2. Agregar interfaz de usuario HTML

  • Abre el archivo Default.html y coloca el siguiente código HTML en la sección <body>.
    
    <table>
        <tr>
            <td colspan="2">Device Information</td>
        </tr>
        <tr>
            <td style="vertical-align:top"><div id="deviceInfoDiv" style="width:400px;" /></td>
            <td style="vertical-align:top"><div id="picturesDiv" style="overflow:scroll;width:400px;height:400px" /></td>
        </tr>
    </table>
    
    
    

3. Agregar código de activación

El código de este paso hace referencia a la cámara como StorageDevice, pasando el identificador de información del dispositivo de la cámara al método fromId. El identificador de información del dispositivo de la cámara se obtiene de la propiedad detail.deviceInformationId de los argumentos pasados al controlador de eventos OnActivated.

  • Abre la carpeta js. Abre el archivo Default.js y reemplaza la función OnActivated predeterminada con el siguiente código.
    
    app.onactivated = function (args) {
        if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.device) {
            args.setPromise(WinJS.UI.processAll());
    
            showImages(Windows.Devices.Portable.StorageDevice.fromId(args.detail.deviceInformationId));
        }
    };
    
    
    

4. Agregar código para mostrar información de dispositivo

Puedes obtener información de la cámara en las propiedades de la clase StorageDevice. El código de este paso muestra al usuario el nombre del dispositivo y otra información cuando se ejecuta la aplicación. El código llama después al método getImages, que agregarás en el paso siguiente, para mostrar miniaturas de las imágenes almacenadas en la cámara.

  • En el archivo Default.js, agrega el siguiente código después de la función OnActivated.
    
    var imagesDiv;
    
    function showImages(folder) {
        var infoDiv = document.getElementById("deviceInfoDiv");
        imagesDiv = document.getElementById("picturesDiv");
    
        infoDiv.innerHTML = "Display Name = " + folder.displayName + "<br />" +
                            "Display Type =  " + folder.displayType + "<br />" +
                            "FolderRelativeId = " + folder.folderRelativeId + "<br />";
    
        getImages(folder);
    }
    
    
    

5. Agregar código para mostrar imágenes

El código de este paso muestra las miniaturas de las imágenes almacenadas en la cámara. El código realiza llamadas asincrónicas a la cámara para obtener la imagen de miniatura. Sin embargo, la siguiente llamada asincrónica no ocurre hasta que se complete la anterior llamada asincrónica. Esto garantiza que solo se haga una solicitud a la cámara cada vez.

  • En el archivo Default.js, agrega el siguiente código después de la función showImages.
    
    function getImages(folder) {
        // Find images in the specified folder
        folder.getFilesAsync().done(
            function (files) {
                files.forEach(function (file) {
                    file.getThumbnailAsync(
                        Windows.Storage.FileProperties.ThumbnailMode.singleItem,
                        100,
                        Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).done(
    
                        function (thumbnail) {
                            // Create an img element to display on the page
                            var element = document.createElement("img");
                            element.src =
                                window.URL.createObjectURL(thumbnail, { oneTimeOnly: true });
                            element.style.height = thumbnail.originalHeight;
                            element.style.width = thumbnail.originalWidth;
                            element.alt = file.name;
                            imagesDiv.appendChild(element);
                        }
                    );
                })
    
                // Find images in subfolders
                folder.getFoldersAsync().done(
                    function (folders) {
                        folders.forEach(function (f) {
                            getImages(f);
                        })
                    });
            });
    }
    
    
    

6. Compilar y ejecutar la aplicación

  1. Presiona F5 para compilar e implementar la aplicación (en modo de depuración).
  2. Para ejecutar la aplicación, conecta una cámara al equipo. Después selecciona la aplicación en la lista de opciones de Reproducción automática.

    Nota  No todas las cámaras se anuncian para el evento de dispositivo de Reproducción automática WPD\ImageSource.

Resumen

En este tutorial has creado una aplicación que muestra archivos de imagen de un dispositivo de cámara. Has registrado la aplicación para el evento de dispositivo de Reproducción automática WPD\ImageSource.

Temas relacionados

Inicio automático con Reproducción automática

 

 

Mostrar:
© 2018 Microsoft