Max Hernandez

Laberinto - Ejemplo de Canvas en HTML5

jueves, 31 de marzo de 2011

Patrones de diseño(taller)

Buen día.

Esta semana estamos viendo en clase la utilidad de los patrones de diseño así que para el taller voy a utilizar dos patrones para mejorar mi código y para resolver un problema de forma eficiente.

Singleton

La clase "TextManager" y la clase "GUI" de mi proyecto solo necesitan una instancia pero en caso de que se crearan mas instancias seria molesto o correria riesgo el programa de fallas asi que para asegurar que eso no pase al continuar avanzando en el proyecto pense que este seria el patrón de diseño que me ayudaria.

El patrón de diseño singleton (instancia única) está diseñado para restringir la creación de objetos pertenecientes a una clase o el valor de un tipo a un único objeto.

Y aquí las partes de cada clase donde implemento Singleton
singleton en la clase GUI :)
package mxText;
import javax.swing.*;
import java.awt.*;
public class GUI extends javax.swing.JFrame{

private int numerodeBotones;
private static GUI instancia = null;
private Sheet texto;
JPanel p1, p2;
JMenuBar barraMenu;
String[] jMenu={"Archivo","Editar","Abrir","Nuevo","Guardar","Guardar Como"};

private GUI(String titulo, JTabbedPane tabs){
super(titulo);
super.setTitle(titulo);
super.setLocation(0,0);
super.setSize(500,500);
super.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
super.setLayout(new BorderLayout());
p1 = new JPanel();
p2 = new JPanel();
super.add(p1,BorderLayout.CENTER);
p1.setLayout(new BorderLayout());
this.texto = texto;
//JScrollPane scrollb = new JScrollPane(this.texto);
//JTabbedPane tabs = tabs;
p1.setPreferredSize(new Dimension(20,5));
barraMenu = new JMenuBar();
super.add(p2,BorderLayout.NORTH);
super.setJMenuBar(barraMenu);
//tabs.addTab("archivo 1",scrollb);
p1.add(tabs, BorderLayout.CENTER);
super.setVisible(true);
}


private synchronized static void crearInstancia(String titulo, JTabbedPane tabs){
if(instancia == null){
instancia = new GUI( titulo, tabs);
}
}

public static GUI obtenerInstancia(String titulo, JTabbedPane tabs){
if(instancia == null)
crearInstancia(titulo, tabs);
return instancia;
}

public Object clone() throws CloneNotSupportedException {
throw new CloneNotSupportedException();
}

};


Singleton en la clase TextManager:
package mxText;
import javax.swing.JFileChooser;
import javax.swing.*;
import javax.swing.text.*;
import java.io.File;
import java.lang.StringBuffer;
import java.awt.event.*;
import java.util.*;
/**
* Sirve para trabajar con el texto de un archivo y prepararlo para imprimirlo en la pantalla o en una hoja.
* @author Max Hernandez
*/
public class TextManager implements ActionListener {
private static TextManager instancia = null;
String nombreDeArchivo=null;
Reader lector =null;
JTabbedPane hojas =null;
Writer escritor =null;
Compuesto tabs;
StringBuffer buffer = new StringBuffer();
File fichero;
JFileChooser fileChooser= new JFileChooser();

private TextManager(JTabbedPane hojas){}

private synchronized static void crearInstancia(){
if(instancia == null){
instancia = new TextManager();
}
}

public static TextManager obtenerInstancia(JTabbedPane hojas){
this.hojas=hojas;
tabs = new Compuesto(hojas);
if(instancia == null)
crearInstancia();
return instancia;
}

public Object clone() throws CloneNotSupportedException {
throw new CloneNotSupportedException();
}

};


Composite

Para abrir gran cantidad de archivos y administrarlos por el usuario ya había planeado usar JTabbedPane pero no sabia exactamente como estructurarlos, sabia que necesitaría una lista y un buen algoritmo.

