programación visual & arquitectura en tres capas

Tecnología de la Programación

Javier Nieves Acedo

Programación Visual & Arquitectura en Tres Capas

Una imagen vale más que mil palabras

La superación de una persona llega a límites inimginables. Gente que no puede andar consigue desplazarse de

formas alternativas. Gente que no puede oír consigue

comunicarse de formas alternativas.

La superación humana llega a

límites inimaginables

De lo más

antiguo pasamos a…

… a algo más

moderno y amigable

Pero conozcamos como

empezó todo…

Un poco de historia

GUI – Grafical User Interface

Datan de los años 70Xerox PARC pioneros

Popularizado por Apple ComputerLisa – Macintosh (1984)

Después llegó Microsoft

Y ¿cómo funciona la programación visual?

Conceptos y Razonamiento de GUI (1)

Actualmente se utiliza la “metáfora del escritorio”

Los programas en Windows no acceden directamente a los dispositivos.Para eso están los Drivers

Cada aplicación que se ejecuta es una tarea

Tarea en proceso vs Tarea ejecutándose vs Tarea Activa

Conceptos y Razonamiento de GUI (y 2)

Multitarea gracias a administración de memoria

Memoria Real – Memoria VirtualAdemás se puede compartir códigoDLLs – Librería de Enlace Dinámico

Se proporciona el sistema para insertar este código y comenzar a utilizarlo.

Pero los afectados lo

visualizan de formas diferentes

Perspectiva de Programador (1)

Cuando se programan GUIs se puede hacer con LOO.

Ventanas:Usuario

Ve las ventanasInteracciona con las ventanas

ProgramadorEntradas y comunicaciones en forma de “mensajes”

Perspectiva de Programador (2)

Barra de TítuloMen

ús

Barra de Estado

Desplazamiento

Perspectiva de Programador (3)

Programas en ConsolaEjecución secuencialPrograma controla al usuario

Programas de VentanasEjecución dirigida por eventosEl usuario controla el programaRealiza la secuencia de pasos según le parece

Perspectiva de Programador (4)

Programación Orientada por EventosBasada en la generación y procesamiento de mensajes.

Mensaje:“Información de que ha ocurrido un evento”

Debido a que el usuario controla el flujo de ejecución debemos tener más cuidado en nuestro programas

Perspectiva de Programador (y 5)

El núcleo de la programación en Windows son las API (Application Program Interface)

Tiene diversas funciones:Ejemplo: CreateWindow()

Declaradas en Windows.hUtilización similar a string.h (strcpy())

.EXE actuales se basan en enlaces dinámicos

… y se basa en una

arquitectura ya desarrollada

Arquitectura Gestionada por Mensajes (1)

Cuando se modifica el tamaño de una ventana:Se reformatea el texto para acoplarlo al tamaño

Parece que el Sistema Operativo se encarga de ello

¿Cómo sabemos que ha pasado algo en nuestra ventana?SO manda un mensaje a la ventana

Arquitectura Gestionada por Mensajes (2)

La comunicación es gracias al sistema de mensajes

Para una aplicación el mensaje es una notificación de que un evento ha sucedido

Cuando la aplicación recibe un mensaje se le cede el procesador para que lo atienda

Arquitectura Gestionada por Mensajes (3)

Arquitectura Gestionada por Mensajes (4)

Todos los mensajes pasan a través de Windows

El Origen de los Mensajes:Usuario: teclas, botones…Windows: restaurar aplicación minimizada…

Aplicación: cambia el estado y se necesita el redibujado,…

Otras aplicaciones: intercambio dinámico de datos entre aplicaciones,…

Arquitectura Gestionada por Mensajes (5)

Una aplicación recibe todos los mensajes posibles

Windows envía todos porque no puede conocer cuáles le interesa a la aplicación

La aplicación ignorará todos los que no sean relevantes para ella

Arquitectura Gestionada por Mensajes (6)

La prioridad de los mensajes (1):Normalmente Windows los sitúa en la cola de aplicación en el orden en el que son generados

Otros se mantienen en la cola mientras queden otros mensajes (timer, paint y quit)

Mensajes que se manda la aplicación o a otra se colocan al principio de la cola

Arquitectura Gestionada por Mensajes (y 7)

La prioridad de los mensajes (y 2):¿Si hay mensajes pendientes en varias aplicaciones?

Windows cede el procesador a la que tenga más prioridadComienza en 0 y puede cambiar de [-15, 15]

Si tienen la misma, se cede a la que tiene mayores mensajes

… y para programarlo …

Entornos de Desarrollo en C++ (1)

Diferentes bibliotecas de clasesObject Windows Library (OWL)

