Presentación diagramas UML

Semana 8
Clase Programación Orientado a Objetos

Diagramas UML

View more presentations from cecyurbina.

Creo importante mencionar que durante la semana cambie el diagrama de secuencia, debido a algunas sugerencias que recibí:



Bueno todo lo demás quedo aclarado en la presentación en clase. Saludos

Código autogenerado y comparación

Semana 6

Taller Programación Orientado a Objetos

Primero que nada creo que es importante mencionar que los diagramas que mostré en la entrada pasada fueron hechos por mi, no fué un diagrama autogenerado ya que mi proyecto esta basado en Html5 y Javascript y aunque encontré una herramienta en Eclipse para hacer código en Javascript este no soporta las etiquetas de Html5 es por esta razón que yo hice los diagramas a mano y por la misma causa no se podrá generar código en Html5 así que mostraré primero que nada como es que utilicé las herramientas para generar los diagramas, y por ultimo autogenerar el código.

Diagrama de clase


Lo cree con Umbrello, que es una herramienta para crear diagramas UML que ayudan en la creación de un software, se pueden hacer los diagramas manualmente o importarlos de códigos como Java, Python, C++, Javascript entre otros y viceversa es decir ya creado el diagrama pasarlo al código correspondiente.

El diagrama de clase que muestro en la presentación lo realicé en una aplicación online http://www.gliffy.com/ , es bastante cómodo de usar aunque se utiliza simplemente para representaciones gráficas con el no sería posible generar un código a partir del diagrama.

Diagrama de secuencia
El diagrama de secuencia lo genere en dos distintos sitios online http://www.websequencediagrams.com/ en donde a partir de esta entrada:

se genera el siguiente diagrama:



y también hice uno en http://www.gliffy.com/ que es el que muestro en la presentación


Codigo autogenerado
El codigo lo autogenere en Umbrello a partir del diagrama de clases, una vez que se tiene el diagrama:

nos tenemos que ir a la pestaña de Code y luego en Generated All Code, una vez que se hicieron estos pasos aparecerá una ventana diciendonos que no encuentra la carpeta llamada "uml-generated-code" que debe de estar en /home/ubuntu/, entonces en el terminal creo la carpeta con ese nombre:

ubuntu@ubuntu:~$ mkdir uml-generated-code

Y ahora si no tendremos problemas para generar el código.
Aquí estan algunas capturas de pantalla:

Aqui podemos elegir el lenguaje al que se quiere hacer el código

Estos son los archivos generados en la carpeta que acababamos de crear

Esta es una parte de código generado en C++ para la clase dibujo:
dibujo.cpp

#include "Dibujo.h"

// Constructors/Destructors
//

Dibujo::Dibujo ( ) {
initAttributes();
}

Dibujo::~Dibujo ( ) { }

//
// Methods
//


// Accessor methods
//


// Other methods
//

void Dibujo::initAttributes ( ) {
}

dibujo.h

#ifndef DIBUJO_H
#define DIBUJO_H

#include 
#include vector



/**
* class Dibujo
*
*/

