APO1 - Nivel 1 en C#: El Triángulo

Índice

0. Introducción
1. Enunciado
1.1 Interfaz gráfica de usuario (versión previa)
2. Requerimientos
2.1 R1: Crear un nuevo triángulo
2.2 R2: Calcular el área del triángulo
2.3 R3: Calcular el perímetro del triángulo
2.4 R4: Cambiar el color de relleno del triángulo
2.5 R5: Cambiar color de las líneas
3. Modelo del Mundo del Problema
4. Modelo de la Interfaz Gráfica de Usuario
5. Modelo de Pruebas Unitarias
6. Documentación de la Aplicación
7. Exploración de Código Fuente C#
8. Recursos
8.1 Java
8.2 C#
8.3 Aplicación en ejecución
8.3.1 Capturas de pantalla
8.3.2 Vídeo
9. Conclusiones
10. Glosario
11. Literatura & Enlaces

0. Introducción

Vamos por la tercera traducción (Java a C#) de las aplicaciones de los niveles de APO1 del proyecto Cupi2 de la Universidad de los Andes. En esta ocasión vamos a traducir una aplicación de manipulación de datos visuales y textuales de la figura geométrica del triángulo. Aprenderemos a dibujar elementos visuales a través de la maquinaría disponible en Microsoft .NET Framework.

[Nota: Se respetará cada uno de los elementos que pertenecen al proyecto de Cupi2 del Departamento de Ingeniería de Sistemas y Computación de la Universidad de los Andes, incluyendo el enlace de referencia. El texto en cursiva indica un extracto literal de la fuente; de lo contrario se dicta explícitamente.]

1. Enunciado

El enunciado original en [1]:

Se quiere construir un programa que permite manejar un triángulo. Esta figura geométrica está definida por tres puntos, cada uno de los cuales tiene dos coordenadas X, e Y.

Por otro lado, un triángulo tiene, además, un color para las líneas (bordes), y un color de relleno. Un color, por su parte, está definido por tres valores números entre 0 y 255 (estándar RGB por Red-Green-Blue):

• El primer valor numérico define la intensidad del rojo, 
• el segundo valor la intensidad del verde, y
• el tercer valor la intensidad del azul.

El programa debe:

1. Dibujar el triángulo en la pantalla, 
2. Calcular el perímetro del triángulo, 
3. Calcular el área del triángulo, y 
4. Calcular la altura del triángulo.

1.1 Interfaz gráfica de usuario (versión previa)

Figura 1. Versión de la aplicación Triángulo en el lenguaje Java.

Como observamos en la Figura 1 la aplicación Triángulo como producto final de su construcción final en el lenguaje de programación Java. Queremos una versión en apariencia muy similar, pero exactamente la misma funcionalidad.

2. Requerimientos

A continuación el conjunto de requerimientos (fuente [2]) de la aplicación.

2.1 R1: Crear un nuevo triángulo

Código: R1.

Descripción: Crear un nuevo triángulo.

Resumen: Se crea un nuevo triángulo con 3 puntos.

Entradas:

• Punto 1:
• Coordenada X
• Coordenada Y
• Punto 2:
• Coordenada X
• Coordenada Y
• Punto 3:
• Coordenada X
• Coordenada Y

Resultados: Un nuevo triángulo ha sido creado.

2.2 R2: Calcular el área del triángulo

Código: R2

Descripción: Calcular el área del triángulo.

Resumen: Con las coordenadas que se tienen de las vértices (nodos) del triángulo se calcula el área.

Entradas: «Ninguna»

Resultados: Área calculada del triángulo.

2.3 R3: Calcular el perímetro del triángulo

Código: R3

Descripción: Calcular el perímetro del triángulo.

Resumen: CAlcula el perímetro del triángulo.

Entradas: «Ninguna»

Resultados: Perímetro calculado del triángulo.

2.4 R4: Cambiar color relleno

Código: R4

Descripción: Cambiar color relleno

Resumen: Modificar el color de relleno del triángulo.

Entradas: Nuevo color de relleno.

Resultados: El color de relleno del triángulo es modificado.

2.5 R5: Cambiar color de las líneas

Código: R5

Descripción: Cambiar color de las líneas.

Resumen: Modifica el color de las líneas del triángulo.

Entradas: Nuevo de las líneas.

Resultados: El color de las líneas del triángulo es modificado.

3. Modelo del Mundo del Problema

En la Figura 2 se muestra el diagrama UML correspondiente al modelo del mundo del problema.

Figura 2. Modelo del mundo del problema para El Triángulo.

4. Modelo de Interfaz Gráfica de Usuario

En la Figura 3 (adaptación [4]) se muestra el diagrama UML del modelo de la interfaz gráfica de usuario.

Figura 3. Diagrama UML del modelo de la interfaz gráfica de usuario.

5. Modelo de Pruebas Unitarios

En la Figura 4 se presenta el diagrama UML con los artefactos de las pruebas unitarias del modelo del mundo problema.

Figura 4. Diagrama UML del modelo de las pruebas unitarias.

6. Documentación de la Aplicación

Documentación de la solución en formato CHM: enlace de descarga.

7. Exploración de Código Fuente C#

7.1 Modelo

Figura 5. Conjunto de entidades del modelo.

Archivo de código fuente Color.cs [enlace alternativo]:

Archivo de código fuente Punto.cs [enlace alternativo]:

Archivo de código fuente Triangulo.cs [enlace alternativo]:

7.2 GUI

Figura 6. Clases que representan la interfaz gráfica de usuario.

Archivo de código fuente ControlBotones.cs [enlace alternativo]:

Archivo de código fuente ControlImagen.cs [enlace alternativo]:

Archivo de código fuente ControlOpciones.cs [enlace alternativo]:

Archivo de código fuente ControlTriangulo.cs [enlace alternativo]:

Archivo de código fuente DialogoPuntos.cs [enlace alternativo]:

Archivo de código fuente Principal.cs [enlace alternativo]:

[Nota: Sólo incluyo la clase parcial en donde he escrito el código personalizada. En el archivo de solución en C# de la sección 8, se haya el código completo.]

8. Recursos

8.1 Java

A continuación el conjunto de enlaces a los contenidos originales del proyecto desarrollado en Java:

• Visitar: http://cupi2.uniandes.edu.co/sitio/index.php/cursos/apo1/nivel-1/triangulo
• Demo: http://cupi2.uniandes.edu.co/sitio/images/cursosCupi2/apo1/ejemplos/demos/n1_triangulo_demo.zip
• Archivo zip: http://cupi2.uniandes.edu.co/sitio/images/cursosCupi2/apo1/ejemplos/codigos/n1_triangulo.zip
• Examen escrito: http://cupi2.uniandes.edu.co/sitio/images/cursosCupi2/apo1/ejemplos/examenes/n1_triangulo_examen_escrito.doc
• Examen laboratorio: http://cupi2.uniandes.edu.co/sitio/images/cursosCupi2/apo1/ejemplos/examenes/n1_triangulo_examen_laboratorio.doc

8.2 C#

Enlace de descarga de la solución con los proyectos de aplicación y de pruebas.

8.3 Aplicación en ejecución

8.3.1 Capturas de pantalla

Figura 7. Aplicación OrtizOL - El Triánngulo en ejecución.

Figura 8. Contraste de las aplicaciones creadas en C# y Java.

8.3.2 Vídeo

9. Conclusiones

En el proceso de traducción de la aplicación original escrita en Java al lenguaje de programación C#, se han explorado y comprendido nuevos componentes visuales para la integración en formularios de interfaces gráficas de usuario. A pesar de que algunos artefactos de Java no están disponibles (de forma directa) en C#, se optó por un enfoque más abstracto para la codificación de, por ejemplo, el método de determinación de la colinealidad de los tres vértices del triángulo.

10. Glosario

• Aplicación
• CHM
• Clase
• Diagrama
• Documentación
• Estructura
• Geometría
• Modelo
• RGB
• Solución
• Triángulo
• UML

11. Literatura & Enlaces

[1]: Enunciado - http://cupi2.uniandes.edu.co/sitio/index.php/cursos/apo1/nivel-1/triangulon
[2]: Requerimientos - http://cupi2.uniandes.edu.co/sitio/index.php/cursos/apo1/nivel-1/triangulo/requerimientos-1638
[3]: Modelo Conceptual - http://cupi2.uniandes.edu.co/sitio/index.php/cursos/apo1/nivel-1/triangulo/modeloconceptual-n1triangulo
[4] Interfaz - http://cupi2.uniandes.edu.co/sitio/index.php/cursos/apo1/nivel-1/triangulo/interfaz-n1triangulo
[5]: Triangle icon | Icon Search Engine | Iconfinder - https://www.iconfinder.com/icons/84186/triangle_icon#size=32
[6]: Triangle icon | Icon Search Engine | Iconfinder - https://www.iconfinder.com/icons/85349/triangle_icon#size=128
[7]: Learn How to Calculate Collinearity of Three Points - Tutorial, Definition, Formula and Example - http://easycalculation.com/algebra/learn-collinearity-three-points.php
[8]: Pruebas - http://cupi2.uniandes.edu.co/sitio/index.php/cursos/apo1/nivel-1/triangulo/pruebas-n1triangulo

J