universidad autÓnoma metropolitana …148.206.53.84/tesiuami/uami10294.pdf · 2004-03-04 · ......

UNIVERSIDAD AUTÓNOMA METROPOLITANA

UNIDAD IZTAPALAPA

División Ciencias Básicas e Ingeniería

Interfaz Gráfica para un Simulador de Eventos Discretos

Licenciatura en Computación

Francisco Rafael Hernández Cinta

Asesor:

Ricardo Marcelín Jiménez

México, 2002

Prefacio

I

Prefacio

El estudio de un sistema real rara vez puede efectuarse en un ambiente operacional, ya sea por razones de costo o porque se encuentra en proceso de diseño. Alternativamente, puede construirse una representación de su funcionamiento en una forma más o menos precisa, utilizando para ello alguna herramienta que permita aproximarse a su funcionamiento. El resultado de esta sustitución, denominado modelo, ofrece una caracterización de las operaciones (lógicas, temporales, cualitativas y/o cuantitativas) del sistema.

En lo que se refiere a los sistemas de cómputo, la construcción de modelos es una tarea imprescindible, en cualquier etapa de la vida de un sistema y para cualquier operación que requiera de análisis.

Los modelos se pueden dividir en modelos cuantitativos y modelos cualitativos. Con los primeros se busca exhibir las propiedades del sistema que garantizan su buen funcionamiento (safetyness and liveness) y la ausencia de errores (deadlock , starvation , etc.) entre las herramientas formales para la construcción y manejo de este tipo de modelos se pueden citar a los autómatas de entrada/salida, los lenguajes de especificación como CCS o CSP. En tanto, los modelos cualitativos, sirven para evaluar el rendimiento de las operaciones (tiempos de espera, tasas de servicio, tasa de utilización de recursos, etc.) a fin de optimizarlas. La fila de espera, o cola, es uno de los modelos más utilizados en este tipo de estudios.

Una vez que se ha construido el modelo se le debe de aplicar un método de solución. Los métodos cuantitativos se agrupan en tres grandes categorías: la medición, el análisis y la simulación.

La simulación por computadora es una técnica numérica para realizar experimentos con un modelo, a fin de obtener medidas de interés. En ésta técnica se construye un modelo de un sistema y un programa para computadora que cuando se ejecute servirá para validar o redefinir el modelo y su programación. Entre la variedad de técnicas de simulación descritas en la literatura, aquellas que pueden ser de interés para su uso en computadoras son: la emulación, la simulación Monte-Carlo, la simulación dirigida por trazas y la simulación dirigida por eventos.

El Profesor Ricardo Marcelín Jiménez, del Departamento de Ingeniería Electrónica de la UAM-I, ha desarrollado una biblioteca de clases, en lenguaje C++, que permiten construir programas para aplicar la simulación dirigida por eventos con el propósito de evaluar el rendimiento de protocolos que son ampliamente aplicados en redes de computadoras y sistemas distribuidos. Actualmente, los resultados de estos programas se vacían en una matriz y se almacenan en un archivo texto con el fin de analizarlos al final del proceso. Esta forma de presentar los resultados es conveniente para llevar una bitácora pero, no lo es así para poder percibir los eventos que involucra la simulación en el momento en que estos ocurren y por lo tanto se creyó conveniente diseñar un programa que proporcionará al usuario un mecanismo de control sobre el simulador y que a la vez presentará los sucesos de la simulación en forma gráfica pare facilitar su visualización.

Objetivos, Atributos y Requerimientos

I


Objetivo General del Proyecto

Desarrollar una Interfaz Gráfica de Usuario (GUI) para los programas de simulación creados a partir de la biblioteca de clases diseñada en el Laboratorio de Rendimiento de redes del Departamento de Ingeniería Electrónica de la UAM-I para la creación de programas simuladores de eventos discretos.

Atributos de la Interfaz Gráfica de Usuario

REF# ATRIBUTO DETALLES Y RESTRICCIONES DE FRONTERA

A1 Plataformas y sistema operativo

Microsoft Windows 95

A2 Metáfora de la interfaz La interfaz gráfica deberá estar diseñada para que el usuario la pueda controlar por medio de ventanas, cuadros de dialogo, barras de estado, barras de herramientas y en general todos aquellos elementos que constituyen el ambiente de trabajo gráfico de Windows.

Navegación fácil con ratón y con teclado.

A3 Tolerancia a fallos La interfaz debe de poderse recuperar de cualquier falla que se pueda presentar debido a situaciones que no se hayan contemplado en el diseño.

Requerimientos y funciones de la interfaz gráfica de usuario

REF# FUNCIÓN

R1 Dado que el funcionamiento del paquete de clases esta basado en la exploración de una gráfica G(V,A), se va a construir una Interfaz Gráfica de Usuario (GUI) capaz de facilitar el dibujo de éstas estructuras.

R1.1 Los nodos o vértices de la gráfica estarán representados por círculos.

R1.2 Cada uno de los nodos se va a distinguir de los demás por medio de un índice y este se debe de mostrar cuando se les apunte con el puntero del ratón.

R1.3 Para indicar que un nodo tiene el enfoque y que se pueden efectuar operaciones sobre de éste se van a mostrar, en su contorno, 8 pequeños controladores de tamaño.

R1.4 Se debe de poder efectuar una operación de arrastre sobre los nodos para poderlos cambiar de posición dentro de la gráfica.

R1.5 El usuario debe ser capaz de poder eliminar los nodos de la gráfica.

R1.6 Las gráficas se almacenaran en un archivo especificado por el usuario del cual se deben de poder recuperar para su edición.

R1.7 Las aristas estarán representadas por Curvas de Bezier.


II

R1.8

Cuando se apunte una arista desplegará una ventana emergente con un índice que la distinga de las demás.

R1.9 Cuando se seleccione una arista se van a mostrar cuatro controladores de tamaño colocados en los puntos de control de la Curva de Bezier

1

2

3

4

6

5

Figura 1-1

Una vez que se tenga dibujada la gráfica la interfaz debe de permitir al usuario configurar los siguientes aspectos para poder ejecutar la simulación Nombre del archivo ejecutables del algoritmo simulador y ubicación del archivo que contiene la estructura de la gráfica sobre la que se va a ejecutar la simulación

Los programas simuladores trabajan en base a un archivo que contiene la estructura de la G por tanto la interfa debe ser capaz de crear este archivo en la ubicación que el usuario desee

Una establecidos los parámetros de la simulación el usario debe de poder contrar el proceso inciandolo interrumpiuedolo , continuandolo y terminandolo.

La interfaz debe representar los eventos de la simulación en la gráfica mediante cambios de color de los elementos de la grafica, animaciones, etc.

Debe de haber un proceso de reinico satisfactorio al terminar la simulación

Organización del Reporte

I

Organización y Forma de Uso del Reporte

Para documentar la especificación del sistema, la forma en que se construyo, y como funciona dicha implantación se utiliza el UML (Unified Lenguaje Modeling) del que se puede encontrar una breve descripción en el apéndice.

El UML recomienda que la arquitectura de un sistema se describa por medio de cinco vistas:

La vista de casos de uso (use case view) describe el funcionamiento esperado por los usuarios, los analistas y verificadores.

La vista de diseño (design view) establece los elementos de software que se emplean para cumplir con los requerimientos del sistema

De esta forma primero se describe los atributos y requerimientos que se pretenden de la interfaz y en cada uno de los capítulos que conforman el reporte se describen los elementos

l reporte esta organizado en una serie de veinte capítulos en los que se describe la forma en que se desarrollo un requerimiento o atributo del sistema. En el texto se explican los aspectos relevantes de la implantación (aspectos estáticos de diseño) y de su funcionamiento (aspectos dinámicos de diseño).

Forma de Uso del Reporte

Leer los requerimientos

Leer el texto del capítulo

Seguir el caso de uso

Ejecutando la aplicación

Diagrama de estados

Diagramas de actividad

Diagramas de colaboracion

Diagrama de estado de la vista de diseño

Diagramas de clase

Diagramas de iteracción

Las funciones y requerimientos del sistema se establecen con la ayuda de los diagramas casos de uso (use case view) y para explicar la implantación (aspectos estáticos de diseño) y su funcionamiento (aspectos dinámicos de diseño) se emplearon los diagramas correspondientes a las vista de diseño (design view).

Los diagramas de casos de uso se enmarcan dentro de paquetes STYLEREFSEQARABICSTYLEREFSEQARABIC) con el fin de organizarlos y agruparlos.

Se utilizan valores etiquetados (tagged value) para poner, en la parte superior del paquete, un nombre descriptivo y en el extremo superior derecho un número entero único (no necesariamente consecutivo para facilitar las modificaciones) como nivel de refinamiento o abstracción.


II

Dentro de las elipses, que representan los casos de uso (use cases), y debajo de su nombre se coloca un valor etiquetado con un número único

Cuando se requiere detallar algún caso de uso se hace mediante otro diagrama de caso de uso enmarcado en un nuevo paquete con un nivel de abstracción mayor que el paquete fuente, con un nombre descriptivo igual al nombre del caso de uso que se esta refinando y en la pestaña del paquete el identificador del requerimiento original. Los identificadores, de las elipses que van a estar en el paquete destino, se forman con un numero entero y como prefijo, separado por un punto “.”, el identificador de la elipse del caso de uso fuente. Por ejemplo, la STYLEREFSEQARABICSTYLEREFSEQARABIC muestra el refinamiento del caso de uso {2} del diagrama de Figura 1-3STYLEREFSEQARABICSTYLEREFSEQARABICSTYLEREFSEQARABIC. Esta forma de particionar los diagramas, para mostrar mayor detalle, lo he tomado del concepto de diagramas de flujo de datos (DFD) que se presenta en [6] y que es posible incorporar a UML por medio de sus mecanismos de extensión (common mechanisms).

Nombre1{1}

Nombre2{2}

{0}{Nombre del Paquete}

<<include>>

valores etiquetados

nivel de abstracción

paquete

identificador del requerimiento (use case )

Figura 1-2 Agrupación de los diagramas de contexto (use case diagram).

En [4], para describir el funcionamiento de un sistema en determinadas situaciones se recomienda establecer, como en una obra de teatro, una especie de escenario y sobre este escenario un “diálogo”, entre el usuario y el sistema. El escenario esta formado por una serie de acciones que se llevaron a cabo con el sistema y que determinan su condición actual y que a partir de ésta, el usuario, va a realizar nuevas acciones y, en consecuencia, el sistema va a dar una respuesta.

Dado que, en un diagrama de estados, una secuencia de estados resume la información concerniente a entradas anteriores y determina el comportamiento del sistema para entradas posteriores. Entonces, se puede decir que una secuencia de estados forma un escenario. Este escenario se puede utilizar para ubicar, dentro de un determinado configuración del sistema, a un diagrama de actividad cuya secuencia de actividades tiene como resultado la acción marcada en un estado o en una transición perteneciente al diagrama de estados.En los diagramas de estado, abajo del nombre de cada estado, se pone un número único como identificador. Los identificadores de los subestados se forman con un numero consecutivo y como prefijo, separado por un punto “.”, el identificador del estado al que pertenecen. Mediante estos identificadores se pueden formar secuencias de transiciones por ejemplo (1,2),(2,2.1),(2.1,2.2) Figura 1-4STYLEREFSEQARABICSTYLEREFSEQARABICSTYLEREFSEQARABIC).


III

Nombre 2.1{2.1}

Nombre 2.2{2.2}

{1}{Nombre 2}

{2}

Nombre1{1}

<<include>>

Figura 1-3 Refinamiento de un diagrama de contexto.

Estado1{1}

Estado2{2}

SubEstado1{2.1}

SubEstado2{2.2}

Evento 1

acción A

Evento 2

acción B Evento 2

acción C

Estado3{3}

Evento 3

Figura 1-4. Diagrama de estados.

Los diagramas de actividad se organizan por medio de paquetes y en la pestaña del paquete se coloca una secuencia de estados o de transiciones para especificar su escenario. Por ejemplo, supóngase que la acción C, que se da en la transición {(2.1,2.2)}, a raíz del evento 2, es el resultado de una serie de actividades Figura 1-4STYLEREFSEQARABICSTYLEREFSEQARABICSTYLEREFSEQARABIC Estas actividades se van a colocar en un diagrama de actividades, como se muestra en la Figura 1-5STYLEREFSEQARABICSTYLEREFSEQARABICSTYLEREFSEQARABIC, que tendrá como escenario a la transición (2.1,2.2) .

Los diagramas de iteracción también se agrupan en paquetes y se relacionan con los diagramas de estados y de actividad mediante escenarios.

Los diagramas de la vista de casos de uso se unen con los diagramas de la vista de diseño por medio de diagramas de colaboración.

La líneas de los listados de código se presentan con una numeración en el extremo izquierdo para que se pueda hacer referencia a ellas por rango, o por líneas


IV

individuales. Para resaltar cambios en las líneas de código se ponen en letra negrita sus números.

Al principio de cada función o procedimiento se coloca un escenario y este se corresponde con el escenario de algún diagrama de actividad en la vista de diseño correspondiente al capitulo.

{(2.1,2.2)}

Actividad 1

Actividad 2

Figura 1-5 Diagrama de Actividad

Capitulo 1 Introducción

1

Capítulo 1

Introducción

Diseño de Programas para Ambiente Windows

Todas las personas que han manejado el sistema operativo Windows o algún programa compatible saben que la interacción con el sistema implica intercambiar información en un ambiente gráfico que consta de dos elementos: las ventanas y los controles. El mecanismo de comunicación es simple: el sistema envía información de cualquier tipo, ya sea texto o gráficos y el usuario, en respuesta, opera sobre los controles para especificarle al programa las operaciones a efectuar. Basándose en esta experiencia se puede establecer una idea de como diseñar un programa de esta naturaleza, que elementos deben de tener y como deben funcionar. Sin embargo, fue importante formalizar el concepto para tratar de lograr un programa compatible con los mecanismos propuestos por Windows (atributos A1, A2). En la biblioteca de la universidad se pueden encontrar libros excelentes sobre el tema y uno de ellos es The Windows Interface Guidelines for Software Design [WIG]. A continuación se mencionan algunos de los conceptos que en él se plantean.

