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

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

  • Comments 18

Construyendo la UI - Parte 1

Para crear la UI recomiendo siempre contar con un poco de buen gusto estético y para nosotros los desarrolladores eso a veces implica pedirle ayuda a un amigo diseñador, así que no teman pedir una mano para hacer algo bonito.

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 una UI básica, desde el código XAML ubicamos el siguiente Grid

<Grid Style="{StaticResource LayoutRootStyle}">

Todo lo que este dentro de este control lo borramos para que finalmente el código del archivo quede así

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="RSSJuanK4Blog.View.RssMainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RSSJuanK4Blog.View"
    xmlns:common="using:RSSJuanK4Blog.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:vm="using:RSSJuanK4Blog.ViewModel"
    >

    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
        <vm:RssMainViewModel x:Key="ViewModel" x:Name="ViewModel" 
                        FeedUrlString="http://blogs.msdn.com/b/juank/rss.aspx"/>
    </Page.Resources>

    <Grid Style="{StaticResource LayoutRootStyle}">

    </ Grid>
< /common:LayoutAwarePage>

Crear la interfaz gráfica se puede hacer de tres formas

  1. Editando el código XAML
  2. Usando el diseñador de Visual Studio
  3. Usando Expression Blend (incluido también gratis con Visual Studio 2012)

En todas a la final lo que se genera es código XAML por lo que cualquier cosa la puedes hacer desde las tres herramientas, si trabajas desde XAML tienes acceso a todas las características pero te costara mas trabajo hacerlas porque debes hacer todo el código por ti mismo, desde el diseñador de Visual Studio puedes hacer muchas cosas, pero no todas, sin embargo es más rápido que hacer todo desde XAML y finalmente desde Expression Blend puedes hacer muchísimas cosas casi cubrir la totalidad de XAML y generar en minutos cosas que por código tardarías horas.

Es importante saber XAML pues es así como logras tener un control absoluto de la UI pero sin lugar a dudas utilizar otras herramientas te hará más productivo.

Esta primera parte la haré desde el código XAML para definir la estructura principal de la aplicación, el esqueleto.

Pero posteriormente editaremos varios elementos desde Expression Blend (En adelante solo Blend) de tal forma que aprendan también a manejarlo.

Esquema principal de la App

Esta es la forma en que se distribuirá el espacio de la App.

main-grid

Así que en el XAML, tomamos el grid que hemos dejado y lo convertimos en ello, Cómo? el Grid es en esencia una tabla a la que le podemos crear filas y columnas, así que establecemos las 2 filas y 3 columnas necesarias.

Las filas las establecemos así, el * indica que esa fila ocupara todo el espacio disponible

<Grid.RowDefinitions>
    <RowDefinition Height="140"/>
    <RowDefinition Height="*"/>
< /Grid.RowDefinitions>

Ahora las columnas

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100"/>
    <ColumnDefinition Width="500"/>
    <ColumnDefinition Width="*"/>
< /Grid.ColumnDefinitions>

El resultado

SNAG-0000

Para identificar las filas y columnas se utiliza numeración comenzando desde 0, de tal forma que a la celda 1 la referenciamos como la celda (0,0) es decir fila 0 columna 0.

Creando elementos básicos

El titulo

En la celda(0,1) creamos un TextBlock con el nombre de nuestra aplicación, el texto se puede colocar directamente pero el nombre de la aplicación ya esta definido como un recurso dentro del XAML al comienzo del archivo, así que mejor hacemos uso de ese recurso utilizando Binding, de igual forma podemos configurar la apariencia del control desde 0 o utilizar un estilo ya definido, si se quiere utilizar estilos ya definidos, en el archivo Common/StandardStyles.xaml hay una amplia colección de estilos con el look and feel de Windows 8. Por el momento utilizare estilos propios, para cambiar la apariencia del TextBlock Visual Studio ofrece ayudas IntelliSense para hacer esta tarea más fácil autocompletando código. Es conveniente colocarle nombre a los controles en especial a los que es posible que necesitemos acceder posteriormente para cambiarles propiedades así que este también tiene nombre:

<TextBlock x:Name="pageTitle" 
                   Grid.Column="1"  Grid.Row="0"
                   Text="{StaticResource AppName}" 
                   FontSize="45" FontWeight="Light"
                   TextWrapping="Wrap" Margin="10" 
                   HorizontalAlignment="Stretch"  
                   VerticalAlignment="Center"
                   / >

El nombre de la aplicación hay que modificarlo, en la parte superior del archivo xaml en la sección Page.Resources hay un recurso llamado AppName, allí le puedes cambiar el contenido por el nombre que quieras para tu aplicación, en mi caso Blog Ideas de un Conejo

Para modificar los estilos de un componente puedes seleccionarlo en el código o en el diseñador de Visual Studio presionas click derecho, propiedades o simplemente presionas F4 para que aparezca el panel de propiedades, desde allí puedes también modificar lo que desees.

Manejar los estilos como lo mostré arriba es válido, pero después de tener muchos controles con sus estilos propios el tema se vuelve inmanejable ya que la aplicación se torna muy compleja de leer, por ello vamos a extraer estas propiedades en un estilo a aparte.

Aplicar propiedades utilizando estilos

Desde el diseñador de Visual Studio seleccionamos el Textbox creado anteriormente, damos clic derecho, edit style, create empty

SNAG-0001

En el cuadro que aparece editamos la siguiente información y aceptamos, esto nos lleva al archivo App.xaml donde se ha creado un nuevo estilo, aunque esta vacío.

       SNAG-0002

En el TextBlock que habíamos creado, recortamos los atributos visuales que habíamos colocado dejándolo de esta forma:

<TextBlock x:Name="pageTitle" 
            Grid.Column="1"  Grid.Row="0"
            Text="{StaticResource AppName}" 
            Style="{StaticResource Title-Main-Style}"
            / >

Regresando al archivo Appx.xaml nos posicionamos sobre el estilo recién creado y en el panel de propiedades (F4) volvemos a aplicar los atributos quedando el código xaml así

<Style x:Key="Title-Main-Style" TargetType="TextBlock">
    <Setter Property="FontSize" Value="45"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="TextWrapping" Value="Wrap" />
    <Setter Property="Margin" Value="10" />
    <Setter Property="HorizontalAlignment" Value="Stretch"  / >

En adelante todas las propiedades visuales las editaremos en un estilo a aparte. Por claridad en el código algunas cosas se mantendrán en el objeto como lo son las propiedades de Binding y ubicación dentro del Grid, si bien es perfectamente válido llevarlas también al estilo.

El icono

En la parte superior izquierda de la app hemos establecido que aparezca un ícono, puedes utilizar cualquier imagen, para elaborarlo los invito a utilizar esta herramienta gratuita de SyncFussion: Metro Studio una vez lo has bajado te envían el serial por email. Es la que yo utilizo ya que tiene más de 1700 iconos editables y fácilmente personalizables desde la aplicación.

Agregamos la imagen y la configuramos de la siguiente forma

<Image Style="{StaticResource Logo-Style}" Source="ms-appx:///Assets/img/ideas-logo.png"/>

En Appx.xaml agregamos el siguiente estilo

<Style x:Key="Logo-Style" TargetType="Image">
	<Setter Property="Margin" Value="10"/>
< /Style>

Como se darán cuenta no establecimos las propiedades de fila y columna, pero no es necesario cuando no se coloca alguna de las dos el motor de xaml asume que su valor es 0.

El artículo actual

El articulo actual se despliega en la columna 2, allí debe ir el título del artículo y justo debajo el contenido. Dejaremos el titulo en (2,0) y el contenido en (2,1)

En Appx.xaml creamos un nuevo estilo basado en el estilo del titulo principal, le adicionamos dos propiedades

<Style x:Key="Title-Post-Style" TargetType="TextBlock" 
        BasedOn="{StaticResource Title-Main-Style}" >
    <Setter Property="FontSize" Value="30"/>
    <Setter Property="TextTrimming" Value="WordEllipsis"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
< /Style>

Regresando al View creamos un nuevo TextBlock así

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

Debajo del TextBlock creamos un nuevo elemento de tipo WebView con los siguientes atributos

<WebView x:Name="wvBlogContent" 
            Grid.Column="2" Grid.Row="1" 
            Style="{StaticResource WebView-Style}"  />

