2 Funcionalidad
Antes de comenzar a describir cada una de las funcionalidades de la aplicación es importante describir la interfaz de usuario y las partes que la componen. Cuando el usuario (estudiante o profesor) ejecuta la aplicación por primera vez se encuentra con una interfaz como la presentada en la Figura 2.1.
2.1 Interfaz de usuario
La Figura 2.2 presenta cada una de las partes en las que está dividida la interfaz de usuario:
- Barra de navegación. Aquí se encuentran enlaces a la documentación y al repositorio con el código fuente. También un enlace a un tour que lleva al usuario por cada uno de los componentes y funcionalidades más importantes de la aplicación.
- Lienzo. Esta es la parte donde toda la visualización tiene lugar. Es el lugar donde se visualizará la lista y se presentaran las animaciones de las operaciones según sean seleccionadas por el usuario.
- Menú de operaciones. En este lugar se encuentran de manera agrupada por funcionalidad las acciones que el usuario puede realizar en la aplicación.
El flujo de trabajo que se espera por parte del usuario está enfocado a utilizar las partes 2 y 3 de la interfaz de usuario. La idea es que este último selecciona la operación en la parte 3 y visualiza su ejecución en la parte 2.
Las operaciones soportadas por la aplicación están divididas por funcionalidad y presentadas de esta manera en la parte 3:
- Creación. Comprenden las diferentes formas en que se puede crear una lista enlazada. Entre estas formas se incluye: vacía, de una secuencia de números o de manera aleatoria.
- Operaciones sobre la estructura de datos. Son las operaciones que le permiten al programador interactuar con la estructura de datos. En esta sección se incluyen operaciones de inserción, acceso y eliminación entre otras.
- Herramientas de programación. Permiten la visualización de componentes de programación como punteros. Estos elementos no son conceptuales pero si son relevantes a la hora de la implementación de la estructura de datos.
- Opciones de visualización. Permiten al usuario alterar algunas características de la visualización de la estructura de datos. Estas opciones son útiles para la presentación y visualización de la estructura de datos en entornos de estudio o de docencia.
A continuación describiremos cada una de las partes. La parte superior contiene una barra con el título y algunos enlaces de interés. Tal vez el más importante es el botón con el texto Tour en la parte superior derecha. Pulsar este botón activará una especie de tour por cada uno de los elementos de la interfaz gráfica y le proporcionará al usuario una idea de la funcionalidad de cada parte.
Las otras dos partes son las más importantes para la interacción con el programador. En la sección vertical izquierda se puede apreciar una barra de menús. En el caso de la figura todos ellos se encuentran colapsados y entre otros, presentan los títulos: List Creation, Operations, Programmer Tools y Display Options. Finalmente en la sección vertical derecha se encuentra el lienzo que es el lugar donde aparecen las representaciones gráficas. En este caso se aprecia una lista de números. En las secciones siguientes se muestra detalladamente cada una de las funcionalidades.
2.2 Visualización de la lista
Después de creada una lista, está será visualizada en el lienzo que hay en la parte derecha. Por ejemplo, en la Figura 2.3 se muestra la interfaz con una lista creada de 7 elementos. En esta figura se encuentran las anotaciones de los diferentes nodos de la lista y los componentes de uno de ellos.
Existen diferentes formas de interactuar con la representación visual de la lista enlazada. Los nodos de la lista pueden ser reposicionados y su encadenamiento puede ser alterado. En la parte inferior izquierda del lienzo se encuentra una pequeña barra vertical con botones que tienen acción sobre la visualización del lienzo.
- El tercer botón de arriba a abajo permite siempre enfocar todos los elementos dentro del lienzo. Esto es de gran importancia porque facilita mucho la interacción con la visualización.
- El cuarto botón con el símbolo
protege el lienzo de cualquier tipo de interacción. Esta opción es muy útil cuando se desean tomar imágenes de captura de pantalla o realizar explicaciones sin que se altere la visualización.
Cada nodo de la lista consta de dos partes como se identifican en la Figura 2.3. La primera contiene el dato y la segunda representa el apuntador al siguiente nodo en la lista. Cuando el mouse se posiciona sobre este último el apuntador es resaltado en un color diferente (ver Figura 2.4). Esto es útil cuando las listas no se muestran de manera lineal. A continuación se muestra la misma lista después de ser reorganizada arrastrando los nodos con el mouse sobre el lienzo. El puntero se posicionó sobre el nodo que contiene el valor \(44\).
