Cecilia Urbina: marzo 2011

miércoles, 30 de marzo de 2011

Implementación de eventos, excepciones y errores

Semana 10

Taller de Programación Orientada a objetos

Excepciones
En este caso programé la excepción que había comentado en la entrada pasada, sobre si el navegador soporta el elemento canvas de html5, para esto voy a utilizar un try/catch

Esta es la manera en la que lo implementé en javascript:

<html>
<head>
<script>
try{
  document.createElement("canvas").getContext("2d");
  alert("HTML5 es soportado en tu navegador");
 } catch(e) {
  alert("HTML5 no está soportado en tu navegador");
 }
</script>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>

Errores
En esta parte implemené un código que muestra un error cuando no hay conexión a internet, para hacerlo el script de JS lo que hace es tratar de cargar una página conocida como "google" o "wikipedia" y si no se cargan entonces esto quiere decir que no hay conexión a internet.

Y aquí esta el código en la función llamada "internet", en donde tengo una variable que se llama "imgsrc" que es la que obtiene una imagen de internet en este caso de google, la variable "img" que será tipo imagen, y contendrá la imagen en internet, entonces empieza el "try" que dice que se carga "img", pero si no sucede eso para esto esta el catch para mandar un mensaje que "no hay acceso a internet".

function internet(){

var imgsrc = 'http://www.google.es/intl/en_com/images/logo_plain.png';
var img = new Image();

try
{
 img.onload = function () {
 alert("Hay conexion a internet.");
 }
}
catch(err)
{
 alert("No hay acceso a internet");
}

img.src = imgsrc;
}

Eventos
En eventos tengo programado en mi canvas que se pueda saber cuando el mouse esta adentro del elemento o afuera, si hizó un click.

Esta es la parte en el documento html:

<canvas id="paint" width="700" height="500"
      onmouseover="mouseAdentro(event)"
      onmouseout="mouseAfuera(event)"
      onclick="click(event)">Navegador no soportado

Y la parte en javascript:

window.onload = function() {
canvas=document.getElementById("paint");
contexto=canvas.getContext("2d");
evento("clickkkk plis");
}

function evento(str) {
contexto.clearRect(0,0,canvas.width,canvas.height);
contexto.font="9pt Calibri";
contexto.textAlign="center";
contexto.fillText(str, 288, 100);
}

function mouseAdentro(evt) {
evento("estas adentro del canvas");

}

function mouseAfuera(evt) {
evento("estas fuera");
}

function click(evt) {
     var mouseX = evt.clientX - canvas.offsetLeft;
var mouseY = evt.clientY - canvas.offsetTop;
evento("estas clickeando " + mouseX + " " + mouseY);
if (!empiezo) {
    contexto.beginPath();
    contexto.moveTo(mouseX, mouseY);
    empiezo = true;
} else {
    contexto.lineTo(mouseX, mouseY);
    contexto.stroke();
}

}

Esto es todo, espero comenten.

martes, 29 de marzo de 2011

Selección de patrones de diseño

Semana 9
Clase Programación Orientada a Objetos

Patrones de diseño

Los patrones de diseño representan una solución a problemas comunes en el desarrollo de softwares y al diseño de interfaces.

Son métodos probados efectivos en la revolución de problemas, reusables es decir que puedes ser utilizados para resolver problemas parecidos en circunstancias distintas, flexibilidad, estandarización y organización en el código, así como evitar la búsqueda de soluciones a problemas que ya fueron resueltos, entre otras ventajas más.

Categoría de patrones

Patrones de arquitectura.-Tratan sobre la estructura fundamental de un sistema de software.
Patrones de diseño.-Ayudan con la estructura de diseño de un sistema de software.
Dialectos.-Son llamados de bajo nivel porque sirven para algún lenguaje de programación o entorno en especifico.

Además también existen los patrones de:
Interacción: Ayudan con el diseño de interfaces web.

Plantillas de patrones