En Appx.xaml creamos el estilo correspondiente de la siguiente manera

<Style x:Key="WebView-Style" TargetType="WebView">
    <Setter Property="Margin" Value="10,0"/>
    <Setter Property="Visibility" Value="Collapsed"/>
    <Setter Property="CacheMode" Value="BitmapCache"/>
</ Style>

La razón por la que el WebView esta colapsado es porque solo lo haremos visible cuando este mostrando información del blog.

La Lista de Artículos

La lista de artículos disponibles se mostraran en (0,1), esto se hará con ayuda de un ListView que sirve para mostrar listas de ítems, este ListView de acuerdo a nuestro esquema inicial debe ocupar dos columnas, así que debemos también establecer la propiedad ColumnSpan en 2

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

Ahora que dentro del ListView creamos un elemento que permita que la información de cada post se despliegue bien , cada ítem a mostrar consta de los siguientes elementos:

  • Imagen
  • Titulo
  • Resumen

Así queda armado nuestro ListView armado y más abajo los correspondientes estilos a utilizar:

<ListView x:Name="lvwBlogPosts" Grid.ColumnSpan="2" Grid.Row="1" 
            Style="{StaticResource Lista-Posts-Style}" >
    <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>
< /ListView>
<Style x:Key="Lista-Posts-Style" TargetType="ListView">
    <Setter Property="Margin" Value="10,0"/>
</Style>
<Style x:Key="Image-Post-List" TargetType="Image">
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Width" Value="120"/>
    <Setter Property="Height" Value="120"/>
< /Style>
<Style x:Key="Title-PostList-Style" TargetType="TextBlock">
    <Setter Property="Width" Value="350"/>
    <Setter Property="Height" Value="Auto"/>
    <Setter Property="Margin" Value="0,5,5,10"/>
    <Setter Property="FontSize" Value="24"/>
    <Setter Property="TextTrimming" Value="WordEllipsis"/>
< /Style>
<Style x:Key="Summary-PostList-Style" TargetType="TextBlock" 
        BasedOn="{StaticResource Title-PostList-Style}">
    <Setter Property="FontSize" Value="14"/>
< /Style>

Como ya tenemos mejor de que la UI quedara como esperamos es hora de utilizar el ítem que hemos creado como una plantilla para utilizarla en todos los demás ítems, así que todo el StackPanel que esta dentro del ListView lo utilizaremos ahora dentro del template de ítems del ListView.

SNAG-0005

En el diseñador hacemos click derecho sobre el ListView y seleccionamos:

SNAG-0003

SNAG-0004

Esto genera en el Appx.xaml no un Style sino un DataTemplate, cortamos todo el Ítem que creamos anteriormente en el ListView y lo pegamos dentro de este DataTemplate creado, adicionalmente al ListView le asignamos la propiedad ItemTemplate, lo pueden hacer directo por código pero si prefieren seleccionan el ListView y en las propiedades (F4) buscan la propiedad ItemTemplate, allí siguen estos pasos:

SNAG-0006

El resultado es el siguiente:

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

Después de este paso ya no se ven los ítems en la vista de diseño, eso es normal no hay de que preocuparse.

Con esto ya tenemos creado el esqueleto de la UI, estos son los archivos completos.

En el próximo artículo enlazaremos la UI creada con el ViewModel.

Í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


  • Cuando trato de compilar la aplicación me sale un error que dice, que LayoutAwarePage no existe en el espacio de nombres . . .  y la verdad si existe, pero no quiere funcionar. que hago?

  • Mateo, en el XAML del page que namespaces tienes? copialos aca, en el namespace del LayoutAwarePage.cs que dice?

  • 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

  • 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

  • A mi me pasa igual que a Mateo, ademas me da el error en el Page.Resources "The member is not recognized or is not accessible".

    He buscado en todos lados incluso copie el codigo tal cual por si escribi algo mal pero aun asi no se quitan los error.

  • Stardin, el tema esta muy seguramente en los namespaces que estan utilixando. sino lo has solucionado charlemos por mi twitter: @JuanKRuiz

  • 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

Page 1 of 2 (18 items) 12