A grandes rasgos un programa diseñado para Windows es aquel en el que usuario:

• Controla el flujo del programa mediante la interacción, por medio del teclado y/o el ratón, con elementos visuales como son los menús, los botones, cuadros de verificación o botones de opción.

• Recibe información, por parte del programa, acerca del avance y el estado de las operaciones.

• Puede manipular directamente representaciones de información. Por ejemplo, arrastrando y soltando elementos para colocarlos en otra posición o navegar para la localización de algún elemento.

• Puede configurar ciertas características del programa.

• Otra característica importante es la consistencia que permite transferir el conocimiento existente al aprendizaje y realización de nuevas tareas.

• La consistencia, dentro del producto, se refleja implantando tareas similares de la misma forma.

• La consistencia dentro del ambiente operativo se logra manteniendo una gran correspondencia con la interfaz y convenciones propuestas por Windows.

• Por último, el diseño de la interfaz se debe poder recuperar de aquellas situaciones en las que el usuario cometa algún error al manejar el programa. Por ejemplo cuando accidentalmente apunta un mal comando o dato.

Elementos de un Programa Windows

Windows provee un gran número de componentes interactivos que hacen fácil ejecutar comandos y especificar valores. Estos componentes poseen una estructura consistente y una serie de convenciones de interfaz.


2

Los menues listan comandos disponibles para el usuario. Usando los comandos visibles los menues ayudan a ejecutar mejor los comandos que el hecho de tener que teclear un comando en forma de texto.

Existen varios tipos de menús: barra de menues(bar menus), menues emergentes (drop-down menúes), menues contextuales (pop-up menus).

La barra de menú es un área especial a lo largo de una ventana directamente debajo del título de la ventana: una barra de menues incluye una serie de entradas llamadas títulos de menues. Cada entrada provee acceso a un menú emergente compuesto por una colección de elementos de menú.

Para desplegar un menú emergente con el ratón, el usuario debe apuntar al título del menú y presionar o hacer clic con el botón izquierdo del ratón. Esta acción resalta (highlights) el titulo del menú y abre el menú secundario. Posteriormente el usuario puede señalar o arrastrar, los elementos del menú secundario y cada elemento es resaltado. Si se hace clic o se suelta el botón con el puntero del ratón sobre un elemento del menú se acciona el comando asociado con el elemento del menú y el sistema retrae el menú secundario. Si el usuario mueve el puntero fuera del menú y hace clic o suelta el botón del ratón, la entrada de la barra de menues es cancelada y el menú secundario se retrae.

Los menues contextuales son desplegados en la posición del objeto y eliminan la necesidad de que el usuario tenga que mover el puntero a la barra de menues o a la barra de herramientas para ejecutar las acciones que le corresponden.

El contenido de una barra de menues y sus menues secundarios esta determinada por la funcionalidad de la aplicación.

Los botones de comando, son otros elementos que se utilizan para permitir controlar un programa. Comúnmente se muestran en forma de una caja en alto relieve y cuando se les presiona cambian su apariencia a una caja en bajo relieve para dar la apariencia visual de que se sume el botón. Al instante en que se deja de presionar el botón se ejecuta un comando y el botón vuelve a su apariencia original.

Los principales elementos por medio de los cuales el sistema envía información al usuario son:

Una barra de estado (status bar), es un área especial dentro de una ventana, que despliega información acerca de la operación con el sistema. Se puede usar también para proveer mensajes descriptivos acerca de la selección de menues.

Una caja de mensajes es una ventana secundaria que despliega un mensaje o información acerca de una situación particular. Los tipos de mensaje son de

• Información (information). Provee información acerca de los resultados de un comando. No ofrece a los usuarios opciones y el mensaje se acepta presionando el botón “Aceptar”.

• Pregunta (question). Cuestiona al usuario sobre de alguna condición o situación.

• Alerta (warning). Previene al usuario de una condición o situación que puede traer consecuencias irreversibles.

• Error crítico (critical). Informa al usuario de serios problemas que requieren la intervención o corrección antes de seguir trabajando.

Un tooltip es un pequeña ventana emergente que despliega texto descriptivo cuando el usuario mueve el puntero sobre el control. La ventana aparece después de un tiempo corto y es automáticamente removida cuando el usuario hace clic sobre el botón o mueve el puntero fuera del control.

Algunos objetos que generalmente aparecen en los programas de dibujo o diseño incluyen controles especiales, llamados controladores de tamaño (handles) que se utilizan para facilitar ciertos tipos de operaciones, tales como mover, cambiar de tamaño, escalar etc. El tipo de controlador que se usa depende del tipo de objeto, el tipo más común es una


3

caja que se coloca en la periferia del objeto. Cuando el interior del controlador es sólido, implica que se puede realizar cierta operación, en caso contrario, el controlador no soporta ninguna operación y se utiliza para indicar selección cuando las operaciones no esta disponibles.

El ratón es el dispositivo más común para interactuar con los objetos en la interfaz de Windows. El ratón está ligado operacionalmente con una gráfica en la pantalla llamado el puntero del ratón. Colocando el puntero sobre de algún objeto y oprimiendo y soltando los botones del ratón, un usuario puede seleccionar objetos y operaciones. La Tabla 1-1muestra la descripción de las operaciones que se pueden realizar con el ratón.

Una de las más formas más comunes para señalar o accesar un objeto es navegando hacia él. La navegación con el ratón es simple; cuando un usuario mueve el ratón a la izquierda o a la derecha, el puntero se mueve en la correspondiente dirección en la pantalla. Cuando el ratón se mueve hacia el usuario o lejos del usuario el puntero del ratón se mueve hacia abajo o hacia arriba.

Cuando un usuario mueve el puntero por la pantalla, su apariencia puede cambiar para especificarle al usuario que puede realizar alguna operación.

La selección envuelve una operación premeditada por medio de la cual un usuario identifica un objeto. A esto se le conoce como selección explícita. Una vez que el objeto es seleccionado, el usuario puede especificar una acción para el objeto.

Una selección implícita se da cuando se señala un objeto y se efectúa algunas operaciones casi al mismo tiempo. Por ejemplo, cuando se arrastra un objeto, el usuario establece la selección del objeto y realiza la acción de moverlo al mismo tiempo. Existen selecciones múltiples, selección de objetos juntos y selección de objetos separados.

ACCIÓN DESCRIPCIÓN

Apuntar (Pointing) Posicionar el puntero sobre un objeto en particular de la pantalla sin presionar algún botón. Apuntar, es usualmente parte de la preparación para alguna otra iteracción. Cuando se apunta a un objeto este generalmente despliega información de retroalimentación al usuario.

Clic (Clicking) Posicionar el puntero sobre un objeto y, rápidamente, presionar y soltar el botón del ratón. Generalmente, el ratón no se mueve durante la acción.

Doble Clic (Double-clicking) Posicionar el puntero sobre de un objeto y entonces presionar y soltar el botón dos veces en rápida sucesión

Presionar (Pressing) Posicionar el puntero sobre un objeto y entonces oprimir algún botón. Presionar es comúnmente el comienzo de una acción de clic o de arrastre

Arrastrar (Dragging) Posicionar el puntero sobre de un objeto, presionar algún botón y manteniendo así, mover el ratón a un nuevo lugar para, por último, soltar el botón.

Tabla 1-1 Operaciones que se pueden realizar con el ratón

Capitulo 2 Creación de la Forma Principal

4

Capítulo 2

7OBJETO PROPIEDAD VALOR

Name frmInterfaz

Caption “Interfaz Gráfica Para Un Simulador de Eventos Discretos”

BackColor &H00FFFFFF& (Blanco)

Height 5130

Width 6915

Form

ScaleMode 3-Twips

Caption Archivo Menu

Name mnuArchivo

Caption Nueva Grafica Menu

Name mnuNuevaGrafica

Caption Salir Menu

Name mnuSalir

Caption Figura Menu

Name mnuFigura

Caption Nodo Menu

Name mnuNodo

Caption Arista

Menu

Name mnuArista

Name staBarraEstado StatusBar

Height 255

Index 1

ToolTipText

Panel

Autosize 2-sbrContents

Index 2 Panel

ToolTipText “Posición del ratón en twips”

Index 3

Panel

ToolTipText “Nombre del archivo”


5

Creación de la Forma Principal

La interfaz gráfica está desarrollada en Microsoft Visual Basic que es un sistema de desarrollo diseñado especialmente para crear, de una forma rápida y sencilla, aplicaciones con los elementos expuestos en el capítulo anterior. Para soportar este tipo de desarrollos, Visual Basic utiliza fundamentalmente dos herramientas: una que permite realizar los diseños gráficos y un lenguaje de alto nivel

Para realizar una aplicación en Visual Basic, se crean ventanas llamadas formularios y sobre de ellas se dibujan los controles : botones, cuadros de lista, botones de opción etc. que van a servir para enviar mensajes e instrucciones al usuario y para que éste tenga un control sobre la aplicación.

La aplicación de la interfaz consta de un formulario principal que contiene los siguientes elementos:

• Una barra de menues, como medio para que el usuario controle al programa.

• Una barra de estado, para que el sistema informe acerca de la actividad del programa.

• Cajas de dialogo predefinidas y ventanas emergentes (tooltiptext) para desplegar mensajes informativos al usuario.

Cree un nuevo proyecto nómbrelo “Interfaz Grafica.vbp” y añada los objetos de la Tabla 2-1STYLEREFSEQARABICSTYLEREFSEQARABIC.

Tabla 2-1 Objetos de la forma principal y sus propiedades.

En este instante puede ejecutar la aplicación, y si selecciona alguna de las entradas de la barra de menues, se despliega un menú secundario con algunas acciones que se resaltan cuando se les apunta, y cuando se seleccionan retraen el menú secundario. También, puede apuntar el panel 2, de la barra de estado, y el sistema en respuesta muestra una ventana emergente (tooltiptext) con el mensaje: “Posición del ratón en twips” (Figura 2-1STYLEREFSEQARABIC).

Barra de menús

Entradas de la barra de menús

Menú de controlTítulo de la forma

Botón cerrarBotón minimizar

Botón maximizar

Barra de estado

Panel 1Panel 2

Area de dibujo

Posición del ratón en twips

TooTipText

Panel 3

Nombre del archivo

Figura 2-1

Paso 1


6

Cada objeto en Visual Basic tiene un comportamiento predefinido (no hay que programarlo). Sin embargo, para poder producir la respuesta que se desea de la aplicación se debe de aumentar o sobre escribir éste comportamiento limitado escribiendo código personalizado en los procedimientos de evento de cada control. Los procedimientos de evento se disparan o ejecutan como resultado: (1) de la acción del usuario sobre el control: (2) de la actividad del sistema como la carga en memoria de los formularios y (3) del código del programa.

Agregue el código que se muestra en el listado 2.1, STYLEREFSEQARABICy después de ejecutar la aplicación vera que se muestra la forma principal con algunas opciones de la barra de menúes desactivadas (paso 1 de la Figura 2-2). Seleccione la entrada de la barra de menúes con el título “Archivo” y la opción “Nueva Gráfica” de su menú emergente y como resultado, en el panel 1 de la barra de estado, se despliega el mensaje “Listo”; en el panel 2 se pueden observar las coordenadas en twips del puntero del ratón; en el panel 3 se despliega el nombre de archivo que por omisión tiene una nueva gráfica; y en la barra de menúes se activa una de las entradas (paso 2). Ahora, seleccione la opción “Salida” del menú “Archivo” (paso 3), y el sistema muestra una caja de mensaje que pregunta al usuario si desea o no cerrar el programa (paso 4). Si se oprime el botón con el título “Si”, se repliega la caja de mensaje y se descarga la forma de la aplicación, y si por el contrario, se oprime el botón con título “No”, desaparece la caja de mensajes y el sistema entra en espera de que se efectúe una nueva acción.

Paso 1 Paso 2

Mensaje de estado delsistema

Coordenadas del punterodel ratón en twips

Nombre que por omisión tieneuna gráfica

12

Paso 31

2

Paso 4

Figura 2-2

Como puede ver toda acción del usuario sobre el sistema tiene una respuesta por parte de éste. Es conveniente que siga el caso de uso “Interactuar con los controles de la aplicación” para que se familiarice con la forma en que la acción entre el usuario y el sistema queda de manifiesta en los diferentes diagramas de UML.

Recomendaciones y observaciones

Un elemento importante que se puede añadir a la interfaz es un sistema de ayuda que puede ser creado con facilidad con el entorno de trabajo de Visual Basic. En [EVB] se puede encontrar una guía para hacerlo.

Paso 2

Capitulo3 Creación de la gráfica

7

Capítulo 3

Creación de la gráfica G(V,A)

Según su definición matemática, una gráfica G consiste en un conjunto finito y no vació V=V(G) de p puntos o nodos junto con un conjunto A de pares no ordenados de puntos distintos de V. Cada par a = {u,v} de puntos en A es una arista de G, y se dice que a une a u y v y que u y v son puntos adyacentes. Modelar este concepto utilizando el diseño orientado a objetos (DOO) resulta inmediato: una gráfica se concibe como un objeto que va a contener una colección de objetos (ver apéndice), nodos y una de objetos aristas (ver apéndice A4). Agregue al proyecto las modificaciones y el módulo de clase CGrafica que se muestra en el listado 3.1.

La clase ofrece las siguientes propiedades y operaciones.

PROPIEDADES DESCRIPCIÖN

m_colNodos (privada) Colección de objetos nodo.

m_colAristas (privada) Colección de objetos arista.

m_sNombreArchivo (privada) Nombre del archivo de la gráfica.

Tabla 3-1. Propiedades de la clase CGrafica

OPERACIONES FUNCIÓN

Class_Initialize() Cosntructor

Tabla 3-2. Métodos de la clase CGrafica

Ejecute el programa y siga las acciones que se indican en el caso de uso “Crear una nueva gráfica”. En este caso la respuesta del sistema es únicamente interna: se crea una instancia de la clase CGrafica que se puede ver como un contenedor de objetos nodos y aristas que en este momento se encuentra vacío.

Capitulo 5 Apuntar Nodos