Son las características principales que describen a los patrones como: Nombre del patrón, Clasificación del patrón, Intención, También conocido como(otros nombres para el patrón), Motivación, Aplicabilidad, Estructura, Código ejemplo, Usos conocidos, entre otros.

Patrones GoF

Son clasificados de acuerdo a sus objetivos en estructurales, de comportamiento y creacionales.

Estructurales: Estos patrones describen como relacionar clases y objetos para formar nuevas estructuras mas grandes y añadir funcionalidades.
De comportamiento: Ayudan a definir la comunicación entre los objetos de un sistema.
Creacionales: Hablan de la forma de como crear instancias de objetos su propósito es ocultar la manera en que se crea e inicializa un objeto.

Estructurales

Adapter(Adaptador): Como su nombre lo dice se encarga de adaptar(en vez de tener que cambiar el código) por ejemplo algún código ya existente en nuestro programa a alguna librería.
Bridge(Puente): Separa una abstracción de su implementación.
Composite(Objeto compuesto): Deja tratar objetos compuestos como si fueran simples.
Decorator(Envoltorio): Proporciona funcionalidades a una clase dinamicamente.
Facade(Fachada): Proporciona una interfaz simple para acceder a un grupo de interfaces de un sistema.
Flyweight(Peso ligero): Disminuye la repetición cuando muchos objetos poseen información idéntica.
Proxy: Es como un intermediario que se encarga de llamar a el método de la clase real pero primero habiendo pasado por el mismo para asegurar que el que llama a el objeto realmente tiene permisos para realizar la acción.

De comportamiento
Chain of Responsibility(Cadena de responsabilidad): Deja establecer la linea que necesitan llevar los mensajes para que los objetos sean capaces de realizar la tarea indicada.
Command(Orden): Encapsulamiento de una operación en un objeto.
Interpreter(Interprete): En un lenguaje, determina una gramática para dicho lenguaje, y las herramientas que se ocupan para interpretarlo.
Iterator(Iterador): Deja recorrer objetos compuestos sin importar su implementación.
Mediator(Mediador): Especifica como un objeto puede coordinar a objetos de diferentes clases, funcionando como un conjunto.
Memento(Recuerdo): Es como un tipo "restauración del sistema".
Observer(Observador): Establece dependencias entre objetos, así cuando un objeto cambia se mande un mensaje y se modifiquen los demás objetos relacionados.
State(Estado): Deja que un objeto cambie su comportamiento cada vez que se modifique su estado interno.
Strategy(Estrategia): Permite tener varios métodos para resolver un problema, y elegir en tiempo de ejecución el método adecuado.
Template Method(Método plantilla): Determina en un procedimiento la estructura de un algoritmo, repartiendo en las subclases ciertos pasos.
Visitor(Visitante): Define otras operaciones sobre una jerarquía de clases sin cambiar las clases sobre las que funciona.

Creacionales

Abstract Factory(Fabrica abstracta): Deja trabajar con objetos de diferentes familias de manera que las familias no se mezclan entre ellas.
Builder(Constructor y virtual): Separa el proceso de crear un objeto complejo, enfocando dicho proceso en un punto.
Factory Method(Método de fabricación): Crea objetos de una clase de un subtipo determinado.
Prototype(Prototipo): Se utiliza para "clonar" objetos.
Singleton(Instancia única): Asegura que exista una instancia para una clase y la creación de una forma de acceso global a dicha instancia.

Patrones de diseño en mi Proyecto

*Prototype*

Que como ya lo describí anteriormente, este patrón permite "clonar" instancias de objetos creando nuevos objetos idénticos.

En mi proyecto el Editor de Dibujo lo utilizaría principalmente en la función "copiar" de mi programa. Cuando por ejemplo se selecciona algún objeto un circulo, cuadro, etc. y se quiere crear un objeto exactamente igual. Esa sería la función que yo le daría a el patrón Prototype.

Este patrón permite la creación del objeto en distintas variantes cuando el programa lo necesita, en donde el código que utiliza los objetos, solicitará una copia del objeto que necesite. La copia significa otra instancia del objeto, cada objeto prototipo debe implementar el método clone().

