Issuu on Google+

Desarrollo y Programación de Aplicaciones Windows Guía para el estudiante

Elaborado por el formador:

LIC. STEPHEN GUSEPH PINTO MORATO

INSTITUTO COLOMBIANO DE APRENDIZAJE

INCAP

Programa Técnico Laboral en Operación de Programas Informáticos y Bases de Datos


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Desarrollo de aplicaciones Windows

2

Desarrollo y Programación de Aplicaciones Windows Instituto Colombiano de Aprendizaje Elaborado por: Lic. Stephen Guseph Pinto Morato

Editado por: Instituto Colombiano de Aprendizaje INCAP Avenida Caracas No. 63-66 © Prohibida la reproducción parcial o total bajo cualquier forma (Art. 125 Ley 23 de 1982) Bogotá – Colombia Versión 02 - Enero 2010


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Apreciado Estudiante Usted escogió al INCAP para que lo oriente en el camino de la formación profesional. La institución le proporcionará un formador, quien le ayudará a descubrir sus propios conocimientos y habilidades. El INCAP, le ofrece además, recursos para que usted alcance sus metas, es decir, lo que se haya propuesto y para ello dispondrá de módulos guía, audiovisuales de apoyo, sistemas de evaluación, aula y espacios adecuados para trabajos individuales y de grupo.

3

Este módulo guía que constituye además un portafolio de evidencias de aprendizaje, está distribuido de la siguiente manera: PRESENTACIÓN: Es la información general sobre los contenidos, la metodología, los alcances la importancia y el propósito del módulo. GUÍA METODOLÓGICA: Orienta la práctica pedagógica en el desarrollo del proceso de formación evaluación y se complementa con el documento de la didáctica para la formación por competencias de manejo del formador.

AUTOPRUEBA DE AVANCE: Es un cuestionario que tiene como finalidad que usted mismo descubra, qué tanto conoce los contenidos de cada unidad, y le sirve de insumo para la concertación de su formación y el reconocimiento de los aprendizajes previos por parte de su formador (talleres que se encuentran al final de cada unidad). CONTENIDOS: Son el cuerpo de la unidad y están presentados así:  Unidad  Logro de competencia laboral  Indicadores de logro: Evidencias

 Didáctica del método inductivo Activo para el desarrollo de las competencias: FDH: Formador Dice y Hace, FDEH: Formador Dice y Estudiante Hace, EDH: Estudiante Dice y Hace. VALORACIÓN DE EVIDENCIAS BIBLIOGRAFÍA

Desarrollo de aplicaciones Windows

DIAGNÓSTICO DE ESTILO DE APRENDIZAJE: Que le permitirá utilizar la estrategia más adecuada para construir sus propios aprendizajes.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

PRESENTACIÓN “Sólo podemos ver poco del futuro, pero lo suficiente para darnos cuenta de que hay mucho que hacer” Alan Turing

Las necesidades y requerimientos de nuestra actual sociedad nos propulsan por una de las líneas de desarrollo tecnológico más provechosas y de mayor impacto a nivel nacional e internacional: el desarrollo de software. El software es el producto más abstracto que el ser

5

humano ha creado; es la puesta del intelecto humano sobre una máquina física que se encarga de procesar información más rápido de lo que el ser humano es capaz. El software permite a las empresas reducir costos operativos en la realización de tareas, optimización de los procesos de gestión de la información y una mejora sustancial en el mercado. El software convive con nosotros; hace parte de nuestras vidas desde el mismo momento en que encendemos un computador, navegamos por la WEB o inclusive, cuando usamos nuestros dispositivos

móviles

(celulares,

tablets,

smartphones)

o

encendemos

nuestros

electrodomésticos caseros. Así pues, la demanda del mercado informático y de software se vuelve cada vez más competitiva y especializada, por lo que ingenieros, técnicos y tecnólogos en sistemas deben ser altamente calificados y competitivos; profesionales y técnicos los requerimientos que la industria exige.

En el presente módulo guía exploraremos los conceptos generales del desarrollo de Aplicaciones Windows respecto de las aplicaciones de escritorio utilizando la herramienta Microsoft Visual Studio, utilizando lenguaje de programación Visual Basic. Revisaremos estrategias para el desarrollo de aplicaciones, ejemplos prácticos de aplicación y un conjunto de ejercicios orientados a potenciar las habilidades, capacidades y destrezas que todo buen programador debe tener. El Autor

Desarrollo de aplicaciones Windows

entrenados en las técnicas y estándares de desarrollo de software y preparados para afrontar


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

GUÍA METODOLÓGICA La estrategia metodológica del INCAP, para la formación técnica del aprendiz mediante competencias laborales, comprende dos caminos: 1. Las clases presenciales dictadas por el Formador haciendo uso del método inductivo – activo

Desarrollo de aplicaciones Windows

6