El patrón "Composite" sirve para construir objetos complejos a partir de otros más simples y similares entre sí. entonces de cierta forma lo uso para agregar componentes al JTabbedPane utilizandolo como una lista. Gracias a esto puedo definir componentes con las caracteristicas que quiera y asi cumplir varias funciones como en mi ejemplo el unico componente que uso al mismo tiempo guarda informacion del archivo y objetos para que funcione correctamente.

Este es el pedazo de código de la clase "TextManager" donde se implementa este patron de diseño despues de esto para abrir archivos solo creo un obeto "Tab" con los parametros necesarios, un compuesto y voy añadiendo archivos.
abstract class Componente extends JScrollPane
{
public File archivo;
public Sheet hoja ;
public String nombreArchivo;
public Componente(File ar, String nF, Sheet hoja){
super(hoja);
this.archivo = ar;
this.hoja = hoja;
this.nombreArchivo = nF;
}
public Componente(){}
abstract public void Agregar(Componente c);
};

class Compuesto extends Componente
{

private ArrayList hijo = new ArrayList();
private JTabbedPane tabs;
public Compuesto (JTabbedPane tabs){
this.tabs=tabs;
}
@Override
public void Agregar(Componente comp)
{
hijo.add(comp);
tabs.addTab(comp.nombreArchivo,comp);
}
};

class Tab extends Componente
{

public Tab (File fl, String nF, Sheet hoja)
{
super(fl,nF, hoja);
}
public void Agregar(Componente c)
{
System.out.println("no se puede agregar la tab");
}
public void Remover(Componente c)
}
System.out.println("no es posible completar la petición");
public void Mostrar(int depth)
{
System.out.println('-' + "" + nombreArchivo);
}
};



domingo, 27 de marzo de 2011

Patrones de diseño(Clase)

Buen día.
Como en la programación orientada a objetos la reutilización de herramientas es muy habitual esta semana nos toco tocar el tema de los patrones de diseño.
Los patrones de diseño los cuales son soluciones estandar para problemas comunes en la programacion. Ademas que agiliza la planeación, estructuración y codificación de un proyecto.
Un patrón de diseño es una solución a un problema de diseño.

Para la publicación de esta semana voy a analizar los diferentes tipos de patrones de diseño los cuales pueden ser de utilidad en mi proyecto.


Singleton

El patrón de diseño singleton (instancia única) está diseñado para restringir la creación de objetos pertenecientes a una clase o el valor de un tipo a un único objeto.

Utilizare este patron el mis clases "TextManager" y "GUI" estas clases se encargan de administrar los archivos que son abiertos y dibujar una ventana que permite configurar diferentes opciones para el programa respectivamente. Creo que esto me sera util para evitar errores al iniciar el programa asi se evita que se abra una ventana extra o que los archivos que gestiona "TextManager" este divididos en dos o mas instancias de este.



Composite

El patrón Composite sirve para construir objetos complejos a partir de otros más simples y similares entre sí, gracias a la composición recursiva y a una estructura en forma de árbol.

Este patrón me parece util para poder abrir n cantidad de archivos con el programa y organizarlos en "tabs" con esto creo un componente que serias los "tabs" con las hojas y despues solo los agrego a un compuesto que sera una lista con los tabs que tengo, despues cada que el usuario quiera una nueva hoja el programa solo agrega un componente a la lista.



jueves, 24 de marzo de 2011

Demostraciones avance parcial (tall)

buen día.
Esta publicación esta dedicado a mostrar el estado actual de mi proyecto así que mostrare su funcionamiento y abajo mi código.



package mxText;
import java.lang.StringBuffer;
//import mxEdit.*;
/**
* Gestiona el editor de texto para que funcione correctamente y junta diferentes partes.
* @author Max Hernandez
*
*/
public class MxText {
/**
*/
String nombreArchivo;
Sheet areaTexto = new Sheet();
TextManager textActions;
//TextManager manager = null;
//GUI Grafic = null;
public MxText(){
textActions = new TextManager(areaTexto);
GUI ventana = new GUI("Soy una ventana",areaTexto);
ventana.barraPrincipal(textActions);
}

//void Main(){}
/**
* Crea un archivo con las opciones de usuario.
*/
public void opciones(){}


public static void main(String[] args){
MxText CorazonNegro = new MxText();
}

};