8

Capítulo 4 Dibujo de los Nodos

Dibujar, en la pantalla, los círculos que representan a los nodos se puede hacer usando la función de biblioteca Circle(). Al código de la aplicación añada las líneas en negrita que se muestran en el listado 4.1STYLEREFSEQARABIC y cambie el valor de las propiedades de la Tabla 4-1.

OBJET PROPIEDAD VALOR Form AutoRedraw True

Tabla 4-1

La propiedad Autoredraw , con el valor verdadero, activa el redibujado automático de la pantalla lo que permite redimensionar la ventana, minimizarla -maximizarla, o encimar otra ventana sobre el área de dibujo de la aplicación sin que su contenido, aparentemente, sufra alteraciones.

Ejecute la aplicación, seleccione la opción “Nodos” del menú “Figura”, y el sistema responde cambiando la forma del puntero del ratón a una cruz, y desplegando el mensaje: “Haga clic con el botón izquierdo del ratón para dibujar un nodo”. Estando el puntero del ratón en el área de dibujo, presione y suelte rápidamente el botón izquierdo y el sistema dibuja un círculo. A continuación, realice algunas operaciones con las ventanas y podrá constatar que el dibujo permanece intacto, como si cada ventana estuviera en una pantalla diferente o en un plano distinto cuando en realidad lo que sucede es que los círculos se borran y se vuelven a dibujar automáticamente.

Observe que el estado en que se encuentra el sistema en un momento dado (en estado de espera, dibujando un nodo etc.), y las operaciones que se pueden realizar con él, quedan determinados por las acciones que se efectuaron con el sistema hasta ese instante. Internamente, el sistema tiene conocimiento de lo anterior por medio de las variables de las líneas 21-16 del listado 4.1 que toman los valores de las constantes de las líneas 39-41. Por ejemplo, al indicarle al sistema que se quiere dibujar un nodo se ejecutan las líneas 55-59 (paso 1, Figura 4-1), en donde se especifica que cuando se oprima un botón del ratón se va a crear un nodo. Ahora, si se presiona el botón izquierdo del ratón se dispara el procedimiento Form_MouseDown() ejecutándose las líneas 77-81 (paso 2, Figura 4-1), en las que se determina que al ocurrir el procedimiento de evento Form_MouseUp(), consecuencia de soltar el botón izquierdo, se debe dibujar un nodo en la pantalla (paso 3 Figura 4-1, líneas 112-131). Esto es importante porque, en resumen, es la forma en que opera la interfaz en cuanto al dibujo de gráfica G(V,A) lo que se puede ver más a detalle estudiando el caso de uso “Dibujo de los nodos”.

iAccionMouseMove = con_iNingunaAccioniAccionMouseDown = con_iCrearNodoiAccionMouseUp = con_iNingunaAccioniAccionDragOver = con_iNingunaAccioniAccionDragDrop = con_iNingunaAccion

:frmInterfaz

iAccionMouseMove = con_iNingunaAccioniAccionMouseDown = con_iMostrarNodoiAccionMouseUp = con_iNingunaAccioniAccionDragOver = con_iNingunaAccioniAccionDragDrop = con_iNingunaAccion

:frmInterfaz

iAccionMouseMove = con_iNingunaAccioniAccionMouseDown = con_iNingunaAccion iAccionMouseUp = con_iNingunaAccioniAccionDragOver = con_iNingunaAccioniAccionDragDrop = con_iNingunaAccion

:frmInterfaz

mnuNodo_Click()

Form_MouseDown(…)

Form_MouseUp(…)

Paso 1

Paso 2

Paso 3

12

1

2

Procedimientos de Evento

Figura 4-1

Paso 1


9

Continuemos con el dibujo de los nodos. La forma anterior de dibujarlos es buena pero, por ejemplo, si se requiere cambiar de color un nodo se tiene, entre otras cosas, que borrarlo y luego volverlo a pintar con las condiciones deseadas. En el programa de la interfaz, se uso un método más conveniente: Visual Basic, proporciona el control forma (shape) que permite dibujar rectángulos, cuadrados, círculos y, además, posee propiedades para controlar su posición, tamaño, color de borde, color del interior, recubrimiento etc. Agregue un control forma a su formulario, cambie los valores de las propiedades que se muestran en la Tabla 4-2 y modifique las funciones del listado 4.2STYLEREFSEQARABIC.

OBJETO PROPIEDAD VALOR Shape Name shpNodo

BackStyle 1-Opaque Visble False Index 0 Shape 3-Circle Height 420

Width 420

Tabla 4-2

El valor de cero que se establece a la propiedad index permite formar un arreglo de controles forma llamado shpNodo (ver apéndice A2).

Dibuje algunos nodos y vera que el comportamiento es similar al que tuvimos en el paso 1 pero el uso de las propiedades del control forma facilita el programar muchas de las tareas.

Internamente, los nodos se representan por medio de instancias de la clase CNodo cuyas propiedades y métodos se muestran en la Tabla 4-2, Tabla 4-3 y en el listado 4.3.

PROPIEDAD DESCRIPCIÓN

m_iIndiceNodo (privada) Almacena un número ordinal que representa el índice del nodo

m_siX (privada) Guarda la coordenada horizontal de la posición del nodo en la pantalla.

m_siY (privada) Guarda la coordenada vertical de la posición del nodo en la pantalla.

m_iAnchoNodo (privada) Almacena el tamaño (en twips) del ancho de la figura que representa al nodo en la pantalla.

m_iAlturaNodo (privada) Almacena el tamaño (en twips) de la altura de la figura que representa al nodo en la pantalla.

m_iEstadoNodo (privada) Almacena una constante entera que establece el estado del nodo

Tabla 4-3 Propiedades de la clase CNodo

Paso 2

Paso 3


10

MÉTODO FUNCIÓN

IndiceNodo (pública) Establece/proporciona el índice del nodo en la propiedad m_IindiceNodo

PosX (pública) Establece/proporciona la posición del nodo en la propiedad m_siX.

PosY (pública) Establece/proporciona la posición del nodo en la propiedad m_siY.

AlturaNodo (pública) Establece/proporciona la altura del nodo en la propiedad m_iAlturaNodo

AnchoNodo (pública) Establece/proporciona el ancho del nodo en la propiedad m_AnchoNodo

EstadoNodo (pública) Establece el estado del nodo en la propiedad m_iEstadoNodo

ColorNodo (pública) Establece el color del nodo en la pantalla

CrearFiguraNodo (pública) Crea la representación visual del nodo, establece su posición y tamaño en la pantalla, y asigna estos valores a las correspondientes propiedades del objeto nodo.

HacerNodoVisible (pública) Hace que la representación física del nodo (controles forma) sea visible en la pantalla.

Tabla 4-4. Métodos de la clase CNodo

NO olvidar que se añadió el módulo general

Cuando se dibuja un nuevo nodo se le asigna un número entero que lo distingue de los demás nodos presentes en la gráfica. Dicho índice, se almacena en la propiedad m_iIndiceNodo, y se calcula tomando el último elemento añadido a la colección de nodos e incrementando en uno su índice. Esto, garantiza, que siempre, el último elemento de la colección de nodos, tiene el mayor de los índices de todos los nodos. En caso de que la colección de nodos este vacía, entonces, se asigna un uno al índice de un nuevo nodo. También hay que resaltar el hecho de que el índice, del objeto nodo, se corresponde con la propiedad index , del control forma, que se emplea para representarlo en la pantalla. El manejo de los índices se puede apreciar mejor siguiendo el caso de uso “Dibujar un nuevo nodo”.

Siempre que se crea un nuevo nodo, su objeto nodo, se guarda en la colección de nodos del objeto gráfica (ver Capítulo 3) y para localizarlo dentro de está colección se utiliza como llave el valor del índice del nodo (m_iIndiceNodo). Las modificaciones a la clase CGrafica se muestran en la y en el listado 4.3.


m_Nodo (privada) Referencia a un objeto nodo.


MÉTODO FUNCIÓN

AgregarNodo(siX, siY) (pública) Crea un nuevo objeto nodo, establece sus propiedades de posición, tamaño, estado e índice y


11

lo añade a la colección de objetos nodo m_colNodos.

DibujarNodo (pública) Muestra, en la pantalla, los controles utilizados para representar a los nodos.

CalcularIndiceNodo (privada) Establece el índice de un nuevo nodo.


Al momento de crear un objeto, los valores de sus propiedades son incializados automáticamente pero, es conveniente asignarles un valor inicial que puedan tomar en el transcurso de la ejecución. A las variables de cadena, se les asigna una cadena nula (“”), y en el caso de las variables numéricas se asigna una constante (con_iInfinito), que se declara en el modulo general MGeneral con un valor de –1.


12

Capítulo 5 Apuntar Nodos

Al apuntar un nodo se muestra una ventana emergente con el índice del nodo. El implementar esta facilidad no es tan inmediato como establecer el valor de la propiedad tooltiptext del control forma igual al valor del índice del nodo que representa en la pantalla, porque simplemente, el control forma no cuenta con está propiedad, de hecho, tampoco cuenta con procedimientos de evento del ratón. Sin embargo, el control forma no impide que otro control, que si cuente con la propiedad tooltiptext y que se coloque exactamente debajo de éste, despliegue su ventana emergente cuando se le apunte con el puntero del ratón. Con este fin, se utiliza un arreglo de controles imagen (image), y cada nodo va a estar formado por un control imagen y, en cima de este, un control forma con las mismas dimensiones. Al formulario agregue un control imagen, establezca sus propiedades igual a las de la Tabla 5-1STYLEREFSEQARABIC y modifique los procedimientos que se muestran en el listado.

CONTROL PROPIEDAD VALOR

imagen Nombre imgNodo

Visible False

Index 0

Height 420

Width 420

Tabla 5-1

Ahora note que cada nodo constituye un área aparte del área de dibujo y de los demás nodos, con sus propias coordenadas y procedimientos de evento del ratón, es decir, cuando se desplaza el puntero del ratón sobre un nodo se dispara el procedimiento de evento MouseMove(…), del arreglo de controles imagen (ver apéndice A3), y no el de la forma de dibujo. Éste procedimiento, recibe como parámetros las coordenadas X, Y del puntero del ratón y el índice del control imagen sobre el que se está detectando la presencia del ratón. Las coordenadas del puntero del ratón X, Y están en función de la esquina superior derecha del control imagen, lo que obliga a tener que uniformar esta posición en función del área de dibujo de la forma, para poderla usar tanto para el desplazamiento de los nodos (capítulo 7) como para mostrarla en la barra de estado. Para tal fin, se suma, a las coordenadas X, Y la posición del extremo izquierdo del control imagen dada por la propiedades Left y top de dicho control. La figura muestra un ejemplo.


13

extremo

izquierdo

del

área

de

dibujo

Extremo superior del área de dibujo

s

r

T

L

Control imagenControl forma

Posición del control forma respecto de la esquinasuperior izquierda del área de dibujo (propiedadesLeft y Top del control imagen).

Posición (r, s) del puntero del ratón respecto de laesquina superior izquierda del control imagen

La posición del puntero del ratónrespecto del área dibujo está dadapor : X = L + r y Y = T + s.

Figura 5-1

Capitulo 6 Presionar/Seleccionar Nodos

14

Capítulo 6 Presionar/Seleccionar Nodos

Si alguna vez a utilizado una herramienta de dibujo por computadora que trabaje bajo Windows, seguramente habrá notado, que cuando se crea o se selecciona alguna figura, se muestran unos pequeños rectángulos en su periferia. Estos rectángulos son conocidos como controladores de tamaño y tienen dos fines: 1) indicar visualmente cuando un objeto ha sido seleccionado. y 2) permitir efectuar operaciones especiales como cambiar el tamaño de los objetos, cambiar su aspecto, rotarlos, eliminarlos etc.

En una interfaz estilo Windows, cuando se selecciona algún elemento éste pasa a ser el elemento activo y se dice que adquiere el enfoque o atención del sistema.

Los controladores de tamaño de los nodos se forman con un arreglo de ocho controles pintura (picture) con las propiedades indicadas en la Tabla 6-1STYLEREFSEQARABICSTYLEREFSEQARABIC.

OBJETO PROPIEDAD VALOR

picBox Nombre picControlador

Apperence 0-Flat

ScaleMode 1-Twips

Index 0

Height 90

Width 90

Visible False

Tabla 6-1

Los controladores de tamaño se van a mostrar siempre que se dibuje o se presione la figura de un nodo. En éste último caso, se dispara el procedimiento de evento imgNodo_DragOver(Index As Integer…) que recibe como parámetro la propiedad Index del control imagen sobre el que ésta el puntero del ratón. Como se vio en el capitulo 4, e l valor de ésta propiedad es el mismo que el valor del índice del objeto nodo (propiedad m_iIndiceNodo), y por tanto, se le emplea para extraer al objeto nodo de su colección y así poder usar sus propiedades de tamaño y posición, junto con las dimensiones de los controles pintura, para colocar los controladores de tamaño en la periferia de la figura del nodo. Las Figura 6-1 y Figura 6-2 muestran los cálculos realizados para colocar dos controladores de tamaño (los demás son similares). El valor de la propiedad iIndiceNodo se almacena en la propiedad m_iIndiceNodoEnfoque de la clase CGrafica con el fin de que el sistema tenga registro de cual es el nodo sobre el que debe efectuar las operaciones permitidas para estos elementos (moverlos eliminarlos etc.).

Un nodo pierde el enfoque cuando se presiona algún otro elemento de la gráfica o el área de dibujo de la aplicación. Lo anterior, lo registra el sistema, moviendo el valor de -1 a la propiedad m_iIndiceNodoEnfoque; y el usuario, lo percibe al eliminarse los controladores de tamaño del nodo.

Al igual que los nodos, los controladores también tienen una representación abstracta dada por un objeto, instancia de la clase CControlador, que contiene las operaciones para crear, mostrar y eliminar los controladores de tamaño cuyas propiedades y métodos se muestran a continuación.


15

MÉTODO FUNCIÓN

ConstruirControladoresNodo(siX, siY, iEjeMayor, iEjeMenor) (pública)

Crea los controladores de tamaño en la periferia de un nodo.

