Vanguarsoft Developers blog

Ing. Javier Leal – Coordinador de Requerimientos en Traetelo.com / Traiter Lourted – VENEZUELA

Uso de la Interfaz INotifyPropertyChanged y Compreder el uso de ViewModels – Silverlight

3 comentarios

Hola amigos Internautas amantes de las tecnologías, En Silverlight una de las interfaces mas usadas es la INotifyPropertyChanged la cual se encarga de validar si una propiedad de la clase ViewModel de una pagina de Silverlight ha cambiado de valor y por lo tanto cuando esta cambia de valor esta se mostrara de manera automática a la Propiedad que le pases en Binding con el nombre de esa propiedad que puede ser del tipo que quieras un Bool, string, una colección de datos entre otras.

– Para comenzar en visual Studio 2010 vamos a crear un nuevo proyecto de Silverlight (Creo que ya esto lo sabemos hacer desde hace tiempo)

-Creamos una nueva Carpeta llamada ViewModels y dentro crearemos una nueva clase llamada PrincipalVM la cual tendrá implementada la interfaz ante descrita y crearemos un método  Publico llamado OnPropertyChanged con un parámetro de tipo string este método es el que disparara el evento de cambio según la propiedad que se le haya colocado como parámetro que será descrito en un simple dato de tipo String escrito tal cual. Ejemplo del código de la clase:

//HACER LA REFERENCIA A LA SIGUIENTE CLASE
using System.ComponentModel;

namespace DemoINotifyPropertyChanged.ViewModels
{
//IMPLEMENTAR LA INTERFAZ A LA CLASE
public class PrincipalVM : INotifyPropertyChanged
{
//CREAR VARIABLE DE TIPO EVENTO LA CUAL REPRESENTA EL EVENTO DE PROPIEDAD CAMBIANA
public event PropertyChangedEventHandler PropertyChanged;

