Usando el Patrn de Diseo

Observer Manual de
Laboratorio (Hands-On Lab)
Personas que lo han encontrado til: 3 de 11 - Valorar este tema
Por Joel Francia H.
Descargar Ejemplo de este artculo.
Contenido
1. Introduccin - Utilizando el patrn Observer con Microsoft Visual Studio 2005
2. Definicin
3. Ejercicio 1 Creacin de una aplicacin simple utilizando los conceptos bsicos del patrn
Observer
4. Creando la aplicacin
5. Creando la interfaz

1. Introduccin - Utilizando el patrn Observer con Microsoft Visual Studio

2005
Este laboratorio incluye los siguientes ejercicios y objetivos:
Al finalizar este laboratorio estars en capacidad de:
o Aplicar los conceptos utilizados para la aplicacin del patrn de diseo Observer e
identificar sus beneficios y funcionalidades.
Principio de la pgina

2. Definicin
Define una depedencia del tipo uno a muchos entre objetos, de tal forma que cuando un objeto
cambia su estado, todos los objetos dependientes son notificados y actualizados automticamente
(Ver Figura 1):

Figura 1. Volver al texto.

Principio de la pgina

3. Ejercicio 1 Creacin de una aplicacin simple utilizando los conceptos

bsicos del patrn Observer
En este ejercicio se crearn 3 formularios, 2 de los cuales actuarn como observadores y
respondern a cambios realizados al tercero (sujeto).
Principio de la pgina

4. Creando la aplicacin
1.

Ejecuta Microsoft Visual Studio 2005 y luego elige crear un nuevo proyecto. Para ello, ve al
men File | New | Project. Luego escoge el tipo de proyecto Visual C# y la
plantilla Windows Application. Nmbralo PatronObserver, y acepta (Ver a Figura 2):

Figura 2. Volver al texto.

2.

Aade una nueva clase al proyecto. Para hacerlo, ve al Solution Explorer, ubicado en la
parte derecha de la pantalla, y haz clic derecho sobre el nombre del proyecto; luego, en el
men, elige Add | Add New Item. Posteriormente, elige aadir una clase y
nmbrala Interfaces.cs o Interfaces.vb, segn el lenguaje (Ver Figura 3):

Figura 3. Volver al texto.

Principio de la pgina

5. Creando la interfaz
1.

En la clase creada, especificaremos los dos tipos de interfaces a utilizar para la creacin del
patrn Observer:

2.

Luego, aadiremos dos formularios ms al proyecto. Ve a la ventana Add New Item antes
mencionada y elige la plantilla Windows Form. Nombra los dos
formularios ListaObservador y ColorObservador (Ver Figura 4):

Figura 4. Volver al texto.

3.

4.

Ve al cdigo del Form1 (doble clic sobre el respectivo formulario) y sitate en la declaracin
de la clase Form1. Para que este formulario acte como un Sujeto que posteriormente d
informacin a sus Observadores, es necesario que implementes la interfaz Sujeto antes
creada. Algo parecido se aplica a los otros dos forms (observadores). Para ello, modifica las
siguiente lneas de cdigo:
Ve al diseo del form principal (Form1). Este contendr un comboBox (cbxColor) que
permitir elegir al usuario un conjunto de colores que luego sern reflejados en los otros
formularios. Inserta el control y ve a su Propiedad Items, luego aade la siguiente lista de
colores (Ver la Figura 5):

Figura 5. Volver al texto.

5.
6.

Dentro del cdigo del formulario principal, introduce lo siguiente:

Vayamos ahora al diseo del formulario ListObserver. Este contendr un listBox
(listaColores) el cual almacenar el nombre de los colores segn se elijan en el formulario
principal (Ver Figura 6):

Figura 6. Volver al texto.

7.

Programamos el siguiente cdigo dentro del ListaObservador:

8.

Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual modificar su

color de fondo cada vez que se elija un valor dentro del comboBox del form principal:

9.

Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario principal
mediante un delegado:

10. Programa el evento SelectedValueChanged del comboBox cbColores en el formulario

principal de la siguiente manera:

11. Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y

ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

12. Visual C# .net
13. public interface Sujeto
14. {
15.
void registrarInteres(Observador obs);
16. }
17.
18. public interface Observador
19. {
20.
void enviarNotificacion(string mensaje);
}
Visual Basic .net
Public Interface Sujeto
Sub registrarInteres(ByVal obs As Observador)
End Interface
Public Interface Observador
Sub enviarNotificacion(ByVal mensaje As String)
End Interface
21. Luego, aadiremos dos formularios ms al proyecto. Ve a la ventana Add New Item antes
mencionada y elige la plantilla Windows Form. Nombra los dos
formularios ListaObservador y ColorObservador (Ver Figura 4):

Figura 4. Volver al texto.

22. Ve al cdigo del Form1 (doble clic sobre el respectivo formulario) y sitate en la declaracin
de la clase Form1. Para que este formulario acte como un Sujeto que posteriormente d
informacin a sus Observadores, es necesario que implementes la interfaz Sujeto antes
creada. Algo parecido se aplica a los otros dos forms (observadores). Para ello, modifica las
siguiente lneas de cdigo:
23. Ve al diseo del form principal (Form1). Este contendr un comboBox (cbxColor) que
permitir elegir al usuario un conjunto de colores que luego sern reflejados en los otros
formularios. Inserta el control y ve a su Propiedad Items, luego aade la siguiente lista de
colores (Ver la Figura 5):

Figura 5. Volver al texto.

24. Dentro del cdigo del formulario principal, introduce lo siguiente:
25. Vayamos ahora al diseo del formulario ListObserver. Este contendr un listBox
(listaColores) el cual almacenar el nombre de los colores segn se elijan en el formulario
principal (Ver Figura 6):

Figura 6. Volver al texto.

26. Programamos el siguiente cdigo dentro del ListaObservador:
27. Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual modificar su
color de fondo cada vez que se elija un valor dentro del comboBox del form principal:
28. Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario principal
mediante un delegado:
29. Programa el evento SelectedValueChanged del comboBox cbColores en el formulario
principal de la siguiente manera:

30. Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y

ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

31. Ve al cdigo del Form1 (doble clic sobre el respectivo formulario) y sitate en la declaracin
de la clase Form1. Para que este formulario acte como un Sujeto que posteriormente d
informacin a sus Observadores, es necesario que implementes la interfaz Sujeto antes
creada. Algo parecido se aplica a los otros dos forms (observadores). Para ello, modifica las
siguiente lneas de cdigo:
32. Ve al diseo del form principal (Form1). Este contendr un comboBox (cbxColor) que
permitir elegir al usuario un conjunto de colores que luego sern reflejados en los otros
formularios. Inserta el control y ve a su Propiedad Items, luego aade la siguiente lista de
colores (Ver la Figura 5):

Figura 5. Volver al texto.

33. Dentro del cdigo del formulario principal, introduce lo siguiente:

34. Vayamos ahora al diseo del formulario ListObserver. Este contendr un listBox
(listaColores) el cual almacenar el nombre de los colores segn se elijan en el formulario
principal (Ver Figura 6):

Figura 6. Volver al texto.

35. Programamos el siguiente cdigo dentro del ListaObservador:
36. Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual modificar su
color de fondo cada vez que se elija un valor dentro del comboBox del form principal:
37. Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario principal
mediante un delegado:
38. Programa el evento SelectedValueChanged del comboBox cbColores en el formulario
principal de la siguiente manera:
39. Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

40. Visual C# .net

41. public partial class Form1 : Form, Sujeto

42. public partial class ListaObservador : Form, Observador
public partial class ColorObservador : Form, Observador
Visual Basic .net
Public Class Form1
Implements Sujeto
Public Class ListaObservador
Implements Observador
Public Class ColorObservador
Implements Observador
43. Ve al diseo del form principal (Form1). Este contendr un comboBox (cbxColor) que
permitir elegir al usuario un conjunto de colores que luego sern reflejados en los otros
formularios. Inserta el control y ve a su Propiedad Items, luego aade la siguiente lista de
colores (Ver la Figura 5):

Figura 5. Volver al texto.

44. Dentro del cdigo del formulario principal, introduce lo siguiente:
45. Vayamos ahora al diseo del formulario ListObserver. Este contendr un listBox
(listaColores) el cual almacenar el nombre de los colores segn se elijan en el formulario
principal (Ver Figura 6):

Figura 6. Volver al texto.

46. Programamos el siguiente cdigo dentro del ListaObservador:
47. Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual modificar su
color de fondo cada vez que se elija un valor dentro del comboBox del form principal:
48. Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario principal
mediante un delegado:
49. Programa el evento SelectedValueChanged del comboBox cbColores en el formulario
principal de la siguiente manera:
50. Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

51. Dentro del cdigo del formulario principal, introduce lo siguiente:
52. Vayamos ahora al diseo del formulario ListObserver. Este contendr un listBox
(listaColores) el cual almacenar el nombre de los colores segn se elijan en el formulario
principal (Ver Figura 6):

Figura 6. Volver al texto.

53. Programamos el siguiente cdigo dentro del ListaObservador:
54. Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual modificar su
color de fondo cada vez que se elija un valor dentro del comboBox del form principal:
55. Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario principal
mediante un delegado:
56. Programa el evento SelectedValueChanged del comboBox cbColores en el formulario
principal de la siguiente manera:
57. Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

58. Visual C# .net
59. // coleccion de observadores
60. public List<Observador> observadores = new
61.
List<Observador>();
62.

63. public Form1()

64.
{
65.
//hacemos que se muestren los formularios observadores
66.
InitializeComponent();
67.
ListObserver observadorLista = new ListObserver(this);
68.
observadorLista.Show();
69.
ColorObserver observadorColor = new ColorObserver(this);
70.
observadorColor.Show();
71.
}
72.
73.
// implementacin de la interfaz
74.
public void registrarInteres(Observador obs)
75.
{
76.
// Agrega un objeto Observador a la coleccin
77.
observadores.Add(obs);
78.
}
79.
80.
// Mtodo que recorre la coleccin Observadores
81.
//llamando a los enviarNotificacion() de cada observer
82.
83.
84.
private void elegirColor(object sender, EventArgs e)
85.
{
86.
for (int i = 0; i < observadores.Count; i++)
87.
{
88.
Observador obs = (Observador)observadores[i];
89.
obs.enviarNotificacion(cbxColor.Text);
90.
}
}
Visual Basic .net
'coleccion de observadores
Public observadores As List<Observador>
'hacemos que se muestren los formularios observadores
Public Sub New()
Me.observadores = New List<Observador>
Me.components = Nothing
Me.InitializeComponent()
Dim observadorLista As New ListObserver(Me)
observadorLista.Show()
Dim observadorColor As New ColorObserver(Me)
observadorColor.Show()
End Sub
'Implementacion de la interface, aade un observador a la
'coleccin
Public Sub registrarInteres(ByVal obs As Observador) Implements
Sujeto.registrarInteres

Me.observadores.Add(obs)
End Sub
'Mtodo que recorre la coleccin Observadores
'llamando a
Private Sub
EventArgs)
Dim
For

los enviarNotificacion() de cada observer

