Tutorial: crear un lector de blogs (JavaScript y HTML)

Este tutorial te enseña a usar la plantilla Split App de Visual Studio para crear una aplicación que es un lector de blogs. La aplicación que es un lector de blogs solicita datos de las fuentes RSS, analiza el XML devuelto por las fuentes, rellena un control de ListView y crea un control contextual de AppBar.

Importante  En este tutorial se usan las API introducidas en Windows 8.1. Algunas partes del tutorial no funcionan correctamente con Microsoft Visual Studio 2012 y Windows 8.

Lector de blogs de Windows

En este tutorial, creamos un lector básico para algunos de los blogs del equipo de Windows. La aplicación finalizada tiene este aspecto:

La página principal, la página dividida y la página de detalles de la aplicación de lector de blogs de Windows.

La página de elementos tiene el título "The Windows Blog" y contiene un control ListView con un elemento por blog. Cuando haces clic en un elemento en ListView, navegas a una página dividida para el blog seleccionado. La página dividida contiene un control ListView con un elemento por entrada de blog, además de un control que muestra el contenido de la entrada de blog seleccionada verticalmente. En la página dividida, puedes navegar a una página de detalles de elemento que muestra el título de la entrada de blog en la parte superior y el contenido de la entrada de blog seleccionada horizontalmente.

Crear un nuevo proyecto en Visual Studio

A continuación vamos a crear un nuevo proyecto para la aplicación con el nombre WindowsBlogReader. Pasos a seguir:

  1. Inicia Visual Studio.

  2. En la pestaña Página principal, haz clic en Nuevo proyecto. Se abre el cuadro de diálogo Nuevo proyecto.

  3. En el panel Instalado, expande JavaScript y selecciona el tipo de plantilla Aplicación de la Tienda Windows . Las plantillas de proyecto instaladas para JavaScript se muestran en panel central del cuadro de diálogo.

  4. En el panel central, selecciona la plantilla de proyecto Aplicación dividida.

  5. En el cuadro de texto Nombre, escribe "WindowsBlogReader".

  6. Haz clic en Aceptar para crear el proyecto. Esto puede tardar unos minutos.

Esta es la estructura del proyecto, tal y como se muestra en el Explorador de soluciones. La carpeta de páginas contiene dos grupos de archivos, uno para la página de elementos y el otro para las páginas de división. Cada uno de estos grupos es un PageControl, un grupo de archivos de HTML, CSS y JavaScript que definen una página a la que puede navegar la aplicación o que puede usar como un control personalizado.

El nuevo proyecto contiene los archivos HTML, CSS y JavaScript que necesitas para crear los elementos PageControl y el PageControl dividido. Agregaremos los archivos para el PageControl de detalles de elemento más adelante.

Captura de pantalla del proyecto WindowsBlogReader en el Explorador de soluciones.

Para obtener más información sobre las diferentes plantillas, consulta Plantillas de proyecto JavaScript para aplicaciones de la Tienda Windows .

Iniciar tu nueva aplicación de la Tienda Windows

Si tienes curiosidad por el aspecto que tendrá una aplicación básica, presiona F5 para crear, implementar e iniciar la aplicación. La aplicación aparecerá en pantalla completa con el título "WindowsBlogReader" y una lista de elementos de muestra mostrados en una cuadrícula. Cada elemento representa un conjunto de datos Pulsa o haz clic en un elemento de la lista para navegar a la página dividida. Una página dividida tiene dos áreas de contenido principales. En el lado izquierdo, verás la lista de elementos asociados con el grupo seleccionado. En el lado derecho, verás el contenido del elemento seleccionado. Puedes volver a la página de elementos si pulsas o haces clic en el botón de retroceso de la página.

Cuando ejecutas la aplicación, esta toma el HTML, CSS y JavaScript (o lo vincula) en items.html y lo inserta en la página default.html, que es la página de inicio de la aplicación. Existen algunas restricciones sobre las acciones predeterminadas que puede hacer el tipo de código que se ejecuta en un contenedor de la aplicación. Por ejemplo, la aplicación no puede acceder a Internet o la cámara web a menos que declares que la aplicación necesita este acceso y el usuario otorgue el acceso cuando instale la aplicación. Para obtener más información, abre package.appxmanifest y ve a la pestaña Capacidades.

Cambiar el título y el color de fondo

Intentemos realizar dos tareas sencillas para personalizar la aplicación.

Para cambiar el título de la aplicación, abre items.html y reemplaza el texto para el elemento h1 en itemspage, con el texto "The Windows Blog", como se muestra aquí.


<h1 class="titlearea win-type-ellipsis">
    <span class="pagetitle">Windows Team Blogs</span>
</h1>

Para establecer el color de fondo de la aplicación, abre default.css y agrega este atributo background-color a #contenthost.


#contenthost {
    height: 100%;
    width: 100%;    
    background-color: #0A2562;
}

Presiona F5 para compilar, implementar e iniciar la aplicación. Observa que el título de la página de elementos cambió y el color de fondo de las páginas de elementos y dividida es azul.

Nota  La carpeta images del proyecto contiene los archivos predeterminados que el sistema usa para los iconos y la pantalla de presentación de la aplicación cuando esta se inicia. En este tutorial, no cambiaremos estos archivos, pero puedes usar otras imágenes si lo prefieres. Solo tienes que agregar los archivos de imagen que quieras usar a la carpeta images. Abre package.appxmanifest y reemplaza el contenido de Logotipo, Logotipo pequeño y Pantalla de presentación en la pestaña Interfaz de usuario de la aplicación con las rutas de acceso de tus archivos de imagen.

Reemplazar los datos de muestra

La plantilla de proyecto contiene los datos de muestra que se ven cuando ejecutas la aplicación. Seguiremos estos pasos para reemplazar los datos de muestra con los datos de fuentes ATOM para los blogs del equipo de Windows:

Eliminar los datos de muestra

Abre data.js, que contiene los datos de muestra de la aplicación.

No necesitamos la función generateSampleData, así que puedes eliminarla.


// Returns an array of sample data that can be added to the application's
// data list. 
function generateSampleData() {
    // Omitted code.

        
}

No necesitamos este código, así que puedes eliminarlo:


// TODO: Replace the data with your real data.
// You can add data from asynchronous sources whenever it becomes available.
generateSampleData().forEach(function (item) {
    list.push(item);
});

Configurar variables y funciones

Agrega este código a data.js inmediatamente antes de la instrucción var list = new WinJS.Binding.List();, hacia el comienzo del archivo. Este código configura las variables necesarias y las funciones que las rellenan. A medida que realicemos los pasos de este tutorial, puedes usar los comentarios que se incluyen para saber dónde colocar el código para cada paso.


// Set up array variables
var dataPromises = [];
var blogs;

// Declare an HttpClient object to send and receive
// RSS feed data.
var httpClient = new Windows.Web.Http.HttpClient();

// Create a data binding for our ListView
var blogPosts = new WinJS.Binding.List();

// Process the blog feeds
function getFeeds() { 
    // Create an object for each feed in the blogs array
    // Get the content for each feed in the blogs array
    // Return when all asynchronous operations are complete
}

function acquireSyndication(url) {
    // Call xhr for the URL to get results asynchronously
}

function getBlogPosts() {
    // Walk the results to retrieve the blog posts
}

function getItemsFromXml(articleSyndication, bPosts, feed) {
    // Get the info for each blog post
}

Definir la lista de blogs

Para que esta muestra sea sencilla, vamos a incluir una lista codificada de forma rígida de direcciones URL en la matriz blogs.

Agrega este código a la función getFeeds. El código toma una matriz de URL (como cadenas) y las convierte en una matriz de objetos JavaScript mediante la función Array.map. Cada objeto de la variable blogs almacena contenido de una fuente RSS.


// Create an object for each feed in the blogs array.
var urls = [
    'http://blogs.windows.com/windows/b/windowsexperience/atom.aspx',
    'http://blogs.windows.com/windows/b/extremewindows/atom.aspx',
    'http://blogs.windows.com/windows/b/business/atom.aspx',
    'http://blogs.windows.com/windows/b/bloggingwindows/atom.aspx',
    'http://blogs.windows.com/windows/b/windowssecurity/atom.aspx',
    'http://blogs.windows.com/windows/b/springboard/atom.aspx',
    'http://blogs.windows.com/windows/b/windowshomeserver/atom.aspx',
    'http://blogs.windows.com/windows_live/b/developer/atom.aspx',
    'http://blogs.windows.com/ie/b/ie/atom.aspx',
    'http://blogs.windows.com/windows_phone/b/wpdev/atom.aspx',
    'http://blogs.windows.com/windows_phone/b/wmdev/atom.aspx'
];

var counter = 0;
blogs = urls.map(function (item) {
    return {
        key: "blog" + counter++,
        url: item,
        title: 'tbd',
        updated: 'tbd',
        acquireSyndication: acquireSyndication,
        dataPromise: null
    };
});

Recuperar los datos de fuente

Para los pasos de esta sección, usaremos la clase Windows.Web.Http.HttpClient para pedir las fuentes de RSS. La clase HttpClient proporciona unas API sólidas para enviar y recibir solicitudes HTTP, que incluyen permitir la administración de cookies, filtrado y transportes flexibles.

Agrega este código a la función acquireSyndication. Llamaremos a la función asincrónica HttpClient.getStringAsync para recuperar el contenido de la fuente. Afortunadamente, ya se ha eliminado gran parte de la complejidad que se puede esperar cuando se realiza una llamada asincrónica. Cuando se recibe la respuesta del servidor, recibimos un compromiso de resultados, que devolvemos al llamador.


// Call HttpClient.getStringAsync passing in the URL to get results asynchronously.
return return httpClient.getStringAsync(new Windows.Foundation.Uri(url)););

Ahora agregamos código a la función getFeeds para llamar a la función acquireSyndication de cada blog en la matriz blogs y agregar el compromiso devuelto de nuestra matriz de compromisos, dataPromises. Llamamos a la función WinJS.Promise.join para que espere a que todos los compromisos se hayan cumplido antes de volver de getFeeds. De este modo, nos aseguramos de tener toda la información que necesitamos antes de mostrar el control ListView.


// Get the content for each feed in the blogs array
blogs.forEach(function (feed) {
    feed.dataPromise = feed.acquireSyndication(feed.url);
    dataPromises.push(feed.dataPromise);
});

// Return when all asynchronous operations are complete
return WinJS.Promise.join(dataPromises).then(function () {
    return blogs;
});

A continuación, agregamos este código a la función getBlogPosts. Para cada blog de la matriz blogs, analizamos los datos de la fuente XML para la información que necesitamos. Primero, usamos el objeto DOMParser para convertir la cadena en un documento XML y, después, usamos el método querySelector con los selectores necesarios para obtener el titulo y la fecha de última actualización del blog. Usamos Windows.Globalization.DateTimeFormatting.DateTimeFormatter para convertir la fecha de última actualización para mostrar.

Si articlesResponse es null, se produjo un error al cargar el blog, por lo que mostramos un mensaje de error en el lugar donde debería aparecer el blog.