        //METODO QUE RECIBE UNA PARAMETRO DE TIPO STRING
public  void OnPropertyChanged(string name)
{
//INICIALIZAR EL EVENTO DE PROPIEDAD CAMBIADA
PropertyChangedEventHandler handler = PropertyChanged;
//VERIFICAR SI EL EVENTO ES DIFERENTE DE NULO ES DECIR SI NO SE INICIALIZO EL EVENTO
if (handler != null)
{
//SI ES DIFERENTE DE NULO DISPARA EL EVENTO CON EL NOMBRE DE LA PROPIEDAD QUE SERA EL PARAMETRO STRING DEL METODO
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}
Un vez que ya creamos nuestras clase ViewModel principal todas las paginas que hagas en Silverlight van a requerir de este método para poder disparar el evento de propiedad Cambiada aquí en esta clase puedes colocar otros métodos que necesites en todas las paginas por que la idea es Heredas los ViewModel de cada pagina a esta clase para usar en todas el métodos y no tener que repetir  el código en todas, es la razón por la cual se realizo en una clase aparte.
Por defecto Silverlight trae una pagina Home ya que es una plantilla vamos a crear el HomeViewModel que no es mas que otra clase, esta heredada de PrincioalVM y les haremos algunas propiedades para mostrarlas en pantalla en un texto Sencillo, Y unas de tipo Boolena para ver como pasar el Binding a través de XAML.
namespace DemoINotifyPropertyChanged.ViewModels
{
public class HomeViewModel : PrincipalVM
{
private string _texto;
public string texto
{            get
{                return _texto;
}            set
{                _texto = value;
OnPropertyChanged("texto");
}
}

private string _textoValor;
public string textoValor
{            get
{                return _textoValor;
}            set
{                _textoValor = value;
OnPropertyChanged("textoValor");
}
}

private Boolean _esActivo;
public Boolean
 esActivo
{            get
{                return _esActivo;
}            set
{                _esActivo = value;
OnPropertyChanged("esActivo");
}
}

    }
}
Ahora en el Sourse del codigo del Home asignaremos esta clase como en Contexto de la pagina Home asi casamos el ViewModel a la vista y se puede hacer de dos forma por código directo XAML, por código directo C shard o desde expression Blend asignandole  un nuevo Contex a la pagina.

Mostrare el primer método por código C shard:


//REFERENCIA AL NAMESPACE DONDE ESTAN TODOS LOS VIENMODELS
using DemoINotifyPropertyChanged.ViewModels;

namespace DemoINotifyPropertyChanged
{
public partial class Home: Page
{        //VARIABLE DE TIPO CLASE DEL VIEMMODEL CORRESPONDIENTE A ESTA PAGINA
HomeViewModel Models;
public MainPage()
{            InitializeComponent();
//Inicializa la clase ViemModel de la vista
Models = new HomeViewModel();
//Asignar el DataConext a esta pagina
this.DataContext = Models;

        }
}
}

Mostrare el Método desde Expression Blend y Mostrar como Quedaría el XAML

image

image

Código XAML Estableciendo el Conext de la pagina:

Como estoy usando una plantilla de Silverlight este XAML ya tiene unas cosas estructuradas de diseño

image

Esto permitirá ya hacer algunos Binding a mi pagina que apunten a las propiedades del ViewModel Asignado como contexto,

Como ejemplo en Pantalla se colocara 1 TextBox, 2 TextBlog y 1 CheckBox

La demostracion sera Asiganle el Bindin de la propiedad Texto a un textBlog y al Textbox con la diferencia que el Textbox tendra el Bindin en Mode Toway ASI el vamor cambiado sera tomado por la propiedad al momento de tabular o salir del TextBox estas trabajaran con la propiedad Text, para el CheckBox trabajaremos asignandole el  Binding a la propiedad IsChecked que es un Booleano por lo tanto se le asignara la propiedad booleana esactivo y haremos cambiar el textovalor para que el textbock faltante nos indique si ha cambiado un ejemplo sencillo peor que muestra como usar la interfaz, las propiedades segun sus diferentes tipos de datos y los Binding:

  • ASIGNACION MANUAL DE EL Binding al primer TextBox que recibe Texto y cambiara con twoway.

image

Ahora explicaremos como asociar la propiedad por Expression Blend para ellos requere que el Contexto de la pagina sea asociado antes directo desde Blend lo tienes asociado en codigo y por XAML no hay ningun problema.

image

Presionas sobre el pequeño punto al lado de la propiedad que deseas Bindiar.

image

Eliges la opción Enlace a datos:

image

Si tienes bien asignado el conexto veras todas las propiedades que estan en el viewModel que estas asociando elijes la que deseas y presionas Aceptar, puedes ver que resalte algo de azul en estas opciones puedes ver como asignarte el TwoWay y otras opciones aparecera siempre que se puede en el caso de un Texblock no esta permitido ya que no puede editar texto en un Texblock.

image

Como puedes ver en todos los controlas y en todas sus propiedades puedes hacer esto solo debes estar seguro que la propiedad es del tipo correspondiente al que exije la propiedad.. Si lo haces directo desde Blend este te indica cuales propiedades puedes casar a una propiedad de una control en este caso es un booleano y solo te dejara asociar un Booleano.

image

Al otro Texblock le asignaremos texto Valor y modificaremos el set y get del esactivo para determinar si ha cambiado o no.

el cambio seria el siguiente en la propiedad esActivo:

private Boolean _esActivo = true;
public Boolean esActivo
{
get
{        return _esActivo;
}
set
{        _esActivo = value;
if (value == true)
{
textoValor = "Es true";

        } else
{
textoValor = "Es False";
}        OnPropertyChanged("esActivo");
}
}
Y probamos es un demos realmente sencillo pero ayuda bastante a comprender la interfaz y como trabajar con un ViewModel que se aplica a las mejores practicas de desarrollo bajo Silverlight.

Hay que tomar en cuenta que a cualquier propiedad que tu deseas tu le puedes aplicar un Binding lo que debes cuidar es que siempre la propiedad que se le este pasando concuerden los datos puede ser una colección de datos que llene un GrigView o Un combo y si usas una entidad de datos puedes personalizar el template para decidir que datos de la colección mostrar.

Resultado sencillo:

image

Pronto les coloco el código espero que les guste

Anuncios

Autor: Ing. Javier J. Leal H.

Coordinador de Requerimientos en Traetelo.com, Trainer en Lourted, Amantes de nuevas Tecnologías Desarrollador es .NET, Windows 10, Influenciador y Orador en Actividades Tecnológicas Microsoft.

3 pensamientos en “Uso de la Interfaz INotifyPropertyChanged y Compreder el uso de ViewModels – Silverlight

  1. Seria un puntazo poner el código para probar.

    gracias

  2. Gemma atkinson nude video torrent appeared to be invited again again.

  3. Probaré el nuevo código gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s