elegirColor(ByVal sender As Object, ByVal e As

num As Integer
num = 0 To Me.observadores.Count - 1
Dim obs As Observador =
CType(Me.observadores.Item(num), Observador)
obs.enviarNotificacion(cbxColor.Text)
Next num
End Sub
91. Vayamos ahora al diseo del formulario ListObserver. Este contendr un listBox
(listaColores) el cual almacenar el nombre de los colores segn se elijan en el formulario
principal (Ver Figura 6):

Figura 6. Volver al texto.

92. Programamos el siguiente cdigo dentro del ListaObservador:
93. Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual modificar su
color de fondo cada vez que se elija un valor dentro del comboBox del form principal:
94. Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario principal
mediante un delegado:
95. Programa el evento SelectedValueChanged del comboBox cbColores en el formulario
principal de la siguiente manera:
96. Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

97. Programamos el siguiente cdigo dentro del ListaObservador:
98. Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual modificar su
color de fondo cada vez que se elija un valor dentro del comboBox del form principal:
99. Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario principal
mediante un delegado:
100.
Programa el evento SelectedValueChanged del comboBox cbColores en el
formulario principal de la siguiente manera:
101.
Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

102.
Visual C# .net
103. // Se inscribe al formulario para que sea observador del sujeto
//al cual hemos pasado como argumento
104. public void registrar(Sujeto sujeto)
105. {
106.
sujeto.registrarInteres(this);
107. }

108.
109. //Aade al listBox el color enviado por el sujeto y satisface a la
interfaz Observervador
110. public void enviarNotificacion(string mensaje)
111. {
112.
listaColores.Items.Add(mensaje);
113. }
114.
115. public ListaObservervador(Sujeto subj)
116. {
117.
InitializeComponent();
118.
registrar(subj);
}
Visual Basic .net
Public Sub New(ByVal subj As Sujeto)
InitializeComponent()
registrar(subj)
End Sub
'Se inscribe al formulario para que sea observador del sujeto al
'cual hemos pasado como
argumento
Public Sub registrar(ByVal sujeto As Sujeto)
sujeto.registrarInteres(Me)
End Sub
'Aade al listBox el color enviado por el sujeto y satisface a 'la
interfaz Observervador
Public Sub enviarNotificacion(ByVal mensaje As String) Implements
Observador.enviarNotificacion
Me.listaColores.Items.Add(mensaje)
End Sub
119.
Por ltimo, modificaremos el cdigo del formulario ColorObservador, el cual
modificar su color de fondo cada vez que se elija un valor dentro del comboBox del form
principal:
120.
Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario
principal mediante un delegado:
121.
Programa el evento SelectedValueChanged del comboBox cbColores en el
formulario principal de la siguiente manera:
122.
Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

123.
Visual C# .net
124. //Agregamos atributos a la clase
125. private Container componentes = null;
126. private System.Collections.Generic.Dictionary<string,Color>
127.
colorFondo;
128. private string colNombre;
129.
130. public ColorObserver(Sujeto subj)
131. {
132.
InitializeComponent();
133.
registrar(subj);
134. }
135.
136. //Se subscribe al sujeto e inicializa el Dictionary de colores
137. private void registrar(Sujeto sujeto)
138. {
139.
sujeto.registrarInteres (this);
140.
//crea el Dictionary conteniendo los colores
141.
colorFondo = new Dictionary<string,Color>
142.
colorFondo.Add("rojo", Color.Red );
143.
colorFondo.Add ("azul", Color.Blue );
144.
colorFondo.Add ("verde", Color.Green );
145.
colorFondo.Add("amarillo", Color.Yellow);
146.
colorFondo.Add("blanco", Color.White);
147.
colNombre = "";
148. }
149.
150. //Modifica el color de fondo del formulario al recibir la
//notificacin del sujeto y satisface la
151. interfaz Observervador
152. public void enviarNotificacion(string mensaje)
153. {
154.
colNombre = mensaje;

155.
156.
157.
158.
159.
160.
161.
162.
}

mensaje = mensaje.ToLower ();

//Convierte el string de color a un objeto Color
Color col = (Color)colorFondo[mensaje];
this.BackColor=col;
//Cambia el ttulo del form
this.Text=mensaje;

Visual Basic .net

Private colorFondo As New Dictionary(Of String, Color)
Private colNombre As String
Public Sub New(ByVal sujeto As Sujeto)
Me.InitializeComponent()
Me.registrar(sujeto)
End Sub
Private Sub init(ByVal sujeto As Sujeto)
sujeto.registrarInteres(Me)
Me.colorFondo = New Dictionary(Of String, Color)
Me.colorFondo.Add("rojo", Color.Red)
Me.colorFondo.Add("azul", Color.Blue)
Me.colorFondo.Add("verde", Color.Green)
Me.colorFondo.Add("amarillo", Color.Yellow)
Me.colorFondo.Add("blanco", Color.White)
Me.colNombre = ""
End Sub
Public Sub enviarNotificacion(ByVal mensaje As
String) Implements Observador.enviarNotificacion
Me.colNombre = mensaje
mensaje = mensaje.ToLower
Dim color1 As Color =
CType(Me.colorFondo.Item(mensaje), Color)
Me.BackColor = color1
Me.Text = mensaje
End Sub
163.
Crearemos la clase ColorDelegate que permitir llamar al mtodo del formulario
principal mediante un delegado:
164.
Programa el evento SelectedValueChanged del comboBox cbColores en el
formulario principal de la siguiente manera:
165.
Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
}

