Con el objetivo de mantener la simplicidad de los post, estaré escribiendo cada acción en un artículo diferente. En este veremos cómo es que funciona la actualización de datos. Esta, la acción que resulta más sencilla de las tres.

Actualización de datos, del lado del cliente

Uno de los detalles importantes a considerar en este proceso, es que los elementos que hemos usado para mostrar tanto la lista de registros como el detalle (y debido a que hemos dejado las propiedades en sus valores por default) la actualización de datos ya es posible del lado del cliente. Es decir, por ejemplo, en nuestra vista de detalle del registro podemos cambiar el valor que se muestra.

Lo que podemos observar, gracias a que tanto la lista de registros como el detalles están ligado al mismo Domain Data Source, es que al momento de que el TextBox pierde el foco, el dato también es actualizado en la lista de registros.

Pero es IMPORTANTE hacer notar que estos cambios solo están del lado del cliente. Esto quiere decir que en nuestra base de datos, no se ha hecho ninguna actualización. Así pues, si recargamos la aplicación (F5), podremos observar que los datos son nuevamente traídos desde la base de datos, y que nuestros cambios se han perdido.

Hacer la actualización en la base datos

Para hacer la actualización de los cambios hechos del lado del cliente, será necesario hacerlo desde el code behind de nuestro archivo xaml, por lo que agregaremos un botón que nos permita ejecutar un evento donde pondremos el código. Así pues, tendremos un botón con el siguiente codigo xaml:

<Button x:Name="btnSave"
    Content="Guardar cambios"
    Height="23"
    Width="115"
    HorizontalAlignment="Left"
    Click="btnSave_Click" />

Es el evento de click donde pondremos nuestro código que indicara a WCF Ria Services que los cambios deberán ser guardados en la base de datos, en este caso al que hemos llamado btnSave_Click

La instrucción para que los datos sean guardados, al igual que el resto de nuestras acciones, es de manera muy sencilla, y solo consiste en indicarle al Domain Data Source, que haga un sometimiento de los cambios (submit changes):

private void btnSave_Click(object sender, System.Windows.RoutedEventArgs e)
{
    productDomainDataSource.SubmitChanges();
}

Así pues, si verificamos los datos directamente en la base de datos (o si recargamos nuestra aplicación) veremos que los datos efectivamente han sido actualizados.

Siguientes post…

Quedan pendientes las otras dos acciones (agregar nuevo registro y eliminar registros) para las siguientes entregas, así como el hecho de regresar a explicar algunas características más sobre la vista de datos.

Gracias y saludos…

Para poder continuar con este tema, será necesario continuar con el trabajo hemos venido realizando en los post previos, en donde hemos ya generado un lista de registros.

Vista detalles desde la Ventana de Fuente de Datos.

Al igual que el datagrid de la lista de datos, la Ventana de Fuente de Datos (Data Sources window) nos permite de manera rápida y fácil crear un vista de detalles. En esta ocasión habremos de seleccionar la vista de detalle en el Data Sources window:

Y nuevamente para agregar el elemento, en este caso un grid a dos columnas, necesitamos arrastrar el elemento desde la ventana Data Sources:

Ejecutando la aplicación

Una vez más, nuestra aplicación está lista para ser ejecutada sin más trabajo que hacer.

Analizando lo que ha sucedido

Ahora, como es costumbre, analizaremos lo que ha pasado en el archivo xaml.

Lo primero que podremos apreciar es que el elemento que se ha añadido es un grid con un par de columnas y un renglón por cada uno de los datos del registro que estamos observando en el momento. También hacer notar que Visual Studio 2010 es lo suficientemente inteligente para observar que ya se ha definido un Domain Data Source con la misma fuente de datos, por lo que se lo ha asignado al nuevo grid como su contexto de datos (Data Context). Cada uno de ellos con su respectiva vinculación (binding).

<Grid DataContext="{Binding ElementName=productDomainDataSource, Path=Data}"
      HorizontalAlignment="Left"
      Name="grid1"
      VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        ...
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    ...

Lo que respecta a los renglones, podemos observar una columna para en donde se configura una etiqueta (label) para mostrar el encabezado de la columna en la base de datos y ya sea un TextBox o un DatePicker o un CheckBox para el valor en la base de datos.

...
<sdk:Label Content="Name:"
           Grid.Column="0"
           Grid.Row="8"
           HorizontalAlignment="Left"
           Margin="3"
           VerticalAlignment="Center" />
<TextBox Grid.Column="1"
         Grid.Row="8"
         Height="23"
         HorizontalAlignment="Left"
         Margin="3"
         Name="nameTextBox"
         Text="{Binding Path=Name, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true, TargetNullValue=''}"
         VerticalAlignment="Center"
         Width="120" />
...
<sdk:Label Content="Finished Goods Flag:"
           Grid.Column="0"
           Grid.Row="4"
           HorizontalAlignment="Left"
           Margin="3"
           VerticalAlignment="Center" />
<CheckBox Content=""
          Grid.Column="1"
          Grid.Row="4"
          Height="16"
          HorizontalAlignment="Left"
          IsChecked="{Binding Path=FinishedGoodsFlag, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}"
          Margin="3"
          Name="finishedGoodsFlagCheckBox"
          VerticalAlignment="Center" />
...
<sdk:Label Content="Modified Date:"
           Grid.Column="0"
           Grid.Row="7"
           HorizontalAlignment="Left"
           Margin="3"
           VerticalAlignment="Center" />