MostrarControladores (pública) Muestra los controladores de tamaño de un nodo.

EliminarControladores (pública) Oculta los controladores de tamaño de un nodo.

Tabla 6-2. Métodos de la clase CControladores

L

L/2

H/2H

x

h

lY

X

Control Imagen (Image Control)

Control Pintura (Picture Control)

Control Forma (Shape Control )

Controlador de Tamaño

Nodo

Extremo Izquierdo delArea de Dibujo

Extremo Superior del Area de Dibujo

X : Posición de los controles forma e imagen respecto del extremo izquierdo del área de dibujo ( propiedad Left del control)

Y : Posición de los controles forma e imagen respecto del extremo superior del área de dibujo ( propiedad Top del contro) .

L : Ancho de los controles forma e imagen (propiedad Width del control)

H : Altura de los controles forma e imagen (propiedad Height del control)

x : Posición del control pintura respecto del extremo izquierdo del área de dibujo

y : Posición del control pintura respecto del extremo superior del área de dibujo

l : Ancho del control pintura (propiedad Width del control)

h: Altura del control pintura (propiedad Height del control)

y = Y - h

Figura 6-1

L

L/2

H/2H

X

Y

h

y =Y - h

Control Imagen (Image Control )

Control Forma (Shape Control)

Nodo

Extremo Izquierdo delArea de Dibujo

Extremo Superior del Area de Dibujo

X + L/2

l/2

x = X + L/2 - l/2

Figura 6-2


16

Observaciones y recomendaciones

En el caso de los nodos, sus controladores de tamaño se muestran sin color de relleno (color blanco) indicando que no se pueden manipular para realizar una operación con los nodos. Se puede implementar que el usuario pueda arrastrar los controladores de tamaño para modificar las dimensiones de los nodos. Para implementar ésta operación puede ser útil el observar con detenimiento como funciona en la herramientas de dibujo de programas como MS-OFFICE.

Capitulo 5 Eliminación de Nodos

17

Capítulo 7 Modificación de la Posición de los Nodos

El cambio de la posición de los nodos se efectúa cuando se coloca el puntero del ratón sobre algún nodo (paso 1, figura ), se oprime el botón izquierdo del ratón (paso 2), y manteniéndolo así, se mueve el ratón para deslizar el nodo a una nueva posición en el área de dibujo (paso 3). En Windows, a ésta operación se le denomina arrastrar, y finaliza cuando se suelta el botón izquierdo y en consecuencia el nodo se fija en una nueva posición (paso 4).

Cuando se arrastra un nodo lo que se mueve al unísono con el puntero del ratón es una “copia” del nodo original y se presenta en la pantalla con línea punteada. La “copia” no es otra cosa que otro control forma, que al comienzo del arrastre de un nodo, se coloca en la misma posición de éste y adquiere sus mismas dimensiones. El control forma se mueve poniendo sus propiedades , Left y Top, iguales a las de las coordenadas del puntero del ratón. Ésta acción tiene lugar en el evento DragOver(…) de la forma de dibujo o del control imagen de algún otro nodo (el nodo se puede desplazar sobre ambos objetos). La Tabla 7-1, muestra las propiedades del control forma que representa a un nodo durante su operación de arrastre.


form (shape) Name shpNodoArrastre

shape 3-Circle

Height 420

Width 420

Visible False

BorderStyle 3-Dot

Tabla 7-1

Al momento de soltar un nodo ocurre el procedimiento de evento DragDrop(…) (de la forma o de algún control imagen) en el cual se destruyen los controladores de tamaño presentes en la pantalla y se desplazan los controles forma e imagen del nodo original a la misma posición del nodo punteado.

Es conveniente hacer notar que el procedimiento DragOver(…), es excluyente del procedimiento de evento MouseDown(…) lo que quiere decir que en cuanto se presiona un nodo inmediatamente se dispara el primer procedimiento ignorándose por completo al segundo. Por esto, la activación de arrastre del control imagen que forma a los nodos se codifico en el capítulo anterior, y la operación de presionar un nodo (antecedente de la operación de mover un nodo) se implementa en el procedimiento de evento DragOver(…).

Finalmente, para que el puntero del ratón adopte la forma que normalmente se muestra en las operaciones de arrastre se debe establecer la propiedad de la Tabla 7-2.


imgNodo DragIcon DragMove.cur

Tabla 7-2


18

1

1

2

Paso 1 Paso 2

Paso 3 Paso 4

1

Figura 7-1

Capítulo 8 Eliminación de Nodos

La supresión de los nodos del área de dibujo es la otra operación que se puede realizar sobre un nodo que tiene el enfoque del sistema.

Al seleccionar un nodo su índice se registra en la propiedad m_iIndiceNodoEnfoque (ver capítulo) para que

y en el momento en que el usuario oprime la tecla “Del” se extra éste valor se utiliza para extraer, de la colección de nodos, el objeto cuya propiedad . Con métodos del objeto nodo, se descarga los controles imagen y forma que lo representan en la pantalla (ver Apéndices A2 y A3) y de esta forma se elimina un nodo tanto internamente como del área de dibujo. Los controladores de tamaño son eliminados descargando los controles pintura que los forman en el área de dibujo.

El código para realizar estas acciones se colocar en el procedimiento de evento KeyDown que se dispara en respuesta a la opresión de la tecla “Del”. El uso de evento KeyDown(…) involucra un detalle técnico: se debe establecer, mediante la propiedad KeyPreview() del formulario principal que los eventos de teclado de los formularios se invocan antes que los eventos de teclado de los controles.

MÉTODO FUNCIÓN

EliminarNodo() Elimina, de la pantalla, el nodo que tiene el enfoque y suprime el correspondiente objeto nodo de la


19

colección de nodos.

Establece que ningún nodo tiene el enfoque.


MÉTODO FUNCIÓN

BorrarNodo() Se eliminan los controles que sirven para representar a los nodos en la pantalla.

Tabla 8-2. Métodos de la clase CNodo

Observaciones y recomendaciones

Por la forma en que se asigna un índice a un nuevo nodo

modificaciones se ilustran en el STYLEREFSEQARABIC.

Capitulo 10 Dibujar Aristas

20


21

Capítulo 9 Guardar/Recuperar una Gráfica de un Archivo

Con las características que hemos desarrollado hasta el momento podemos dibujar solo gráficas consistentes de nodos sin conectar, aun así, es conveniente que se pueda preservar la gráfica en un archivo para su posterior recuperación y edición.

Añada al proyecto los elementos que se muestran en la STYLEREFSEQARABICSTYLEREFSEQARABIC.


Caption Archivo Menú

Name MnuArchivo

Caption Abrir… Menú

Name mnuAbrir

Caption Guardar... Menú

Name mnuGuardar

CommnDialog Name comAbrirGuardar

Tabla 9-1

El control de diálogo estándar permite visualizar las cajas de diálogo más comunes empleadas en el diseño de aplicaciones, tales como Abrir (Open), Guardar (Save As), Imprimir (Print), Fuente (Font) y Color (Color ). En la aplicación vamos a utilizar las dos primeras, solo hay que establecer en forma convenientemente las propiedades del control y usar sus métodos (Ver [2] capitulo 8).

Para guardar una gráfica, se escribe un registro en un archivo binario por cada uno de los elementos contenidos en la colección de nodos del objeto gráfica. Los registros contienen una serie de campos con información que se toma de las propiedades de los objetos nodo y que es la i:

Índice del nodo.

Coordenadas de la posición del nodo.

Dimensiones del nodo.

La operación contraria, es decir, cargar una gráfica consiste en leer el archivo en forma secuencial y por cada registro que se encuentre se crea un nodo con el índice, la posición y el tamaño indicado en los campos del registro. En el código del listado , podrá observar que las operaciones que se utilizan para crear un nodo a partir del archivo son las mismas que se utilizan para crearlo a partir de los comandos que se ejecutan por medio de las opciones presentadas en la barra de menues de la interfaz.

Dado que en el momento de abrir un archivo puede darse la posibilidad de que se este editando una gráfica, es necesario borrar la gráfica existente antes de cargar una nueva. Ésta operación, es similar a la que se desarrollo para eliminar un solo nodo de la gráfica: se elimina el enfoque que pudiese estar sobre algún nodo y posteriormente se eliminan todos los elementos de la colección de nodos.


22

Recomendaciones

Existen diversas mejoras que se pueden implementar para mejorar las operaciones de guardar y recuperar una gráfica. Algunas de estas son las siguientes :

Si se esta editando una gráfica y se pretende crear una nueva gráfica, cargar una existente desde un archivo ó simplemente salir de la aplicación se puede implementar que el programa verifique que ya se hayan guardado las modificaciones, si no es así, el sistema debería desplegar algunas cajas de mensajes para informar de la situación al usuario.

Actualmente, cada vez que se guarda una gráfica se graban en el archivo todos los elementos de la gráfica cuando sólo es necesario guardar aquellos que hallan sufrido modificaciones. Para hacer más eficiente esta operación va a ser necesario encontrar una estructura de archivos adecuada; un libro que se recomienda para tal tema es:


23

Capítulo 10 Dibujo de las Aristas

Las Curvas de Bezier son elementos comúnmente usados en sistemas de diseño por computadora como Autocad, Adobe Illustrator y Macromedia Free Hand. En el apéndice C, se describe brevemente su historia, sus propiedades y su construcción. De la información contenida en el apéndice se puede ver que las Curvas de Bezier son ideales para el dibujo de las aristas de una gráfica G(V,A) ya que, con el manejo adecuado de sus puntos de control, se pueden trazar rectas, parábolas o cualquier curva; y para crearlas en el área de dibujo de nuestro programa se usa la función API polyBezier (apéndices A6, A7, A8), mientras que en forma abstracta quedan representadas por instancias de la clase CArista.

Los cambios a las clases y el código que se debe de añadir se muestran a continuación:


m_iIndiceAristaEnfoque (privada) Indice de la arista que tiene el enfoque

m_Arista (privada) Referencia a un objeto arista.



AgregarArista(siX, siY) (pública) Crea un nuevo objeto arista y establece su peso, posición (en base a las coocrenadas siX, siY), e índice.

DibujarArista (pública) Dibuja una arista en la pantalla con la función API polyBezier

IndiceArista (privada) Calcula el índice de la nueva arista

Tabla 10-2. Operaciones de la clase CGrafica


m_iIndiceArista (privada) Almacena un número ordinal que representa el índice de la arista .

m_PuntosControl[1..4] (privada) Arreglo que almacena los puntos de control de la Curva de Bezier.

m_iEstadoArista (privada) Guarda una constante que especifica el estado de la

arista.

m_sMensajeArista Almacena la descripción del estado de la arista

m_iAristaPeso (privada) Almacena el peso de la arista

Tabla 10-3. Propiedades de la clase CArista.


24


IndiceArista (pública) Establece el índice de la arista en la propiedad m_iIndiceArista.

EstadoArista (pública) Proporciona/Establece el estado de la arista en la propiedad m_iEstadoArista.

MensajeEstadoArista (pública) Proporciona/Establece la descripción del estado de la arista en la propiedad m_sMensajeArista.

PesoArista (pública) Proporciona/Establece el valor del peso de la arista en la propiedad m_iPesoArista.

X1 Proporciona la coordenada x del punto de control 1 de la Curva de Bezier que representa a la arista en la pantalla.

Y1 Proporciona la coordenada y del punto de control 1 de la Curva de Bezier que representa a la arista en la pantalla.







EstablecerPuntosControl (pública) Asigna la posición de los puntos de control de la Curva de Bezier en base a la posición actual del puntero del ratón y los almacena en el arreglo m_PuntosControl().

HacerAristaVisible (pública) Dibuja una Curva de Bezier en el área de dibujo.

Tabla 10-4. Operaciones de la clase CArista.

Si sigue el caso de uso “Dibujar una arista” podrá ver que se pintan rectas verticales. Esta es la forma que por omisión se dibujan por primera vez las Curvas de Bezier, y para lograr esto, únicamente se


25

colocan los puntos de control de tal forma que sean colineales. Por otro lado, el manejo de los índices de las aristas es similar al que se hizo con los nodos, de hecho, en el transcurso del desarrollo de su aplicación podrá apreciar esta simetría entre las operaciones de los nodos y de las aristas.

Capitulo 12 Seleccionar Aristas

26

Capítulo 11 Apuntar Aristas

Las aristas no fueron creadas con un control OCX o ActiveX, como en el caso de los nodos, por lo que no contamos con ningún procedimiento de evento preestablecido que detecte cuando el puntero del ratón se encuentra sobre de una arista.

Con el propósito de determinar si un punto P(x,y), se encuentra sobre de una Curva de Bezier, se calculan, mediante las ecuaciones parámetricas de las curvas, todos sus puntos P’(x,y) que pertenecen a ella , y si la diferencia entre un par de puntos P y P’ es menor que una ε , entonces se puede decir que P pertenece a la curva. Este procedimiento se realiza para todas las curvas presentes en la gráfica cada vez que el puntero del ratón cambia de posición.

El cálculo de los coeficientes de las ecuaciones parámetricas de una curva (ver apéndice), se hace a base de los puntos de control almacenados en los correspondientes objetos arista ( instancia de la clase CArista), que se obtienen de la colección de aristas de la gráfica. El parámetro t, de las ecuaciones paramétricas, se varia entre 0 y 1 con un paso o incremento (positivo), constante que se obtiene de dividir la longitud del intervalo [0,1] entre la longitud de la curva que se calcula de una manera aproximada al tomar la mayor distancia vertical u horizontal entre los puntos finales de la curva.

Siga el caso de uso “Apuntar una arista”, y vera que cuando se señala una arista se despliega una ventana emergente (tooltiotext), que en este caso está formada por una etiqueta que se muestra al lado del puntero del ratón, y que se oculta cuando se deja de apuntar la arista. También se puede apreciar que el índice de la arista se almacena en la propiedad m_iIndiceApuntarArista con el fin de que el sistema tenga conocimiento de la arista que se ésta apuntando.

Los elementos que se añadieron se muestran en las siguientes tablas y en el listado 11.1:


lblToolTipText Name lblToolTipText

Caption “”

