Inicio rápido: Acceder a contenido de Grupo Hogar (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Obtén acceso al contenido almacenado en la carpeta Grupo Hogar, que incluye imágenes, música y vídeos.

Requisitos previos

Conocer la programación asincrónica para aplicaciones de Windows en tiempo de ejecución con JavaScript

Puedes aprender cómo escribir aplicaciones asincrónicas en el inicio rápido sobre el uso de promesas en JavaScript.
Declaraciones de funcionalidades de la aplicación

Para acceder al contenido del Grupo Hogar, el equipo del usuario debe tener un Grupo Hogar configurado y la aplicación debe contar con al menos una de las siguientes funcionalidades: biblioteca de imágenes, biblioteca de música o biblioteca de vídeos. Cuando la aplicación obtiene la carpeta Grupo Hogar, solamente verá las bibliotecas que corresponden a las funcionalidades que declaraste en el manifiesto de la aplicación. Obtén más información acerca de estas funcionalidades en Declaraciones de funcionalidades de la aplicación.

Nota El contenido de la carpeta Documentos de un Grupo Hogar no está visible para la aplicación independientemente de las funcionalidades declaradas en el manifiesto de la aplicación y de la configuración de uso compartido del usuario.
Comprender cómo usar los selectores de archivos

Generalmente, el selector de archivos se usa para acceder a los archivos y carpetas del Grupo Hogar. Para obtener información sobre cómo usar el selector de archivos, consulta Inicio rápido: acceso a archivos mediante selectores de archivos.
Descripción de las consultas de archivos y carpetas

Puedes usar las consultas para enumerar los archivos y carpetas del Grupo Hogar. Para obtener más información sobre los archivos y las carpetas, consulta Inicio rápido: acceder a archivos mediante programación.

Abre el selector de archivos en el Grupo Hogar

Sigue estos pasos para abrir una instancia del selector de archivos que permite al usuario seleccionar los archivos y carpetas del Grupo Hogar:

Crear y personalizar el selector de archivos

Usa fileOpenPicker para crear el selector de archivos y después establece la propiedad SuggestedStartLocation del selector en PickerLocationId.homeGroup. Establece también otras propiedades que sean relevantes para los usuarios y la aplicación. Para obtener directrices que te ayuden a decidir cómo personalizar el selector de archivos, consulta Directrices y lista de comprobación para selectores de archivos

En este ejemplo se crea un selector de archivos que se abre en el Grupo Hogar, incluye archivos de cualquier tipo y muestra los archivos como imágenes en miniatura:
```
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.homeGroup;
picker.fileTypeFilter.replaceAll(["*"]);
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
```

Mostrar el selector de archivos.

Después de crear y personalizar el selector de archivos, llama a fileOpenPicker.pickSingleFileAsync para permitir al usuario seleccionar un archivo. O bien, permite que seleccione varios archivos llamando a fileOpenPicker.pickMultipleFilesAsync.

Este ejemplo indica cómo mostrar el selector de archivos para que el usuario pueda elegir un archivo y cómo capturar el archivo seleccionado para procesarlo:

picker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // The app now has read/write access to the picked file.
        WinJS.log && WinJS.log("1 file selected: \"" + file.path + "\"", 
            "sample", "status");

        // If the returned file was an image, show it to the user.
        if ((".JPG" === file.fileType) || (".jpg" === file.fileType) || 
            (".JPEG" === file.fileType) || (".jpeg" === file.fileType) || 
            (".PNG" === file.fileType) || (".png" === file.fileType) || 
            (".BMP" === file.fileType) || (".bmp" === file.fileType)) {
                document.getElementById("returnedImage").src = 
                    URL.createObjectURL(file, { oneTimeOnly: true });
                document.getElementById("returnedImage").style.visibility = "visible";
        } else {
            // The returned file wasn't an image, so hide the container where it 
            // would have appeared.
            document.getElementById("returnedImage").style.visibility = "hidden";
        }
    }
},

function (file) {
    // An error occurred.
    WinJS.log && WinJS.log("File was not returned", "sample", "error");
});

Buscar archivos en el Grupo Hogar

En esta sección se muestra cómo buscar elementos del Grupo Hogar que coinciden con un término de consulta proporcionado por el usuario.

Obtener el término de consulta del usuario.

Aquí obtenemos un término de consulta que el usuario especificó en un campo de entrada:
```
var query = document.getElementById("queryString").value;
```

Establece las opciones de consulta y el filtro de búsqueda.

Las opciones de consulta determinan de qué manera se ordenan los resultados de la búsqueda, mientras que el filtro de búsqueda determina qué elementos se incluyen en los resultados de la búsqueda.

En este ejemplo se establecen las opciones de consulta que ordenan los resultados de la búsqueda por relevancia y luego por la fecha de modificación. El filtro de búsqueda es el término de la consulta que el usuario especificó en el paso anterior:

var options = new Windows.Storage.Search.QueryOptions(
    Windows.Storage.Search.CommonFileQuery.orderBySearchRank, ["*"]);
options.userSearchFilter = query;

Ejecutar la consulta y procesar los resultados.

En el siguiente ejemplo se ejecuta la consulta de búsqueda y se guardan los nombres de todos los archivos coincidentes como una lista de cadenas.