<sdk:DatePicker Grid.Column="1"
                Grid.Row="7"
                Height="23"
                HorizontalAlignment="Left"
                Margin="3"
                Name="modifiedDateDatePicker"
                SelectedDate="{Binding Path=ModifiedDate, Mode=TwoWay, NotifyOnValidationError=true, ValidatesOnExceptions=true}"
                VerticalAlignment="Center"
                Width="120" />

Siguientes post…

Si bien, todavía tenemos mucho que decir en lo que respecta a mostrar y filtrar datos, en un siguiente post estaremos hablando de como hacer actualizaciones hacia la base de datos, para posteriormente regresar a mostrar elementos cómo el páginador (data pager) o el indicador de ocupado (busy indicator)

Gracias y saludos…

Por primera vez en esta serie de post, haremos mas que arrastar y/o seguir asistentes. En esta ocasión la codificación estará en nuestro archivo xaml. Y para poder trabajar en este tema, será necesario tener nuestro código como lo tendriamos en la parte 3 de esta serie.

WCF Ria Services V1.0 para Silverlight 4.- Índice:
Introducción (Parte 1)
Obtener datos desde la BD (Parte 2)
Mostrar datos (Parte 3)
Filtrar datos [DomainService] (Parte 4)
Filtrar datos [DomainDataSource] (Parte 5)

Texto a filtrar (preparando el filtro)

Para saber que texto es el que aplicaremos agregaremos un campo de text (TextBox) a nuestra interface al cual necesita llevar nombre (x:name)

El código quedaría como:

<TextBox x:Name="txtFilter"
         Width="350" />
<sdk:DataGrid AutoGenerateColumns="False"
              Height="200"
              ItemsSource="{Binding ElementName=productDomainDataSource, Path=Data}"
              Name="productDataGrid"
              RowDetailsVisibilityMode="VisibleWhenSelected"
              Width="400">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn x:Name="nameColumn"
            ...

Modificando el Servicio de Dominio (DomainService)

Para poder realizar los filtros será necesario agregar un Descriptor de Filtros (FilterDescriptor) a nuestro Servicio de Dominio (DomainService). Será en el FilterDescriptor donde configuraremos el tipo de operaror que el filtro utilizará (Operator="StartsWith"), así como la columna en la que se aplicará el filtro con la propiedad de PropertyPath (PropertyPath="Name"), y el valor que será utilizado como filtro, el cual en esta ocasión será un mapeo al texto del campo de texto que agregamos anteriormente (Value="{Binding ElementName=txtFilter, Path=Text}").

<riaControls:DomainDataSource AutoLoad="True"
                              d:DesignData="{d:DesignInstance my1:Product, CreateList=true}"
                              Height="0"
                              LoadedData="productDomainDataSource_LoadedData"
                              Name="productDomainDataSource"
                              QueryName="GetProductsQuery"
                              Width="0">
    <riaControls:DomainDataSource.DomainContext>
        <my:RiaDomainContext />
    </riaControls:DomainDataSource.DomainContext>
    <riaControls:DomainDataSource.FilterDescriptors>
        <riaControls:FilterDescriptor Operator="StartsWith"
                                      PropertyPath="Name"
                                      Value="{Binding ElementName=txtFilter, Path=Text}" />
    </riaControls:DomainDataSource.FilterDescriptors>
</riaControls:DomainDataSource>

Ejecutando la aplicación

Al ejecutar este applicación podremos observar que el filtro es aplicado segun vamos escribiendo en el cuadro de texto, a diferencia de cuando creamos el filtro en el DomainService, que el filtro es aplicado al presionar el boton de "Load".

Nota: es posible tener un retraso en la carga de datos, por lo que es probable que mientras los datos son cargado, el filtro no se aplique como lo esperamos, pero una vez cargados los datos, el filtro trabajará adecuadamente. En nuestro siguiente post veremos como agregar un control (Busy) que nos permita saber si hay actividad en la carga de datos.

Saludos…

Modificando el Servicio de Dominio (DomainService)

En la parte 2, de esta serie de post, agregamos nuestra Clase de Servicio de Dominio, la cual llamamos RiaDomainService.cs. Esta clase, como ya lo explicábamos, es la encargada de exponer las diferentes acciones que podemos ejecutar desde y hacia nuestros datos.

El primer paso que haremos es agregar un nuevo método que nos permita filtrar los datos. Al hacerlo de esta manera, el filtrado de datos lo estaremos haciendo en la capa media, que bien podríamos ver como la capa de negocio (business).

Básicamente nuestro método será muy parecido al método que ya tenemos para obtener la lista de productos, pero este nuevo método recibirá un parámetro el cual usaremos para el filtrado de datos. En esta ocasión lo que haremos es filtrar los datos por los registros que comiencen con el texto que el usuario decida sobre la columna de nombre de producto.

El método lo llamaremos GetProductsStartingWith, y recibirá un texto como parámetro el cual llamaremos startingName. Y los datos serán filtrados utilizando el método Where() que nuestro modelo de datos no entrega, en el cual utilizaremos expresiones lambda.

public IQueryable<Product> GetProductsStartingWith(string startingName)
{
    return this.ObjectContext.Products.Where(p => p.Name.StartsWith(startingName));
}

Vista y Ventana de Fuente de Datos (Data Sources Window)

Al igual que cuando agregamos la lista de productos, el Data Source Window nos permite agregar los controles que en esta ocasión serán necesarios para mostrar la lista filtrada; el DataGrid, un cuadro de texto, y un botón, es una sola acción.

Para lograr esto, en el Data Source Window necesitamos indicar que para la lista de productos, el query a utilizar será GetProductsByNameQuery.

* Si el query no está disponible, es probable que necesitemos recompilar nuestra solución una vez que agregamos el nuevo método a nuestro DomainService, o presionar el icono de recargar disponible en la ventana de Data Source.

Una vez que hemos seleccionado el query solo bastará arrastrar el elemento a nuestro xaml.

Ejecutando la aplicación

Nuevamente, nuestra aplicación ya está terminada con apenas estos pequeños pasos que hemos hecho.

Aquí la explicación de lo que ha sucedido en nuestro archivo xaml.

Los elementos agregados: un DomainDataSource, un DataGrid, un Label, un TextBox, y un Button.

El primer elemento que necesitamos analizar es el DomainDataSource. Éste tiene los valores de acuerdo a:

• Es generado con un nombre (Name=”productDomainDataSource”),
• utiliza la función de GetProducts (QueryName="GetProductsByNameQuery"),
• que no serán cargado automáticamente (AutoLoad="False")
• y al ser cargados los datos, ejecutará el método productDomainDataSource_LoadedData (LoadedData="productDomainDataSource_LoadedData")

Adicionalmente, al DomainDataSource se le ha agregado un elemento llamado QueryParameters, el cual nos permite enviarle los parámetros pertinentes al query que estamos ejecutando, que en esta ocasión será:

• el parámetro startingName (ParameterName="startingName")
• cual será leído desde el textbox startingNameTextBox, que también ha sido agregado y analizaremos más adelante (Value="{Binding ElementName=startingNameTextBox, Path=Text}").

<riaControls:DomainDataSource AutoLoad="False"
                              d:DesignData="{d:DesignInstance my1:Product, CreateList=true}"
                              Height="0"
                              LoadedData="productDomainDataSource_LoadedData"
                              Name="productDomainDataSource"
                              QueryName="GetProductsStartingWithQuery"
                              Width="0">
    <riaControls:DomainDataSource.DomainContext>
        <my:RiaDomainContext />
    </riaControls:DomainDataSource.DomainContext>
    <riaControls:DomainDataSource.QueryParameters>
        <riaControls:Parameter ParameterName="startingName"
                               Value="{Binding ElementName=startingNameTextBox, Path=Text}" />
    </riaControls:DomainDataSource.QueryParameters>
</riaControls:DomainDataSource>

Además, como lo podemos observar, se han agregado un Label, un Textbox, un Button y un DataGrid, los cuales son muy intuitivos en su función. Básicamente el texto que el usuario escriba en el TextBox servirá como filtro de los datos a mostrar en el DataGrid, una vez presionado el Button. Y esto es ejecutado ya que se ha agregado un enlace (Binding) al Domain Data Source (Command="{Binding Path=LoadCommand, ElementName=productDomainDataSource}")

<StackPanel Height="30"
            Orientation="Horizontal">
    <sdk:Label Content="Starting Name:"
               Margin="3"
               VerticalAlignment="Center" />
    <TextBox Name="startingNameTextBox"
             Width="60" />
    <Button Command="{Binding Path=LoadCommand, ElementName=productDomainDataSource}"
            Content="Load"
            Margin="3"
            Name="productDomainDataSourceLoadButton" />
</StackPanel>

Otra forma de hacer filtros…

En el siguiente post, veremos cómo hacer filtrados de datos desde nuestro DomainDataSource, esto sin necesidad de modificar nuestros Servicios de Dominio…

Saludos…

Aplicación Silverlight

Como ya lo hemos comentado, la aplicación silverlight que el template ‘Silverlight Business Application’ no entrega ya cuenta con el ‘Framework de Navegación’. En esta ocasión estaremos trabajando únicamente en nuestra página ‘Home.xaml’.

VS2010 y la Ventana de Fuente de Datos (Data Sources window)

Una de las ventajas que trae consigo el Visual Studio 2010, es que ahora podemos ligar los servicios de datos expuestos por WCF RIA Services en nuestra applicación Silverlight de manera visual; así pues, desde la ventana de ‘Data Sources’ podemos arrastrar un ‘DataGrid’ (que a continuación analizaremos).

La ventana de Data Sources, es lo suficientemente inteligente como para leer los servicios WCF que nuestra aplicación Web expone, y nos entrega los diferentes objetos expuestos.

Ejecutando la aplicación

y listo, ahora sí ya tenemos nuestra primera aplicación RIA Services lista para ser ejecutada. Sin embargo considero importante entendamos que es lo que está pasando tras bambalinas…

Origen de Datos de Dominio (Domain Data Source)

La primera parte del código entregado consiste del control llamado DomainDataSource el cual viene incluido en los assemblies que RIA Services nos entrega.

Este control será el encargado de contener los datos que la aplicación Web expone a través de la Clase de Servicio de Dominio.

• Es generado con un nombre (Name=”productDomainDataSource”),
• utiliza la función de GetProducts (QueryName="GetProductsQuery"),
• que serán cargado automáticamente (AutoLoad="True")
• y al ser cargados los datos, ejecutará el método productDomainDataSource_LoadedData (LoadedData="productDomainDataSource_LoadedData")

También es configurado para que el Origen de Datos sea el Contexto de Dominio desde la aplicación Web.

