Professional Documents
Culture Documents
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:
DiagramShape
OptionsShape
TextShape
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
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
ConnectorLine
OptionsConnector
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
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
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.
DiagramShapeA
ConnectorLine
DiagramShapeA
DiagramShapeB
ConnectorLine
ConnectorLine
DiagramShapeB
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):
DiagramShape
ConnectorUp área al
100% de ancho y 50 %
ConnectorLeft área al de alto ConnectorRight área al
10% de ancho y 90 % 10% de ancho y 90 %
ConnectorDown área al
de alto 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
ConnectorUp área al
100% de ancho y 50 %
ConnectorLeft área al ConnectorRight área al
de alto
10% de ancho y 90 % 10% de ancho y 90 %
ConnectorDown área al
de alto 100% de ancho y 50 % de de alto
alto
Ejemplo de conexión 1:
El resultado sería:
Ejemplo de conexión 2:
El resultado sería:
Ejemplo de conexión 3:
El resultado sería:
Ejemplo de conexión 4:
El resultado sería: