Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 7

Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 7

  • Comments 15

Vinculando la View con el ViewModel

La UI ya esta creada, bueno al menos la estructura básica y el modelo se encuentra en una situación similar, ahora es el momento de ponerlos a trabajar juntos.

La lista de artículos

Desde Visual Studio abrimos View/RssMainView.xaml, donde tenemos la UI, y ubicamos el ListView llamado lvwBlogPosts , si has hecho todo bien veras que el ItemTemplate esta enlazado a Post-List-ItemTemplate.

<ListView x:Name="lvwBlogPosts" Grid.ColumnSpan="2" Grid.Row="1" 
    Style="{StaticResource Lista-Posts-Style}" 
    ItemTemplate="{StaticResource Post-List-ItemTemplate}" >
</ListView>

Debemos indicarle al ListView que los items que contiene tienen como origen de datos Articles el cual es una lista que se encuentra en nuestro DataContext, el cual a su vez, recordarás, ya establecimos en artículos pasados como nuestro ViewModel.

Para hacer esto en el ListView asignamos la propiedad ItemsSource

<ListView x:Name="lvwBlogPosts" Grid.ColumnSpan="2" Grid.Row="1" 
    Style="{StaticResource Lista-Posts-Style}" 
    ItemsSource="{Binding Articles}"
    ItemTemplate="{StaticResource Post-List-ItemTemplate}" >
</ListView>

Ahora que ya le indicamos de donde saldrán los ítems revisemos el template, para ello desde Visual Studio abrimos App.xaml y buscamos el template Post-List-ItemTemplate el cual luce así:

<DataTemplate x:Key="Post-List-ItemTemplate">
    <StackPanel Orientation="Horizontal">
        <Image Style="{StaticResource Image-Post-List}" 
                Source="ms-appx:///Assets/img/Picture.png"/>
        <StackPanel>
            <TextBlock TextWrapping="Wrap" 
                    Text="Titulo de Prueba en multiples lineas" 
                    Style="{StaticResource Title-PostList-Style}"/>
            <TextBlock TextWrapping="Wrap" 
                    Text="Titulo de Prueba en multiples lineas., Titulo de Prueba en multiples lineas" 
                    Style="{StaticResource Summary-PostList-Style}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

El template como podemos darnos cuenta tiene todos los textos fijos, la idea es que este template se utilice para mostrar un objeto tipo Article que son los que creamos utilizando lo que hicimos en la clase RssMainViewModel así que a sabiendas que recibiremos objetos de este tipo para crear cada ítem del ListView, procederemos a hacer Binding de un cada una de las propiedades de un objeto Article con este template, por ejemplo el Source de la imagen será la Uri contenida en la propiedad ImgUri:

<Image Style="{StaticResource Image-Post-List}" 
       Source="{Binding ImgUri}"/>

Quedando el template finalmente así

<DataTemplate x:Key="Post-List-ItemTemplate">
    <StackPanel Orientation="Horizontal">
        <Image Style="{StaticResource Image-Post-List}" 
                Source="{Binding ImgUri}"/>
        <StackPanel>
            <TextBlock TextWrapping="Wrap" 
                        Text="{Binding Title}" 
                        Style="{StaticResource Title-PostList-Style}"/>
            <TextBlock TextWrapping="Wrap" 
                    Text="{Binding Summary}" 
                    Style="{StaticResource Summary-PostList-Style}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

Es el momento de la prueba de fuego! Ejecutemos la aplicación... y ta ta taraaaaaaaaaaaaaa!

SNAG-0007

 

El artículo actual