DLL: System.Windows.Controls.DomainServices
Namespace: xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
Namespace: xmlns:my="clr-namespace:WCFRiaServices01.Web.Services"
Namespace: xmlns:my1="clr-namespace:WCFRiaServices01.Web.Models"

<riaControls:DomainDataSource AutoLoad="True"
                              d:DesignData="{d:DesignInstance my1:Product, CreateList=true}"
                              Height="0"
                              LoadedData="productDomainDataSource_LoadedData"
                              Name="productDomainDataSource"
                              QueryName="GetProductsQuery"
                              Width="0">
    <riaControls:DomainDataSource.DomainContext>
        <my:RiaDomainContext />
    </riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>

Mostrando los datos en un DataGrid

Una vez que tenemos los datos en nuestro DomainDataSource, estos son mostrados en un control DataGrid.

Nuestro DataGrid tendrá

• un nombre (Name="productDataGrid");
• las columnas no serán autogeneradas (AutoGenerateColumns="False");
• y lo más importante, el origen de datos estará enlazado con nuestro Domian Data Source (ItemsSource="{Binding ElementName=productDomainDataSource, Path=Data}")

DLL: System.Windows.Controls

Namespace: xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk

<sdk:DataGrid AutoGenerateColumns="False"
              Height="200"
              ItemsSource="{Binding ElementName=productDomainDataSource, Path=Data}"
              Name="productDataGrid"
              RowDetailsVisibilityMode="VisibleWhenSelected"
              Width="400">
    <sdk:DataGrid.Columns>
        ...
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

Y las columnas haran referencia al dato con la propiedad de Binding apuntanto a la columna correspondiente (Binding="{Binding Path=Class}")

<sdk:DataGridTextColumn x:Name="classColumn"
                        Binding="{Binding Path=Class}"
                        Header="Class"
                        Width="SizeToHeader" />

Las columnas generadas, detectarán el tipo de dato desde la BD, y harán la conversion respectiva, así pues para la fechas se utilizará el formato adecuado. (Esto lo veremos en un post posterior).

Siguientes post…

Aunque ya tenemos una aplicación que corre sobre RIA Services, apenas estamos calentando motores, en los siguientes post estaremos hablando de cómo hacer paginación de los datos mostrados, cómo crear filtros, cómo mostrar los detalles de un registro, etc, etc, etc…

Plantilla de VS2010 para WCF Ria Sercvices

Lo primero que necesitamos mencionar es que el framework de Ria Services nos ofrece una plantilla (template) para VS2010 llamada ‘Silverlight Business Appication’ que nos entregará una solución totalmente configurada para comenzar a trabajar. Esta solución viene ya incluso con las siguientes características:

• La solución está compuesta por dos proyectos, una aplicación web y una aplicación Silverlight. La aplicación web será la encargada de la conexión y acceso a la base datos, así como la que proyectará los datos hacia la aplicación silverlight, que será la que le de vista a estos.
• La aplicación Silverlight que nos entrega está creada sobre el framework de navegación (para leer sobre el Framework de Navegación puedes ir a estos post)
• Servicios de manejo de usuarios (membership) ya están incluido. (estos los veremos cómo usar y modificar en un post posterior)

Modelo de Datos

Para poder acceder a los datos desde nuestra aplicación Silverlight, es necesario crear "en nuestra aplicación web" un modelo de datos y proyectarlos desde nuestra aplicación web con una clase de servicio de dominio.

Lo primero que haremos es crear un modelo de nuestra base datos. Esto será, como ya lo hemos mencionado, del lado de nuestra aplicación web. En esta ocasión agregaremos un nuevo elemento del tipo ‘ADO.NET Entity Data Model’. Le pondremos por nombre ‘RIAModel.edmx’. (Como sugerencia, la pondremos en la carpeta ‘Models’)

Esto nos lanzará un asistente. En el primer paso nos permitirá seleccionar el contenido de nuestro modelo, en esta ocasión seleccionaremos que sea generado desde una base de datos.

En el siguiente paso del asistente configuraremos los datos de conexión de la base de datos.

*Yo usaré la base de datos de AdventureWorks sample databases que pueden encontrar en el web para su descarga.

En el tercer paso del asistente, seleccionaremos los objetos que queremos estén incluidos en modelo de datos. Además configuraremos el Namespace del Modelo.

*Para nuestros propósitos por ahora solo seleccionaremos la tabla de Product (Production), y nombraremos el Namespace del Modelo como: RiaModel

Al seleccionar la opción de pluralizar o singularizar lo nombre de los objectos generados (Pluraliza or singularize generated object names), le estamos diciendo al modelo que los objetos deberan tener el nombre de entidad en plural y el nombre en singular, lo cual nos ayudará a entender posteriormente de una mejor manera con que tipo de objeto estamos trabajando al hacer consultas a los datos.

Al terminar el asistente tendremos un esquema del modelo de datos como este. Observemos que el ‘Entity Set Name’ esta pluralizado.

 
Una vez completado nuestro modelo, tendremos que compilar el proyecto, ya que para la siguiente sección, es necesario tener nuestro modelo de datos ya disponible.

Clase de Servicio de Dominio

El siguiente paso en el que trabajaremos será el encargado de proyectar los datos desde nuestra aplicación web hacia nuestra aplicación silverlight. Y esto lo lograremos agregando un elemento del tipo ‘Domain Services Class’, el cual añadiremos a nuestro proyecto web en la carpeta llamada ‘Services’, lo cual haremos en la carpeta de Services y lo llamaremos RiaDomainService.cs