BackColor &H00C0FFFF& (Información sobre herramientas)

Visible False

AutoSize True

Tabla 11-1


m_iIndiceApuntarArista (privada) Almacena el índice de la arista que se apunta con el ratón

Tabla 11-2 Propiedades de la clase CGrafica

MÉTODO FUNCIÓN

AristaMouseMove(siX, siY) (pública) Verifica si la coordenas (siX, siY) del puntero del ratón se encuentran pertenecen a alguna de las aristas presentes en el área de dibujo.

Tabla 11-3 Métodos de la clase CGrafica


27

MÉTODOS FUNCIÓN

VerificarPosRaton(siX, siY) (pública) Determina si las coordenadas (siX, siY), pertenecen a la Curva de Bezier que representa a la arista en la pantalla.

MuestraToolTipText() (pública) Despliega en la pantalla una ventana emergente cuando se apunta una arista. La ventana muestra el índice de la arista y la descripción del estado de la arista.

OcultaToolTipText() (pública) Repliega la ventana emergente (tooltiptext).

CalculoPuntosCurvaBezier(…) Calcula los puntos P’(x,y) que pertenecen a una Curva de Bezier.

CalculoPasoCurvaBezier(…) Calcula el incremento del parámetro t de las ecuaciones parámetricas de la Curva de Bezier.

Tabla 11-4. Métodos de la clase CArista

Observaciones y Recomendaciones

Como habrá podido percibir ésta es una de las operaciones más criticas que se tienen en la interfaz complejidad.


28

Capítulo 12 Seleccionar Aristas

Al seleccionar las aristas se muestran cuatro controladores de tamaño cada uno de los cuales se sitúa en un punto de control de la Curva de Bezier que representa a la arista. A diferencia de los controladores de los nodos, los de las aristas aparecen con un color de relleno (azul) para indicar, no sólo que la arista ha adquirido el enfoque del sistema, sino además, que los controladores pueden ser utilizados para modificar la posición y forma de las aristas (siguiente capítulo). Por lo demás, la operación de selección de la aristas es muy parecida a la de los nodos:

Internamente el sistema registra que una arista ha recibido el enfoque almacenando el valor de su índice en la propiedad m_iIndiceAristaEnfoque.

Una arista pierde el enfoque cuando el usuario selecciona otro elemento del área de dibujo y en consecuencia sus controladores de tamaño son eliminados y la propiedad m_iIndiceAristaEnfoque adquiere el valor de infinito.

Las modificaciones a las diferentes clases se especifican en las siguientes tablas y en el listado 12.1.

METODO FUNCIÓN

PresionarArista() (pública) Muestra los controladores de tamaño de una arista cuando esta se selecciona, y establece que ésta arista tiene el enfoque del sistema al almacenar en la propiedad m_iIndiceAristaEnfoque, el valor del índice de la arista.

Tabla 12-1

Capitulo 14 Eliminar Arista

29

Capítulo 13 Cambio de la Posición y Forma de una Arista

Una de las propiedades más útiles de las Curvas de Bezier es su invariancia ante transformaciones lineales (traslaciones , rotaciones, etc.), lo que quiere decir que si tenemos una curva y deseamos moverla basta con que se traslade a los puntos de control, no es necesario, aplicar la transformación lineal a cada punto de la curva por separado (ver apéndice). De esta forma, el usuario puede modificar la posición y forma de las aristas arrastrando alguno de los controladores de tamaño que se muestran cuando se selecciona una arista.

El método de animación o movimiento de un objeto en la pantalla de la computadora es bastante fácil: se borra la parte de la pantalla donde se visualiza el objeto y se revisualiza en su nueva posición que debe de estar muy cerca de la contigua. Estas acciones son efectuadas tan rápido por la computadora que son imperceptibles para el ojo humano, dando así la ilusión de acción o movimiento como en el cine. La mejor forma de realizar la visualización, borrado y revisualización del objeto es mediante realizando una operación lógica XOR entre los pixeles del dibujo y los que se encuentran presentes en el área de dibujo. De ésta forma, la primera vez que se dibuja un objeto en la pantalla se visualiza y la segunda vez que se dibuja en el mismo sitio, el contenido de la pantalla se restaura. La animación por computadora es un tema interesante y se pueden encontrar algunos principios en y

Aplicando lo anterior las aristas se mueven siguiendo los siguientes pasos.

Se dibuja una Curva de Bezier con línea punteada con los mis mos puntos de control que la arista que se desea modificar.

Al moverse algún punto de control, se dibuja otra Curva de Bezier con línea punteada y determinada por la nueva posición del punto de control que se desplazo.

Se elimina o borra la curva del paso 1. Los pasos 2 y 3 se ejecutan mientras se arrastre el controlador de tamaño.

Al soltar el controlador de tamaño la curva original se borra y se redibuja tomando los controladores de tamaño de la curva punteada y los controladores de tamaño se colocan en sus nuevas posiciones.

Para pintar o dibujar objetos en Visual Basic entran en juego las propiedades DrawMode AutoRedraw y ClipControls, y el método Refresh. La primera propiedad establece la forma en la que se van a combinar los pixeles de un objeto con los del lienzo de dibujo. La propiedad AutoRedraw y ClipControl controlan la forma en que se redibuja el contenido del área de dibujo, y el método Refresh fuerza a que se redibuje la pantalla. Para lograr el efecto de movimiento de la arista pintándola y borrándola en cada desplazamiento del controlador de tamaño, se tuvo que experimentar con diversos valores y combinación de las propiedades y métodos mencionados pues, desgraciadamente, el sólo combinar los pixeles de dibujo con los pixeles del fondo utilizando una operación XOR no fue suficiente en el ambiente de trabajo de VB. Los valores y la forma en que se usaron los métodos se puede apreciar mejor en el código.

Al presionar alguno de los controladores de tamaño de la arista se dispara el procedimiento de evento DragOver(Index…) del arreglo de controles pintura y el valor del parámetro index se utiliza para determinar cual es el punto de control que el usuario desea que se desplace.

El controlador se puede arrastrar y soltar en el área de dibujo o sobre de un nodo por lo que las operaciones para mover a las aristas se codifican por igual en los procedimientos DragOver y DragDrop tanto de la forma principal como del arreglo de controles imagen.

Capitulo 14 Eliminar Arista

30

Capitulo 14 Conexión/Desconexión de las Aristas

31

Capítulo 14 Conexión/Desconexión de Aristas y Nodos

El movimiento de los puntos finales de una arista sirve para poderlas conectar con los nodos y poder así formar cualquier gráfica G(V,A) .

La conexión del extremo de una arista con un nodo tiene lugar cuando el usuario arrastra uno de sus extremos (punto de control 1 o 4), por encima del perímetro de la circunferencia que representa al nodo, el sistema responde cambiando la forma del puntero del ratón, y entonces el usuario suelta el extremo de la arista.

Para determinar cuando un punto de control se encuentra en el contorno del un nodo, se utiliza la ecuación de la circunferencia con centro (h,k) cuyos parámetros se calculan en base a la dimensiones del nodo y a su posición.

Por otra parte, un objeto arista registra en sus propiedades m_iIndiceNodoAdyacente1 y m_iIndiceNodoAdyacente4, el índice del nodo que esta unido al punto de control 1 y al punto de control 4 respectivamente. Los objetos nodo, cuentan con una colección de objetos adyacencias que tienen dos propiedades: el índice de la arista y el punto de control que está unido al nodo. Cada objeto adyacencia queda identificado en su colección por una llave que consiste en la concatenación de sus dos propiedades (no puede ser únicamente el índice de la arista pues puede darse el caso de que los dos extremos de la arista se conecten a un mismo nodo).

Una arista se va a desconectar de un nodo cuando el usuario separe el extremo de la arista del perímetro del nodo y en consecuencia la propiedad m_iIndiceNodoAdyacente1 o m_iIndiceNodoAdyacente4, dependiendo del extremo que se separe, obtienen un valor de cero y el correspondiente objeto adyacencia es eliminado de la colección de adyacencias del nodo.

PROPIEDAD FUNCIÓN

m_iIndiceNodoAdyacente1 (privada) Almacena el índice del nodo que pudiese estar unido al extremo de la Curva de Bezier que corresponde con el punto de control 1.

m_iIndiceNodoAdyacente4 (privada) Almacena el índice del nodo que pudiese estar unido al extremo de la Curva de Bezier que corresponde con el punto de control 4.

Tabla 14-1. Propiedades de la clase CArista

PROPIEDAD FUNCIÓN

m_iIndiceAristaAdycente Registra el índice de la arista que adyacente a un nodo.

m_iIndicePuntoControl Registra el punto de control que se corresponde con el extremo que esta unido al nodo.

Tabla 14-2. Propiedades de la clase CAdycencia

PROPIEDAD FUNCIÓN

m_colAdyacencias Colección de adyacencias

Tabla 14-3. Propiedades de la clase CNodo

Capitulo 15 Conexión/Desconexión de las Aristas

32

Capítulo 15 Eliminar Arista

Otra operación que se puede hacer después de que se selecciona una arista es eliminarla cuando el usuario presiona la tecla “Del”. Una arista se suprime eliminando sus controladores de tamaño y pintando, sobre la Curva de Bezier que la representa, otra curva con valor.

El objeto arista que representa tambien se elimina se la pantalla.

Capitulo 17 Guardar/Recuperar una Gráfica de un Archivo II

33

Capítulo 16 Cambio de la Posición de los Nodos II

El conectar una o más aristas a un nodo implica que, cuando éste se desplace, también se tenga que mover el extremo de las aristas que están conectadas a él. Esta es precisamente la utilidad de los objetos instancia de la clase CAdyacencia. Como recordara, la clase CAdyacencia cuenta con las propiedades m_iIndiceArista y m_IndiceControlador de tal forma que al arrastrar un nodo se extrae de su colección de adyacencias todos los objetos que contiene y con sus propiedades se pueden obtener los correspondientes objetos arista de la colección de aristas de la gráfica y utilizar los métodos y propiedades que se desarrollaron en el capítulo anterior para desplazar a las aristas.

Capitulo 17 Guardar/Recuperar una Gráfica de un Archivo II

34

Capítulo 17 Guardar/Recuperar una Gráfica de un Archivo II

En el capitulo se abordo como guardar y recuperar una gráfica G(V,A), consistente solo de nodos, escribiendo en un archivo ciertas propiedades de los objetos nodo. Para ampliar estas operaciones de tal forma que se puedan guardar gráficas en la que existan conexiones entre los nodos, únicamente se amplía la información que en un principio se estaba guardando en el archivo:

Indice del nodo

Coordenadas de la posición del nodo

Dimensiones del nodo

Indice de la arista

Coordenadas de los puntos de control de la arista

Indice del nodo adyacente con el extremo que corresponde con el punto de control uno de la arista.

Indice del nodo adyacente con el extremo que corresponde con el punto de control cuatro de la arista.

Si observa con detenimiento esta es la información necesaria para poder reconstruir cualquier gráfica.

Capitulo 18 Eliminar Nodos y Aristas II

35

Capítulo 18 Eliminar Nodos y Aristas II

Otro aspecto, resultado de la unión de las aris tas y los nodos, es que si se suprime un nodo, se debe registrar este hecho en las aristas que se encuentran unidas a él, haciendo que sus propiedades m_iIndiceNodoAdyacente1 e m_iIndiceNodoAdyacente4 tomen un valor de cero. En el caso de que se elimine una arista se tiene que eliminar el correspondiente objeto adyacencia de la colección de adyacencias de los nodos a los que estén unidos los extremos de la arista.


36

Capítulo 19 Creación del Programa Simulador

El algoritmo distribuido de búsqueda en profundidad DFS (ver apéndice) se va a emplear para mostrar la creación de un programa simulador en base al paquete de clases mencionado en el prefacio. La simulación va a ser dirigida por eventos (ver apéndice) y nos va a mostrar el funcionamiento del algoritmo.

Así pues, el sistema esta formado por el algoritmo DFS y sus elementos: los tipos de mensajes que intercambian los nodos y los diferentes estados en los que pueden estar.

En este caso, no hay que hacer mucho esfuerzo para encontrar el modelo, el sistema mismo lo constituye y el envío de los mensajes ente los nodos (lo que involucra cambios en sus estados) es el evento que se va a controlar.

Una vez teniendo el modelo lo que resta es la programación del simulador. Una simulación de eventos discretos consta de varios elementos (ver apéndice). Las clases que se proporcionan en el paquete sirven para crear objetos que cumplen con las funciones de estos elementos independientemente del sistema cuyo modelo se quiera simular (ver apéndice).

Programa principal . Al proyecto que inicio en el apéndice, añada un archivo fuente de código (C++ source file) y escriba el código que se muestra en el listado para declarar las clases Message y DFS. La razón de que la función principal main(…) haya sido sustituida por la función principal WinMain(..) es porque se va a crear una aplicación para Windows y no una de consola (la explicación se va a ampliar en los capítulos siguientes).

En el archivo cabecera event.h, mediante enumeraciones, se van a establecer los mensajes y los estados de los nodos particulares para el algoritmo DFS y la clase Message los va heredar junto con las funciones de la clase event para formar objetos que van a representar los eventos del modelo. Un evento va estar formado por: el tipo de mensaje que se envía, el valor del reloj del simulador, el nodo destino, el nodo fuente, y el estado del nodo después de enviar el mensaje. Estos datos van a ser manipulados por los métodos de la clase event.

Por su parte, la clase DFS, es la programación del algoritmo DFS y hereda el funcionamiento de la clase model que proporciona las rutinas para simular el envío y la recepción de los eventos (Rutinas de manejo de eventos).

Rutinas de entrada. La ejecución el algoritmo DFS se puede efectuar sobre diferentes gráficas G(V,A) cuya estructura se va a proporcionar al simulador a través de un archivo texto que guarda la representación de la gráfica G(V,A) en forma de listas de adyacencias (ver apéndice). El archivo, tiene un formato especial: cada renglón i esta formado por las adyacencias al nodo i separadas por espacios en blanco. Si las aristas de la gráfica tienen pesos, estos se escriben a continuación del nodo adyacente separados por una coma. La clase graph del paquete, permite crear objetos que procesan éste archivo y representan la lista de adyacencias de la gráfica en memoria con listas doblemente ligadas valiéndose del TDA que se encuentra en las clases parametrizadas LinkItem y LinkList. (Ver Figura 19-1).