try {
    var queryResult = 
        Windows.Storage.KnownFolders.homeGroup.createFileQueryWithOptions(options);

    queryResult.getFilesAsync().then(function (files) {
        // If no matching files were found, show appropriate output and turn 
        // off the progress ring.
        if (files.size === 0) {
            WinJS.log && WinJS.log("No files found for \"" + query + "\"", 
                "sample", "status");
            document.getElementById("searchProgress").style.visibility = "hidden";
        }

        // We found matching files. Show them and turn off the progress ring.
        else {
            var outputString = (files.size === 1) ? 
                (files.size + " file found\n") : (files.size + " files found\n");
            files.forEach(function (file) {
                outputString = outputString.concat(file.name, "\n");
            });
            WinJS.log && WinJS.log(outputString, "sample", "status");
            document.getElementById("searchProgress").style.visibility = "hidden";
        }
    });
}
catch (e) {
    // An error occurred. Show and log the error.
    document.getElementById("searchProgress").style.visibility = "hidden";
    WinJS.log && WinJS.log(e.message, "sample", "error");
}

Buscar archivos compartidos de un usuario en particular en el Grupo Hogar

En esta sección se muestra cómo buscar archivos del Grupo Hogar que comparte un usuario en particular.

Obtén una colección de usuarios del Grupo Hogar.

Cada una de las carpetas de primer nivel en el Grupo Hogar representa un usuario individual del Grupo Hogar. Por lo tanto, para obtener la recopilación de usuarios del Grupo Hogar, llama a GetFoldersAsync para recuperar las carpetas de nivel superior del Grupo Hogar y, luego, procesa una iteración por dichas carpetas para obtener los usuarios individuales.
```
var hg = Windows.Storage.KnownFolders.homeGroup;
hg.getFoldersAsync().then(function (users) {
    users.forEach(function (user) {

    // TODO: Do something with the user name. 

    });
}
```
Crea una consulta de archivo y define su ámbito en un usuario particular.

En el siguiente ejemplo se establecen las opciones de consulta que ordenan los resultados de la búsqueda en primer lugar por relevancia y, luego, por la fecha de modificación. Luego, estas opciones de consulta se aplican a una consulta de búsqueda cuyo ámbito está definido en un usuario en concreto.
```
var options = new Windows.Storage.Search.QueryOptions(
    Windows.Storage.Search.CommonFileQuery.orderBySearchRank, ["*"]);
var query = user.createFileQueryWithOptions(options);
```

Ejecutar la consulta y procesar los archivos resultantes.

En este ejemplo, la consulta de búsqueda se ejecuta y los nombres de los archivos que coincidan con el usuario en cuestión se guardan como una lista de cadenas.

query.getFilesAsync().then(function (files) {

    // If we don't find any shared files for the specified user, 
    // hide the progress indicator and notify the user. 
    if (files.size === 0) {
        document.getElementById("searchProgress").style.visibility = "hidden";

        // In the following line, userToSearch is a name specified by
        // the app user.
        outputString = "No files shared by " + userToSearch + ""; 
    }

    // We found shared files for this user. Hide the progress indicator
    // and process the files.  
    else {
        document.getElementById("searchProgress").style.visibility = "hidden";
        outputString = (files.size === 1) ? 
            (files.size + " file found\n") : (files.size + " files shared by ");
        outputString = outputString.concat(userToSearch, "\n");
        files.forEach(function (file) {
            outputString = outputString.concat(file.name, "\n");
        });
    }
});

Transmitir vídeo del Grupo Hogar

Sigue estos pasos para transmitir contenido de vídeo del Grupo Hogar:

Incluye un elemento de vídeo en una página HTML de la aplicación.

El elemento video especifica contenido de vídeo que se reproducirá en la aplicación.

<div data-win-control="SdkSample.ScenarioOutput">
    <video id="player" height="338" width="600" controls style="visibility: hidden">Unable to play video file</video>
</div>

Abre un selector de archivos en el Grupo Hogar y aplica un filtro que incluya archivos de vídeo con los formatos que admite tu aplicación.

Este ejemplo incluye archivos .mp4 y .wmv en el selector para abrir archivos.

var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.homeGroup;
picker.fileTypeFilter.replaceAll([".mp4", ".wmv"]);

Convierte la selección de archivos del usuario en una dirección URL y la establece como origen del elemento de vídeo.

En el siguiente ejemplo se recupera el elemento de vídeo y se inicializa para que sea invisible y esté en estado de pausa. Después de que el usuario elige un archivo de vídeo, el ejemplo recupera la dirección URL del archivo, la establece como origen del elemento video, muestra el elemento de vídeo e inicia la reproducción de vídeo.

var vidPlayer = document.getElementById("player");
vidPlayer.style.visibility = "hidden";
vidPlayer.pause();
picker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // The video tag has built in capabilities to stream the video over 
        // the network.
        vidPlayer.src = URL.createObjectURL(file, { oneTimeOnly: true });
        vidPlayer.style.visibility = "visible";
        vidPlayer.play();
    }
},
function (file) {
    WinJS.log && WinJS.log("File was not returned", "sample", "error");
});