package mxText;
import javax.swing.*;
import java.awt.*;
//import mxEdit.Sheet;
/**
*Clase que sirve de interfaz grafica para un programa podria utilizarse como base
*para cualquier programa, esta se encarga de dibujar una ventana en la pantalla y
*agregar diferentes elementos y controlarlos.
* @author Max Hernandez
*/
public class GUI extends javax.swing.JFrame{

private int numerodeBotones;
private Sheet texto;
JPanel p1, p2;
JMenuBar barraMenu;
String[] jMenu={"Archivo","Editar","Abrir","Nuevo","Guardar","Guardar Como"};

public GUI(String titulo, Sheet texto){
super(titulo);
super.setTitle(titulo);
super.setLocation(0,0);
super.setSize(500,500);
super.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
super.setLayout(new BorderLayout());
p1 = new JPanel();
p2 = new JPanel();
super.add(p1,BorderLayout.CENTER);
p1.setLayout(new BorderLayout());
this.texto = texto;
JScrollPane scrollb = new JScrollPane(this.texto);
JTabbedPane tabs = new JTabbedPane();
p1.setPreferredSize(new Dimension(20,5));
barraMenu = new JMenuBar();
super.add(p2,BorderLayout.NORTH);
super.setJMenuBar(barraMenu);
tabs.addTab("archivo 1",scrollb);
p1.add(tabs, BorderLayout.CENTER);
super.setVisible(true);
}
/**
* Es la clase que prepara todos los componentes para e imprime en la pantalla.
*/
public void barraPrincipal(TextManager listener){
JMenu archivo = new JMenu(jMenu[0]);
JMenu editar = new JMenu(jMenu[1]);
barraMenu.add(archivo);
barraMenu.add(editar);
JMenuItem abrir = new JMenuItem(jMenu[2]);
JMenuItem nuevo = new JMenuItem(jMenu[3]);
JMenuItem guardar = new JMenuItem(jMenu[4]);
JMenuItem guardarComo = new JMenuItem(jMenu[5]);
abrir.addActionListener(listener);
abrir.setActionCommand("abrir");
nuevo.addActionListener(listener);
nuevo.setActionCommand("nuevo");
guardar.addActionListener(listener);
guardar.setActionCommand("guardar");
guardarComo.addActionListener(listener);
guardarComo.setActionCommand("guardarComo");
archivo.add(nuevo);
archivo.add(abrir);
archivo.add(new JSeparator());
archivo.add(guardar);
archivo.add(guardarComo);
}

public void dibujar(){

}
/**
* Este metodo se encarga de cambiar la posición de los elementos en la pantalla.
* @param elemt numero que identifica el elemento.
* @param cord cordenada de a donde se desea mover el elemento
* @return cordenada Regresa la cordenada en la pantalla del elemento movido o un -1 si no se puede mover
*/
public int moverElemento(){return 0;}
/**
* Alamacena y gestiona la posicion en la pantalla de los elementos cuales deses sean añadidos.
* @return cordenada
*/
public void gestorElemento(){}
/**
* Recibe elementos y les da un lugar en la pantalla para despues ser gestionado.
*/
public void anadirElemento(){}

};


