Definición de Componentes de Diagrama

Un diagrama de flujo está representado por una combinación de varios componentes gráficos que
cumplen una función especifica en un orden determinado (siendo una secuencia de pasos u
algoritmo). Al interpretar un diagrama de flujo necesitamos comprender el contenido textual dentro
de cada componente en el orden correcto; mientras que para su desarrollo probablemente
necesitemos editar el contenido, eliminar componentes, agregar nuevos, realizar conexiones entre
componentes y desconectarlos también.

Para ello, estos componentes se representan como el resultado de combinar los siguientes
elementos:

OptionsShape DiagramShape TextShape

Descripción del paso a ejecutar

Representación de la Contenido textual del

Marco de opciones figura o componente componente

DiagramShape ( Forma de diagrama )

Representa al gráfico, forma, o componente como tal, este elemento es considerado como el
elemento principal que permitirá la representación gráfica de algoritmos por medio de un diagrama
de flujo.
OptionsShape ( Opciones de forma )
Es el marco de opciones que aparece alrededor de un DiagramShape al momento que es
seleccionado. Y permite realizar acciones predefinidas sobre el componente principal.

TextShape ( Texto de forma )

Es el componente de texto, que va a ser interpretado por una persona o software, representa un
paso que debe ejecutarse. Este elemento se muestra dentro del DiagramShape.

Funcionamiento en conjunto de los elementos

Un OptionsShape y un TextShape son elementos que forman parte del elemento principal
( DiagramShape ) y la existencia de ambos está condicionada a la exigencia de este, esto quiere
decir que al crearse un DiagramShape, automáticamente él creará un OptionsShape que se
ajustará a su tamaño y un TextShape que mantendrá el contenido de la figura. Por ende, podemos
decir que el DiagramShape contiene dentro de él un OptiosShape y un TextShape; esto lo
podemos representar de la siguiente manera:

DiagramShape

OptionsShape
TextShape

Al crear el componente se obtendría lo siguiente:

Descripción del
paso a ejecutar

Sin embargo, para que las acciones del OptionsShape tengan efecto sobre el componente
principal, este debe conocer a cual DiagramShape provee las opciones esto lo podemos
representar de la siguiente manera:

DiagramShape
De esta manera al presionar la opción de eliminación se eliminará el DiagramShape, lo que
incluye la eliminación de todas sus partes.

En conclusión:

DiagramShape

C
O
N
TI
E

EN
D
IA

E
C

IN
N

ST
A
ST

A
N
IN

C
IA
E
EN

D
E
TI
N
O
C

OptionsShape TextShape

Descripción del paso a ejecutar

Conector
Las conexiones entre uno y otro componente se realizan por medio de líneas, llamadas
conectores, las cuales a su vez están compuestas de dos elementos:

ConnectorLine OptionsConnector

Representación del Marco de opciones

componente de conexión
ConnectorLine ( Línea de conector )
Representa la conexión entre dos y solo dos DiagramShape, indicando la secuencia del diagrama
de flujo, es decir de que figura hacia cual se debe de leer el algoritmo.

OptionsConnector ( Opciones de conector )

Es el marco de opciones que aparece alrededor de un ConnectorLine al momento que es
seleccionado. Y permite realizar acciones predefinidas sobre el conector.

Funcionamiento en conjunto de los elementos

Un OptionsConnector es un elemento que forma parte de un ConnectorLine y la existencia de este
se encuentra condicionada a del elemento al que pertenece, esto quiere decir que al crearse un
ConnectorLine, automáticamente él creará un OptionsConnector que se ajustará a su tamaño. Por
ende, podemos decir que el ConnectorLine contiene dentro de él un OptiosConnector; esto lo
podemos representar de la siguiente manera:

ConnectorLine

OptionsConnector

Al crear el componente se obtendría lo siguiente:

Sin embargo, para que las acciones del OptionsConnector tengan efecto sobre el componente
principal, este debe conocer a cual ConnectorLine provee las opciones esto lo podemos
representar de la siguiente manera:

ConnectorLine

De esta manera al presionar la opción de eliminación se eliminará el ConnectorLine.

En conclusión:

CONTIENE INSTANCIA DE
Implementación de OptionShape y ConnectorLine para crear
un flujo
Este par de elementos individuales, trabajan en conjunto para hacer posible la representación de
un algoritmo mediante diagrama de flujo. Donde el DiagramShape cumple su función de
representar un paso en el algoritmo, así como el ConnectorLine de unir los pasos para indicar su
secuencia de ejecución. Para ello es necesario que el ConnectorLine conozca cual es el paso de
origen y cual el de destino, es decir en antecesor y predecesor en relación a este componente; por
ende un ConnectorLine, tendrá dos DiagramShape. Lo cual podemos representar por:

ConnectorLine

DiagramShapeA o de Origen
DiagramShapeB o de Destino

Por otro lado cuando un DiagramShape cambia su posición este notifica al conector que debe
volver q dibujarse tomando en cuenta su nueva posición, por lo cual el DiagramShape tendrá un
conector. Lo cual podemos representar por:

DiagramShape

ConnectorLine

Estas relaciones permiten también que al eliminar ya sea el DiagramShapeA o el DiagramShapeB,

el ConnectorLine que los relacionaba sea eliminado, puesto que ya no hay dos extremos para
conectar. Al eliminar el ConnectorLine se notifique al DiagramShapeA y el DiagramShapeB que
sus conectores deben quedar libre para se utilizador en cualquier momento por otro
ConnectorLine.

Sin embargo un DiagramShape provee un ConnectorLine por cada uno de los cuatro lados de su
OptionsShape. Representando de la siguiente manera:

DiagramShape

ConnectorLineUp
ConnectorLineDown
ConnectorLineRight
ConnectorLineLeft
Por lo tanto cada una de las notificaciones mencionadas anteriormente se aplican a cada uno de
los cuatro conectores de forma independiente, si es este que se encuentra relacionado con algún
ConnectorLine.

Cuando se esta uniendo el ConnectorLine hacia un conector del DiagramShapeB se hace una
asociación temporal hasta que finaliza el evento touch (se levanta el dedo de la pantalla), solo en
ese momento la asociación se vuelve permanente, esto debido a que mientas se sigue
desplazando el dedo por la pantalla se puede finalizar en una posición libre del plano (donde no
hay DiagramShape), en la posición de un conector ocupado o sobre un conector diferente al
primero con el que se estuvo asociado, en dependencia de ello la relación se eliminará o se
actualizará al conector correcto.

La asociación entre estos componentes permite seguir el flujo de ejecución de la siguiente

manera:

DiagramShapeA

ConnectorLine
DiagramShapeA
DiagramShapeB

ConnectorLine

ConnectorLine

DiagramShapeB

Como en DiagramShapeA posee el ConnectorLine y este a su vez posee el DiagramShapeB y de

igual forma este ultimo el mismo ConnectorLine que DiagramShapeA es posible hacer un recorrido
a travez de las instancias, partiendo de la primera figura hacia el conector y desde este al destino,
incluso pudiendo hacer un recorrido inverso si así se desea. En conclusión el ConnectorLine y las
múltiples asociaciones hacen posible conocer la correcta secuencia de ejecución.
Asociación de la línea con un conector
Anteriormente se indicó que un DiagramShape tiene cuatro posibles puntos de conexión a los que
se puede asociar un ConnectorLine. Esto se puede representar por:

DiagramShape

Donde representa un punto de conexión que contiene una instancia de ConnertorLine. Para
saber a con cual de estos punto se asocia o se asigna la instancia se utiliza el siguiente
razonamiento en base al punto actual del evento touch (mientras se mueve por la pantalla):

Se divide de forma lógica el DiagramShape de manera asimétrica en cuatro partes. El lado de

ConnectorUp y ConnectorDown ocupan la mitad de alto y el total de ancho, mientras que el lado
de ConnectorLeft y ConnectorRight ocupan el 90% del alto y 10% del ancho, como se representa
a continuación en un DiagramShape rectangular:

DiagramShape

ConnectorLeft área al
10% de ancho y 90 %
de alto
ConnectorUp área al
100% de ancho y 50 %
de alto ConnectorRight área al
10% de ancho y 90 %
ConnectorDown área al
100% de ancho y 50 % de de alto
alto

Cuando la posición del touch coincide con alguna de estas áreas se hace una asociación temporal
con el conector de dicha área y se vuelve permanente si el touch finaliza en ella, se da prioridad a
las áreas más pequeñas puesto que están contenidas en las más grandes y de dar la prioridad a
ellas las más pequeñas nunca serían tomadas en cuenta, dando una visión de la figura anterior de
la siguiente manera:
 DiagramShape

ConnectorLeft área al
10% de ancho y 90 %
de alto
ConnectorUp área al
100% de ancho y 50 %
ConnectorRight área al
de alto
10% de ancho y 90 %
ConnectorDown área al
100% de ancho y 50 % de de alto
alto

Al borrar un DiagramShapeA se elimina el ConnectorLine junto con la asociación de al

DiagramShapeB para poder ser conectado nuevamente en un futuro. Por otro lado al eliminar el
ConnectorLine se limpia la asociación en el DiagramShapeA y DiagramShapeB.

Ejemplo de conexión 1:

Siendo un toque en la pantalla, que proviene de un DiagramShapeA hacia un DiagramShapeB

El resultado sería:
Ejemplo de conexión 2:

Siendo un toque en la pantalla, que proviene de un DiagramShapeA hacia un DiagramShapeB

El resultado sería:

Ejemplo de conexión 3:

Siendo un toque en la pantalla, que proviene de un DiagramShapeA hacia un DiagramShapeB

El resultado sería:
Ejemplo de conexión 4:

Siendo un toque en la pantalla, que proviene de un DiagramShapeA hacia un DiagramShapeB

El resultado sería: