Hands-On Lab
PROGRAMACION ORIENTADA
A OBJETOS
Creando un Diagrama
de Clases en un Aplicación
Windows Forms
LABORATORIO: HACIENDO USO DE DIAGRAMAS DE CLASE EN LA CREACION DE UN APLICACIÓN WINDOWS FORMS
Este laboratorio haremos uso de una de las nuevas características de Visual Studio 2005 que permite al desarrollador hacer uso de diagramas que permitan documentar así como modificar el código de manera visual.
Esta proyecto será nuestro inicio para la creación de una solución escalable haciendo uso Visual Studio 2005 y SQL Server 2005.
Tiempo estimado: 30 minutos
EJERCICIO: CREACIÓN DEL MODELO DE OBJETOS DE UNA APLICACIÓN WINDOWS FORMS
Objetivo
- Aprender a utilizar el diseñador de clase de Visual Studio 2005.
- Diseñar el modelo de objetos de la capa de presentación.
- Hacer uso de los conceptos de orientación a objetos.
Escenario
En el siguiente ejercicio va a crear el diagrama de clases de nuestra aplicación base y aplicaremos los conceptos de orientación a objetos.
En este laboratorio solo implementaremos los métodos y funciones de nuestras clases en el siguiente laboratorio procederemos a crear la interfaz grafica de nuestros formularios.
Figura 1. Diagrama de Clases
Paso 1: Crear un nuevo proyecto Windows Application desde Microsoft Visual Studio .NET 2005.
- Abrir Visual Studio .NET 2005.
- En el menú File/New y click en Project…
- En la ventana de diálogo New Project, en el panel izquierdo Project Types expanda el nodo Visual Basic y luego seleccione el nodo Windows.
- En la lista Templates, click en Windows Application.
- En Name tipear AppDemo
- Guardar en la ruta C:\ 3Dev\
- Click en OK.
Paso 2: Configurando las propiedades del Proyecto
- En la ventana del Solution Explorer, click derecho sobre AppDemo, click en Properties,
- Se nos mostrara la pantalla con las opciones de configuración del Proyecto, el primer Tab: Application (figura 2)
- En la caja de Texto Root NameSpace borramos el valor colocado por defecto (el nombre de la Aplicación). Este valor pone por defecto un Namespace a todas las clases creadas en nuestro proyecto lo que podría traer cierta confusión al hacer referencias a estas, si se desconoce la función que tiene esta propiedad.
Figura 2: Ventana de Propiedades del Proyecto
Paso 3: Diseñar los formularios Base de nuestro Aplicativo.
- En el Solution Explorer, click derecho sobre AppDemo, click en Add, click en New Folder y tipeamos Base (Carpeta que contendrá nuestros formularios base).
- En el Solution Explorer, click derecho sobre la carpeta Base, click en Add, click en Windows Form y le ponemos por Nombre FormBaseBase.vb este formulario será nuestro clase Base del cual hereden los demás formulario Base que crearemos.
- Procederemos a implementar el código dentro de nuestro formulario FormBaseBase, presionamos F7 para ver el código del formulario asociado a nuestro formulario. Procederemos a especificar el NameSpace asociado al formulario, como se muestra a continuación.
|
Namespace _3Dev.AppDemo.Base
Public Class FormBaseBase
End Class
End Namespace |
Así también debemos colocar el código en la clase parcial de nuestro formulario sino cuando queramos ver el diseñador de nuestra pantalla nos saldrá un error como el que se muestra a continuación:
Figura 3
Para esto procedemos en expandir el formulario FormBaseBase, en el Solution Explorer, click sobre FormBaseBase, y expandimos para ver el detalle y damos doubleclick sobre el archivo FormBaseBase.Designer.vb y adicionamos el mismo NameSpace puesto en el archivo FormBaseBase.vb.
- Ahora adicionaremos el código necesario a nuestro formulario Base, escriba en siguiente código a FormBaseBase.vb, en el Solution Explorer, click sobre FormBaseBase, y presionamos F7 para que se muestre el código del formulario, seguidamente escribimos lo siguiente.
|
Namespace _3Dev.AppDemo.Base
Public Class FormBaseBase
' Definimos Propiedades del formulario
Private _idForm As String = String.Empty
Private _tituloForm As String = String.Empty
Protected ds As DataSet = Nothing
Protected Property IdForm() As String
Get
Return _idForm
End Get
Set(ByVal value As String)
_idForm = value
End Set
End Property
Protected Property TituloForm() As String
Get
Return _tituloForm
End Get
Set(ByVal value As String)
_tituloForm = value
End Set
End Property
Protected Sub ControlAcceso(ByVal IdForm As String)
' Cumple la siguiente funcionalidad
' 1° Permitir o no el acceso al formulario
' 2° Controlar el habilitar o no de acuerdo al
' acceso del usuario a los botones y/o opciones
' del formulario
End Sub
End Class
End Namespace |
- Procedemos a Grabar y construimos el Proyecto, Menú Build, click Build AppDemo, verificamos que no existe ningún error y continuaremos creando nuestros otros dos formularios Base heredados de FormBaseBase.
- En el Solution Explorer, click derecho sobre la carpeta Base, click en Add, click en New Item … y se nos presentara una ventana con las plantillas incluidas Visual Studio, seleccione Inherited Form y le ponemos por Nombre FormBaseEscenario.vb, inmediatamente debemos de seleccionar de que formulario ha de heredar su funcionalidad, seleccionamos FormBaseBase, y presionamos OK.
Figura 4
- Seguidamente procedemos a asignarle el NameSpace a nuestro nuevo formulario, asignándole el NameSpace _3Dev.AppDemo.Base, recordar realizar la misma modificación para la clase parcial FormBaseEscenario.Designer.vb (Para poder observar este archivo debemos asegurarnos de que la opción Show All Files este habilitada – ver figura 4.1 - en el Solution Explorer). El código de la clase quedaría como se muestra en el siguiente código.
Figura 4.1
|
Namespace _3Dev.AppDemo.Base
Public Class FormBaseEscenario
End Class
End Namespace |
- En el Solution Explorer, click derecho sobre la carpeta Base, click en Add, click en New Item … y se nos presentara una ventana con las plantillas incluidas Visual Studio, seleccione Inherited Form y le ponemos por Nombre FormBaseMantenimiento.vb, inmediatamente debemos de seleccionar de que formulario ha de heredar su funcionalidad, seleccionamos FormBaseBase, y presionamos OK; como en el caso anterior procedemos a asignarle el NameSpace _3Dev.AppDemo.Base (Nota: No olvidar el contemplar el punto 7).
Paso 4: Crear la interfaces del modelo de objetos de la capa de
Presentación.
- En el Solution Explorer, click derecho sobre AppDemo, click en Add, click en New Folder y tipeamos Interface.
- En el Solution Explorer, click derecho sobre la carpeta Interface, click en Add, click en Class … y tipeamos IFormBase.vb, reemplazamos el código generado y copiamos los siguiente y grabamos el proyecto.
|
Namespace _3Dev.AppCode.Interface
Public Interface IFormBase
Sub ConfigurarGrilla()
Sub CargarGrilla()
Sub Imprimir()
Sub LlenarCombo()
End Interface
End Namespace |
- Nuevamente en el Solution Explorer, click derecho sobre la carpeta Interface, click en Add, click en Class … y tipeamos IFormMantenimiento.vb, reemplazamos el código generado y copiamos los siguiente y grabamos el proyecto.
|
Namespace _3Dev.AppCode.Interface
Public Interface IFormMantenimiento
Sub GrabarTab()
Sub LlenarCombos()
Function LlenarEntidad(ByVal Entidad As DataSet) As _
DataSet
End Interface
End Namespace
|
- En el Solution Explorer, click derecho sobre AppDemo, click en Add, click en Class y tipeamos Enumerados. Y adicionamos el siguiente código esta clase nos ayudara temporalmente a definir los enumerados que necesitaremos mientras se crea el componente de Utilitario (HelperUtilitario)
|
Namespace _3Dev.AppDemo
Public Class Enumerados
Public Enum ModoFormulario
N = 1
M = 2
C = 3
D = 4
End Enum
End Class
End Namespace |
Paso 5: Implementar los formularios Base de la Capa de Presentación
- Adicionemos funcionalidad a nuestro Formulario Base, este formulario (FormBaseEscenario.vb) nos servirá de ventana de selección de registros para su edición o eliminación, así como también para impresión o filtrado de la información. Agreguemos el siguiente código a FormBaseEscenario.
|
Imports _3Dev.AppCode.Interface
Namespace _3Dev.AppDemo.Base
Public Class FormBaseEscenario
Implements _3Dev. AppDemo.Interface.IFormBase
#Region " Implementación de la Interface IFormBase "
Public Overridable Sub ConfigurarGrilla() _
Implements [Interface].IFormBase.ConfigurarGrilla
End Sub
Public Overridable Sub Imprimir() _
Implements [Interface].IFormBase.Imprimir
End Sub
Public Overridable Sub LlenarCombo() _
Implements [Interface].IFormBase.LlenarCombo
End Sub
Public Overridable Sub CargarGrilla() _
Implements [Interface].IFormBase.CargarGrilla
End Sub
#End Region
#Region " Propiedades de la Clase "
Private lcaption As String = String.Empty
''' <summary>
''' Permite definir un Etiqueta descriptiva del
''' formulario
''' </summary>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Public Property Caption() As String
Get
Return lcaption
End Get
Set(ByVal value As String)
lcaption = value
End Set
End Property
#End Region
End Class
End Namespace |
- Ahora procedemos a abrir nuestro Formulario Base FormBaseMantenimiento.vb este formulario nos servirá de para dar mantenimiento o realizar algún proceso en la Carpeta ..\HOL\Archivos\ tenemos el archivo FormBaseMantenimiento.txt, reemplace el contenido de este archivo en el formulario Base FormBaseMantenimiento.vb
Paso 6: Construyendo el Diagrama de Clases.
- En el Solution Explorer, click derecho sobre AppDemo, click en Add, click en ClassDiagram, seleccionamos y tipeamos DiagramaUI.cd. Sobre este diseñador procederemos a arrastrar las carpetas Base e Interface, como se muestra en el siguiente gráfico.
Figura 5: Diagrama de Clases Final
- Pero el Diagrama de Clases nos brinda bastante funcionalidad al momento de diseñar como en la etapa de construcción de nuestros componentes; existen muchas características que podemos aprovechar para documentar o revisar las dependencias de nuestras clases pero una de las características mas interesante es la posibilidad de modificar el código desde aquí; si bien el código escrito y las modificaciones sobre este, pueden reflejarse en él; también podemos modificar el diagrama y ver los cambios en el código.
Figura 6: Menú de Diagrama Clases
En el ToolBar de Visual Studio habilitaremos la opción Display Name and Type (
) y observaremos los tipos de datos definidos dentro de nuestra clase.
Figura 6: Clase FormBaseBase
- Ahora modificaremos el código desde el diagrama. En el Diseñador del Class Diagram, click en FormBaseMantenimiento, click derecho, click en Add, click en Property y escribimos DemoProperty.
Figura 7: Modificación de Código con el Diseñador de Clases
- Ahora hacemos click derecho sobre la propiedad creada DemoProperty, click en ViewCode, se mostrara una sección del código como esta con los valores creadas por defecto.
|
Public Property DemoProperty() As Integer
Get
End Get
Set(ByVal value As Integer)
End Set
End Property |
- Modifiquemos con el siguiente código la propiedad DemoProperty, con los siguientes valores, y seguidamente grabamos el proyecto. Visualicemos Class Diagram ahora veamos la clase modificada observemos que los cambios realizados son actualizados directamente en el diagrama.
|
Private lDemoProperty As Object
Protected WriteOnly Property DemoProperty() As Object
Set(ByVal value As Object)
lDemoProperty = value
End Set
End Property |
Figura 8: Clase Actualizada con el Diseñador de Clases
Así también podemos seguir probando la adición de Constructores, métodos, variables locales, estructuras, constantes, etc.
- Antes de cerrar el proyecto procedemos a eliminar la propiedad creada, grabamos el proyecto y cerramos el Visual Studio
Figura 9: Eliminación de la Propiedad de
Prueba DemoProperty
Joel Francia H. es Docente Universitario. Trabaja como Instructor, Consultor y Desarrollador de aplicaciones .net. Cuenta con las certificaciones MCAD, MCSD, MCT, y es además MVP en C# .net y expone regularmente en eventos técnicos y conferencias a nivel nacional. Su trabajo se centra actualmente en el desarrollo de aplicaciones distribuidas, implementaciones de Servicios Web, .Net Remoting, Windows Communcation Foundation y Modelos de Arquitectura de Software.