Al agregar este tipo de clases, nos lanzará un asistente que nos permitirá seleccionar los elementos configurados en nuestro Modelo de Datos que queremos sean proyectados por medio de un servicio, así como una opción para permitir sean editados. Además de que también nos ofrece la opción de crear las clases asociadas para los metadatos de los objetos (dedicaremos un post a este tema).

*Si no se muestra ninguno de los elementos configurados anteriormente es probable que el proyecto no fuera compilado previamente.

Los elementos que nos entregará serán un par de clases, en mi caso: RiaDomainService.cs y RiaDomainService.metadata.cs. Como lo comenté, la segunda de ellas la abordaremos con mayor detalle en un post posterior. Pero de la que si necesitamos hablar es de la de RiaDomainService.cs.

Lo que podemos platicar hasta este momento de esta clase es que:

1. Como podemos ver, está etiquetada con [EnableClientAccess()], ya que pedimos fuera editable.
2. Nos crea 4 funciones básicas: GetProducts(), InsertProducts(), UpdateProducts() y DeleteProducts(). El típico ABC de una base de datos.
3. Esta clase es 100% modificable para nuestros propósitos. Así pues por ejemplo, si quisiéramos que nuestro método GetProducts() nos regrese los registros de manera ordenada, solo bastaría modificarla de tal modo que quedaría:

public IQueryable<Product> GetProducts()
{
    return this.ObjectContext.Products.OrderBy(p => p.Name);
}

Continuará…

Ya hemos configurado nuestra aplicación web para proyectar los datos, en nuestro siguiente post ahora sí comenzaremos a consumir estos datos y a mostrarlos desde nuestra aplicación silverlight…

Saludos

Si bien, ya habia comenzado una Serie de post sobre WCF Ria Services, me he decidido a comenzar nuevamente con el tema por las siguientes razones:

• El lanzamiento oficial de la versión RTM de Visual Studio 2010
• El lanzamiento oficial de Silverlight 4
• El lanzamiento oficial WCF Ria Services v1.0
• Ademas de que durante este tiempo he estado trabajando muy de lleno en un sitio (razón por la cual dejé de lado la continuación de la serie antes mencionada), en donde mi experiencia ha sido enfocada a la tecnología de WCF Ria Services, por lo que los conocimiento adquiridos me han hecho ver el tema con diferentes ojos.

Y como podrán darse cuenta, creo conveniente recomenzar con el proyecto de aportar con mi granito de arena sobre el tema. Sin embargo, como lo que fuimos es lo que nos hacer ser lo que somos, tomaré mucha de la información y forma de lo que en la antigua serie trate de hacer.

Que es WCF Ria Services?

Ria Services es un framework que provee una serie de funcionalidades (dlls, templates, etc) que permiten acceder datos en una Aplicación Silverlight desde una Base de Datos. Esto es gracias a su implementación en modelo de capas (n-tier application), donde Ria Services trabaja en las capas intermedias ofreciendo control de acceso, cambios y operaciones definidas por el usuario, así como funciones de de validaciones, autentificación de usuarios y roles en las capas superiores.

Referencia: http://silverlight.net/riaservices/

Página WCF Ria Services, instaladores y recursos de aprendizaje

La principal página de WCF Ria Services la podemos encontrar en http://www.silverlight.net/riaservices. En donde podemos encontrar los instaladores. Así como una serie de recursos de aprendizaje (videos, documentos, blogs, etc).

Recursos para trabajar en Ria Services

Hacer notar WCF Ria Services ya está incluido en el instalador de las herramientas de Silverlight 4 para Visual Studio 2010 (Silverlight 4 Tools for Visual Studio 2010). Sin embargo en la página podemos encontrar el instalador standalone para la versión v1.0 de WCF Ria Services, así como el instalador para el paquete de herramientas de WCF Ria Services (WCF RIA Services Toolkit).

También podemos encontrar las siguientes páginas sobre el tema

• WCF RIA Services Code Gallery
• Documentación de MSDN sobre WCF RIA Services

Continuará…

Igual, si bien en este primero post no nos hemos adentrado (codificado) en la tecnología. No podemos dejar de lado la información contenida en este.

Para nuestro siguiente post si estaremos trabajando ya con código.

Saludos..

Vínculos a los post anteriores relacionada con el tema:

Si no has leido, o quieres recordar lo que hemos visto hasta ahora, aquí los vinculos a los post anteriores:

Framework de Navegacion en Silverlight 3.- Parte 1
Framework de Navegacion en Silverlight 3.- Parte 2

Clases de modelado de datos

Para esta parte, incluiremos una clase para hacer un modelado de datos (aunque estos datos pueden venir desde cualquier fuente de datos).

Lo que nuestro código hace es crear un par de clases dentro de nuestro archivo Album.cs. La primera de ella en donde crearemos un Disco Músical (Album); con sus propiedades ID, Nombre del Album y el Artista. La segunda será una colección de Discos (Albums) que nos permitirá regresar un arreglo de 3 discos; así como los detalles de uno de ellos a partir de su ID.

using System.Collections.Generic;
using System.Linq;

namespace LLS.NavigationFramework.Part3.DataModel
{
    public class Album
    {
        public int ID { get; set; }
        public string AlbumName { get; set; }
        public string AlbumArtist { get; set; }
    }