package mxText;
import java.nio.charset.Charset;
import java.io.*;
import java.lang.StringBuffer;
/**
* Clase que verifica la códificacion de un arcvhio y despues regresa el contenido de este.
* @author Max Hernandez
*/
public class Reader{
// Atributos
public String nameFile;
private File ar=null;
private FileReader fr=null;
private BufferedReader into =null;
private StringBuffer buffer =null;

//Constructor
public Reader(String name,File fl, StringBuffer buffer){
this.nameFile = name;
this.buffer= buffer;
try{
ar =fl;
fr = new FileReader(ar);
into = new BufferedReader(fr);
}catch(Exception e){
e.printStackTrace();
}
}

/**
* prepara el texto para ser pedido por la clase Administradora de texto.
*/
void lector(){}
/**
* Revisa la codificación de caracteres del archivo.
*/
public void decodificador(){}
/**
* Devuelve el contenido de el documento en un estado con el cual es facil para un programa trabajar.
*/

public void devolverDocumento(){
int c;
try{
while( (c = into.read()) != -1){
buffer.append((char)c);
}
buffer.deleteCharAt(buffer.length()-1);
}catch(Exception e){
e.printStackTrace();
}

}

public void cerrarArchivo(){
try{
fr.close();
}catch(Exception e){
e.printStackTrace();
}
}


/*public static void main(String[] args){

StringBuffer bufferFeliz = new StringBuffer();
Reader leer = new Reader(args[0], bufferFeliz);
leer.devolverDocumento();
leer.cerrarArchivo();

System.out.print(bufferFeliz.toString());
}*/

};


package mxText;

/**
* Esta clase es una extencion de una herramienta que sirve de interfaz
* entre el usuario y el programa. Es una area donde se ingresa y se edita
* el texto de archivos.
*@author Max Hernandez
*/
class Sheet extends javax.swing.JTextPane { // Una pare de la interfaz grafica y sabe estructurar el texto en la pantalla

public Sheet(){
super();
}
/**
* Método que se encarga de imprimir el texto en la pantalla.
*/
void dibujar(){} // lo que sea que le manden
/**
* Verifica el área de texto para ver las modificaciónes hechas por el usuario al texto.
*/

}


package mxText;
import javax.swing.JFileChooser;
import java.io.File;
import java.lang.StringBuffer;
import java.awt.event.*;
/**
* Sirve para trabajar con el texto de un archivo y prepararlo para imprimirlo en la pantalla o en una hoja.
* @author Max Hernandez
*/
public class TextManager implements ActionListener {

String nombreDeArchivo=null;
Reader lector =null;
Sheet hoja =null;
Writer escritor =null;
StringBuffer buffer = new StringBuffer();
File fichero;
JFileChooser fileChooser= new JFileChooser();
/**
* Buscar elementos en un texto
*/

public void actionPerformed(ActionEvent e){
String cmd = e.getActionCommand();

if(cmd == "abrir")
this.abrir();

if(cmd == "nuevo")
System.out.println("Se ha picado nuevo");

if(cmd == "guardar")
this.guardar();

if(cmd == "guardarComo" )
this.guardarComo();
}


public TextManager(Sheet hoja){
this.hoja=hoja;
}
public void buscar(){}
public void abrir(){
fileChooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
int seleccion = fileChooser.showOpenDialog(hoja);
if (seleccion == JFileChooser.APPROVE_OPTION){
buffer.delete(0,buffer.capacity());
fichero = fileChooser.getSelectedFile();
lector = new Reader(" ",fichero,buffer);
lector.devolverDocumento();
lector.cerrarArchivo();
hoja.setText(buffer.toString());
}
}
public void guardar(){
buffer.delete(0,buffer.capacity());
buffer.append(hoja.getText());
escritor = new Writer("",fichero,buffer);
escritor.escribirDocumento();
escritor.cerrarArchivo();
}
public void guardarComo(){
fileChooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
int seleccion = fileChooser.showOpenDialog(hoja);
if (seleccion == JFileChooser.APPROVE_OPTION){
fichero = fileChooser.getSelectedFile();
}
}
/**
* Organiza el texto para mas sensilla modificación.
*/
public void acomodarTexto(){}

}