Este lo estamos mostrando en un WebView llamado wvBlogContent, lo primero que debemos hacer es asignar a ese WebView la fuente de datos, en principio esto es fácil asignando la propiedad Source a la cual se le asigna la URL de la web que se desea visitar, pero en nuestro caso eso no es lo que queremos :(

Lo que queremos es que en el control WebView se renderice el contenido html que ya tenemos en la propiedad Content de un Objeto Article. La parte mala es que esto no lo podemos hacer por Binding, la parte buena es que así no sea por Binding si lo podemos hacer llamando al método NavigateToString del WebView el cual recibe como parámetro todo el html a dibujar.

wvBlogContent.NavigateToString(contenidoHtml);

Esto es muy sencillo de hacer, podemos llamar el método cuando queramos, el verdadero problema reside en como decirle cual es el contenido html, y aún más allá como hacerlo sin dejarlo quemado por el código C#, lo cual sería una muy mala práctica sobre todo si estamos implementando MVVM.

Como lo mencionaba antes no es posible asignar un string con los contenidos a dibujar desde XAML, al menos no por defecto, pero podemos utilizar una característica muy importante de XAML y son las Attached Properties lo cual traduce en que un objeto pueda agregar propiedades nuevas otro objeto. Estas propiedades de paso son DependencyProperties es decir que las podemos asignar como etiquetas XAML.

Así que le adicionaremos al WebView una propiedad llamada HtmlString y esta nueva propiedad la definiremos dentro de nuestro ViewModel.

Desde Visual Studio abrimos el archivo ViewModel/RssMainViewmodel.cs y agregamos el siguiente código a la clase

public static string GetHtmlString(DependencyObject obj)
{
    return (string)obj.GetValue(HtmlStringProperty);
}

public static void SetHtmlString(DependencyObject obj, string value)
{
    obj.SetValue(HtmlStringProperty, value);
}

// Using a DependencyProperty as the backing store for HtmlString.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty HtmlStringProperty =
    DependencyProperty.RegisterAttached("HtmlString", 
                            typeof(string), typeof(RssMainViewModel), 
                            new PropertyMetadata("", HtmlStringChanged)
                                        );

Básicamente este código proporciona métodos estáticos para asignar nuevas propiedades y para leerlas, seguidamente se registra la propiedad para poderla acceder desde XAML, lo único extraño es que se pasa como parámetro el método HtmlStringChanged que aún no lo hemos creado.

Necesitamos que cada vez que se asigne esta propiedad en un control WebView, este control cargue esta cadena como contenido Html llamando a NavigateToString, podemos disparar un evento cada vez que se modifique esta propiedad, el manejador de ese evento es HtmlStringChanged el cual muestro a continuación:

public static void HtmlStringChanged(DependencyObject sender, DependencyPropertyChangedEventArgs arg)
{
    var wb = sender as WebView;
    if (wb != null)
        wb.NavigateToString((string)arg.NewValue);
}

Fíjense en que valido el tipo de objeto que dispara al evento para asegurarme de solo realizar la navegación cuando se trata de un WebView.

Teniendo resuelto el tema de la navegación solo resta resolver el tema de asociar la nueva propiedad creada desde el WebView, par esto hay que referenciar el alias del namespace que creamos en artículos anteriores,, el nombre de la clase y finalmente el nombre de la propiedad, recuerden que estas Attached Properties son estáticas:

<WebView x:Name="wvBlogContent"
    Grid.Column="2" Grid.Row="1" 
    vm:RssMainViewModel.HtmlString="test"
    Visibility="Visible"
    Style="{StaticResource WebView-Style}"  />

Y ahora el Binding, debemos hacerlo con el artículo actual seleccionado en el ListView, así que le Binding va contra el ListView y usamos al modificador Path para seleccionar la propiedad SelectedValue y sabiendo que esta es el artículo seleccionado, accedemos a la propiedad Content de dicho articulo:

<WebView x:Name="wvBlogContent"
    Grid.Column="2" Grid.Row="1" 
    vm:RssMainViewModel.HtmlString="{Binding ElementName=lvwBlogPosts, Path=SelectedValue.Content}"
    Visibility="Visible"
    Style="{StaticResource WebView-Style}"  />

También tenemos que cambiar el titulo del artículo el cual actualmente tenemos así

<TextBlock Grid.Column="2" Grid.Row="0" Text="Titulo de prueba" 
            Style="{StaticResource Title-Post-Style}" />

Simplemente debemos hacerle Binding al titulo del artículo actual lo cual se hace de manera muy similar a lo que acabamos de hacer con el contenido.

<TextBlock Grid.Column="2" Grid.Row="0" 
            Text="{Binding ElementName=lvwBlogPosts, Path=SelectedValue.Title}"
            Style="{StaticResource Title-Post-Style}" />

Al terminar esta entrega del tutorial así deben estar los fuentes modificados

Misión cumplida! ya nuestro lector de RSS es 100% funcional!

SNAG-0008

 

De ahora en más es fijarnos en mejorar pequeños detalles y adicionar algunas cosas necesarias para el proceso de certificación. Esos serán los temas de los próximos artículos.

 

Índice General

Para cumplir con el alcance establecido he decidido fraccionar el proyecto en las siguientes partes:

 

  1. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 1
    • Introducción al tutorial  
    • Let's begin
    • Indice General
  2. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 2
    • Preparando la solución
  3. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 3
    • Modelo de Datos
  4. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 4
    • Consumiendo el RSS por medio de SyndicationClient
    • CreateContent
    • CreateSummary
    • Find1stImageFromHtml
  5. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 5
    • Inicializando la Aplicación e implementado el View-Model
    • Cómo y desde donde llamar a Initialize
    • Asociando el DataContext del View
  6. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 6
    • Construyendo la UI - Parte 1
    • Esquema principal de la App
    • Creando elementos básicos
    • El titulo
    • Aplicar propiedades utilizando estilos
    • El icono
    • El artículo actual
    • La Lista de Artículos
  7. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 7
    • Vinculando la View con el ViewModel
    • El artículo actual
  8. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 8
    • Mejorando la experiencia de usuario - Parte 1
    • Hacer que aparezca un articulo seleccionado por defecto
    • Disminuir el tamaño de los títulos del ListView
    • Disminuir el ancho del ListView
    • Evitar que los resúmenes de los artículos en el ListView crezcan de manera descontrolada
    • Colocar una imagen dummy en el Listview cuando no existan imágenes en el artículo
    • Colocar la imagen adecuada cuando la única imagen del RSS es el aggbug
    • Colocar una imagen dummy en el Listview cuando la imagen hallada en el artículo sea demasiado pequeña
    • Mientras cargan los datos del feed da la impresión de que la App no esta haciendo nada
    • Conclusión
  9. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 9
    • Mejorar la apariencia de ListView
    • Mejorar la apariencia del ProgressRing
    • Mejorar la apariencia del WebView
    • Soporte para Snapped View
    • Imagen de Fondo
  10. Windows 8:Cómo crear un app lector de blogs (RSS)-Parte 10
    • Mejorando la experiencia de usuario - Parte 2
    • Detección de conexión a internet
    • Adición de la política de privacidad
    • Tareas adicionales
    • FIN DEL TUTORIAL
Si tienen preguntas no olviden etiquetarme como Juan Carlos Ruiz - Arquitecto de Software


  • Introducción al tutorial Hola, antes de comenzar con lo obvio quiero que se fijen en el titulo de este

  • Preparando la solución

    Para este proyecto vamos a Visual Studio y creamos una nueva solución de Tipo Windows Store, seleccionamos la plantilla en blanco y la nombramos RSSJuanK4Blog

  • Este es el tercer articulo de la serie dedicada a crear una aplicación lectora de RSS, manos a la obra con el modelo de datos!

  • Este es el cuarto artículo de la serie dedicada a crear una aplicación lectora de RSS, en esta parte

  • Crearemos un objeto encargado de orquestar las funcionalidades que ya hemos creado para 'servirlas' a la interfaz gráfica, en este artículo nos ocuparemos de una primera parte de esta tarea que es ofrecer funcionalidades para consumir el modelo de datos

  • En esta parte del tutorial crearemos la interfaz gráfica básica de una aplicación Lectora de RSS, pero no teman aventurarse proponiendo cosas más interesantes y creativas.

    Desde Visual Studio abrimos View/RssMainView.xaml allí encontramos ya implementada

  • Así que este artículo les enseñará a crear una aplicación para WinRT lo cual nos pide ser un poco más exigentes con los temas de calidad y en brindar una experiencia de usuario mucho más rica que realmente

  • Así que este artículo les enseñará a crear una aplicación para WinRT lo cual nos pide ser un poco más exigentes con los temas de calidad y en brindar una experiencia de usuario mucho más rica que realmente

  • Así que este artículo les enseñará a crear una aplicación para WinRT lo cual nos pide ser un poco más exigentes con los temas de calidad y en brindar una experiencia de usuario mucho más rica que realmente

  • Introducción al tutorial Hola, antes de comenzar con lo obvio quiero que se fijen en el titulo de este

  • Introducción al tutorial Hola, antes de comenzar con lo obvio quiero que se fijen en el titulo de este

  • Introducción al tutorial Hola, antes de comenzar con lo obvio quiero que se fijen en el titulo de este

  • Introducción al tutorial Hola, antes de comenzar con lo obvio quiero que se fijen en el titulo de este

  • Preparando la solución

    Para este proyecto vamos a Visual Studio y creamos una nueva solución de Tipo Windows Store, seleccionamos la plantilla en blanco y la nombramos RSSJuanK4Blog

  • Este es el tercer articulo de la serie dedicada a crear una aplicación lectora de RSS, manos a la obra con el modelo de datos!

Page 1 of 1 (15 items)