    public class Albums
    {
        public List<Album> getAlbums()
        {
            List<Album> albums = new List<Album>();
            albums.Add(new Album() { ID = 1, AlbumName = "Dónde estan los Ladrones", AlbumArtist = "Shakira" });
            albums.Add(new Album() { ID = 2, AlbumName = "Galeria Caribe", AlbumArtist = "Ricardo Arjona" });
            albums.Add(new Album() { ID = 3, AlbumName = "Tierna la Noche", AlbumArtist = "Fey" });
            return albums;
        }
        public Album getAlbumById(int id)
        {
            var album = from a in getAlbums()
                        where a.ID == id
                        select a;
            return album.First();
        }
    }
}

Preparando la solución para accesar las nuevas páginas de navegación

Ademas necesitaremos agregar al menú de la aplicación el acceso a la nueva página de discos:

<StackPanel Margin="10" VerticalAlignment="Top" Grid.Column="0">
    <HyperlinkButton Content="Inicio" FontSize="14" Click="HyperlinkButton_Click" Tag="Inicio" />
    <HyperlinkButton Content="Acerca" FontSize="14" Click="HyperlinkButton_Click" Tag="Acerca" />
    <HyperlinkButton Content="Discos" FontSize="14" Click="HyperlinkButton_Click" Tag="Discos" />
</StackPanel>
<nav:Frame x:Name="MainFrame" Grid.Column="1" UriMapper="{staticResource uriMapper}" Source="Inicio" />

Y agregaremos al mapeador de uris (UriMapper) el acceso a la nueva página (Page) de discos, así como un mapeo de uri (UriMapping) en donde configuraremos el uso de parametros dinámicos:

<navcore:UriMapper x:Key="uriMapper">
    <navcore:UriMapping Uri="Inicio" MappedUri="/Content/Home.xaml" />
    <navcore:UriMapping Uri="Acerca" MappedUri="/Content/About.xaml" />
    <navcore:UriMapping Uri="Discos" MappedUri="/Content/Albums.xaml" />
    <navcore:UriMapping Uri="Disco/{id}" MappedUri="/Content/Album.xaml?id={id}" />
</navcore:UriMapper>

Mostrando la lista de discos desde nuestra fuente de datos

Para mostrar la lista de discos en nuestra fuente de datos, agregamos una página (page) (página de silvelirght {silverlight page} del framework de navegación que veiamos en la parte 2 de la serie de post sobre este tema) que llamaremos Albums.xaml.

En nuestra página (page) tendremos un Control de Elementos (ItemsControl), en donde le definiremos su Plantilla (ItemTemplate), que a su vez será una plantilla de datos (DataTemplate) de una lista de botones (HyperlinkButton) en donde el texto será el nombre del disco y tu tag será el ID del disco.

<StackPanel x:Name="LayoutRoot">
    <TextBlock FontSize="24" Foreground="Chocolate" Text="Colección de Discos" />
    <ItemsControl x:Name="AlbumList">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <HyperlinkButton Content="{Binding AlbumName}" Tag="{Binding ID}" Click="HyperlinkButton_Click" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

Y en el código detras de este xaml, primero cargaremos los datos de la colección de discos en el loader de la clase; y en el evento del click de los botones lo que haremos es obtener el tag del boton para crear un url que apunte a la página (page) de detalles del disco usando el id del disco

Aqui es donde tenemos la parte medular de este post en donde haremos uso del Servicio de Navegación (NavigationService) que ofrece el Framework, el cual nos permite Navegar (Navigate) hacia una nueva página en nuestro Frame (Frame) donde tenemos contenidas nuestras Páginas (Page)

public partial class Albums : Page
{
    public Albums()
    {
        InitializeComponent();
        Loaded += new RoutedEventHandler(Albums_Loaded);
    }

    void Albums_Loaded(object sender, RoutedEventArgs e)
    {
        LLS.NavigationFramework.Part3.DataModel.Albums a = new LLS.NavigationFramework.Part3.DataModel.Albums();
        this.AlbumList.ItemsSource = a.getAlbums();
    }

    private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
    {
        HyperlinkButton btn = sender as HyperlinkButton;
        string id = btn.Tag.ToString();
        this.NavigationService.Navigate(new Uri(string.Format("Disco/{0}", id), UriKind.Relative));
    }
}

Mostrando los detalles de un disco

Por último, agregaremos una página (page) que llamaremos Album, en donde mostraremos los detalles de un disco a partir de su identificador leido desde el url,

Aquí utilizaremos otro compomente importante en el framework de navegación, el Contexto de Navegación (NavigationContext), que nos permitirá leer desde la cadena de consulta (QueryString).

Recordemos que en nuestro Mapeos de Uri (UriMapper) hacemos llamadas del tipo /Content/Album.xaml?id={id} de donde podemos obtener el id del album a consultar.

Todo esto en el loader de la Página (Page).

Nuestro xaml:

<StackPanel x:Name="LayoutRoot">
    <TextBlock FontSize="24" Foreground="Chocolate" Text="Detalles del Disco" />
    <StackPanel Orientation="Vertical" x:Name="AlbumInfo">
        <TextBlock x:Name="AlbumName" Text="{Binding AlbumName}" />
        <TextBlock x:Name="AlbumArtist" Text="{Binding AlbumArtist}" />
    </StackPanel>
</StackPanel>

Y nuestro código:

