WCF Ria Services V1.0 para Silverlight 4.- Detalles de un registo (Parte 6)

Una vez que hemos practicado y entendido como es que podemos mostrar y filtrar datos desde nuestra fuente de datos, no podemos dejar de lado como es que podemos mostrar los detalles de un registro, en este caso el que tenemos seleccionado en nuestra lista de registros.

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:

WCFRiaServices601

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

WCFRiaServices602

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…