De BorlandUsada en Borland C++ 3.0La versión 5.0 encapsula muchos controles de Win32

Compleja para iniciarse en su uso

Entornos de Desarrollo en C++ (2)

Microsoft Fundation Class (MFC)Apareció entre las versiones 1 y 2 de OWL

Existen versiones para diferentes compiladoresMuy relacionada con las API s de Windows

No tiene programación orientada a objetos

Entornos de Desarrollo en C++ (3)

Visual Component Library (VCL)Desarrollo rápido basado en componentes

Componentes llevados a un formulario y modificados a través de propiedades y métodos

No se parece a nada anteriorProgramada en Object Pascal pero se puede utilizar desde C++

Entornos de Desarrollo en C++ (4)

Microsoft Visual Studio .NetPermite múltiples lenguajes (C++, C#)

Nueva biblioteca de componentes (WinForms)

Tiene la misma potencia que VLC y permite construir aplicaciones con la misma facilidad y atractivo.

Entornos de Desarrollo en C++ (y 4)

QT CreatorAplicación multiplataformaDispone de sus propias librerías con portabilidad entre Sistemas Operativos

Desarrollada por TolltrechAdquirida por Nokia

… pero los componentes se basan en…

El Modelo Propiedad-Método-Evento (1)

La base de las aplicaciones con C++ Builder

Se utilizan componentes softwareTienen

Propiedades que definen su estadoMétodos que permiten manipularloLos cambios de estado disparan un evento al que la aplicación puede asignarle una acción

El Modelo Propiedad-Método-Evento (2)

VCL permite hacer visualmente lo que antes se realizaba mediante la codificación de clases.

Java estándar no dispone de está facilidad. Hay que ir a aplicaciones de terceros para que den está facilidad.

El Modelo Propiedad-Método-Evento (y 3)

Los programadores no tienen que crearse o manipular estos componentes mediante código fuente.

Todos los componentes están ya en la VCL

Componentes vs Clases

Componentes vs Clases (1)

Son parecidos pero hay diferencias (I1):Todos los componentes descienden de la clase Tcomponent

Normalmente se utilizan como están, no son utilizados como una clase base. Si se hereda es porque se quiere añadir algo de código a funciones miembro que gestionan un evento

Componentes vs Clases (y 2)

Son parecidos pero hay diferencias (y 2):Los objetos creados a partir de la VCL solo pueden crearse en memoria dinámica (new)

Se pueden crear controles nuevos y añadirlos a las paletas de los ya existentes

Analicemos un poco más a fondo los componentes

Componentes (1)

Componentes VCL son objetos que ejecutan una tarea específica de programación

Componentes (2)

Propiedades:Controlan como opera el componente

Muchos tienen propiedades comunes

La ventana ObjectInspector muestra las propiedades del componente en orden alfabético.

Componentes (3)

Propiedades:Pueden ser modificadas en tiempo de diseño y de ejecución

No todas la propiedades tienen efectos visibles asociados

En tiempo de ejecución se modifican los valores haciendo una asignación del nuevo valor

Componentes (4)

Propiedades:Al cambiar una propiedad se llamarán a los métodos asociados o necesarios

Las propiedades pueden tener dos especificadores de acceso (read / write specifier)

Los especificadores son llamados de forma automática

Algunas propiedades solo pueden ser leídas y otras solo escritas

Componentes (5)

Propiedades:Una propiedad puede ser un objeto de otra clase VCL

Otras son grupos de propiedades (Font) en el ObjectInspector tiene un +

Otras pueden ser enumeraciones (lista de posibles opciones). En el ObjectInspector tienen un desplegable

Componentes (6)

Métodos:Son funciones que pueden ser llamadas para que un componente ejecute ciertas acciones

Ejemplo: Ventana->Show(); // Visualiza en pantallaVentana->Hide(); // Oculta en pantalla

Como forman parte de una clase pueden ser públicos, privados o protegidos

Componentes (8)

Eventos:Cada componente VCL está diseñado para responder a ciertos eventos

Si se responde a un evento se dice que se dispone de un handle.

Las funciones a las que se llama son handlers

Componentes (8)

Eventos:Los eventos de un componente se ven en el ObjectInspector

Si no se da respuesta el mensaje es ignorado o se ejecuta un handler por defecto de la VCL

Componentes (9)

Eventos:Todos los eventos tienen preparada su función a ejecutar.

El programador tiene que rellenarla con el código necesario.

Los argumentos que se reciben dependen del evento y nos dan la información relevante de lo sucedido

Componentes (10)

Al arrastrar los elementos se genera el código de creación automáticamente

Pero si generamos componentes en tiempo de ejecución deben ser creados en memoria dinámica

No tienen constructores sobrecargadosNo tienen funciones con parámetros por defecto

No soportan herencia múltiple

Componentes (11)

Componentes (12)

Se organizan en Clases de ComponentesStandard: Controles comunes de WindowsWindows: Encapsulan controles de Windows (TProgressBar, TTabControl…)

Bases de Datos: Gestión de bases de datos

Common Dialog: Típicos diálogos de Windows (guardar, imprimir…)

System: Mezcla de componentes visuales y no visuales

GDI: típicas para el dibujo, manejar bitmaps, letras, pinceles…

Componentes (13)

Proyectos y Formularios:En la creación de un proyecto hay varios ficheros:Fichero fuente del proyecto (WinMain())Fuente y Cabecera del formulario principalEl resto de los formularios con su fuente y

cabeceraFicheros de recurso de la aplicación y del

formulario principalFichero de texto make que contiene

opciones de compilación, nombres de ficheros fuente y bibliotecas

Componentes (y 14)

Proyectos y Formularios:

Para irse de un ordenador a otro solo se necesita llevar los siguientes ficheros:.cpp: ficheros fuente C++.h: ficheros de cabecera.dfm: fichero de formularios.bpr: makefile del proyecto

Y unas pautas para el diseño de formularios y menús…

Diseño de Formularios y Menús (1)

Formulario Principal de la Aplicación:Toda aplicación de tipo GUI dispone al menos de un formulario

Es una pantalla lisa que puede contener componentes y controles dentro de ella

Suele tener un menú, diversos accesorios (barras de herramientas, de estado)

Diseño de Formularios y Menús (2)

Formulario de Cuadro de Diálogo (1):No son formularios normales. Hay un tipo específico

Suelen ejecutar una función específica y no se necesita modificar su tamaño

La navegación entre controles se hace con la tecla Tab.

Suelen tener botón de Aceptar – Cancelar – Ayuda – OK.

Diseño de Formularios y Menús (3)

Formulario de Cuadro de Diálogo (y 2):No tienen botones de maximizar ni de minimizar

Son modales cuando hay que cerrarlos antes de volver al formulario de segundo plano

Se crean igual que otros formularios pero se modifica su propiedad BorderStyle

Modal (ShowModal()) – Normal (Show())

Diseño de Formularios y Menús (2)

Aplicaciones SDI vs MDI (1):SDI – Una única ventana y cuadros de diálogo

MDI – Tienen un formulario padre y varios hijos que se pueden mover dentro del padre.Suelen tener un menú pop up con

opciones de ver las ventanas en cascada, divididas en horizontal, en vertical…

Diseño de Formularios y Menús (5)

Aplicaciones SDI vs MDI (2):MDI – Las ventanas pueden ser de varios tipos:Ventana MDI padre: contiene al resto y

el menú principal Ventana MDI hija: muestran información

y son con las que interactúa el usuario. Ventanas modales: ventanas para dar

información y para recibir datos del usuario

Diseño de Formularios y Menús (6)

Aplicaciones SDI vs MDI (y 3):

Diseño de Formularios y Menús (7)

Aplicaciones SDI vs MDI (IV):MDI – Padre – Construcción:

Form Style: fsMDIForm. MDI – Hija – Construcción:

Form Style: fsMDIChildAñadir un evento “FormClose” con la siguiente línea

Action = caFree;Para evitar que aparezcan desde el principio comentar en el .cpp la línea:

// Application->CreateForm(__classid(TVentanaHija), &VentanaHija);

Diseño de Formularios y Menús (y 8)

En la documentación de la asignatura hay información detallada de la clase TFormPropiedadesMétodos

Información y un breve resumen de los componentes

de Windows…

Componentes de Windows (1)

Componentes Visuales y No VisualesVisuales: se visualizan en tiempo de diseño

No Visuales: No se visualizan, trabajan para ejecutar tareas (ej. timer)Cuando el programador inserta este tipo de objetos se visualiza un icono en diseño para indicar que puede acceder a sus propiedades

Componentes de Windows (2)

Propiedad Name:Cuando se crea un objeto se le asigna un nombre a través de la propiedad name.

Este nombre es el nombre de la variable a través de la que se va a acceder.

El nombre también se utiliza en el nombre de los gestores de eventos.

Si se modifica en diseño, se modifica en todos los lugares.

No hay que cambiarla en tiempo de ejecución.

Componentes de Windows (3)

Algunos Componentes (1):ListBox: Cuadro con las posibles elecciones

ComboBox: Versión especializada.

Componentes de Windows (4)

Algunos Componentes - Botones (2):ModalResult: Cuando una ventana modal se cierra se puede asignar el valor a ModalResult.

Se puede consultar con constantes:

Componentes de Windows (5)

Algunos Componentes - Botones (3):Default: si está a true será el botón por defecto.

Cancel: Será el botón por defecto para las cancelaciones

Enabled: permite habilitar o deshabilitar el control (común a muchos)

Componentes de Windows (6)

Algunos Componentes - Botones (4):Button: Botón clasicoBitBtn: Botón clásico con una pequeña imagen

SpeedButton: Botón con una imagenSe pueden agruparY se puede preguntar si están pulsadosComo los botones de negrita, cursiva… del

Word

Componentes de Windows (7)

Algunos Componentes (5):RadioButton – CheckBox

Tienen propiedad checkedRadioButtons normalmente van

agrupados para seleccionar una opción de todas ellas. Si se quieren varios grupos en el mismo formulario hay que usar RadioGroup

Componentes de Windows (8)

Algunos Componentes (6):RadioButton – CheckBox

Componentes de Windows (9)

Algunos Componentes (7):Label

Muestra texto en un formularioPuede ser definido en tiempo de

diseño y cambiado durante la ejecución

ScrollBarBarra de desplazamiento

independiente de otros controlesUso poco frecuente

Componentes de Windows (10)

Algunos Componentes (y 7):Panel

Es un contenedor de objetosLos controles que van en el Panel son hijos

suyosCuadros de Diálogo

File Open, File Save, Font, Color, Print, print Setup, Find, Replace

Metodo Execute() para crearlos y mostrarlos retorna true cuando ha hecho algo y false cuando ha cancelado

Componentes de Windows (11)

Propiedades Habituales (1)

Align: determina cómo se sitúa el control con respecto a su contenedor alNone: permanece donde se ha colocado alTop: parte superior del padre, se redimensiona la

anchura para adaptarse al padre, no la altura alBotton: parte inferior del padre, se redimensiona

la anchura para adaptarse al padre, no la altura alLeft: parte izquierda del padre, se redimensiona

la altura para adaptarse al padre, no la anchura alRight: parte derecha del padre, se redimensiona

la altura para adaptarse al padre, no la anchura alClient: se redimensiona para ocupar toda la parte

del padre posible

Componentes de Windows (12)

Propiedades Habituales (2)

Color: color de fondo o del caption del control

Cursor: tipo de cursor cuando pasa por el control crDefault crNone crArrow crCross crHourGlass crHandPoint

Enabled: indica si el control responde a eventos

Componentes de Windows (13)

Propiedades Habituales (3)

Visible: determina si el control es visible Parent: establece el contenedor del control TabStop: indica si se puede tabular al control

TabOrder: índice de la tabulación (0…N) Tag: almacena un entero como parte del control

Name: nombre del control (para el código) Caption: texto que identifica el control (usuario)

Height: altura

Componentes de Windows (14)

Propiedades Habituales (y 4)

Width: anchura Left: coordenada horizontal desde la izquierda al padre

Top: coordenada vertical desde la parte superior al padre

PopupMenu: especifica el menú popUp a mostrar junto con el control

Hint: texto de ayuda, aparece cuando el cursor pasa sobre el control

ShowHint: indica si se debe mostrar el hint o no

Componentes de Windows (15)

Métodos HabitualesClick: simula el click del ratón DblClick: simula el doble click del ratón Hide: hace el control invisible Refresh: redibuja el control en la pantalla (llama a Repaint)

SendToBack: enviar al fondo Show: hace visible un control SetBounds: establece la posición y tamaño del control

SetFocus: el control “escucha” los eventos

Componentes de Windows (16)

Eventos Habituales (1)

OnClick : clic del ratón OnDblClick: doble clic en el ratón OnDragDrop: Arrastrado y soltando para destino.

OnDragOver: Arrastrar pasa por intermedios.

OnEndDrag: Arrastrar y soltado para origen. OnMouseMove: el puntero del ratón se mueve sobre un control.

OnMouseDown: Se pulsa un botón OnMouseUp: Se libera el botón pulsado

Componentes de Windows (y 17)

Eventos Habituales (y 2)

OnEnter: el control recibe el foco.

OnExit: el control pierde el foco. OnKeyDown: Alguna/s tecla/s pulsada/s.

OnKeyPress: Una tecla pulsada. OnKeyUp: Se libera la/s tecla/s pulsada/s

Y para montar un arquitectura en varias capas…

“Divide y Vencerás”Julio César

… 10, 9, 8, 7…

Tecnología de la Programación

Javier Nieves Acedo

Programación Visual & Arquitectura en Tres Capas