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
Leave a Reply