Calendarizador de eve ntos y mecanismo de actualización de tiempo. La clase simulator sirve

para formar objetos que van a tener a su cargo la responsabilidad de programar los eventos. Estos objetos, van a utilizar el TDA que proporcionan las clases parametrizadas AVLItem y AVLTree para crear y manipular un árbol AVL con el propósito de utilizarlo como lista de eventos. La programación de los eventos se va a realizar por medio de una variable que el calendarizador va a incrementar, en un intervalo constante de tiempo, cada vez que se genere un evento y a insertar este evento en su lista para después atenderlo en lo futuro.


37

renglon 1 2:10 3:12renglon 2 1:10 3:11renglon 3 1:12 2:11

head

1

2

head 2 3 tail

Null

head 1 3 tail

Null

head

pos

pre

pos

Nullpre

pre

pos

Null

pre

3 head 1 3 tail

Null

1

2

3

10

11

12

Formato del archivo texto en donde se almacena la lista de adyacencias correspondiente a la gráfica G(V,A)Gráfica G(V,A)

Representación de las lista de adyacencias de la gráfica G(V,A) mediante listas doblemente ligadas

Figura 19-1. Representación de una gráfica G(V,A) mediante listas de adyacencias

Ahora debemos que tener en cuenta que el sistema es distribuido y que en cada uno de los nodos de la gráfica se va a simular la ejecución del algoritmo DFS, en consecuencia, se debe de crear un proceso simulador para cada nodo y debe de existir un elemento que controle la acción entre los diferentes procesos. Los objetos instancia de la clase Simulation, para abreviar llamémoslos Simulacion, permiten hacer esto, es decir, dada la representación de la gráfica G(V,A), y el modelo del DFS, crean un objeto proceso para cada nodo, que asocia a estos dos elementos, y los guardan en una tabla de procesos que en realidad es un árbol AVL. Cuando se ejecuta la simulación, cada uno los nodos produce eventos que el calendarizador programa y coloca en su lis ta de eventos para que, por acción del objeto Simulacion, el calendarizador los extraiga, se determine el nodo a que va dirigido el evento se localice el correspondiente proceso en la tabla y se le envíe el evento.

La simulación va a terminar cuando no más eventos que atender o cuando se haya alcanzando la el intervalo de duración.

El algoritmo DFS se incia cuando arbitrariamente se envia un paquete de despierta, esta rutina esta contemplada en la clase Simulation.


38

Capítulo 20 Unión del Programa Simulador y la Iterfaz Gráfica

En el capítulo anterior, se puede apreciar que la simulación del algoritmo DFS se ejecuta sobre la representación abstracta de una gráfica V(G,A), y que el evento de enviar un mensaje, de un nodo a otro, involucra varios elementos: un tipo de mensaje, un destinatario, un remitente, un cambio de estado del nodo emisor y un señalamiento de aristas. Estos elementos, son los que precisamente, se requiere que la interfaz represente, en la pantalla de la computadora, mediante cambios de color en el dibujo de la gráfica G(V,A) , animaciones, presentación de mensajes descriptivos etc. En pocas palabras la interfaz debe mostrar algo parecido a la figura.

El dibujo de la gráfica se desarrolló en las dos secciones anteriores, ahora nos resta unir la interfaz gráfica y los programas simuladores. Para evitar hacer la migración de una de las dos partes al lenguaje de la otra, se plantearon dos caminos: 1) La creación de una biblioteca dinámica (ver apéndice) para el programa simulador, que sería enla zada en tiempo de ejecución y se comunicaría con la interfaz, mediante parámetros. 2) Aprovechar la multitarea de Windows 95 y sus facilidades para el manejo y comunicación de procesos (ver apéndice). La primera opción es buena pero, lo que se requiere es que en un futuro la interfaz pueda ser ejecutada en un ambiente distribuido y lo más cercano que se tiene en una PC es la segunda opción, además que de esta forma la interfaz puede adaptarse para representar la simulación de diferentes modelos de sistemas sin tener que hacer grandes modificaciones.

De esta forma, la aplicación se divide en un subproceso de primer plano para la interfaz gráfica y un subproceso de segundo plano o fondo para el programa del algoritmo simulador. Al subproceso de primer plano, se le asigna la responsabilidad de la interacción con el usuario, de la representación visual de los eventos de la simulación y de comunicar al proceso de segundo plano, tanto la estructura de la gráfica que se dibujo, como comandos de control; mientras que, el subproceso de segundo plano, va a efectuar el proceso de simulación y a comunicar a la interfaz los eventos de la simulación permaneciendo en todo momento receptivo a los comandos que envíe el proceso de primer plano.

El proceso de la interfaz, lo crea automáticamente el sistema operativo cuando se ejecuta la aplicación pero, para crear el proceso simulador en el momento, y del programa, que el usuario requiera se utiliza una función especial que se ejecuta en el programa de la interfaz.

Configuración de la ruta y el nombre del archivo del proceso simulador

Antes de permitir que el usuario configure la ejecución de la simulación, es conveniente validar que la gráfica G(V,A), dibujada por el usuario en la pantalla de la interfaz, sea conexa , debido a que con el paquete de clases sólo se pueden programar simuladores que trabajen con este tipo de gráficas. Para tal efecto, se revisa que la colección de adyacencias, de cada objeto nodo, tenga por lo menos un elemento, y en lo que respecta a las aristas, las propiedades m_iInidceNodoAdycente1 y m_iIndiceNodoAdycente4 deberán de tener un valor diferente de ∞ (ver capitulo). Si la validación resulta satisfactoria, se presenta un cuadro de diálogo para que se pueda escoger la ubicación y el nombre del archivo ejecutable del programa simulador; se deshabita el modo de edición de la interfaz, pues, no tiene caso permitir que el usuario haga modificaciones a la gráfica durante la simulación; y se crea un objeto, instancia de la clase CSimulacion, que va a proveer los métodos y propiedades para el control de la representación de los eventos del simulador. En caso de que en la gráfica haya un elemento sin conectar, se muestra un mensaje de error, y se sitúa el enfoque sobre de éste para que pueda ser editado.

Agregue, a la barra de menues de la aplicación de la interfaz, los elementos que se muestran en la Tabla 20-1, la clase CSimulacion (ver Tabla 20-2 y Tabla 20-3) y el código del listado.


Caption Simulación Menu

Name mnuSimulacion


39

Caption Archivos Menu

Name mnuArchivosSimulacion

Caption Programa Simulador… Menu

Name mnuProgramaSimulador

Caption Matriz Adyacencia Menu

Name mnuMatrizAdyacencia

Caption Iniciar Menu

Name mnuIniciarSimulacion

Caption Terminar Menu

Name mnuTerminarSimulacion

Caption Iterrumpir Menu

Name mnuInterrumpirSimulacion

Caption Continuar Menu

Name mnuContinuarSimulacion

Caption - Menu

Name mnuLinea

Caption Editar Gráfica Menu

Name mnuEditarGrafica

Tabla 20-1

ATRIBUTO DESCRIOPCIÓN

m_sRutaNombreArchivoSimulador

Almacena una cadena consistente en la ruta y nombre del archivo ejecutable del programa simulador

Tabla 20-2. Propiedades de la clase CSimulación

MÉTODO DESCRIPCIÓN

RutaNombreArchivoSimulador Procedimiento de propiedad que establece el nombre del archivo ejecutable del algoritmo simulador

Tabla 20-3. Métodos de la clase CSimulacion

Generación del archivo de adyacencias

En la interfaz la representación interna se realiza con una matriz de adyacencias y no por medio de listas de adyacencias (ver apéndice), como se hace en los programas simuladores, porque con VB no se cuenta con la facilidad de crear listas ligas pero si de crear arreglos dinámicos en tiempo de ejecución (ver apéndice).

Como los nodos de la gráfica pueden suprimirse, no siempre el número total de ellos coincide con el mayor de los índices de los nodos presentes en la gráfica y debido a esto el tamaño de la matriz de adyacencia se va a fijar en función del índice del último elemento de la colección de nodos de la gráfica,


40

que tiene el mayor valor de todos los índices de los nodos (ver capitulo). La Figura 20-1 representa la creación de la matriz de adyacencia para una gráfica sencilla.

Las propiedades m_iIndiceNodoAdyacente1 y m_iIndiceNodoAdyacente4, de un objeto arista, nos indican los índices de los nodos a los que conecta y las vamos a utilizar para establecer las entradas de la matriz. En cada entrada M(m_iIndiceNodoAdyacente1, m_iIndiceNodoAdyacente4) se va almacenar un tipo de dato definido por el usuario consistente en el índice de la arista y el peso de la arista; las demás entradas tendrán un valor de ∞ en estos campos. En el llenado de la matriz se va a aprovechar el hecho de que las gráfica G(V,A) son no dirigidas y por consiguiente su matrices son simétricas respecto de la diagonal, es decir M(i,j) = M(j,i ).

Lo último que resta es generar el archivo texto con la estructura de la gráfica G(V,A) en forma de lista de adyacencias en la ubicación y con el nombre proporcionado por el usuario. Para tal efecto, se recorre la matriz de adyacencia fila por fila y, por cada fila , se toman las columnas que tienen un valor diferente de ∞ y se concatenan para luego escribirse en el archivo. Si alguna de la filas de la matriz contiene sólo valores de ∞ se ignora. La figura muestra la generación del archivo de listas de adyacencias

El código y los nuevos elementos de la clase CSimulacion se muestran en el listado y en las tablas Tabla 20-4 y Tabla 20-5.

ATRIBUTO DESCRIPCIÓN

m_sRutaNombreArchivoDeAdyacencias

Almacena una cadena consistente en la ruta y nombre del archivo texto en el que se va a generar la lista de adyacencias de la gráfica G(V,A) que se tiene en la pantalla.


METODO DESCRIOPCIÓN

CrearMatrizAdyacencia()

Genera la matriz de adyacencia de la gráfica que se muestra en la pantalla y la escribe en un archivo con el formato que requiere el programa simulador.

Tabla 20-5. Métodos de la clase CSimulación

22

m_Arista:CArista

m_iIndiceArista = 1m_iIndiceNodoAdyacente1 = 2m_iIndiceNodoAdyacente4 = 4

m_AristaPeso = -1

m_Arista:CArista


m_AristaPeso = -1

m_Arista:CArista


m_AristaPeso = -1

m_Arista:CArista


m_AristaPeso = -1

44

33

m_Arista:CArista

m_iIndiceArista =3m_iIndiceNodoAdyacente1 = 3m_iIndiceNodoAdyacente4 = 2

m_AristaPeso = -1

m_Arista:CArista

m_iIndiceArista =3m_iIndiceNodoAdyacente1 = 3m_iIndiceNodoAdyacente4 = 2

m_AristaPeso = -1

1

4

1

4

1

4

1 2 3 41 -1:-1 -1:-1 -1:-1 -1:-12 -1:-1 -1:-1 3:-1 1:-13 3:-1 2:-14 1:-1 2:-1

m_Nodo:CNodo

m_iIndiceNodo =4m_coAdyacencias

m_Nodo:CNodo

m_iIndiceNodo =4m_coAdyacencias

El tamaño de la matriz se corresponde con el mayor delos índices de los nodos y NO CON EL NÜMERODE NODOS PRESENTES EN LA GRÄFICA

Indices de los nodos

Matriz(m_iIndiceNodoAdyacente1, m_iIndiceNodoAdyacente4) = Indice de la arista = 2Peso de la arista = -1

La matriz de adyacencia se forma en base a las propiedadesm_iIndiceNodoAdyacente1 y m_iIndiceNodoAdyacente4

Figura 20-1. Creación de la Matriz de Adyacencia


41

Creación del proceso simulador

El proceso para el programa simulador, se crea con ayuda de la función CreteProces(…) (ver apéndice). Esta función del API de Windows (ver apéndice), cuenta con varios parámetros, uno de los cuales, el lpCommandLine, nos va a servir para comunicar, al proceso simulador, el nombre del archivo en donde se encuentra la estructura de la gráfica G(V,A). El proceso simulador, por su parte, recibe el nombre del archivo a través de la función inicializar WinMain(…) y lo recupera usando otra función del API llamada GetCommandLine().

Otro aspecto que tiene lugar, junto con la creación del proceso simulador, es el empleo la función CreatePipe(…) para la generación de una tubería (Pipe). La función recibe dos parámetros l_hPipeRead y l_hPipeWrite en los cuales devuelve los descriptores para leer y escribir en el buffer de la tubería. El descriptor para escribir se pasa al proceso simulador por medio de la función SetStdHandle(…) y estableciendo como verdadero el parámetro bInheritHandles de la función CreateProcess(…), por su parte, el proceso simulador lo va a recupera usando la función GetStdHandle(…).

Los descriptores para leer y escribir en la tubería junto con los descriptores devueltos por CreateProcess(…) para acceder al proceso que crea, se conservan en un tipo definido por el usuario con el fin de utilizarlos cuando sea necesario.

Para usar las funciones API de deben declarar junto con las estructuras y las variables que utilizan en un modulo general al que llamaremos MProcesos (ver listado). Los demás cambios se muestran en el listado y en la Tabla 20-6 y Tabla 20-7.


m_typProcesoSimulador

Tipo definido por el usuario para almacenar los descriptores necesarios para controlar y comunicar a los procesos.


METODO DESCRIPCIÓN

CrearProcesoSimulador ()

Crea el proceso simulador y la tubería para comunicarlo con la interfaz.


Ya que hemos visto como se creo el canal de comunicación entre los procesos, lo siguiente, es ver la forma en que ambos procesos lo emplean.

Comunicación de los procesos

El programa simulador usa la tubería para comunicar al proceso de la interfaz los eventos que ocurren durante la simulación. Esto lo hace escribiendo, en el buffer de la tubería, una cadena de caracteres alfanuméricos consistente en los campos de que consta un evento: el índice del nodo receptor, el índice del nodo emisor, el código2 del estado al que cambio el nodo emisor, y el código del tipo de mensaje, separados por un carácter @. La formación de la cadena involucra el detalle de tener que transformar los campos numéricos a carácter lo cual no se puede hacer utilizando una de las funciones de

