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

  • Article

Este es el tercer articulo de la serie dedicada a crear una aplicación lectora de RSS, manos a la obra.

Hay muchas maneras de hacer las cosas, mi abuela decía que cada cual mata las pulgas de manera distinta y es cierto. Hay quienes dicen que iniciar una aplicación pensando en modelos de datos es un error, hay quienes lo defienden, algunos dicen que comenzar por el modelo Entidad Relación es una mala idea, y otros dicen que es la mejor aproximación.

Creo que todos tienen razón, cada cual mata sus pulgas...

Por mi formación y trayectoria profesional considero que lo mejor es comenzar a construir una aplicación teniendo claro el modelo de datos, y sobre este construir el resto. Que pueden haber cambios sobre la marcha? sin duda, siempre pasa en cualquier metodología por lo que siempre es mejor ser abierto y flexible que ser rígido y estricto. Esa es mi opinión y mi consejo.

Así que esta aplicación comienza a crearse desde su modelo de datos.

Modelo de Datos

Es una aplicación para mostrar artículos de un feed RSS, así que sin duda nuestra entidad principal es el artículo, el cual modelaremos en una clase de la siguiente forma.

Desde Visual Studio ubicamos la carpeta Model, clic derecho adicionar Class, esta nueva clase la llamamos Article. A esta clase le agregamos los atributos necesarios para mostrar un articulo de un feed, dentro del alcance de este proyecto hemos definido los siguientes campos:

  • Title
  • ImgUri
  • Summary
  • Content

De seguro hay muchos otros campos importantes como el vinculo al URL, listas de otros vínculos, referencias, tags etc. etc. Eso hará parte del alcance que cada cual le quiera dar.

Para definir esta clase utilizare propiedades implementadas de manera completa, lo cual es muy conveniente para los pasos posteriores. El modelo debe exponerse como public si queremos que se acople bien con la UI, esta es la implementación inicial:

 using System;

namespace RSSJuanK4Blog.Model
{
    public class Article
    {
        private string _title;
        public string Title
        {
            get { return _title; }
            set { _title = value; }
        }


        private string _summary;
        public string Summary
        {
            get { return _summary; }
            set { _summary = value; }
        }

        private string _content;
        public string Content
        {
            get { return _content; }
            set { _content = value; }
        }

        private Uri _imgUri;
        public Uri ImgUri
        {
            get { return _imgUri; }
            set { _imgUri = value; }
        }
    }
}

Este tutorial no es un curso de XAML ni de C# por lo que no profundizaremos mucho en algunos aspectos, también es importante aclarar que el propósito de este es puramente práctico por lo que muchas cosas se harán pensando en que sean fáciles de comprender aunque no sean implementaciones perfectas.

Una vez definido nuestro modelo de datos debemos pensar en como se integrará con nuestra UI (User Interface), en XAML existe el concepto de Binding que en resumen es la capacidad de asociar elementos de la UI a un modelo de datos, si queremos que los cambios realizados en el modelo de datos se reflejen en nuestra UI es necesario implementar algunas características adicionales.

En XAML esto se hace implementando la interfaz INotifyPropertyChanged no es algo complicado de hacer, sin embargo para este tutorial no la implementaremos directamente y en su lugar haremos uso de BindableBase que implementa ya INotifyPropertyChanged de una manera elegante y genérica. De dónde sale BindableBase? Al principio de este tutorial, parte 2, les indique que crearan una BasicPage solo con el fin de utilizar algunos archivos adicionales que esta requiere para funcionar, pues bien uno de esos archivos generados al crear el archivo BasicPage es BindableBase.cs que contiene la definición de la clase BindableBase que nos ayuda a ahorrarnos varias líneas de código.

Una vez que heredamos de BindableBase tenemos acceso al método genérico SetProperty este lo debemos llamar cada vez que cambiamos el valor de una de las propiedades de tal forma que este internamente notifique los cambios a la UI.

Este método recibe como parámetro una referencia al backstorage de la propiedad ( es decir al campo privado ), como segundo parámetro recibe el valor a asignar y tiene un tercer parámetro que normalmente es una cadena de texto con el nombre de la propiedad, sin embargo gracias a las bondades de C# 4/4.5 este usa el atributo CallerMemberName el cual le indica al compilador que sino asignamos ese parámetro dicha variable se asigna con el nombre del método o propiedad que la ha invocado... cool, por ello realmente solo necesitamos pasar dos parámetros y no tres. En adición aunque el método es genérico no necesitamos asignar el tipo genérico porque el compilador de Visual Studio es suficientemente inteligente como para inferirlo de los parámetros.

Así que al final de cuentas con cada propiedad de Article debemos hacer algo como esto:

 private string _title;
public string Title
{
    get { return _title; }
    set { 
    SetProperty(ref _title, value);
    }
}

Esta es la implementación completa de la clase Article:

 using RSSJuanK4Blog.Common;
using System;

namespace RSSJuanK4Blog.Model
{
    public class Article : BindableBase
    {
        private string _title;
        public string Title
        {
            get { return _title; }
            set
            {
                SetProperty(ref _title, value);
            }
        }


        private string _summary;
        public string Summary
        {
            get { return _summary; }
            set { 
            SetProperty(ref _summary, value);
            }
        }

        private string _content;
        public string Content
        {
            get { return _content; }
            set { 
            SetProperty(ref _content, value);
            }
        }

        private Uri _imgUri;
        public Uri ImgUri
        {
            get { return _imgUri; }
            set
            {
                SetProperty(ref _imgUri, value);
            }
        }
    }
}

Ahora una pregunta, vamos a mostrar un artículo o unos artículos? desde luego unos artículos. Por lo cual se requiere una colección de tipos Article. Es importante que esta colección también notifique a la UI cuando se le agreguen borren, o se le modifiquen elementos, fíjense que esto es diferente a lo hecho con Article dónde notificamos que los campos del objeto han cambiado, ahora se requiere notificar que se han adicionado, insertado o modificado elementos de una colección.

Hay muchas formas de hacer ello, yo escojo la forma más corta XD .

Dentro de la carpeta Model creamos una nueva clase llamada ArticleList y hacemos que herede de una de mis colecciones favoritas para WinRT ObservableCollection la cual es una colección genérica que implementaremos como colección genérica de Article. Nótese que hay que adicionar el namespace correcto para poderla usar:

 using System.Collections.ObjectModel;
namespace RSSJuanK4Blog.Model
{
  //omitir las comillas sencillas solo se han colocado para mostrar bien el código
  public class ArticleList:ObservableCollection< Article >
  {
  }
}

Con esto ya tenemos nuestro modelo de datos preparado, siguiente paso la lógica para consumir el RSS, tema del próximo artículo y prepárense por que ese esta un poco más exigente :D eso si no se asusten, no es nada del otro mundo :)

 

Í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