Los participantes

Prototipo: Declara una interfaz para la colación en sí.

ConcretePrototype: Implementa una operación de clonación en sí.
Cliente: Crea un nuevo objeto haciendo un prototipo para clonarse a sí mismo.

Ventajas

Añadir y eliminar productos en tiempo de ejecución.
Especificar nuevos objetos variando los valores.
Especificar nuevos objetos variando la estructura.
Reducción de subclases.
Configuración de una aplicación con clases dinamicamente.

Aplicado a mi proyecto:

*Factory*
Este es un patrón de diseño que me podría servir para la creación de objetos de un tipo determinado, como las lineas, dibujo libre, cuadros, etc, etc.

Ventajas:
El principal beneficio de utilizar el patrón de la fábrica es que se puede desacoplar los objetos. Usando el método fabrica en lugar de la nueva palabra clave y una clase concreta que permite centralizar la creación de instancias de código en un solo lugar. Esto hace que sea mucho más fácil que cambiar las categorías, o asignar a clases dinámicamente en tiempo de ejecución. También permite una mayor flexibilidad a la hora de subclases.

Todos estos beneficios están relacionados con dos de los principios de diseño orientado a objetos: hacer que sus objetos están debidamente acoplados, y evitar la duplicación de código.

Desventajas:

Es tentador tratar de usar métodos de fábrica en todas partes, en lugar de los constructores normales, pero esto rara vez es útil. La mayoría de creación de instancias de clases es mejor hacerlo al aire libre, con la palabra clave new y un constructor. Esto hace que el código más simple y más fácil de seguir, en lugar de tener que localizar este metodo para ver qué clase se crea una instancia, se puede ver inmediatamente lo que se llama constructor. Pueden ser muy útiles cuando son necesarias, pero asegúrese de no abusar de ellos.

Diagrama de mi proyecto:

*Composite*

Y este patrón me parece que lo podría implementar en mi código en la parte en la que quiero seleccionar algún objeto u objetos que ya haya hecho, ya que la idea que tengo en mente es poder seleccionar ya hechas las figuras cualquiera de ellas, entonces si selecciono varias figuras para copiar todas se copien y se comporte como si fuera un solo objeto, pero que también se puedan separar.

Entonces tengo cada objeto por no repetir todos solo pongo tres que son Cuadrado, Triángulo y Circulo, en donde todos ellos forman un GrupoImagenes que a la vez varios o uno solo GrupoImagenes pueden formar un gráfico.

Este es el diagrama de mi proyecto:

Ventajas:

Mejora la realización de código y facilita la refactorización.

Los objetos compuestos son excelentes estructuras jerárquicas. Cada vez que se ejecuta una operación en un compuesto de alto nivel, que son esencialmente de realizar una búsqueda en profundidad sobre la estructura completa para encontrar los nodos. Es muy fácil añadir, eliminar y buscar los nodos dentro de la jerarquía.

Desventajas:

Puede afectar el rendimiento del programa por el hecho de que cualquier operación llamada en un compuesto se transmite a todos sus hijos, el rendimiento puede sufrir si la jerarquía es demasiado grande ya que no es muy obvio para un programador que el método topGallery.show () inicia un recorrido completo de un árbol.

*Memento*

Este es el ultimo del que hablaré y su uso es bastante obio y aplicable a mi proyecto al menos asi es como lo veo.

Este patron tiene como finalidad guardar un objeto en un momento dado pero de modo que se puedan recuperar los estados anteriores.

Ventajas
Es facil volver a estados anteriores o recientes.

Desventajas
Los mementos son costosos, es costoso crear los objetos Memento si se tiene que almacenar todas las partes del estado del Originator.

Sitios de referencia:

http://www.apwebco.com/gofpatterns/creational/Prototype.html
http://java.ciberaula.com/articulo/diseno_patrones_j2ee/

http://www.apwebco.com/gofpatterns/creational/Prototype.html

http://es.wikipedia.org/wiki/Composite_(patrón_de_diseño)