Visual C# .net
using System;
using System.Collections.Generic;
using System.Text;
namespace PatronObserver
{
public class ColorDelegate
{
public delegate void ColorDelegado();
public event ColorDelegado eleccionColor;
public object elegirCambioColor
{
set
{
eleccionColor();
}
}
}

Visual Basic .net

Public Class ColorDelegate
Public Delegate Sub ColorDelegado()
Public Event eleccionColor()
Public Property elegirCambioColor() As Object
Set(ByVal value As Object)
RaiseEvent eleccionColor()
End Set

Get
Return Nothing
End Get
End Property
End Class
187.
Programa el evento SelectedValueChanged del comboBox cbColores en el
formulario principal de la siguiente manera:
188.
Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

189.
Visual C# .net
190. private void cbxColor_SelectedValueChanged(object
sender, EventArgs e)
191. {
192.
//ejecutamos el mtodo creado anteriormente mediante
el
193. delegado para notificar a todos los observadores del cambio
194. //sucedido en el comboBox
195.
196.
ColorDelegate oEleccionColor = new ColorDelegate();
197.
ColorDelegate.ColorDelegado oColorDelegado = new
198.
ColorDelegate.ColorDelegado(elegirColor);
199.
oEleccionColor.eleccionColor += oColorDelegado;
200.
oEleccionColor.elegirCambioColor = sender;
201.
oEleccionColor.eleccionColor -= oColorDelegado;
}
Visual Basic .net
Private Sub ComboBox1_SelectedValueChanged(ByVal sender As
System.Object, ByVal e As
System.EventArgs) Handles ComboBox1.SelectedValueChanged
//falta corregir el cambio en vb

End Sub
202.
Finalmente, ejecuta el programa. Notars que los formularios ListaObservador y
ColorObservador cambiarn de acuerdo a lo ocurrido en el comboBox del formulario
principal.(Ver Figura 7):

Figura 7 . Volver al texto.

En la elaboracin del material me apoyaron dos personas que tengo que mencionar: Jorge Enrique
Polo Martinez, (un alumno de la Universidad Ricardo Palma) y Aldo Gutierrez Tanabe (un alumno de
la Universidad San Ignacio de Loyola) ambos de Per. Aldo ha llevado un curso de patrones que
dicto en la Universidad y tambin ha colaborado en la elaboracin de otros cursos de patrones que
he dictado para empresas.
Joel Francia H. es Docente Universitario. Trabaja como Instructor, Consultor y Desarrollador de
aplicaciones .net. Cuenta con las certificaciones MCAD, MCSD, MCT, y es adems MVP en C# .net y
expone regularmente en eventos tcnicos y conferencias a nivel nacional. Su trabajo se centra
actualmente en el desarrollo de aplicaciones distribuidas, implementaciones de Servicios Web, .net
Remoting, XML y la implementacin y el uso de patrones UML para el desarrollo de aplicaciones
.net usando Building Blocks, UML y RUP.