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

Sin título

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…

image

image

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>

image

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: http://blog.alebanzas.com.ar/wp-content/uploads/2012/11/PictureLibrary.zip

[Facebook] [Google] [LinkedIn] [Twitter] [Windows Live] [Email]
Posted in Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *

*

ABOUT ME…

I'm Ale Banzas, Computer Science Engineer, developer, biker, diver, former Technical Evangelist in the Innovation and New Technologies team in Microsoft Argentina, Chile y Uruguay; now Global Community Coordinator in RSK Smart Contracts.

My main goal is to help every developer and organization becoming experts in new technologies in order to change the world positively.

You can find me in Barcelona, Spain; or in:
Twitter (@AleBanzas)
GitHub (/AleBanzas)
LinkedIn (/in/AleBanzas).
Facebook (/AleBanzas)
Instagram (/AleBanzas)