2 Los códigos, para los tipos de mensaje y estados de los nodos, son asignados arbitrariamente por el usuario y, en para el programa simulador, se declaran mediante enumeraciones en el archivo cabecera event.h (ver capitulo).


42

biblioteca de VC++ debido a que su uso causa serios problemas al momento de lanzar el proceso simulador, así que, se recurre a un viejo truco:

Todo carácter o símbolo se representa en una PC por un número decimal conocido como el código ASCII por ejemplo: las letras mayúsculas del alfabeto tienen asignados los códigos del 65 al 90 y los dígitos del 48 al 57, entonces, si queremos la representación de un número a carácter, basta con calcular e l código ASCII que le corresponde sumando a 48 (código del número cero) el número deseado. Por ejemplo, el código ASCII del número 5 es igual a 48 + 5 = 53. En el caso de números enteros de dos o más cifras, se separan las unidades, las decenas, las centenas…, que forman al número, cada una de estas partes se convierte a carácter y se concatenan respetando la posición.

Para escribir la cadena en el buffer de la tubería se emplea su descriptor de escritura y la función WriteFile(…) (ver apendice). Las adiciones al código del programa simulador se muestran en el listado.

Por su parte, la interfaz gráfica, usa la tubería para leer su contenido, operación que se realiza usando el descriptor de lectura y las funciones PeekNamedPipe() y ReadFile(…). La primera, proporciona el número de bytes disponibles en la tubería, y éste valor lo usa la segunda función para leer la cadena de caracteres y borrar el contenido de la tubería (ver apéndice).

Una vez que se tiene la cadena se separan sus campos. Como sabemos los campos están separados por un carácter de @, así que solo se recorre la cadena de izquierda a derecha, se concatena en diferentes todos aquellos caracteres que se encuentran antes de un separador y esta subcadena se almacenan en una variable. La operación se repite hasta que se encuentra el carácter #, que marca el fin de la cadena. Algunos de los campos corresponden a números, que se transformaron a carácter en el proceso simulador, y en consecuencia, se hace la operación inversa pero, esta vez, con la comodidad del uso de las funciones de biblioteca de VB. El código se muestra en el listado, y los nuevos elementos de la clase CSimulación, en la Tabla 20-8 y Tabla 20-9.


m_iCamposNumericos()

En cada una de las entradas del arreglo se almacena un campo numérico proveniente de la cadena de caracteres que envía el proceso simulador a la interfaz por medio de la tubería.

m_sCamposAlfabeticos ()

En cada una de las entradas del arreglo se almacena un campo alfabético proveniente de la cadena de caracteres que envía el proceso simulador a la interfaz por medio de la tubería.


METODO DESCRIPCIÓN

LeerMensajeDelSimulador ()

Lee la cadena de caracteres que el proceso simulador escribe en la tubería y separa los campos que la componen.


Representación de los eventos en la simulación

Los códigos y descripciones, de los tipos de mensajes y de los tipos de estados de los nodos y las aristas se declaran en un modulo general que puede ser intercambiable y los valores son idénticos a los establecidos en el programa simulador. En éste modulo también se declaran los colores que, arbitrariamente, se les va asociar a cada tipo de estado y mensaje En el caso del ejemplo que se ha venido desarrollado el módulo se llama MDFS y se muestra en el listado.

Los cambios de estado de los nodos se muestran mediante cambios de color y las ventanas emergentes de los nodos muestran el índice del nodo junto con una descripción de su estado actual.


43

Al comienzo de la simulación se extraen todos los objetos nodo de su colección y mediante sus propiedades de apariencia se establece el estado inicial indicado por el modelo. En caso contrario, es decir, en el transcurso de la simulación, con el campo que contiene el índice del nodo fuente, se obtiene el correspondiente objeto nodo de la colección de nodos de la gráfica y su apariencia, en la pantalla, la determina el campo relacionado con el estado que adquiere el nodo fuente después de emitir un mensaje. Las modificaciones a la aplicación y a las clases se muestran a continuación.

El envío de un mensaje de un nodo a otro se representa por medio de la animación de un pequeño rectángulo sobre la arista que une a los nodos. El rectángulo ésta formado por un control pintura y muestra diferentes colores dependiendo del código del tipo de mensaje y, cuando se le apunta, despliega una ventana emergente con la descripción del mensaje. En el capítulo anterior, se vio que para iniciar la simulación, se escoge un nodo al azar y se le envía un mensaje haciendo el nodo fuente igual al nodo destino, en éste caso, no se simula el envío del mensaje. El control pintura que se agrega a la aplicación de la interfaz se muestran en la Tabla 20-10. Las modificaciones al proyecto de la interfaz se muestran a continuación.


pintura Name picMensaje

Height 9

Width 9

ScaleMode 1-Twip

Visible False

Tabla 20-10

Con los campos que contienen a los índices de los nodos emisor y receptor de un mensaje, se extrae de la matriz de adyacencia, el índice de la arista que los une, y con éste valor, se obtiene el correspondiente objeto de la colección de aristas de la gráfica. Después, el índice del nodo fuente se compara con el valor de las propiedades iIndiceNodoAdyacente1 e iIndiceNodoAdyacente4, del objeto arista, para saber a que extremo de la arista esta unido el nodo y determinar el sentido del movimiento del control que representa el mensaje. El movimiento del control se simula colocándolo en distintos puntos de la Curva de Bezier que representa a la arista. Dichos puntos, se calculan con ayuda de las ecuaciones paramétricas de las Curvas Bezier y haciendo variar el parámetro t, entre 0 y 1 si el extremo de la arista que coincide con el punto de control 1 esta unido al nodo emisor, y de 1 a 0 si, por el contrario, el extremo de la arista que coincide es el del punto de control 4. A continuación se muestran los elementos que se deben de añadir.

Las aristas se marcan cambiando su color. En el paso anterior, se obtuvo el objeto arista que une al nodo emisor y receptor, los métodos de éste objeto se emplean para borrarlo de la pantalla y después pintarlo de algún color diferente al que se encontraba. En el algoritmo DFS, esto ocurre cuando un nodo envía un paquete de “REGRESA”. Al igual que con los nodos, al comienzo del algoritmo se establece un estado inicial para todo el conjunto de aristas.

Sincronización de los procesos

El proceso de la interfaz y el proceso del programa simulador sincronizan sus actividades con ayuda de otras dos funciones del API. Inmediatamente después, de que el proceso simulador escribe en la tubería la descripción de un evento, suspende su ejecución mediante una llamada a la función SuspendThread(…). En contraparte, si la operación de lectura de la tubería ésta activa, el proceso de la interfaz, recupera la descripción del evento, activa de nueva cuenta al proceso simulador con una llamada a la función ResumeThread(...) y desactiva la operación de lectura de la tubería para permitir que se lleve a cabo la representación del evento en la pantalla de la computadora, terminada la representación se vuelve a activar la lectura de la tubería y se repite el ciclo. Ambas funciones, ResumeThread(...) y SuspendThread(…) usan el descriptor del proceso de segundo plano, la primera recibe el valor que se conservo en un tipo definido por el usuario (ver el apartado creación del proceso simulador), y la segunda lo obtiene a través de la función GetCurrentThread().


44

El ciclo es controlado por un control timer, dicho control funciona como un reloj despertador que se activa cada cierto intervalo de tiempo y ejecuta las actividades que se han descrito. Cabe mencionar que las operaciones que involucra la animación de un mensaje sobre la arista: 1) el calculo de un punto de la Curva de Bezier, 2) trasladar el control usado para representar el mensaje a ésta nueva posición y repetir el punto 1 hasta que se termine de recorrer la arista, no son controladas por una sentencia de repetición (como el while), sino por el reloj. La figura ilustra lo anterior.

Control de la simulación por parte del usuario

El proceso de la simulación puede estar en ejecución, interrumpido o finalizado. En el estado de ejecución, se lee la tubería y se realiza la representación visual de los eventos de la simulación, éste proceso puede ser detenido por el usuario para examinar un determinado estado de la simulación, y después , cuando lo desee, volverlo a ejecutar. O bien, se puede optar por terminar la representación y entonces se termina el proceso simulador ejecutando la función TerminateProcess(…) con el descriptor del proceso simulador.

. El estado del proceso de representación queda registrado en el propiedad de la clase CSimulación

22

Nodo:CNodo

m_iIndiceNodo = 1

Nodo:CNodo

m_iIndiceNodo = 2

Arista: CArista


m_PuntoControl()

112@1@1@A@#

Punto de control 1

Punto de control 4DESCUBRE

Sentido de Recorrido

Campo 1Nodo Destino

Campo 2Nodo Fuente

Campo 3Estado del Nodo Fuente

Campo 4Tipo de Mensaje

MDFS

A = “DESCUBRE”1 = BUSQUEDA

MDFS

A = “DESCUBRE”1 = BUSQUEDA

Mensaje que envía el proceso simulador

x a t b t c t d

y a t b t c t dx x x x

y y y y

= + + +

= + + +

3 2

3 2

Ecuaciones paramétricas de la Curva de Bezier

El parámetro t varía de 0 a 1

Mensaje(x,y)

BUSQUEDA

BUSQUEDA

Figura 20-2


45

22

Nodo:CNodo

m_iIndiceNodo = 1

Nodo:CNodo

m_iIndiceNodo = 2

Arista: CArista


m_PuntoControl()

111@2@1@B@#

Punto de control 1

Punto de control 4

RECHAZASentido de Recorrido

Campo 1Nodo Destino

Campo 2Nodo Fuente

Campo 3Estado del Nodo Fuente

Campo 4Tipo de Mensaje

MDFS

B = “RECHAZO”1 = BUSQUEDA

MDFS

B = “RECHAZO”1 = BUSQUEDA

Mensaje que envía el proceso simulador

x a t b t c t d

y a t b t c t dx x x x

y y y y

= + + +

= + + +

3 2

3 2

Ecuaciones paramétricas de la Curva de Bezier

El parámetro t varía de 1 a 0

Mensaje

(x,y)

BUSQUEDA

BUSQUEDA

Obssrvaciones

Note que el sólo hecho de utilizar la multitarea y los procesos es sólo un pequeña parte de todo lo que se puede hacer para hacer independientes la interfaz y los programas simuladores. De hecho se todas los funciones que se presentan en el pueden ser factibles de cambio

Uno de los objetivos fundamentales que persigue la programación orientada a objetos es la reusabilidad y la extensibilidad que consisten en la creación de nuevas clases de objetos a partir de las ya existente, facilitándole con ello al programador el desarrollo de prototipos y una rápida exploración en las nuevas ideas: En los lenguajes orientados a objetos esto se logra mediante la redefinición de operadores y funciones, la genericidad, la herencia el polimorfismo


46

Administrador

DIAGRAMAS

Administrador

Vista de Diseño

Administrador

Vista de Contexto

http://148.206.53.231/UAMI10294VDisenio.xls

http://148.206.53.231/UAMI10294VContexto.xls


47

Apéndices

48

Bibliografía

[ WIG] The Windows Interface Guidelines for Software Design

Autor: Microsoft Corporation Editorial Microsoft Press

[ EMV] Enciclopedia de Microsoft Visual Basic 4

Autor: Francisco Javier Cevallos Editorial: AlfaOmega Grupo Editor, S.A de C.V

[EVB] La Esencia de Visual Basic 4

Autor: Mark Steven Heyman Editorial: Prentice Hall Hispanoamericana

[ 1] The Unified Modeling Language User Guide

Autor: Grady Bosh Editorial: Addison-Wesley

[ 2] Análisis y Diseño de Sistemas

Autor: Kenneth E. Kendall y Julie E. Kendall Editorial: Prentice Hall Hispanoamericana

[ 3 ] Redes Locales de Computadora. Protocolos de Alto Nivel y Evaluación de Prestaciones

Editorial: McGraw Hill. Autores: José Antao Beltrao, Jacques Philippe Sauvé, William Ferreirá Giozza.

[ 4] PC Interno5. Programación de Sistemas

Editorial: Marcombo Autores: Michael Tischer, Bruno Jennrich

[ 5] Introducción a la Teoría de Autómatas, Lenguajes y Computación

Editorial: CECSA Autores: John E. Hopcroft Jeffrey D. Ullman [ 6] Evaluando la complejidad de los algoritmos distribuidos. Autor: M. en C. Ricardo Marcelín Jiménez Departamento del Ingeniería Electrónica UAM-I [ 7] Busqueda en profundidad Autor: M. en C. Ricardo Marcelín Jiménez Departamento del Ingeniería Electrónica UAM-I [ 8] UML y patrones. Introducción al análisis y diseño orientado a objetos Autor: Craig Larman Editorial: Prentice Hall [ 9] Visual Basic 5.0. Programmers Guide To The Win 32 API Autor: Dan Appleman’s

[ALJOJE] Estructuras de datos y algoritmos Editorial: Addison Wesley Iberoamericana

Apéndices

49

Autor: Alfred V. Aho, John E. Hopcroft Jeffrey D.Ullman

Editorial: Ziff Davis -Press QA76.76 W5.6 A6.56 Editorial: Prentice Hall [ 10] X-Window. System Programming QA76.76 W5.6 C2 [ 11] The X-Window System and Motif . QA76.7 W5.6 N5.9 Editorial: Prentice Hall

MANUAL DE USUARIO

Manual de Usuario

1

Introducción

El presente manual, es una guía de instalación y uso de la interfaz gráfica desarrolladapara los programas simuladores creados a partir del paquete de clases desarrollado por el M. enC. Ricardo Marcelín Jiménez del Departamento de Ingeniería Electrica de la UniversidadAutónoma Metropolitana y que como proyecto terminal presenta el alumno Francisco RafaelHernández Cinta.

Aún a pesar de que se trato de mantener una alta calidad en el desarrollo del proyecto, esseguro que éste adolece de errores y deficiencias por lo que se agradecerán sus comentarios ysugerencias a [email protected].

En el desarrollo del manual se utilizo las siguientes figuras para representar lasoperaciones que se pueden realizar con el ratón:

Figura Nombre de la Operación

Apuntar.

Presionar.

Clic con el botón derecho del ratón.

Arrastrar.

Soltar.

Tabla 1. Figuras que representan diferentes operaciones con el ratón.

1

12

1

mailto:[email protected]

Interfaz Gráfica Para Un Simulador de Eventos Discretos

Con el fin de especificar la selección de entradas en los menues se sigue la mismanotación que se utiliza para indicar la ubicación de un archivo en un árbol de directorios:selección 1/selección 2/selección 3/....

Instalación de la Interfaz Gráfica Para Un Simulador de Eventos Discretos

Siga los siguientes pasos para instalar el programa:

1. Inserte el CD del proyecto en su computadora2. Abra el explorador de archivos de Windows y ejecute el archivo D:\Proyecto

II\Distribucion\Instalar\setup.exe3. Siga los pasos que indica el programa instalador.4. Si la instalación finalizo correctamente, en su menú inicio se habrá creado una

entrada en el grupo de programas llamada “SIMUAM” (Figura 1).

Figura 1

Ejecución de la Interfaz Gráfica Para Un Simulador de Eventos Discretos

Una vez instalado el programa, la ejecución es muy sencilla:

1. Abra el menú “Inicio” de la Barra de Tareas de Windows.2. Seleccione la entrada con el título “SIMUAM”.3. Ejecute el programa con el nombre “SIMUAM”, y se mostrará una ventana como

la que se muestra en la Figura 2. La ventana consta de las siguientes partes:

• Menú de control.• Barra de menues.

Manual de Usuario

3

• Área de dibujo.• Barra de estado consistente en tres paneles en los que, el programa,

despliega información acerca de la interacción del usuario con el sistema.

Panel 1: Despliega un mensaje que describe el estado del sistema oinstrucciones que debe de seguir el usuario.Panel 2: Muestra las coordenadas del ratón (en twips), en el área dedibujo respecto de la esquina superior izquierda de la ventana.Panel 3: Contiene el nombre de archivo de la gráfica que se estádibujando en la pantalla.

La ejecución del programa puede terminarse en cualquier instante de dos formas:

1. Seleccionar en la barra de menues la entrada Archivo/Salir.2. Seleccionar el botón cerrar de la barra de control (Figura 2).

Barra de Menus

Barra de Control

Barra de Estado

Panel 1 Panel 2 Panel 3

Area de Dibujo de la Gráfica

Botón minimizar

Botón maximizar

Botón cerrar

Figura 2

Dibujo de una Grafica

Una grafica se puede dibujar al seleccionar la entrada con el título “Archivo” de la barrade menues, y posteriormente haciendo clic con el botón derecho del ratón sobre la entrada“Nueva Gráfica” del menú descolgante (Figura 3). El programa responde habilitando la entrada“Figura” de la barra de menues y desplegando en la barra de estado los siguientes mensajes(Figura 4):


• Panel 1: Se muestra el mensaje “Listo” para indicar que el programa se encuentra enespera de cualquier acción del usuario.

• Panel 2: Coordenadas del ratón (en twips) en el área de dibujo.• Panel 3: Nombre del archivo (grafica.gra), que por omisión, tendrá la gráfica.

122

1

Figura 3

Panel 1 Panel 2 Panel 3

Figura 4

Manual de Usuario

5

Los nodos

Para dibujar los nodos de que constará su gráfica, seleccione la entrada Figura/Nodo dela barra de menues (Figura 5). El puntero del ratón cambia a una cruz simple que usted puededesplazar por el área de dibujo hasta el lugar en donde desea colocar su nodo (Figura 6). Actoseguido, haga clic con el botón derecho del ratón (vea el mensaje del panel 1 de la barra deestado en la Figura 6), y el programa dibuja un circulo con 8 pequeños rectángulos colocados ensu entorno(Figura 7) .

Los pequeños rectángulos son los manejadores de tamaño del nodo y tienen dos fines:

1. Permitir cambiar la forma y dimensiones del nodo. Ésta función no se encuentradisponible en esta versión y por tanto, los manejadores tienen un color blanco(deshabilitados).

2. Indicar que el nodo tiene el enfoque (atención) del sistema y que el usuario puedeefectuar cualquiera de las operaciones disponibles sobre el nodo:

122

1

Figura 5


Figura 6

Manejadores de Tamaño

Nodos

Figura 7

Las operaciones que, con el ratón, se pueden realizar sobre un nodo que tiene el enfoquese muestran en la Tabla 2.

Manual de Usuario

7

Operación Descripción de la Operación Respuesta del SistemaApuntar un nodo Se coloca el puntero del ratón sobre un nodo. El puntero del ratón cambia a una cruz simple,

y se despliega una ventana emergente con elíndice y el estado del nodo (Figura 8).

Presionar un nodo Sin dejar de apuntar un nodo se presiona el botónizquierdo del ratón.

Se muestran los controladores de tamaño delnodo para indicar que el nodo tiene el enfoquedel sistema (Figura 9).

Arrastrar un nodo Sin dejar de presionar un nodo se desplaza el punterodel ratón.

El puntero del ratón cambia su forma, de unacruz simple, a su forma de arrastre. Se muestraun nodo con línea punteada que se desplaza alunísono con el puntero del ratón (Figura 10).

Soltar un nodo Es el término de la operación de arrastre, y consisteen soltar el botón izquierdo del ratón.

El nodo con línea continua (sobre el que seempezó la operación de arrastre), se desplaza ala posición del nodo con línea punteada(Figura 11).

Tabla 2. Operaciones que se pueden realizar con los nodos

1 EDICIóN

Figura 8


Figura 9. Continuación de la Figura 8

Nodo con el enfoque y que se desea cambiar de posición.

Nodo con línea punteada que se mueve al unísonocon el puntero del ratón.

1

Figura 10

Manual de Usuario

9


La otra operación que se puede efectuar con un nodo que tiene el enfoque, es eliminarlode la gráfica al oprimir la tecla “Del”.

Tecla “Supr”

Figura 12


Las aristas

Para representar a las aristas, se utiliza a las llamadas Curvas de Bezier que por suspropiedades son ampliamente utilizadas en los paquetes de diseño como AutoCad. Una de suspropiedades más interesantes es el hecho de que basta desplazar uno de sus puntos de controlpara desplazar la posición de los puntos que conforma a la curva.

El dibujo de las aristas es similar al dibujo de los nodos. Seleccione la entradaFigura/Arista de la barra de menues (Figura 13). El sistema tiene dos respuestas (Figura 14):

1. En el panel 1 de la barra de estado, se despliega el mensaje “Haga clic para dibujar unaarista”.

2. El puntero del ratón cambia a una cruz simple que puede ser desplazada a cualquierparte del área de dibujo en donde desee crear su nueva arista.

122

1

Figura 13

Manual de Usuario

11


A continuación haga clic sobre el área de dibujo y el programa: 1) trazará una rectahorizontal con cuatro manejadores de tamaño distribuidos a lo largo de ésta; 2) se muestra elmensaje “Listo”, en el panel 1 de la barra de estado y por último 3) el puntero del ratón cambiaa su forma de selección normal (Figura 15).

Controladores de Tamaño(Habilitados)

122

1



Los manejadores de tamaño se encuentran colocados en los puntos de control de la arista(representada por una Curva de Bezier), y al igual que en el caso de los nodos sirven a dospropósitos: 1) indicar que la arista tiene el enfoque del sistema y 2) permitir modificar laposición y la forma de las aristas. En el caso de las aristas, los controladores de tamaño tienenun color azul con el fin de indicar que se encuentran habilitados (Figura 15).

Las operaciones que, con el ratón, se pueden realizar sobre una arista que tiene elenfoque se describen en la siguiente tabla:

Operación Descripción de la Operación Respuesta del SistemaApuntar una arista Colocar el puntero del ratón sobre una arista. El puntero del ratón cambia a una cruz

simple, y se muestra una ventana emergente(tooltiptext), que contiene el índice de laarista y la descripción. del estado de la arista(Figura 16).

Presionar una arista Sin dejar de apuntar una arista, se presiona el botónizquierdo del ratón.

Aparecen los controladores de tamaño de laarista para indicar que ésta tiene el enfoque(Figura 17).

Apuntar un controlador detamaño de la arista.

Se coloca el puntero del ratón sobre cualquiera de loscontroladores de tamaño de la arista.

El puntero del ratón cambia a una cruzsimple. En el panel 1 de la barra de estado,se despliega el mensaje “Arrastre el ratónpara mover el punto de control” (Figura18) .

Arrastrar un controlador detamaño de la arista.

Se presiona cualquiera de los controladores de tamañode una arista y acto seguido, sin soltar el botónizquierdo del ratón, se desplaza el puntero del ratón.

Se muestra una arista en línea punteada quemodifica su forma conforme se mueve elpunto de control al unísono con el punterodel ratón (Figura 19).

Soltar un controlador de tamañode la arista.

Es el fin de una operación de arrastre. Se suelta elbotón izquierdo del ratón.

La arista original adopta la forma y posiciónde la arista con línea punteada (Figura 20).

Tabla 3. Operaciones que se pueden realizar con las aristas

Manual de Usuario

13

Figura 16



Figura 18

1


Manual de Usuario

15

1

1

22


Conexión de Curvas de Bezier y Nodos

Propiamente hablando, una arista es una conexión entre un par de nodos. Para conectaruna Curva de Bezier con un nodo siga los siguientes pasos:

1. Arrastre el controlador de tamaño colocado en uno de los extremos de la curva porencima del perímetro de algún nodo.

2. Cuando el puntero del ratón cambie a una cruz de cuatro flechas, termine la operación dearrastre1, y la arista queda unida al perímetro del nodo (Figura 21).

La desconexión de los nodos y de las aristas, se logra arrastrando el extremo de la aristaque desea desconectar lejos del perímetro del nodo al que se encuentra unido (Figura 22 yFigura 23).

1 Se puede comprobar la conexión de una curva y un nodo, al desplazar el nodo por el área de dibujo: las curvasconectadas al nodo se deben desplazar junto con éste.


1

Figura 21

1

Figura 22

Manual de Usuario

17

1

1

22

Figura 23

Guardar/Recuperar Una Gráfica de Un Archivo

Una vez dibujada su gráfica tal vez quiera guardar su gráfica para preservar el tiempoque invirtió en ello. Seleccione la entrada Archivo/Guardar de la barra de menues (Figura 24), yen el cuadro de dialogo que aparece seleccione la ruta y el nombre del archivo con que deseaque se guarde la gráfica (Figura 25). El nombre del archivo que selecciono se muestra en elpanel 3 de la barra de estado.

La operación contraria, es decir, recuperar una gráfica se logra al seleccionar el archivo,en el que anteriormente se guardo una gráfica, en el cuadro de dialogo (Figura 27) que semuestra como consecuencia de seleccionar la entrada Archivo/Abrir... de la barra de menues(Figura 26).


122

1

Figura 24

Figura 25

Manual de Usuario

19

122

1

Figura 26

Figura 27


Ejecución de la Representación de una Simulación

Para probar la representación de la simulación se utiliza el algoritmo distribuido DFS(Depth Fisrt Search), éste algoritmo sirve para encontrar el árbol abarcador de una grafica V(G)conexa.

Una vez dibujada la gráfica sobre la que se desea representar la ejecución de lasimulación, siga los siguientes pasos:

1. Vaya a la barra de menues y seleccione la entrada Simulación/Archivos/ProgramaSimulador (Figura 28). El sistema, en respuesta, muestra un cuadro de dialogo “abrir” enel que se debe seleccionar el programa ejecutable del algoritmo del cual se desea ver suejecución en la interfaz gráfica. Seleccione el archivo D:/Proyecto II/DFS/DFS.exe delCD del proyecto. El sistema despliega los mensajes “Programa simulador cargado” y elnombre del archivo ejecutable que selecciono en el panel 1 y en el panel 3respectivamente. Dado que el DFS, trabaja sobre gráficas totalmente conectadas, elprograma válida que así sea, en caso de haber un elemento que no se encuentraconectado se despliega un mensaje de error para indicarlo y se sitúa el enfoque sobre eseelemento.

2. Seleccione en la barra de menues la entrada Simulación/Archivos/Matriz Adyacencia(Figura 29). En el dialogo que aparece, escoja la ruta y el nombre del archivo con el quequiere que se guarde la matriz de adyacencia de la gráfica que dibujo en la pantalla. Si elarchivo se genero correctamente, vera desplegado el mensaje “Lista de adyacenciasgenerada” en la barra de estado.

3. Por último, seleccione la entrada Simulación/Iniciar en la barra de menues paracomenzar la simulación de la ejecución del algoritmo DFS (Figura 30). En consecuenciael programa despliega animaciones y cambios de color en los elementos de la gráficapara representar los diferentes eventos que suceden en la simulación (Figura 31).

El programa brinda la facilidad de poder interrumpir (Figura 32), la simulación y asípoder ver los estados de los nodos, las aristas, y los tipos de mensajes. Los estados de estoselementos se muestran cuando se les apunta con el ratón (Figura 33), y en consecuencia dedespliega una ventana emergente (tooltiptext). El usuario, puede reiniciar la ejecución de lasimulación seleccionando Simulación/Continuar de la barra de menues (Figura 34).

La visualización de la ejecución termina cuando termina de ejecutarse el algoritmo(Figura 35)2, o bien, cuando se selecciona la entrada Simulación/Terminar de la barra de menues(Figura 37). Después puede volver a editar la gráfica al seleccionar la entrada Simulación/EditarGráfica de la barra de menues (Figura 36).

2 El algoritmo DFS termina cuando se ha encontrado el árbol abarcador de la gráfica.

Manual de Usuario

21

122

1

Figura 28


122

1

Figura 29

122

1

Figura 30

Manual de Usuario

23

Figura 31

122

1

Figura 32


Figura 33

Figura 34

Manual de Usuario

25

Figura 35

122

1

Figura 36


122

1

Figura 37

universidad autÓnoma metropolitana …148.206.53.84/tesiuami/uami10294.pdf · 2004-03-04 · ......

Documents