2. El trabajo práctico de los estudiantes dirigido y evaluado por el Formador, a través de talleres, desarrollo de casos, lecturas y consultas de los temas de clase etc. Con esto se busca fomentar en el estudiante el análisis, el uso de herramientas tecnológicas y la responsabilidad. 3. Los módulos guía utilizados por el INCAP, para desarrollar cada uno de los cursos, se elaboran teniendo en cuenta ésta metodología. Sus características y recomendaciones de uso son:  A cada unidad de aprendizaje le corresponde un logro de competencia laboral el cual viene definido antes de desarrollar su contenido. Seguidamente se definen los indicadores de logro o sea las evidencias de aprendizaje requeridas que evaluará el Formador.  Glosario: Definición de términos o palabras utilizadas en la unidad que son propias del tema a tratar.  Desarrollo de la unidad dividida en contenidos breves seguidos por ejercicios, referenciados así: FDH (El Formador Dice y Hace): Corresponde a la explicación del contenido y el desarrollo de los ejercicios por parte del Formador. FDEH (El Formador Dice y el Estudiante Hace): El estudiante desarrolla los ejercicios propuestos y el Formador supervisa. EDH (El estudiante dice y hace): Es el trabajo práctico que desarrollan los estudiantes fuera de la clase, a través de talleres, desarrollo de casos, lecturas y consultas de los temas, los cuales deben ser evaluados por el Formador.  Al final de cada unidad se puede presentar un resumen de los contenidos más relevantes y ejercicios generales.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

DIAGNÓSTICO

Desarrollo de aplicaciones Windows

7


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Conceptos básicos de programación orientada a eventos LOGRO DE COMPETENCIA LABORAL 1. Maneja la interfaz de programación de Microsoft® Visual Studio .NET y crea formularios en tiempo de diseño, utilizando controles básicos y propiedades. 8

INDICADORES DE LOGRO

EVIDENCIA DE

Reconoce y diferencia los conceptos de Programación en tiempo de Diseño y Programación en tiempo de Ejecución. Investiga sobre los distintos cuadros de diálogo en Visual Basic .NET y su aplicación. Muestra y oculta las barras de herramientas de Visual Studio y restaura su interfaz de trabajo. Crea un proyecto de aplicación tipo Windows y la guarda en un disco de almacenamiento en una carpeta específica.

Conocimiento Conocimiento Desempeño Desempeño y Producto

Elabora formularios utilizando los controles básicos (Label, TextBox y Button), utilizando para ello el estándar de

Desarrollo de aplicaciones Windows

notación seleccionado y modificando sus propiedades en

Producto

tiempo de diseño y en tiempo de ejecución. Elabora un formulario que permita la captura y posterior concatenación de dos palabras ingresadas por el usuario y luego muestra el resultado en pantalla utilizando cuadros

Producto

de diálogo. Diseña una interfaz de usuario que permita la captura de dos números ingresados por el usuario y una operación aritmética

elemental,

mostrarlo en pantalla.

para

calcular

su

resultado

y

Producto


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Microsoft® Visual Studio 2010 es un Entorno Integrado de Desarrollo (IDE) utilizado para el diseño, desarrollo, depuración e implementación de soluciones sobre lenguajes de alto nivel (Aplicaciones WEB, formularios Windows, entre otras). Su principal característica es el uso del potente Framework de .NET, lo que nos permite el desarrollo de aplicaciones que funcionan sobre la máquina y que son independientes del lenguaje de programación seleccionado (algo similar a lo que sucede con la máquina virtual de Java). Los lenguajes soportados por

9

Microsoft® Visual Studio son, entre otros, C++, C#, J# (una versión de Java para Microsoft), Visual Basic y ASP .NET (una versión de ASP, Active Server Pages de .NET).