class Dibujo
{
public:

// Constructors/Destructors
//


/**
* Empty Constructor
*/
Dibujo ( );

/**
* Empty Destructor
*/
virtual ~Dibujo ( );

// Static Public attributes
//

// Public attributes
//

int color;
int transparencia;
int coordenadaX;
int coordenadaY;
int grosor;

// Public attribute accessor methods
//


// Public attribute accessor methods
//


/**
* Set the value of color
* @param new_var the new value of color
*/
void setColor ( int new_var )   {
color = new_var;
}

/**
* Get the value of color
* @return the value of color
*/
int getColor ( )   {
return color;
}

/**
* Set the value of transparencia
* @param new_var the new value of transparencia
*/
void setTransparencia ( int new_var )   {
transparencia = new_var;
}

/**
* Get the value of transparencia
* @return the value of transparencia
*/
int getTransparencia ( )   {
return transparencia;
}

/**
* Set the value of coordenadaX
* @param new_var the new value of coordenadaX
*/
void setCoordenadaX ( int new_var )   {
coordenadaX = new_var;
}

/**
* Get the value of coordenadaX
* @return the value of coordenadaX
*/
int getCoordenadaX ( )   {
return coordenadaX;
}

/**
* Set the value of coordenadaY
* @param new_var the new value of coordenadaY
*/
void setCoordenadaY ( int new_var )   {
coordenadaY = new_var;
}

/**
* Get the value of coordenadaY
* @return the value of coordenadaY
*/
int getCoordenadaY ( )   {
return coordenadaY;
}

/**
* Set the value of grosor
* @param new_var the new value of grosor
*/
void setGrosor ( int new_var )   {
grosor = new_var;
}

/**
* Get the value of grosor
* @return the value of grosor
*/
int getGrosor ( )   {
return grosor;
}


/**
*/
void redibujar ( )
{
}


/**
*/
void rellenar ( )
{
}


/**
*/
void agregarClick ( )
{
}

protected:

// Static Protected attributes
//

// Protected attributes
//

public:


// Protected attribute accessor methods
//

protected:

public:


// Protected attribute accessor methods
//

protected:


private:

// Static Private attributes
//

// Private attributes
//

public:


// Private attribute accessor methods
//

private:

public:


// Private attribute accessor methods
//

private:


void initAttributes ( ) ;

};

#endif // DIBUJO_H

Código generado en Javascript para la clase Dibujo

/**
* class Dibujo
*
*/

Dibujo = function ()
{
this._init ();
}


/**
* _init sets all Dibujo attributes to their default value. Make sure to call this
* method within your class constructor
*/
Dibujo.prototype._init = function ()
{
/**
*
*/
this.m_color = "";
/**
*
*/
this.m_transparencia = "";
/**
*
*/
this.m_coordenadaX = "";
/**
*
*/
this.m_coordenadaY = "";
/**
*
*/
this.m_grosor = "";

/**Aggregations: */

/**Compositions: */

}

/**
*
*/
Dibujo.prototype.redibujar = function ()
{

}


/**
*
*/
Dibujo.prototype.rellenar = function ()
{

}


/**
*
*/
Dibujo.prototype.agregarClick = function ()
{

}

Y mi código de la clase Dibujo:

/**
*Esta clase es para crear figuras geometricas, lineas o libre
* @class
*/
function Dibujo (){
var color;
var intensidad;
var cor_x;
var cor_y;
function transparencias();
function mov_raton();
}

/**
*Esta es una clase hija de Dibujo(), se encarga de la estructura de las figuras geometricas
*@class
*@augments Dibujo
*/
function FigGeom (){
var relleno;
var contorno;
}
FigGeom.prototype = new Dibujo();

/**
*Esta es una clase hija de Dibujo(), se encarga de crear lineas de rectas y curvas.
*@class
*@augments Dibujo
*/
function Linea (){
var grosor;
}
Linea.prototype = new Dibujo();

/**
*Esta es una clase hija de Dibujo(),  define las caracteristicas y las funcionalidades del dibujo libre.
*@class
*@augments Dibujo
*/
function Libre (){
}
Libre.prototype = new Dibujo();


/**
*Esta es una clase hija de FigGeom(), define las caracteristicas y las funcionalidades de que se tendran al crear un elipse.
*@class
*@augments FigGeom
*/
function Elipse (){
}

Elipse.prototype = new FigGeom();


/**
*Esta es una clase hija de FigGeom(), define las caracteristicas y las funcionalidades de que se tendran al crear un rectangulos.
*@class
*@augments FigGeom
*/
function Rectangulos (){
}

Rectangulos.prototype = new FigGeom();

/**
*Esta es una clase hija de FigGeom(), define las caracteristicas y las funcionalidades de que se tendran al crear poligonos.
*@class
*@augments FigGeom
*/
function Poligonos (){
}

