Windows 8 Modern UI Apps – Librería de imágenes

Vamos a armar una aplicación que acceda a la librería de imágenes del usuario. Esto se podría utilizar para que el usuario seleccione una foto de perfil, comparta una foto, etc..

Pre-requisitos:

Ambiente de desarrollo instalado

Para comenzar, abrimos Visual Studio 2012, y en el menú elegimos File –> New –> Project…

Seleccionamos en el árbol de la izquierda “Otros lenguajes” –> “JavaScript” –> “Windows Store” y damos Aceptar

Una vez creada la solución y proyecto, abrimos el archivo default.HTML, y reemplazamos

<p>Content goes here</p>

por

<div id="listviewDiv" class="imageGallery"></div>

Vamos a utilizar ese DIV para mostrar las imágenes.

Así como en las aplicaciones XAML utilizamos C# para enviar a la vista el modelo a renderizar, en las aplicaciones HTML utilizamos JavaScript para lograr lo mismo.

Con la siguiente función vamos a obtener las imágenes de la librería del usuario, para luego mostrarlas en el DIV.

function loadListViewControl() {
        //Construimos el origen de datos para obtener las imagenes
        var library = Windows.Storage.KnownFolders.picturesLibrary;
        var queryOptions = new Windows.Storage.Search.QueryOptions;
        queryOptions.folderDepth = Windows.Storage.Search.FolderDepth.deep;
        queryOptions.indexerOption = Windows.Storage.Search.IndexerOption.useIndexerWhenAvailable;

        var fileQuery = library.createFileQueryWithOptions(queryOptions);
        var dataSourceOptions = {
            mode: Windows.Storage.FileProperties.ThumbnailMode.picturesView,
            requestedThumbnailSize: 190,
            thumbnailOptions: Windows.Storage.FileProperties.ThumbnailOptions.none
        };

        var dataSource = new WinJS.UI.StorageDataSource(fileQuery, dataSourceOptions);
        // Todo el codigo de arriba se puede simplificar con la siguiente línea 
        // Pero, preferí usar la “forma larga” para mostrar todas las opciones
        // var dataSource = new WinJS.UI.StorageDataSource("Pictures");
        // obtenemos el DIV anterior, para utilizarlo como contenedor
        var container = document.getElementById("listviewDiv");
        var listViewOptions = {
            itemDataSource: dataSource,
            itemTemplate: storageRenderer, //Explicado mas abajo
            layout: new WinJS.UI.GridLayout(),
            selectionMode: "single"
        };
        // Convertimos nuestro DIV en un ListView
        new WinJS.UI.ListView(container, listViewOptions);
    };

 

Una de las propiedades del ListView es el itemTemplate, esta se utiliza para definir la forma en la que se va a mostrar cada item en la lista.

En este ejemplo, utilizamos una función que va a generar los elementos HTML necesarios para nuestro itemTemplate.

function storageRenderer(itemPromise, element) {
        var img;
        if (element === null) {
            // Creamos un div con class FileTemplate, y adentro le metemos una imagen <img>
            element = document.createElement("div");
            element.className = "FileTemplate";
            element.appendChild(document.createElement("img"));
        }
        img = element.querySelector("img");
        img.style.opacity = 0;

        return {
            // retornamos el template
            element: element,
            // y la promesa de que se va a completar la carga de la imagen
            renderComplete: itemPromise.then(function (item) {
                // devolvemos el item cuando esta listo
                return item.ready;
            }).then(function (item) {
                // luego de tener el item listo, seteamos el source (src) a la imagen
                return WinJS.UI.StorageDataSource.loadThumbnail(item, img);
            })
        };
    }

 

Con esas pocas líneas, ya tenemos un listado de las imágenes del usuario.

Les dejo el link con la solución completa para que puedan usar: https://blog.alebanzas.com.ar/wp-content/uploads/2012/11/PictureLibrary.zip