package mxText;
import java.nio.charset.Charset;
import java.io.*;
import java.lang.StringBuffer;
/**
* La funcionalidad de esta clase va orientada a la impresion de datos
* en un archivo de texto, revisa la códificacion de caracteres y tiene los metodos
* necesarios para obtener.
* @author Max Hernandez
*/
public class Writer{

// atributos
private String nameFile;
private File ar=null;
private FileWriter fw=null;
private StringBuffer buffer =null;
/**
* Constructor que ocupa la direccion del archivo con la informacion dada.
*/
public Writer (String name,File fl, StringBuffer buffer){
this.nameFile = name;
this.buffer= buffer;
try{
if(fl == null){
ar=new File(name);
}else{
ar =fl; }
fw = new FileWriter(ar);
}catch(Exception e){
e.printStackTrace();
}
}
/**
* Guarda en un archivo la informacion que se le es mandada caracter por caracter con su codificacion
* que le es mandada.
*/
void escribirDocumento(){
try{
fw.write(buffer.toString());
// es como solia decir la vieja abuela argaslakslasdlaskjlaklskaslsj X_X
// abuela? abuela!!? :(
}catch(Exception e){
e.printStackTrace();
}
}
void cerrarArchivo(){
try{
fw.close();
}catch(Exception e){
e.printStackTrace();
}
}

/*public static void main(String[] args){
StringBuffer bufferFeliz = new StringBuffer();
bufferFeliz.append("Su hermano fue en su busca, a tierras muy lejanas. En medio de las tropas, jugándose hasta el alma. Aquel corazón negro, de oscuros sentimientos, quedo en el pasado hoy es un gran guerrero. La tierra que lo vio nacer, celebra su regreso.");
Writer escribir = new Writer(args[0], bufferFeliz);
escribir.escribirDocumento();
escribir.cerrarArchivo();
}*/

};


Hasta ahora mi editor de texto es capaz de desplegar una ventana con un JFrame, y adentro de esta un area de trabajo esto logrado con la clase JTextPane escogì esta clase puesto que es la mas potente que encontre en las clases estandar de java. para la barra superior use un JMenuBar que lo unico que hace es mostrar la barra, despues le añado elementos con el JMenu y les asigno un listener que se encuentra en la clase TextManager.

Con la opciòn abrir tiene la capacidad de mostrar esta ventana que la agregue facilmente con un JFileChoose y esta regresa un File el cual mando a mi clase Reader este optiene todo el texto y lo guarda en un StringBuffer para regresarlo a TextManager para que este lo mande a la clase Sheet y se imprima en la pantalla.


Para guardarlo solo se da clik a la opcion guardar y con eso el editor ya tiene la capacidad de editar archivos sin estructura.
Hasta ahora solo puedo ver un archivo ala ves pero mis proximas metas son utilizar una lista enlazada para crear "n" numero de tabs para "n" numero de archivos para "n" numero de Sheets .
Mi otra meta es lograr que reconozca estructura o palabras en el texto y las resalte cambiandoles el color.

Saludos.

miércoles, 16 de marzo de 2011

Diagramas de clases y secuencia UML (taller)

Buen día.
Esta semana en el taller nos toca ver como utilizar una software para modelado de diagramas para convertir código a diagramas o viceversa.
Para hacer esto utilice la herramienta Umbrello y voy a mostrar paso a paso como utilice esta herramienta.

Esto me fue de utilidad ya que con esto me ayudo a darme cuenta de problemas con el diseño de mi programa.

En primer lugar descargue e instale esta herramienta. en mi caso la descargue e instale desde Ubuntu Software Center pero también se encuentra en su pagina oficial: http://uml.sourceforge.net/download.php
Después lo ejecute y me pidio una especie de registro nada complicado, luego me apareció esta ventana y ya estaba listo para utilizarse.


Gracias a esta herramienta importar código a un diagrama UML fue bastante sencillo, en la barra de opciones que esta arriba escogí la opción code>import proyect como se muestra en la imagen.



Con lo anterior se me desplegó la siguiente ventana donde especifiqué la carpeta donde se encuentra el código y el lenguaje en el que fue creado.
Con esto umbrello me organizo automaticamente las clases de mi proyecto y me las mostro como un arbol en la parte izquierda, desde ahi se pueden editar los nombres, metodos y aributos de cada clase.

Ahora para crear el diagrama de clases simplemente arrastre las clases al área de trabajo y se dibujo automaticamente. cabe destacar que si en tu código un método de la la clase es privado al importar el diagrama y arrastrar la clase al área de trabajo no se mostrara ese método.