public partial class Album : Page
{
    public Album()
    {
        InitializeComponent();
        Loaded += new RoutedEventHandler(Album_Loaded);
    }
    void Album_Loaded(object sender, RoutedEventArgs e)
    {
        LLS.NavigationFramework.Part3.DataModel.Albums albums = new LLS.NavigationFramework.Part3.DataModel.Albums();
        LLS.NavigationFramework.Part3.DataModel.Album album = null;
        if (this.NavigationContext.QueryString["id"] != null)
        {
            album = albums.getAlbumById(Convert.ToInt32(this.NavigationContext.QueryString["id"]));
        }
        this.DataContext = album;
    }
}

Tiempo de ejecución

En esta ocasión haremos notar los url del tipo:

Donde encontrar este código:

KodiakLS.codeplex.com (I’m in love with codeplex.com)

Proximamente:

Ya que hemos entendido los  conceptos básicos del Framework de Navegación de Silverlight 3 estamos listos para la última parte de nuestro tema:

• Plantilla de proyecto para el framework de navegación.

Saludos

Lo prometido es deuda, así que aquí la segunda parte del tema de Framework de Navegación en Silverlight 3. Si no has leido la primera parte, aquí la puedes encontrar. También mencionar que utilizaremos el proyecto/código que hicimos en dicho post.

Configurando la ‘página’ de inicio de la aplicación

Iniciaremos configurando la página de inicio de la aplicación, o mejor dicho del frame que la contiene, y para eso basta con completar la propiedad de ‘Source’ del ‘Frame’:

<nav:Frame x:Name="MainFrame" Grid.Column="1" Source="/Contents/Home.xaml" UriMapper="{StaticResource uriMapper}" />

** SL3 RTW Update: Para la versión de Silverlight 3 RTW, es necesario agregar la propiedad UriMapper.

Url Mapping

Para no exponer nuestra estructura de archivos en el url, podemos utilizar lo que se llama Url Mappings, y esto puede ser a nivel de nuestro frame o a nivel de la aplicación. Para el proposito de esta guia, lo haremos a nivel de aplicación.

Lo primero es agregar a nuestro xaml de aplicación, usualmente App.xaml, el namespace: clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation.

NOTA: A diferencia del namespace que agregamos a nuestro xaml principal (MainPage.xaml), notese que estamos usando System.Windows.Navigation en lugar de System.Windows.Controls

Una vez que tenemos nuestro namespace agregaremos el elemento llamado UriMapper dentro de nuestros recursos (Application.Resources). Adicionalmente se deberá de configurar la propieda x:key del UriMapper.

Dentro del UriMapper definiremos nuestros mapeos utilizando el elemento UriMapping en donde tendremos un valor para la propiedad Uri, que es el nombre o la definición de nuestro nuevo uri, y la propiedad MappedUri, que a donde apuntará nuestro mapeo.

** SL3 RTW Update: Debio al uso de la propiedad de UriMapper en el frame de nuestra aplicación, es necesario asegurarnos que el valor que se tiene el MapperUri comienze con diagonal (‘\’)

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:navcore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
            x:Class="Silverlight3.NavigationFramework.Part2.App" >
    <Application.Resources>
        <navcore:UriMapper x:Key="uriMapper">
            <navcore:UriMapping Uri="Inicio" MappedUri="/Contents/Home.xaml" />
            <navcore:UriMapping Uri="Acerca" MappedUri="/Contents/About.xaml" />
        </navcore:UriMapper>
    </Application.Resources>
</Application>

Como usar los mapeos en la apliación

Para usar los mapeos configurados solo basta con utilizar el valor de la propiedad Uri de los elementos UriMapping en el Tag de nuestros botones de navegación, incluso lo podemos configurar como el source de nuestro frame (para configurar la página inicial del frame).

<StackPanel Margin="8,8,8,8" VerticalAlignment="Top">
    <HyperlinkButton Content="Inicio" FontSize="14" Click="NavigateButton_Click" Tag="Inicio" />
    <HyperlinkButton Content="Acerca" FontSize="14" Click="NavigateButton_Click" Tag="Acerca" />
    <HyperlinkButton Content="Clientes" FontSize="14" IsEnabled="False"/>
</StackPanel>
<nav:Frame x:Name="MainFrame" Grid.Column="1" Source="Inicio" />

Actualizar iFrame en nuestro archivo aspx/html.

** SL3 RTW Update: Para que los mapeos en la url funciones adecuadamente, es necesario verificar que el iFrame que es agregado al documento aspx/html tenga un id con valor = ‘_sl_historyFrame’

<iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'></iframe>

Tiempo de Ejecución

Nuestra gran diferencia con apenas estos cambios es que ahora nuestros url de acceso a nuestra aplicación serán del tipo:

http://ligasilverlight.jorgelevy.com/Silverlight3.NavigationFramework.Part2TestPage.aspx#Inicio

Notese que ahora estamos usando una palabra clave, en este caso ‘inicio’, y que ya no estamos mostrando ni donde esta ubicado nuestro xaml, ni siquiera que es un xaml al que estamos haciendo referencia.

Donde encontrar este código:

KodiakLS.codeplex.com (I’m in love with codeplex.com)

Proximamente:

Aunque este post es corto y sencillo, nos está dando las bases para nuestros siguientes post, los cuales incluye:

• Como cargar información dependiendo de parametros en el url
• Plantilla de projecto para el framework de navegación.
• Etc…

Saludos

En los siguientes posts estaré platicando del nuevo Framework de Navegación introducido en la version 3 de Silverlight. La idea es ir platicando a detalle sobre las caracteristicas de framework, y poco a poco iremos creando una aplicación cada vez más robusta basada en este concepto.

Qué es el Framwork de Navegación en SL3?