Un framework (o marco de trabajo) hace referencia a un conjunto de diversos componentes de software (como bibliotecas, GUIs1, etc.) que facilitan el desarrollo de software y la programación, enfocando nuestra atención en la lógica de negocio (LN), mas no en la codificación de los elementos generales de una solución. Un claro ejemplo de framework es el denominado Microsoft® .NET framework (ver Figura 1) que permite el uso de botones, etiquetas, formularios, paneles, contenedores WEB, etc., sin necesidad de desarrollar el código completa libertad la selección del lenguaje de programación que se le facilite más al programador (C++, C#, VB). Un elemento importante a considerar en el desarrollo de aplicaciones con ayuda de Visual Studio es comprender que cada uno de los componentes requeridos en el desarrollo (código fuente, formulario, conexiones, bibliotecas) conforman una solución. Una solución hace mención implícita a un proyecto de desarrollo con un sentido propio y que responde a una o varias necesidades de un cliente y/o de los usuarios de la aplicación. Los conceptos de cliente y usuario de la aplicación serán importantes a la hora de realizar el desarrollo de una aplicación cualquiera (Windows, WEB, por servicios, etc.).

1

Graphical User Interface o Interfaz Gráfica de Usuario.

Desarrollo de aplicaciones Windows

correspondiente de un botón o formulario u otro elemento seleccionado al igual que dejar en


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

10

Figura 1 Esquema de Microsoft ® .NET Framework. Se aprecian diversos lenguajes que se compilan en una misma máquina

El desarrollo de software conforma una de las disciplinas con mayor crecimiento de los últimos años, que se ve reflejada en la cantidad de software que consumimos a diario (paquetes ofimáticos, antivirus, navegadores WEB, clientes de mensajería, sistemas operativos) y en las empresas que compiten en el mercado (Microsoft, Oracle, Google). El desarrollo de software es un área de alta competitividad por lo que desarrolladores, arquitectos de software, analistas de

Desarrollo de aplicaciones Windows

sistemas y programadores debemos contar con un nivel competitivo de excelencia para poder disfrutar de los considerables beneficios de este mercado. Sin embargo, es necesario mencionar que una de las características del desarrollo de software, y del software en general, es su complejidad inherente (ojo complejidad no es sinónimo de dificultad en la programación); complejidad que se argumenta principalmente en el hecho que el software es un producto de tipo abstracto que responde a necesidades intangibles e inmateriales y que es construido en equipos de desarrollo. Asimismo, para el desarrollo de un software debemos ser capaces de comprender cómo funcionan los componentes a programar (por ejemplo, un módulo de facturación y ventas en una organización) y debemos manejar el lenguaje de programación requerido (por ejemplo VB, Java, C++, etc.).

Usuario: desde el punto de vista informático, un usuario es la persona que va a usar el software. Es quien determina si la aplicación es funcional o no.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Cliente: Es la persona que contrata el servicio de software. En algunos casos, cliente y usuario son la misma persona. Programador: Es la persona encargada de codificar un componente o aplicación completa de software

Especificación: desde el enfoque de la ingeniería de software, es la primera fase en todo desarrollo de software. Hace mención a cada una de las actividades encaminadas a entender

11

la lógica de negocio, definición de requisitos de software, términos de contrato, cronograma de desarrollo y secuencia de actividades. Diseño: Es la fase más importante del desarrollo de un software, en donde se establecen los modelos de datos, modelo de clases, diagramas y especificaciones generales que “modelan” y responden a los requisitos de un software. Desarrollo: Es la fase en al que se realiza el proceso de codificación de los componentes de una aplicación, en un entorno integrado de desarrollo (IDE), frameworks, y distintas herramientas. Integración: Consiste en la integración de los distintos componentes de software elaborados en la fase de desarrollo. desempeño, estableciendo el comportamiento y buscando posibles errores de software en tiempo de ejecución (Excepciones) es una etapa costosa y de alto impacto en el desarrollo porque evalúa si el software hace lo que se debe, y además si lo hace bien en distintos escenarios (Verificación y Validación).

Para trabajar con Visual Studio debemos crear siempre un proyecto nuevo. Para la creación de un nuevo proyecto debemos seguir los pasos que se enuncian a continuación.

1. El proyecto Nuevo Microsoft ® Visual Studio nos permite crear proyectos nuevos de 4 distintas formas:  Con el atajo de teclado CTRL+ N.

Desarrollo de aplicaciones Windows

Pruebas: Es la etapa en la que se prueba el software como una unidad, buscando medidas de


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

 Haciendo clic en el ícono de nuevo proyecto.

Ícono de proyecto nuevo Figura 2 Recorte de la barra de menús y de barra estándar de Microsoft ® Visual Studio 2010

Desarrollo de aplicaciones Windows

12

 Con la ruta Archivo nuevo proyecto  Haciendo clic en la opción crear que se encuentra en la página principal

Figura 3 Página principal de Visual Studio 2010

2. Selección del lenguaje de programación, versión de .NET y plantilla de aplicación. Una de las características más importantes de Visual Studio 2010 es la existencia de distintos tipos de proyectos y lenguajes de programación. Los lenguajes disponibles en Visual Studio son C++, C# (C Sharp), F# (F Sharp) y Visual Basic. Asimismo, los tipos de proyectos existentes de mayor uso son Aplicación Windows, Aplicación WEB y Aplicación Cloud; en cada tipo de proyecto se muestran distintas plantillas de aplicación (ver Figura 4). Utilizaremos para este caso, la plantilla de Visual Basic, Aplicación de Windows Forms.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

¿Qué es una plantilla de aplicación? Una plantilla de aplicación es un conjunto predeterminado de herramientas, componentes y elementos esenciales para la estructuración de una solución. Visual Studio incorpora distintas plantillas de aplicación, basadas en los framework de .NET, que facilitan el proceso de desarrollo de aplicaciones varias. Selector de versión de .NET framework

Explorador de lenguajes de programación

13

Figura 4 Ventana emergente de proyecto nuevo

Explorar las distintas versiones de .NET framework que soporta la interfaz de trabajo de Microsoft ® Visual Studio y verifique en cada caso las plantillas soportadas. Explore los distintos tipos de proyectos soportados por Visual Basic, así como también los lenguajes de desarrollo que soporta. 3. Asignación de un nombre de aplicación y clic en aceptar. Buena práctica de programación: Los nombres de las aplicaciones deben ser concretos, esto es, no deben llamarse WindowsAplication1 y deben obedecer al propósito del componente o proyecto a desarrollar. En caso de tratarse de un software “grande”, el nombre de la aplicación deberá escribirse en notación Camel, por ejemplo CalculadoraNomina, FacturaVenta, Cuadrito. No use espacios y/o caracteres especiales (eñes, tildes, signos ortográficos) ni tampoco empiece por números.

Desarrollo de aplicaciones Windows

Explorador de plantillas


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Cree un proyecto nuevo de tipo Windows, con lenguaje Visual Basic y .NET framework 4.0 y guárdelo en su memoria USB. El nombre del proyecto debe estar relacionado con el problema de un software para pronosticar el clima. Cree un proyecto nuevo de tipo Windows, con lenguaje Visual Basic y .NET framework 2.0 y guárdelo en su memoria USB. El nombre del proyecto debe estar relacionado con un juego de rol diseñado por la empresa de software Gamer-Inc LTDA. 14

Cree un proyecto nuevo de tipo Windows, con lenguaje C# y .NET Framework 4.0 y guárdelo en su memoria USB. ¿Existe alguna diferencia en la interfaz de creación de proyecto? Explique. Descargue de internet .NET framework 4.0 y consérvelo en su memoria USB. Es importante considerar que una aplicación desarrollada en determinada versión de .NET

Desarrollo de aplicaciones Windows

solamente puede ejecutarse en un equipo con dicha versión instalada.

Buena práctica de programación: Minimice siempre las categorías del cuadro de herramientas. Mejorará el campo visual y además ahorrará recursos de memoria RAM.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Con la guía del formador, identifique cada uno de los componentes de la interfaz de trabajo y complete la siguiente tabla (aparece un ejemplo en la primera fila). Elemento Cuadro de Herramientas

¿Dónde se encuentra?

Acceso con teclado

Lado Izquierdo de la interfaz de trabajo CTRL + ALT + X

Orígenes de Datos Lista de Errores Explorador de Soluciones

15

Cuadro de Propiedades Explorador de Team Foundation Vista de código Vista de clases Vista de diseñador Examinador de Objetos

2. En la ventana emergente seleccionamos restablecer todas las configuraciones y damos clic en siguiente

Desarrollo de aplicaciones Windows

1. En el menú Herramientas seleccionamos Importar y Exportar Configuraciones


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

16

Desarrollo de aplicaciones Windows

3. Seleccionamos la opción de no guardar la interfaz de trabajo actual y clic en siguiente

4. Seleccionamos configuración de desarrollo de Visual Basic y hacemos clic en finalizar


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

17

De esta manera podemos restaurar nuestra interfaz de trabajo de manera efectiva o en su defecto seleccionar la mejor distribución para el desarrollo sobre algún lenguaje de programación.

Desarrollo de aplicaciones Windows

5. Y damos clic en cerrar


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Cambie la interfaz de desarrollo a Desarrollo WEB, a desarrollo en C++ y a otra de su elección y restaure la interfaz de desarrollo por último a Visual Basic. ¿Qué diferencias encontró? Escriba al menos 5 diferencias entre las interfaces y consígnelas en la siguiente tabla.

18

Para activar los números de línea del editor de Visual Basic2, debemos seguir los siguientes pasos:

Desarrollo de aplicaciones Windows

1. En el menú herramientas seleccionamos Opciones:

2

Los números de línea son un esquema de autonumeración que permiten hacer el seguimiento a los códigos de programación y que facilitan la trazabilidad de errores, es decir, el seguimiento de las líneas en las que sucede un error en tiempo de ejecución o en proceso de compilación.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

2. En la ventana emergente, vamos a la opción Editor de Texto y seleccionamos en Basic el menú que dice editor

19

3. Por último, activamos la opción que dice Ajuste de línea y damos clic en aceptar. (Opcional

Los controles gráficos de usuario3 son el mecanismo principal de interacción entre un programa y el usuario. Los controles aparecen en el cuadro de herramientas de Visual Studio y están agrupados por categorías (controles comunes, contenedores, componentes, etc.). Esta

3

Es muy común nombrar a los componentes de interfaz gráfica como Objetos, y aunque los componentes de interfaz gráfica sean elaborados a partir de un esquema de Objetos, estos dos conceptos no son equivalentes. Los Objetos son el elemento de estudio de la Programación Orientada a Objetos (POO), donde los Objetos son abstracciones de la realidad que distan de ser simplemente elementos gráficos; no obstante, los Objetos y los componentes de interfaz gráfica cuentan con propiedades (características) y métodos (Operaciones), y los Componentes de Interfaz Gráfica cuentan además con eventos asociados (ver Unidad 2).

Desarrollo de aplicaciones Windows

ajuste de línea)


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

agrupación permite manejar de manera más cómoda la gran cantidad de componentes existentes en el entorno de trabajo de Visual Studio. 5.1.

Propiedades y eventos

Todos los elementos de la realidad cuentan con un par de elementos que las identifican: características y acciones. Por ejemplo, un Gato tiene características como el color del pelo, el tipo de maullido, el número de patas, y realiza acciones como comer, dormir, ronronear, cazar 20

ratones. Este par de elementos conforman los conceptos generales de un Objeto y en particular, de un Componente de Interfaz Gráfica4: Propiedades (características) y Eventos (acciones). Para comprender mejor esto, remplazaremos el gato por un botón cualquiera en un formulario. Todo botón tiene un color, un tipo de letra, una leyenda escrita, una posición dentro de la ventana, un tamaño (propiedades) y sobre el botón se puede hacer clic, doble clic, mover el mouse encima, etc.(eventos). A continuación listaremos las propiedades y los eventos más comunes en el diseño de formularios.

Desarrollo de aplicaciones Windows

5.1.1. Propiedades generales Propiedad Explicación Name Define el nombre de la variable asociada al control dentro del programa. Debe respetar las reglas para la definición de nombres de variables y por estándar utiliza notación húngara o notación Camel (ver la tabla). Text Define el nombre visible del componente. Por ejemplo, en un botón define el nombre que aparece encima del botón. Se conoce también como el Caption (o título del componente). Backcolor Color de fondo del componente. TextAlign Alineación del texto Font Define el tipo de fuente y los atributos de la misma (tamaño, color, énfasis). Enabled Establece si el componente está habilitado o no. Toma exclusivamente valores de Verdadero (True) o Falso (False). 5.1.2. Eventos más comunes Evento Click MouseEnter KeyDown KeyPress

4

Interpretación Es el evento por defecto y hace referencia al clic normal del mouse Es el evento que se activa cuando el puntero ingresa al control. Es el evento que se activa cuando una tecla es presionada. Es el evento que se activa cuando una tecla es presionada y liberada a la vez.

A partir de este momento se utilizará únicamente a palabra componente para designar a los componentes de interfaz gráfica de usuario.


Mร“DULO GUรA DESARROLLO DE APLICACIONES WINDOWS

Con ayuda de su formador identifique el cuadro de propiedades y el selector de eventos. Escriba al menos tres eventos no listados anteriormente y 5 propiedades que aparezcan en el recuadro. Cambie los modos de vista del cuadro de propiedades y denote los cambios que suceden. 5.2.

Lista de controles mรกs comunes

A continuaciรณn se listan los componentes mรกs comunes para aplicaciones y una breve

21

descripciรณn de su funcionamiento Componente Button Label TextBox CheckBox GroupBox ComboBox ListBox RadioButton

Notaciรณn Camel para algunos componentes de interfaz grรกfica

CONTROL

DESCRIPCIร“N

PREFIJO

EJEMPLO

Label

Etiqueta. Sirve para identificar elementos de un formulario

L

LNombre

TB

TBNombre

B

BLimpiarRegistro

PB

PBFoto

F

FPrincipal

y se utiliza como elemento guรญa para un usuario. TextBox Button PictureBox

Cuadro de texto. Sirve para captura de datos por el usuario Botรณn de comandos. El control principal del usuario. Cuadro de imagen. Sirve para mostrar imรกgenes en la interfaz grรกfica de usuario (GUI).

Form

Formulario de Windows. Es el componente principal de trabajo, el cuรกl representa una ventana en tiempo de ejecuciรณn.

CheckBox

Caja de selecciรณn

CH

CHViajes

ComboBox

Cuadro de selecciรณn

CB

CBDeptosColombia

Panel de navegaciรณn WEB

WB

WBExplorer

Lista de opciones de selecciรณn

LB

LBTipoSangre

Botรณn de selecciรณn

RB

RBMasculino

Panel de agrupaciรณn

GB

GBDatosPersonales

WebBrowser ListBox RadioButton GroupBox

Desarrollo de aplicaciones Windows

5.3.

Descripciรณn Botรณn de comandos. Botรณn de pulsaciรณn. Etiqueta. Cuadro de texto. Cuadro de chequeo. Caja de agrupaciรณn de controles. Cuadro de texto + lista de selecciรณn. Lista de selecciรณn. Botรณn de selecciรณn (Excluyente).


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Panel DataGrid

Panel Grilla de datos. Se llena con datos importados de algún

P

PDisplay

DG

DGTablaPersona

DS

DSVideoteca

mecanismo de persistencia de la información. DataSet

Conjunto de datos. Representación de los elementos de una base de datos dentro de una aplicación Windows.

HScrollBar

Barra de Desplazamiento Horizontal

HS

HSBarra1

VScrollBar

Barra de Desplazamiento Vertical

VS

VSBarra1

T

TSegundero

Selector de fecha y hora

DT

DTHoy

LinkLabel

Etiqueta que soporta hipervínculos

LL

LLGoTo

StatusBar

Barra de estado

SB

SBPrincipal

ToolStrip

Cinta de Herramientas.

TS

TSEstandar

MenuBar

Barra de Herramientas.

MB

MBMiMenu

Ayuda desplegable sobre el puntero del mouse

TT

TTHelp

Timer

22

DateTimePicker

ToolTip

Contador

El elemento más importante para realizar una aplicación consiste en realizar lo que se denomina un sketch (boceto, croquis) de interfaz gráfica. Un sketch es el primer acercamiento a los requerimientos de un cliente o de una aplicación en particular, y permite reducir el

Desarrollo de aplicaciones Windows

esfuerzo y tiempo requeridos a la hora de implementar una interfaz grafica de usuario (GUI). A continuación se mencionan algunos tips a la hora de realizar un sketch. 1. Establezca el flujo de datos: datos que requiere la aplicación para funcionar y datos que se desean mostrar. 2. Recuerde que el principal mecanismo de captura de datos es un cuadro de texto. 3. Cada cuadro de texto debe ir acompañado de un label (etiqueta). En general, cada componente conceptual debe ir acompañado de su etiqueta correspondiente. 4. Los botones de comandos (Button) son el mecanismo fundamental de acción del algoritmo. Por lo general el código de programación va en los botones. 5. Utilice Lápiz y Papel5. Es más económico y además le permitirá realizar los cambios que el cliente desee. Además el paso a la herramienta será más fácil.

5

Una sugerencia de herramienta para bocetación de interfaces de usuario se llama Balsamiq Mockups y está disponible en http://www.balsamiq.com/download


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

La empresa Inc-Soft desea lanzar al mercado un nuevo producto: una calculadora ligera para hacer operaciones aritméticas básicas de a dos números como parte de su estrategia, menos operaciones, mayor rentabilidad. La calculadora deberá realizar las 4 operaciones con tan sólo presionar un botón y estará diseñada para que sea manejable por personas con edades entre 3 y 99 años. Diseñe el sketch de interfaz gráfica respecto de cómo implementar la calculadora.

23

Solución La calculadora requiere de dos números que el usuario deberá ingresar a la aplicación, y deberá realizar operaciones con tan sólo presionar un botón. El resultado deberá mostrarse en algún lado. Entonces requerimos de acuerdo con esto de: 2 TextBox de entrada. 4 Button para las operaciones aritméticas (suma, resta, producto, división). 1 TextBox de salida. Si es posible, 3 etiquetas para indicar los campos de entrada y de salida de la aplicación.

Buena Práctica de Programación: Aunque opcional, es recomendable listar los componentes a utilizar definiendo también la propiedad de nombre de cada componente a utilizar. Se pueden señalar dentro del sketch de interfaz.

Desarrollo de aplicaciones Windows

Así, a continuación se muestran dos posibles sketches candidatos para la aplicación.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Elabore dos sketches de interfaz gráfica candidatos para un programa que dados tres números, determine el mayor de los tres. Elabore un sketch de interfaz gráfica para la siguiente situación: “UD ha sido contratado por una empresa de desarrollo de software para juegos, la cual desea implementar un juego de trique con botones. Además requiere que aparezca en 24

un lugar la información de quien tiene el turno (información no modificable por el usuario) y que tenga un mecanismo para reiniciar el juego cuando se gane o se empate.”

El proceso de codificación de una aplicación requiere también de una planeación con el fin de optimizar los tiempos de trabajo en el proceso de codificación de la aplicación. Vamos a considerar el caso de la empresa Inc-Soft y su posterior aprobación al segundo sketch de interfaz. Entonces, necesitaremos 2 etiquetas, 3 cajas de texto y 4 botones. Seguiremos los siguientes pasos: Paso # 1: Cree un nuevo proyecto con el nombre CalculadoraLigera. Paso # 2: Adicione los componentes necesarios arrastrándolos desde el cuadro de herramientas y modifique sus propiedades. Desarrollo de aplicaciones Windows

Paso # 3: Realice una planeación en lenguaje natural, pseudocódigo, diagrama de flujo o de proceso, de las acciones que debe realizar el programa. Paso # 4: Codifique en Visual Basic. Paso # 5: Ejecute y pruebe que el programa funcione.

Para facilitar el trabajo de seguimiento de esta aplicación primero se listarán los componentes y las propiedades a modificar en tiempo de diseño: Componente Name

TextBox1 TBNum1

Componente Name

TextBox2 TBNum2

Componente Name Text

Label1 LOperacion +

Componente Name ReadOnly

TextBox3 TBResultado True


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Componente Name Text

Label2 LIgual =

Componente Name Text

Button1 BSuma +

Componente Name Text

Button2 BResta -

Componente Name Text

Button3 BProducto *

Componente Name Text

Button4 BDivision /

Componente Name Text MaximizeBox FormBorderStyle

Form1 FCalculadoraLigera Calculadora Ligera False FixedSingle

25

El resultado obtenido, luego de agregar los componentes es el siguiente:

Ahora, para el paso de codificación primero plantearemos el funcionamiento utilizando un diagrama de proceso. En este punto lo importante será preguntarnos ¿qué sucede cuando se hace clic en el botón de suma?, ¿qué se requiere para poder realizar efectivamente la

Para efectos prácticos, realizaremos un diagrama de proceso que facilitará la comprensión de la codificación posterior. Número 1

Procedimiento para realizar la suma de dos números

Suma<-num1+num2

Número 2

Acción: clic del mouse

Las acciones desencadenadoras mencionan el evento que debemos programar, en este caso, el evento clic (que se hará sobre el botón de comandos). Y como observamos, la suma requiere de dos números que deben ser ingresados por el usuario. Para acceder al evento clic

Desarrollo de aplicaciones Windows

suma?


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS Public Class FCalculadoraLigera Private Sub BSuma_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BSuma.Click End Sub End Class

simplemente haremos doble clic sobre el componente a programar. Entonces, luego de hacer doble clic sobre el botón de suma, el resultado será el siguiente: 26

Nos ocuparemos de momento de programar siempre entre el encabezado (private sub) y cierre (end sub) de proceso (en la siguiente unidad hablaremos un poco más al respecto). Necesitamos codificar la suma de dos números que ingresa el usuario y los digita en las cajas de texto. Luego, suma los números y por último los muestra en pantalla. Esto concuerda con los 4 tiempos de todo programa en ejecución: solicitud de datos, captura de datos, procesamiento y posterior muestra de resultados. Empero, las aplicaciones que cuentan con interfaz gráfica de usuario son las que inician la solicitud de datos en donde el usuario diligencia la información requerida. Así pues, nos encargaremos de codificar los otros tres tiempos. Veamos el código:

Desarrollo de aplicaciones Windows

Public Class FCalculadoraLigera Private Sub BSuma_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BSuma.Click Dim num1 As Double Dim num2 As Double Dim suma As Double ' Captura de datos num1 = Val(Me.TBNum1.Text) num2 = Val(Me.TBNum2.Text) ' Procesamiento suma = num1 + num2 ' Visualización de resultados Me.TBResultado.Text = CStr(suma) End Sub End Class

Los colores en el código designan lo siguiente: Color Interpretación Verde Comentarios del programador (código que no hace parte de la compilación del programa. Azul Palabras reservadas del lenguaje de programación (tipos de datos, definición de funciones, procedimientos, argumentos). No se deben usar como nombres de variables. Negro Nombre de variables, componentes y procedimientos definidos por el programa.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Observe en el código el orden de las expresiones. Para captura de información aparece el componente al lado derecho de la igualdad, mientras que en la visualización de resultados aparece al lado izquierdo de la igualdad. Esto corresponde al esquema en pseudolengaje:

variable1 ← valor;

Entonces la expresión de igualdad en Visual Basic corresponderá a la operación elemental de asignación (al menos de momento). No obstante la expresión aún no es muy clara y aparece un operador (denominado operador punto) en las expresiones. He aquí una explicación:

27

num1 = val(TBNum1. Text)

num1 = variable para almacenar el valor numérico del primer número ingresado por el usuario

TBNum1. Text: TBNum1 = Componente de la interfaz gráfica, Text = Propedad de Texto

val( ) es la fución que permite la conversión de una cadena de texto a su valor numerico

Entonces el operador punto se utiliza para acceder, en este caso, a la propiedad de texto del componente TBNum1. Esto quiere decir que, en tiempo de ejecución, el programa capturará el último mostrará en pantalla el resultado de esa suma en el cuadro de texto TBResultado.

Realice la codificación de los otros botones siguiendo la metodología propuesta en el ejemplo anterior. Verifique en tiempo de ejecución. ¿Qué sucede cuando en el segundo cuadro de texto existe un cero y se realiza la división? Codifique en cada procedimiento una sentencia de código de tal manera que cuando se haga clic en cada botón el signo entre las cajas de texto cambie por el de la operación a realizar. Por ejemplo, si se hace clic en el botón de producto, se cambie el signo de + por el de *.

Desarrollo de aplicaciones Windows

texto ingresado en los cuadros de texto TBNum1 y TBNum2. Luego realizará una suma y por


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

A. Button: Este control representa un botón de pulsación, conocido en versiones anteriores de Visual Basic como CommandButton. Algunas de las propiedades más importantes de este control son. 28

Text. TextAlign. BackColor. Cursor.

Cadena con el título del botón. Alineación o disposición del título dentro del área del botón. Por defecto aparece centrado. Color de fondo para el botón. Permite modificar el cursor del ratón que por defecto tiene el botón. Imagen que podemos mostrar en el botón como complemento a su título, o bien, en el caso Image. de que no asignemos un texto al botón, nos permitirá describir su funcionalidad. Al igual que para el texto, esta propiedad nos permite situar la imagen en una zona del botón ImageAlign. distinta de la central, que es en la que se ubica por defecto. BackgroundImage. Imagen de fondo para el botón. Tipo de resaltado para el botón. Por defecto, el botón aparece con un cierto relieve, que al ser pulsado, proporciona el efecto de hundirse y recuperar nuevamente su estado, pero FlatStyle. podemos, mediante esta propiedad, hacer que el botón se muestre en modo plano, con un ligero remarcado al pulsarse, etc. Font. Cambia el tipo de letra y todas las características del tipo legido, para el texto del botón.

B. Label: El control Label o Etiqueta, muestra un texto informativo al usuario. Podemos utilizar este control como complemento a otro control, por ejemplo, situándolo junto a un TextBox, de modo que indiquemos al usuario el tipo de dato que esperamos que introduzca en la Desarrollo de aplicaciones Windows

caja de texto. Se trata de un control estático; esto quiere decir que el usuario no puede interactuar con él (al menos de manera directa, como sucedería por ejemplo, con un Button, sobre el que sí podemos actuar pulsándolo; o de un TextBox, en el que podemos escribir texto). Una de sus propiedades es BorderStyle, que permite definir un borde o recuadro alrededor del control, o que dicho borde tenga un efecto 3D; por defecto se muestra sin borde, La propiedad Text Obtiene o establece el título de texto que se muestra en el control Label. C. TextBox: Un control TextBox (o caja de texto) muestra un recuadro en el que podemos introducir texto. Para un formulario con varios controles tipo TextBox es necesario definir el foco (Focus()) en el primer cuadro de texto que deseemos utilizar. Text Multiline. WordWrap.

Cadena con el texto del control. Permite establecer si podemos escribir una o varias líneas. Por defecto contiene False, por lo que sólo podemos escribir el texto en una línea. En controles multilínea, cuando su valor es True, al llegar al final del control cuando


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

Enabled. ReadOnly. CharacterCasing MaxLength. AutoSize. PasswordChar.

estamos escribiendo, realiza un desplazamiento automático del cursor de escritura a la siguiente línea de texto. Contiene un valor lógico mediante el que indicamos si el control está o no habilitado para poder escribir texto sobre él. Permite indicar si el contenido del control será de sólo lectura o bien, podremos editarlo. Esta propiedad, permite que el control convierta automáticamente el texto a mayúsculas o minúsculas según lo estamos escribiendo. Valor numérico que establece el número máximo de caracteres que podremos escribir en el control Cuando esta propiedad tenga el valor True, al modificar el tamaño del tipo de letra del control, dicho control se redimensionará automáticamente, ajustando su tamaño al del tipo de letra establecido. Carácter de tipo máscara, que será visualizado por cada carácter que escriba el usuario en el control. De esta forma, podemos dar a un cuadro de texto el estilo de un campo de introducción de contraseña.

29

D. CheckBox: Este control muestra una casilla de verificación, que podemos marcar para establecer un estado. Generalmente el estado de un CheckBox es marcado (verdadero) o desmarcado (falso); sin embargo, podemos configurar el control para que sea detectado un tercer estado, que se denomina indeterminado, en el cual, el control se muestra con la marca en la casilla pero en un color de tono gris. Las propiedades remarcables de este control son las siguientes. Valor lógico que devuelve True cuando la casilla está marcada, y False cuando está desmarcada. CheckState. Valor del tipo enumerado CheckState, que indica el estado del control. Checked, marcado; Unchecked, desmarcado; e Indeterminate, indeterminado. ThreeState. Por defecto, un control de este tipo sólo tiene dos estados, pero asignando True a esta propiedad, conseguimos que sea un control de tres estados. CheckAlign Permite establecer de modo visual la ubicación de la casilla de verificación dentro del área del control.

E. RadioButton y GroupBox: Los controles RadioButton nos permiten definir conjuntos de opciones auto excluyentes, de modo que situando varios controles de este tipo en un formulario, sólo podremos tener seleccionado uno en cada ocasión. Para solucionar este problema, disponemos del control GroupBox, que nos permite, como indica su nombre, agrupar controles en su interior, tanto

Desarrollo de aplicaciones Windows

Checked


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

RadioButton como de otro tipo, ya que se trata de un control contenedor. Una vez dibujado un GroupBox sobre un formulario, podemos arrastrar y soltar sobre él, controles ya existentes en el formulario, o crear nuevos controles dentro de dicho control.

30

F. ListBox: Un control ListBox contiene una lista de valores, de los cuales, el usuario

puede

seleccionar uno o varios simultáneamente. Es uno de los controles que más ha caído en el desuso principalmente por la existencia del ComboBox, pero aún es utilizado en algunos formularios de registro. Entre las principales propiedades de este control, podemos resaltar las siguientes. Items

Contiene la lista de valores que visualiza el control. Se trata de un tipo ListBox.ObjectCollection, de manera que el contenido de la lista puede ser tanto tipos carácter, como numéricos y objetos de distintas clases. Al seleccionar esta propiedad en la ventana de propiedades del control, y pulsar el botón que contiene, podemos introducir en una ventana elementos para el control.

Desarrollo de aplicaciones Windows

Sorted.

Cuando esta propiedad contiene el valor True, ordena el contenido de la lista. Cuando contiene False, los elementos que hubiera previamente ordenados, permanecen con dicho orden, mientras que los nuevos no serán ordenados. IntegralHeight.Los valores de la lista son mostrados al completo cuando esta propiedad contiene True. Sin embargo, al asignar el valor False, según el tamaño del control, puede que el último valor de la lista se visualiza sólo en parte. MultiColumn. Visualiza el contenido de la lista en una o varias columnas en función de si asignamos False o True respectivamente a esta propiedad. SelectionMode. Establece el modo en el que vamos a poder seleccionar los elementos de la lista. Si esta propiedad contiene None, no se realizará selección; One, permite seleccionar los valores uno a uno; MultiSimple permite seleccionar múltiples valores de la lista pero debemos seleccionarlos independientemente; por último, MultiExtended nos posibilita la selección múltiple, con la ventaja de que podemos hacer clic en un valor, y arrastrar, seleccionando en la misma operación varios elementos de la lista. SelectedItem Devuelve el elemento de la lista actualmente seleccionado. Selecteditems. Devuelve una colección ListBox.SelectedObjectCollection, que elementos de la lista que han sido seleccionados

contiene

los

SelectedIndex Informa del elemento de la lista seleccionado, a través del índice de la colección que contiene los elementos del ListBox.


MÓDULO GUÍA DESARROLLO DE APLICACIONES WINDOWS

G. ComboBox: El ComboBox es un control basado en la combinación (de ahí su nombre) de dos controles que ya hemos tratado: TextBox y ListBox. Un control ComboBox dispone de una zona de edición de texto y una lista de valores, que podemos desplegar desde el cuadro de edición. El estilo de visualización por defecto de este control, muestra el cuadro de texto y la lista oculta, aunque mediante la propiedad DropDownStyle podemos cambiar dicho estilo. La siguiente figura muestra un formulario con diversos ComboBox, cada uno con diferente estilo.

La

propiedad

DropDownStyle

31

también

influye

en

una

diferencia

importante

de

comportamiento entre el estilo DropDownList y los demás, dado que cuando creamos un ComboBox con el mencionado estilo, el cuadro de texto sólo podrá mostrar información, no permitiendo que esta sea modificada.

MaxDropDownItems, asignaremos el número de elementos máximo que mostrará la lista del control. El resto de propiedades y métodos son comunes con los controles TextBox y ListBox. Implemente en Visual Basic cada uno de los formularios de ejemplo, teniendo en cuenta la notación Camel de nombres de componentes y use los componentes necesarios. Realice un formulario de registro para la cuenta de correo de Hotmail. VALORACIÓN DE EVIDENCIAS

Desarrollo de aplicaciones Windows

En el caso de que la lista desplegable sea muy grande, mediante la propiedad


Unidad 1