martes, 21 de mayo de 2013

Windows 8 / Windows Phone - Programar un FlipView

Hoy veremos un ejemplo sobre como realizar un

FlipView

en una aplicación

Windows 8

con

javascript y css

. En primer lugar abriremos Visual Studio Express 2012 para Windows 8 y crearemos un nuevo proyecto de tipo 'Aplicación de navegación'.

Por defecto se nos creará una serie de archivos en nuestro proyecto, vamos a la carpeta 'pages', pulsamos botón derecho y luego añadimos una carpeta que llamaremos flipView.

El siguiente paso es situarnos en la carpeta

flipView

que acabamos de crear y pulsamos de nuevo botón derecho para añadir un control de página.

areaTIC, Windows 8 / Windows Phone - Programar un FlipView, Tipo de Proyecto


Veréis que se han creado 3 archivos (html, css y js). Antes de empezar a diseñar el

flipView

editaremos el archivo html principal del proyecto para indicar que al iniciar la aplicación se cargue como página "home" el archivo flipView.html que acabamos de crear. Hemos de añadir esta linea al cuerpo de default.html.
<body>
     <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/flipView/flipView.html'}"></div>
<body>
Antes de editar los archivos que hemos creado deberíamos ubicar las imágenes que queremos mostrar en nuestro

flipView

en la carpeta images del proyecto (o crearnos una carpeta nueva si lo preferimos). Una vez tenemos estos pasos previos, empezaría por editar flipView.js. Hemos de añadir una variable pública de tipo lista que contendrá las imágenes y textos que queremos mostrar en el

flipView

. Veamos como hacerlo:
// Para obtener una introducción a la plantilla Control de página, consulte la siguiente documentación:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

    var dataArrayFlipView = [
            { type: "item", title: "AreaTIC flipView 1", picture: "/images/flipView_01.jpg" },
            { type: "item", title: "AreaTIC flipView 2", picture: "/images/flipView_02.jpg" },
            { type: "item", title: "AreaTIC flipView 3", picture: "/images/flipView_03.jpg" }
    ];

    var dataListFlipView = new WinJS.Binding.List(dataArrayFlipView);

    WinJS.UI.Pages.define("/pages/flipView.html", {
        // Se llama a esta función cuando un usuario navega a esta página. Esta
        // rellena los elementos de la página con los datos de la aplicación.
        ready: function (element, options) {
            // TODO: Inicializar la página aquí.
        },

        unload: function () {
            // TODO: Responder a las navegaciones fuera de esta página.
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// 

            // TODO: Responder a los cambios en viewState.
        }
    });
})();
Ahora veremos los elementos necesarios que hemos de incluir en la página flipView.html que será la que contendrá el

flipView

. Al añadir un control de página desde Visual Studio vemos que ya incorpora por defecto una serie de elementos Html, nosotros hemos de editar la parte donde se muestra la siguiente etiqueta:
<p>Aquí se debe incluir el contenido.</p>
Añadiremos 2 elementos tipo div, uno ejercerá el rol de plantilla (id="simple_ItemTemplate") para uno o varios controles flipView y la segunda capa será nuestro flipView en sí (id="FlipView"). Veamos como queda el código de flipView.html:
<body>
    <div class="flipView fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Esto es flipView</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template">
                <div class="overlaidItemTemplate">
                    <img class="image" src="#" data-win-bind="src: picture; alt: title" />
                    <div class="overlay">
                        <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
                    </div>
                </div>
            </div>

            <div id="FlipView" 
                data-win-control="WinJS.UI.FlipView"
                data-win-options="{ itemDataSource : FlipViewData.listaFlipView.dataSource, itemTemplate : select('#simple_ItemTemplate') }">
            </div>
        </section>
    </div>
</body>
Es importante fijarse en el elemento "itemDataSource" ya que en estos momentos si pulsamos F5 la aplicación devolverá una excepción con el siguiente mensaje

No se puede obtener la propiedad 'dataSource' de referencia nula o sin definir

.

Esto sucede porque hemos definido un objeto de tipo WinJS.Binding.List dentro flipView.js pero no lo hemos registrado en WinJS.Namespace correspondiente, para hacerlo dentro del mismo archivo flipView.js definiremos un objeto "FlipViewData" y sus atributos públicos que podremos referenciar en componentes

WinJS

de nuestras páginas.
 WinJS.Namespace.define("FlipViewData", {
        listaFlipView: dataListFlipView
 });
En este caso sólo necesitamos acceder a la variable dataListFlipView así que definimos el objeto FlipViewData con un atributo público que contiene nuestra lista de tipo WinJS.Binding.List.

Llegado a este punto la aplicación ya debería compilar y mostrar un

flipView

que a efectos prácticos funciona... faltaría aplicar estilos para las diferentes vistas que se pueden dar en una aplicación de este tipo. Para esto editaremos el archivo flipView.css del siguiente modo:
.flipView p {
    margin-left: 120px;
}

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }
Para controlar la vista usamos ms-grid de WinJS y aplicamos el alto y ancho que queremos para cada vista.

El resultado sería este.

areaTIC, Windows 8 / Windows Phone - Programar un FlipView, Resultado


Se puede cambiar fácilmente el estilo del flipView y sus botones jugando con el archivo css.

Espero os resulte interesante el contenido del artículo de hoy... más la semana que viene. Recordar como siempre que podéis participar en

areaTIC

enviando valoraciones/comentarios/dudas y también podéis seguirnos en las redes sociales. Anímate a participar!

No hay comentarios:

Publicar un comentario