Es una de las caracteriticas introducidas en Silverlight 3 (todavia en beta) que nos permite inscrustar ‘frames’ dentro de nuestos xaml y permitir a las ‘paginas’ contenidad en estos frames conta con URL´s unicos, que a su vez sean amigables para los ‘motores de busquedas’.

Así pues, podemos hacer referencia a una sola parte de nuestra applicación web, llamadas pages, usando url´s del tipo: http://www.domino.com/page.html#home; en donde la parte a notar, dentro de este concepto, es #home, que le indica a la aplicación que información debe de mostrar (más adelante explicaremos con mayor detalle este punto)

Configurar una aplicacion SL3 para usar el framework

Para poder utilizar el framework de navegación en nuestros proyectos es necesario agregar la referencia System.Windows.Controls.Navigation a nuestro proyecto (incluida en las librerias de SL3).

Y como ya es bien sabido, debemos agregar nuestra referencia en nuestro archivo xaml.

Codificando

Una vez que hemos preparado nuestra solución para usar el framework de navegación podemos comenzar a codificar nuestra applicación. Lo primero que haremos es crear el menu de navegación con los tipicos menus de Inicio y Acerca, además agregaremos una opción de Clientes que nos servirán en los siguientes post (por ahora no le daremos funcionalidad a esta opción).

Una vez agregado el menú, comenzaremos a utilizar elementos del framework comenzando por poner un ‘frame’.

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.20*"/>
        <ColumnDefinition Width="0.80*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Margin="8,8,8,8" VerticalAlignment="Top">
        <HyperlinkButton Content="Inicio"/>
        <HyperlinkButton Content="Acerca"/>
        <HyperlinkButton Content="Clientes"/>
    </StackPanel>
    <nav:Frame x:Name="MainFrame" Grid.Column="1" />
</Grid>

*Yo he decidido poner este par de bloques (menu y frame) en un Grid, pero cada quien podrá hacerlo como más le guste.

Ya que hemos definido nuestro espacio de trabajo principal, agregaremos un par de archivos xaml a nuestra solución en donde se definirá el contenido de cada una de la opciones del menu, los cuales son llamados ‘paginas (pages en ingles)’. La sugerencia es ponerlos en una carpeta especial para este tipo de archivos xaml. En este paso, utilizaremos una de los elementos contenido en las platillas para el compomente de control de navegación llamada ‘Silverlight Page’

Y nuestra solución se vera así:

Principales caracteristicas que nuestros archivos xaml para nuestras ‘pages’:

• El tag principal del archivo debe de ser: navigation:Page
• Dentro del tag principal, el contenido del atributo Title será el titulo que el navegador mostrará para la página.
• Una vez mas, el tag principal tiene que hacer referencia a nuestro esamblado de Navegación.
• El contenido de nuestro xaml será lo que se muestre en nuestro frame de nuestro xaml principal.

<navigation:Page x:Class="Silverlight3.NavigationFramework.Contents.Inicio"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
                Title="SL3 Framework de Navegación.- Página principal">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="Página principal" FontSize="24" />
    </Grid>
</navigation:Page>

Ahora bien, una vez que tenemos todos nuestros elementos listo, podemos pasar a la parte programativa, que será la encargada de hacer funcionar el framework y el paso entre páginas.

Hasta aquí, es decir para este ejemplo, la forma en que navegaremos es cargando las páginas de contenido en nuestro frame de nuestra xaml principal usando los eventos de click de nuestros HiperlinkButtons de nuestro menú. Los tres eventos apuntaran hacia la misma función evitando así reescribir código inecesariamente. Ademas agregaremos un atributo de ‘Tag’ a cada uno de las opciones de menú para diferenciar hacia que ‘pagina’ apuntará nuestra applicación.

<HyperlinkButton Content="Inicio" Click="NavigateButton_Click" Tag="/Contents/Home.xaml" />
<HyperlinkButton Content="Acerca" Click="NavigateButton_Click" Tag="/Contents/About.xaml" />

Y en nuestra función a la que apunta nuestro even handler, en este caso NavigateButton_Click, definiremos un HyperlinkButton para leer nuestro sender, así como un string para definir el url del contenido. Y la parte que corresponde al framework de navegación que es apuntar la propiedad de ‘Navigate’ de nuestro frame hacia la nueva url.

private void NavigateButton_Click(object sender, RoutedEventArgs e)
{
    HyperlinkButton btn = sender as HyperlinkButton;
    string url = btn.Tag.ToString(); 

    this.MainFrame.Navigate(new Uri(url, UriKind.Relative));
}

Y listo, tenemos nuestra primera aplicación que utiliza el framework de navegación.

Tiempo de ejecución

La forma de acceder a una aplicación con framework de navegación es como la usual, hacemos la llamada a nuestra página web donde esta montado el xap:

http://ligasilverlight.jorgelevy.com/Silverlight3.NavigationFramework.Part1TestPage.html

Pero si queremos ingresar directamente a una ‘página’ de nuestra aplicación, podemos utilizar url del tipo:

http://ligasilverlight.jorgelevy.com/Silverlight3.NavigationFramework.Part1TestPage.html#/Contents/About.xaml 

Donde encontrar este código:

KodiakLS.codeplex.com (I’m in love with codeplex.com)

Proximamente:

• Como modificar el url para uso de nombres mas amigables
• Como cargar información dependiendo de parametros en el url
• Plantilla de projecto para el framework de navegación.
• Etc…

Es decir, el tema da para mucho…

Saludos.