Poligonos.prototype = new FigGeom();

/**
*Esta es una clase hija de Linea(), define las caracteristicas y las funcionalidades de que se tendran al querer hacer una linea curveada.
*@class
*@augments Linea
*/
function Curva (){
}

Curva.prototype = new Linea();

/**
*Esta es una clase hija de Linea(), define las caracteristicas y las funcionalidades de que se tendran al querer hacer una linea recta.
*@class
*@augments Linea
*/
function Recta (){
}


Recta.prototype = new Linea();

Diagramas de clase y secuencia de UML

Semana 6

Clase Programación Orientada a Objetos

Diagrama de clases

El diagrama de clases es un diagrama que describe la estructura principal del sistema, mostrando sus clases, atributos, métodos y relaciones entre ellos, los diagramas de clases son útiles para mostrar los componentes que se encargaran de las funciones de un sistema, son utilizados durante el proceso de análisis y diseño del sistema.

El diagrama de clases esta compuesto por: clases(atributos, métodos y visibilidad) y relaciones(herencia, comprobación, agregación, asociación y uso).

En el diagrama de mi proyecto "Editor de dibujo" muestro la relación que hay entre los elementos Canvas, Texto, Herramienta, Menu y Dibujo.

En donde Canvas tiene en la parte superior donde dice "Canvas" el nombre del método, en la parte intermedia los atributos que son: width, height, id y contexto, con el método de getContext("2d").

Después la clase Menu con los métodos de guardar, nuevo, exportar, salir, deshacer y rehacer.

La clase Herramientas contiene los métodos de cortar, girar, maximizar, minimizar, borrar y colorear.

La clase Texto que tiene los atributos de estilo, tamaño y color, y el método de escribir.

Y la clase Dibujo que contiene los atributos de color, transparencia, coordenadaX, coordenadaY y grosor, con los métodos de redibujar, rellenar y agregarClick.

Las clase de Linea, Libre y FigGeom heredan los métodos y atributos de la clase Dibujo.

Linea contiene el método de hacerLinea, Libre tiene los atributos de mouseX y mouseY, y el método es hacerLibre y FigGeom donde los métodos son hacerCuadros, hacerRectangulos, hacerCirculos, hacerOvalos y hacerPoligonos.

Diagrama de secuencia

El diagrama de secuencia es un diagrama que muestra, para un escenario específico de un caso de uso , los eventos que generan los actores externos, el orden y los eventos entre los sistemas.

Hay dos tipos de mensajes que se pueden dar en este diagrama que se llaman sincrónicos y asincrónicos, los mensajes sincrónicos son las llamadas a métodos del objeto que recibe el mensaje y los mensajes asincrónicos terminan inmediatamente y crean un nuevo hilo de secuencia.

Los mensajes se ordenan cronológicamente desde la parte de arriba del diagrama a la parte de abajo.

En mi diagrama de secuencia lo que hice es que inicie con el con la etiqueta canvas que es la encargada de dibujar lo que se ve en el navegador, pero como no todos los navegadores lo soportan lo que hace canvas es fijarse si el navegador lo soporta y en este caso el navegador si soporta canvas entonces entra a la aplicación, y empieza a realizar un dibujo del menú se escoge la opción nuevo, después de elegir nuevo se va a Forma y elige hacer un rectángulo, después en la clase Dibujo se dibuja el objeto y en la clase Herramientas puede darle a colorear y maximizar al dibujo, después el usuario termina y se va a la clase Menú y guarda el dibujo y sale del programa.

Referencias

UML

Programa para hacer el diagrama de clases: Umbrello

Programa para hacer el diagrama de secuencia: http://www.websequencediagrams.com/

Nuevo visor de documentos sin plugins

Pueden subir documentos sin hacer ninguna cuenta en este sitio

http://crocodoc.com/