// Walk the results to retrieve the blog posts
getFeeds().then(function () {
    // Process each blog
    blogs.forEach(function (feed) {
        feed.dataPromise.then(function (articlesResponse) {

            var parser = new window.DOMParser();
            var articleSyndication = parser.parseFromString(articlesResponse, 'text/xml');

            if (articlesResponse) {
                // Get the blog title 
                feed.title = articleSyndication.querySelector("feed > title").textContent;

                // Use the date of the latest post as the last updated date
                var published = articleSyndication.querySelector("feed > entry > published").textContent;

                // Convert the date for display
                var date = new Date(published);
                var dateFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                    "month.abbreviated day year.full");
                var blogDate = dateFmt.format(date);
                feed.updated = "Last updated " + blogDate;

                // Get the blog posts
                getItemsFromXml(articleSyndication, blogPosts, feed);
            }
            else {

                // There was an error loading the blog. 
                feed.title = "Error loading blog";
                feed.updated = "Error";
                blogPosts.push({
                    group: feed,
                    key: "Error loading blog",
                    title: feed.url,
                    author: "Unknown",
                    month: "?",
                    day: "?",
                    year: "?",
                    content: "Unable to load the blog at " + feed.url
                });
            }
        });
    });
});

return blogPosts;

A continuación, agregamos este código a la función getItemsFromXml. Primero, usamos querySelectorAll para obtener el conjunto de entradas de blog y la información de cada una de ellas. Después, usamos querySelector para obtener la información de cada entrada de blog. Usamos Windows.Globalization.DateTimeFormatting.DateTimeFormatter para convertir la fecha de última actualización para mostrar. Por último, almacenamos la información de cada entrada de blog en esta entrada de la matriz bPosts mediante el método push.


// Get the info for each blog post
var posts = articleSyndication.querySelectorAll("entry");

// Process each blog post
for (var postIndex = 0; postIndex < posts.length; postIndex++) {
    var post = posts[postIndex];

    // Get the title, author, and date published
    var postTitle = post.querySelector("title").textContent;
    var postAuthor = post.querySelector("author > name").textContent;
    var postPublished = post.querySelector("published").textContent;

    // Convert the date for display
    var postDate = new Date(postPublished);
    var monthFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
        "month.abbreviated");
    var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
        "day");
    var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
        "year.full");
    var blogPostMonth = monthFmt.format(postDate);
    var blogPostDay = dayFmt.format(postDate);
    var blogPostYear = yearFmt.format(postDate);

    // Process the content so it displays nicely
    var staticContent = toStaticHTML(post.querySelector("content").textContent);

    // Store the post info we care about in the array
    bPosts.push({
        group: feed,
        key: feed.title,
        title: postTitle,
        author: postAuthor,
        month: blogPostMonth.toUpperCase(),
        day: blogPostDay,
        year: blogPostYear,
        content: staticContent
    });                                         
}

Poner los datos a disposición

Después de completar el código para almacenar los datos de fuentes en nuestras matrices, necesitamos agrupar los datos de fuente según lo espera el control ListView. También necesitamos enlazar los datos de fuente al control ListView.

La función getItemsFromGroup llama al método createFiltered y devuelve las entradas de blog para el blog especificado. La función getItemsFromGroup depende de una variable, list.


var list = new WinJS.Binding.List();

Sustituye esta definición por una llamada a nuestra función getBlogPosts, que devuelve la variable blogPosts. Se trata de un objeto WinJS.Binding.List.



var list = getBlogPosts();

Ten en cuenta que al llamar al método createGrouped, las entradas del blog se ordenan por la clave especificada (en este caso, el blog al que pertenece cada entrada).


var groupedItems = list.createGrouped(
    function groupKeySelector(item) { return item.group.key; };
    function groupDataSelector(item) { return item.group; }

Actualizar los elementos PageControl

La característica principal de los elementos PageControl es el control ListView implementado con WinJS.UI.ListView. Cada blog tiene un elemento en esta lista. Modifiquemos el elemento ListView proporcionado en la plantilla para que contenga el título del blog y la fecha en que se actualizó por última vez.

Abre items.html. Necesitamos actualizar el HTML en esta etiqueta div para que refleje el contenido de nuestra matriz blogs.


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>
</div>

Realiza las siguientes actualizaciones:

  1. Como no tenemos una imagen de cada blog, quita la etiqueta img.
  2. En la etiqueta h6, actualiza textContent: subtitle a textContent: updated. Esto coloca la fecha de la última actualización en la parte superpuesta del elemento ListView.
  3. Mueve la etiqueta h4 antes del elemento div de la clase item-overlay. Esto coloca el título del blog en la parte principal del elemento ListView.

El resultado es el siguiente:


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <div class="item-overlay">           
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>
        </div>
    </div>
</div>

Para establecer el color de los elementos de la lista en azul claro, abre items.css y agrega el atributo background-color mostrado aquí. Reduce el tamaño de la segunda fila de 90px a 60px en el atributo -ms-grid-rows tal como se muestra aquí, porque solo vamos a mostrar la fecha de la última actualización en la parte superpuesta.


.itemspage .itemslist .item {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr 60px;
    display: -ms-grid;
    height: 250px;
    width: 250px;
    background-color: #557EB9;
}

Para establecer el tamaño de fuente y el margen para el título del blog, agrega este código a items.css.


.itemspage .itemslist .win-item .item-title {
    -ms-grid-row: 1;
    overflow: hidden;
    width: 220px;
    font-size:  24px;
    margin-top: 12px;
    margin-left: 15px;
}

Actualizar el PageControl dividido

Abre split.html. El HTML para la página dividida en la plantilla usa los mismos nombres que los datos de muestra. Necesitamos actualizar el HTML en esta etiqueta div para que refleje los nombres de nuestra matriz blogPosts.


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            <h4 class="item-description" data-win-bind="textContent: description"></h4>
        </div>
    </div>
</div>

Realiza las siguientes actualizaciones:

  1. Sustituye la etiqueta img por un nuevo nodo <div class="item-date">...</div>
  2. En la etiqueta h6, cambia textContent: subtitle a textContent: author
  3. Elimina la etiqueta h4

El resultado es el siguiente:


<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
       <div class="item-date">
          <p class="item-month" data-win-bind="innerHTML: month"></p>
          <span class="item-day" data-win-bind="innerHTML: day"></span> | 
          <span class="item-year" data-win-bind="innerHTML: year"></span>
       </div>
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: author"></h6>
        </div>
    </div>
</div>

Observa que usamos un carácter de barra vertical como separador porque HTML no incluye una etiqueta para dibujar una línea vertical.

Como no tenemos toda la información que se incluye en los datos de muestra, elimina este código de articleSection para simplificar la página.


<header class="header">
    <div class="text">
        <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
        <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4>
    </div>
    <img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
</header>

Para establecer el color del bloque de texto con la fecha del elemento y la fuente y los márgenes del texto, abre split.css y agrega este código.


.splitpage .itemlistsection .itemlist .item .item-date {
    -ms-grid-column:  1;
    background-color: #557EB9;
}

    .splitpage .itemlistsection .itemlist .item .item-date .item-month{
        margin-top: 12px;
        margin-left: 12px;
        margin-bottom: 4px;
        font-weight: bold;
        font-size: 1.2em;
    }

    .splitpage .itemlistsection .itemlist .item .item-date .item-day{
        margin-left: 12px;
        font-size: 0.8em;
    }

    .splitpage .itemlistsection .itemlist .item .item-date .item-year{
        font-size: 0.8em;
    }

Para conseguir el diseño de página que quieras, cambia este atributo -ms-grid-row de "1" a "2". Al hacerlo, la primera fila se rellenará con el título de la página y se colocará la ListView y el artículo en la segunda.


.splitpage .articlesection {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    margin-left: 50px;
    overflow-y: auto;
    padding-right: 120px;
    position: relative;
    z-index: 0;
}

Ahora es un buen momento para intentar ejecutar la aplicación de nuevo. Presiona F5 para compilar, implementar e iniciar la aplicación. Verás la página de título de inmediato, aunque hay un breve retraso mientras la aplicación recupera los datos de fuente. Cuando se hayan cumplido todos los compromisos, verás un elemento por blog en la ListView. (Este código agrega estos elementos a ListView en el orden en que se cumplen los compromisos). Al pulsar o hacer clic en un elemento de ListView, se muestra una página dividida con la lista de entradas de blog para el blog seleccionado y el contenido de la entrada de blog seleccionada. La primera entrada de blog se selecciona de manera predeterminada.

Haz clic en la flecha atrás para volver a la página de elementos. Observa que los iconos vuelven a la pantalla con una animación de transición. Esta característica de la biblioteca de Windows para JavaScript permite que los controles y otros elementos de la interfaz de usuario se muevan según las directrices para la experiencia del usuario de las aplicaciones de la Tienda Windows .

Captura de pantalla de la página principal en la orientación horizontal.

Agregar el PageControl de detalles de elemento

El PageControl de detalles de elemento muestra el título de la entrada de blog como su título y contiene un área para el contenido de la entrada de blog.

Para agregar el PageControl de detalles de elemento:

  1. En el Explorador de soluciones, haz clic con el botón secundario en la carpeta pages y selecciona Agregar > Nueva carpeta.
  2. Pon el nombre itemDetail a la carpeta.
  3. En el Explorador de soluciones, haz clic con el botón secundario en la carpeta itemDetail y selecciona Agregar > Nuevo elemento.
  4. Selecciona JavaScript > Tienda Windows > Control de páginas y usa el nombre de archivo itemDetail.html.
  5. Haz clic en Agregar para crear los archivos itemDetail.css, itemDetail.html y itemDetail.js en la carpeta pages/itemDetail.

Abre itemDetail.html y actualiza la etiqueta <section> tal como se muestra aquí. Este código define el diseño de la página. (Esta es una versión simplificada del código en la página itemDetail.html incluida en la plantilla de aplicación de cuadrícula).


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetail</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="itemDetail.css" rel="stylesheet" />
    <script src="itemDetail.js"></script>
</head>
<body>
    <div class="itemDetail 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">Welcome to itemDetail</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <p>Content goes here.</p>
        </section>
    </div>
</body>
</html>

Reemplaza la sección Main content con lo siguiente.


<section aria-label="Main content" role="main">
    <article>
        <div class="item-content"></div>
    </article>
</section>

Abre itemDetail.js y actualiza el código de la función ready tal como se muestra aquí. Este código muestra el título y el contenido cuando los usuarios navegan a la página. (Esta es una versión simplificada del código en la página itemDetail.js incluida en la plantilla de aplicación de cuadrícula).


ready: function (element, options) {
   // Display the appbar but hide the Full View button
   var appbar = document.getElementById('appbar');
   var appbarCtrl = appbar.winControl;
   appbarCtrl.hideCommands(["view"], false);

   var item = options && options.item ? options.item : Data.items.getAt(0);                                           
   element.querySelector(".titlearea .pagetitle").textContent = item.title;
   element.querySelector("article .item-content").innerHTML = item.content;
},

Ahora vamos a definir los estilos para la página de detalles de elemento. Abre itemDetail.css y reemplaza el código de plantilla con el código que se muestra aquí.


.itemDetail section[role=main] {
    -ms-grid-row: 2;
    display: block;
    height: 100%;
    overflow-x: auto;
    position: relative;
    width: 100%;
    z-index: 0;
}

    .itemDetail section[role=main] article {
        /* Define a multi-column, horizontally scrolling article by default. */
        column-fill: auto;
        column-gap: 80px;
        column-width: 480px;
        height: calc(100% - 50px);
        margin-left: 120px;
        width: 480px;
    }

        .itemDetail section[role=main] article .item-content p {
            margin-bottom: 20px;
            margin-right: 20px;
            vertical-align: baseline;
        }



Agregar una barra de la aplicación con un comando para mostrar la página de detalles de elemento

Vamos a agregar una barra de la aplicación que contenga un botón que podamos usar para navegar a la página de detalles de elemento, como la que aparece solo cuando estamos en la página dividida.

Abre split.html y agrega este código inmediatamente antes de la etiqueta <body> de cierre.


<div id="appbar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'view', label:'Full View', icon:'add'}" type="button">
    </button>
</div> 

Cuando el usuario haga clic en el botón Vista completa en la barra de la aplicación, la aplicación navegará al PageControl de detalles de elemento y mostrará el título y el contenido de la entrada de blog seleccionada.

Abre split.js. Agrega esta declaración de variable después de la declaración de la variable utils.


// The selected item
var post;

Agrega esta instrucción a la función ready justo antes de la segunda llamada a querySelector, para que this.items se configure primero. Este código establece la variable post en el índice de la primera entrada de blog cada vez que un usuario navegue a la página.


// Get the first item, which is the default selection
post = this._items.getAt(0);

Agrega esta instrucción a la función _selectionChanged, después de la instrucción que establece this._itemSelectionIndex. Este código establece la variable post en el índice de la entrada de blog cada vez que un usuario realice una selección.


// Get the item selected by the user
post = this._items.getAt(this._itemSelectionIndex);

Fuera de la función _selectionChanged, agrega este controlador de eventos después de la declaración de la variable post Se llama a este controlador cuando el usuario hace clic en el botón Vista completa. La función WinJS.Navigation.navigate carga la página de detalles de elemento y pasa la entrada de blog seleccionada como el elemento.


function displayFullView() {
    // Display the selected item in the item detail page
    nav.navigate('/pages/itemDetail/itemDetail.html', { item: post });
}

Agrega este código a la función ready en split.js. Este código registra nuestra función displayFullView como el controlador de eventos para el evento click para el botón Vista completa (Full View).


// Register the event handler for the Full View button
document.getElementById('view').addEventListener("click", displayFullView, false);

Presiona F5 para ejecutar la aplicación. Al hacer clic en un elemento de la página de elementos, se muestra una página dividida con la lista de entradas de blog y el contenido de la entrada de blog seleccionada. Pulsa o haz clic en una entrada de blog y su contenido se mostrará en la columna de la derecha. Para mostrar la barra de la aplicación, desliza rápidamente desde la parte inferior o la parte superior, o haz clic con el botón secundario si el sistema no es compatible con la funcionalidad táctil.

Captura de pantalla de la página dividida en la orientación horizontal.

Pulsa o haz clic en el botón Vista completa y nuestra aplicación mostrará el contenido de la entrada de blog seleccionada en la página de detalles de elemento.

Captura de pantalla de la página de detalles en la orientación horizontal.

Si pulsas o haces clic en el botón Atrás (Back), volverás a la página dividida. Se selecciona el primer elemento de la vista de lista, que no es necesariamente el mismo que seleccionaste para que se mostrara en la página de detalles de elemento. Puedes agregar el código para guardar y restaurar la selección si así lo deseas.

El código de plantilla que usa nuestra aplicación se ocupa de las dos orientaciones: horizontal y vertical. Gira tu PC o ejecuta la aplicación en el simulador de Microsoft Visual Studio Express 2012 para Windows 8 y gira la pantalla. La página de elementos tiene este aspecto.

Captura de pantalla de la página principal en la orientación vertical.

La página dividida tiene este aspecto. Fíjate en que solo se muestra el control ListView hasta que seleccionas un elemento. Después, la entrada de blog se muestra verticalmente. Si haces clic en el botón Full View la entrada de blog se mostrará horizontalmente.

Captura de pantalla de la página dividida en la orientación vertical.

Resumen

Por fin terminamos con el código de la aplicación. Aprendimos a crear a partir de plantillas de página integradas, enlazar datos a una ListView, navegar a una página nueva y agregar una barra de la aplicación con un botón.

Para obtener más información sobre otras características que puedes agregar a la aplicación, consulta el tema Guía básica para crear aplicaciones de la Tienda Windows con JavaScript.

Temas relacionados

Guía básica para crear aplicaciones de la Tienda Windows con JavaScript
Desarrollar aplicaciones de la Tienda Windows con Visual Studio

 

 

Mostrar:
© 2014 Microsoft. Reservados todos los derechos.