Umbrello automaticamente me crea el diagrama junto con las flechas que especifican la interacción entre los programas.
Para pasar el diagrama a código primero tenemos que especificar el lenguaje en el que trabajamos para esto vamos a code>Active Language y seleccionamos el lenguaje en el que trabajamos que en mi caso es java.



Ahora para pasar el diagrama a código seleccionamos la opción code>Generate All Code y automaticamente nos crea el paquete de código en tu carpeta de usuario de ubuntu ahí nos pedirá la carpeta uml-generated-code pero en caso de no tenerla la crea el programa.
Esta es la carpeta con el proyecto que me creo Umbrello.



Y esta es el código de la clase MxText que me genero umbrello

package mxEdit;


/**
* Class MxText
*/
public class MxText {

//
// Fields
//
/**

*
* */

public String[] usuario;

//
// Constructors
//
public MxText () { };

//
// Methods
//


//
// Accessor methods
//

/**
* Set the value of usuario
*
*
* @param newVar the new value of usuario
*/
public void setUsuario ( String[] newVar ) {
usuario = newVar;
}

/**
* Get the value of usuario
*
*
* @return the value of usuario
*/
public String[] getUsuario ( ) {
return usuario;
}

//
// Other methods
//

/**
*/
public void opciones( )
{
}


/**
* @param args
*/
public static void main( String[] args )
{
}


}
como puede verse en el código el programa me construye las clases, métodos, da nombre a algunas variables y me genera documentación.

Saludos.

Diagramas de clases y secuencia UML (clase)

Buen día.

Esta semana el tema a tratar en clase son los diagramas de lenguaje unificado de modelado o UML(Unified Modeling language)es el lenguaje de modelado de sistemas de software más conocido y utilizado en la actualidad.

Este lenguaje de modelado se compone de trece diagramas para esquematizar nuestro software los cuales son los siguientes:
Los Diagramas de Estructura enfatizan en los elementos que deben existir en el sistema modelado:
  • Diagrama de clases
  • Diagrama de componentes
  • Diagrama de objetos
  • Diagrama de estructura compuesta (UML 2.0)
  • Diagrama de despliegue
  • Diagrama de paquetes

Los Diagramas de Comportamiento enfatizan en lo que debe suceder en el sistema modelado:
  • Diagrama de actividades
  • Diagrama de casos de uso
  • Diagrama de estados

Los Diagramas de Interacción son un subtipo de diagramas de comportamiento, que enfatiza sobre el flujo de control y de datos entre los elementos del sistema modelado:
  • Diagrama de secuencia
  • Diagrama de comunicación, que es una versión simplificada del Diagrama de colaboración (UML 1.x)
  • Diagrama de tiempos (UML 2.0)
  • Diagrama global de interacciones o Diagrama de vista de interacción (UML 2.0)

Estos diagramas nos permiten tener una representación visual dinámica de nuestro software tanto de la estructura de este como su comportamiento o la secuencia de ejecución de el mismo. Con esto podemos darnos una mejor idea de el funcionamiento de nuestro programa al planearlo lo cual nos ayuda a evitar algunos errores en nuestro trabajo.

La primera version de UML salio a la luz en 1997 después de que James Rumbaugh,Ivar Jacobson se unieran a la compañía de Grady Booch así juntaron sus ideas y crearon este lenguaje de modelado después a estas personas se les conoció como "los tres amigos".
Para esta publicación me centrare en dos diagramas en especial que son el diagrama de clases y el de secuencia. Para fabricarlos utilice umbrello una herramienta gratuita para ubuntu y windows. Experimente algunos bugs mientras lo usaba pero es cómoda y tiene lo necesario para crear diagramas.
esta es la página oficial:
http://uml.sourceforge.net/

DIAGRAMA DE CLASES



DIAGRAMA DE SECUENCIA



fuentes:
http://es.wikipedia.org/wiki/Lenguaje_Unificado_de_Modelado
http://www.programacion.com/articulo/introduccion_a_uml_181
http://www.ingenierosoftware.com/analisisydiseno/uml.php

saludos.