http://www.freewebz.com/amanecer/personal/papers/paper.memento.pdf

lunes, 28 de marzo de 2011

Incorporación de patrones de diseño

Semana 9
Taller de Programación Orientada a Objetos

Ahora la implementación en código de los patrones de Diseño que creo adecuados para mi proyecto, aunque no es definitivo que se queden en el código, ya que hay algunas cosas que me parecen mas sencillas si las implemento con mi propio código, pero usaré lo que mas me simplifique el código.

El patrón Composite

Este no es el caso de lo que dije arriba, ya que tenia solo pensado que quería poder agarrar las cosas individualmente ya después de haberlas hecho por ejemplo un circulo, una raya, etc., para poderlos mover, copiar, borrar pero no tenia ni idea de como, siento que este patrón me abrió bastante la mente.

Este es el diagrama:

Y este es el código:

#include "GrupoImagenes.js"
Grafico = function ()
{
 this._init ();
}
Grafico.prototype._init = function ()
{

}
Grafico.prototype.pintar = function ()
{

}
#include "Grafico.js"
GrupoImagenes = function ()
{
 this._init ();
}

GrupoImagenes.prototype = new Grafico ();
GrupoImagenes.prototype._init = function ()
{
 this.m_cantidad = "";
}

GrupoImagenes.prototype.pintar = function ()
{

}
#include "Grafico.js"
Triangulo = function ()
{
 this._init ();
}
Triangulo.prototype = new Grafico ();
Triangulo.prototype._init = function ()
{
 this.m_base = "";
 this.m_altura = "";
}
Triangulo.prototype.pintar = function ()
{

}

#include "Grafico.js"
Cuadrado = function ()
{
 this._init ();
}

Cuadrado.prototype = new Grafico ();
Cuadrado.prototype._init = function ()
{
 this.m_lado = "";
}
Cuadrado.prototype.pintar = function ()
{

}

#include "Grafico.js"
Circulo = function ()
{
 this._init ();
}

Circulo.prototype = new Grafico ();
Circulo.prototype._init = function ()
{
 this.m_radio = "";
}

Circulo.prototype.pintar = function ()
{ 
}

Patrón Factory
Bueno el Patrón Factory lo elegí porque me permite hacer muchos objetos que es lo que necesito para mi editor de dibujo, pero es importante para mi aclararles que la verdad me revuelve un poco esta manera de crear objetos a como yo los creaba antes, entonces el código aquí esta, sin embargo, no es seguro que sea el definitivo, esto es en el caso de Factory.
Este es el diagrama:

Y este es el código:


//parte de codigo
#include "Factory.js"
Factory = function ()
{
 this._init ();
}
Factory.prototype._init = function ()
{
}
Factory.prototype.crearCirculo_Circulo = function ()
{

}
Factory.prototype.crearRectangulo_Rectangulo = function ()
{

}
Factory.prototype.crearLinea_Linea = function ()
{

}
Factory.prototype.crearPoligono_Poligono = function ()
{

}

#include "Factory.js"
#include "Circulo1_Concreta.js"
#include "Linea1_Concreta.js"
#include "Poligono1_Concreta.js"
#include "Rectangulo1_Concreta.js"

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

FactoriaConcreta_1.prototype = new Factory ();
FactoriaConcreta_1.prototype._init = function ()
{

}
FactoriaConcreta_1.prototype.crearCirculo_Circulo = function ()
{

}
FactoriaConcreta_1.prototype.crearRectangulo_Rectangulo = function ()
{

}
FactoriaConcreta_1.prototype.crearLinea_Linea = function ()
{

}
FactoriaConcreta_1.prototype.crearPoligono_Poligono = function ()
{

}

Patrón prototype
Este es otro más que me parece adecuado para mi para que a la hora que se quieran copar los objetos se haga de manera eficiente.

Este es el diagrama:

Y este es el código:

//parte de codigo
#include "FigGeom.js"
Dibujo = function ()
{
 this._init ();
}
Dibujo.prototype._init = function ()
{

}
Dibujo.prototype.dibujar = function ()
{

}
Dibujo.prototype.rellenar = function ()
{

}
Dibujo.prototype.agregarClick = function ()
{

}
#include "FigGeom.js"
Circulo = function ()
{
 this._init ();
}

Circulo.prototype = new FigGeom ();

Circulo.prototype._init = function ()
{
}
Circulo.prototype.clone = function ()
{

}

FigGeom = function ()
{
 this._init ();
}
FigGeom.prototype._init = function ()
{

}FigGeom.prototype.clone = function ()
{

}

#include "FigGeom.js"

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

Ovalo.prototype = new FigGeom ();
Ovalo.prototype._init = function ()
{

}
Ovalo.prototype.clone = function ()
{

}

miércoles, 23 de marzo de 2011

Demostraciones de avance parcial

Taller de Programación Orientada a Objetos
Semana 8

Primero que nada les mostrare mi código html, que consta de una lista a seleccionar que formará el menú y las herramientas, por ahora menú solo contiene las opciones para dibujar lineas, libre, rectángulos y la opción herramientas contiene guardar, nuevo, salir y exportar, también contiene el elemento canvas que esta formado de 700 por 500 pixeles, y le activo los eventos de el mouse para cuando se pase por encima de el "onmouseover", "onmouseout" y "onclick" a cada uno le puse el nombre de la función mouseAdentro, mouseAfuera y click, lo que hace cada uno es detectar cuando el ratón pasa por el canvas.

Por ahora están juntos el css y el html.

Este es el código html:

Ahora les muestro mi código en javascript, por ahora esta muy simple ya que solo detecta los movimientos de mouse con las funciones ya mencionadas, y hace lineas simples aunque aun no de la forma que quisiera, este es el código:


var canvas=null;
var contexto=null;
var empiezo = false;
var guardo = new Array();

window.onload = function() {
 canvas=document.getElementById("paint");
 contexto=canvas.getContext("2d");
 evento("clickkkk plis");
}

function evento(str) {
 contexto.clearRect(0,0,canvas.width,canvas.height);
 contexto.font="9pt Calibri";
 contexto.textAlign="center";
 contexto.fillText(str, 288, 100);
}

function mouseAdentro(evt) {
 evento("estas adentro del canvas");
 
}

function mouseAfuera(evt) {
 evento("estas fuera");
}

function click(evt) {
       var mouseX = evt.clientX - canvas.offsetLeft;
 var mouseY = evt.clientY - canvas.offsetTop;
 evento("estas clickeando " + mouseX + " " + mouseY);
 if (!empiezo) {
     contexto.beginPath();
     contexto.moveTo(mouseX, mouseY);
     empiezo = true;
 } else {
     contexto.lineTo(mouseX, mouseY);
     contexto.stroke();
 }

}

function nuevo(){
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 500, 500);
}

Las partes más importantes del código considero que son la función click ya que es la encargada de hacer las lineas al sentir el evento de click, tiene un booleano que es el que ayuda a identificar si es la primera vez que se esta haciendo la linea o no,

otra función es la de nuevo,que se encarga de limpiar todo el canvas de una manera muy simple, dibuja un rectangulo blanco en todo el área del canvas, y aun tengo en el código una función que me imprime las coordenadas del mouse, esto es solo como prueba aún.

Ahora unas capturas de pantalla:

Así es como se ve el editor de dibujo:

El menú:

Las herramientas:

jueves, 17 de marzo de 2011

Pegar imagenes

$\frac{\int_{}^{}}{x}^{a}\sum \, \frac{\frac{\partial \coprod_{}^{}}{\partial x}}{}$

librería en javascript para hacer ecuaciones sin imágenes ni plugins :D
http://www.mathjax.org/

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

miércoles, 16 de marzo de 2011

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();

martes, 15 de marzo de 2011

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/

jueves, 10 de marzo de 2011

Nuevo visor de documentos sin plugins

Pueden subir documentos sin hacer ninguna cuenta en este sitio

http://crocodoc.com/