Max Hernandez

Laberinto - Ejemplo de Canvas en HTML5

martes, 10 de mayo de 2011

Diseño de interfaces gráficas (clase)

Buen día.

Esta semana nos toco ver en clase el tema de las interfaces gráficas primero empezare explicando que es:
Una interfaz gráfica es un grupo de imágenes y objetos gráficos, estos gráficos representan información u operaciones y permiten una sencilla interacción entre el usuario y el programa.

Puesto que el software del proyecto estoy fabricándolo en java voy a hablar de las herramientas que java nos provee para realizar esta tarea.

Los paquetes AWT y Swing.
El lenguaje java nos proporciona los paquetes AWT y Swing para construir interfaces graficas en nuestros programas, El paquete AWT contiene clases para:


  • Reaccionar con las diferentes interacciones del usuario con el programa los cuales son los manejadores de eventos
  • Herramientas para dibujar objetos en la pantalla
  • Cambiar el color de los elementos dibujados
  • Trabajar con fuentes
  • Trabajar con imágenes.


El paquete Swing nos ofrece herramientas mas especificas para trabajar con la interfaz gráfica como son:


  • Trabajar con bordes.
  • Trabajar con ventanas que sirven para selección de colores, archivos.
  • Trabajar con eventos de componentes específicos como del teclado, de componentes de texto, del ratón.
  • Trabajar con tablas.
  • Trabajar con componentes de texto.
  • Trabajar con menús.


Esta imagen muestra la jerarquia de clases y componentes del paquete swing.

(imagen obtenida de "http://jroller.com/DhilshukReddy/resource/JavaSwing/JavaSwingCompoentsList.PNG")


Diseño del proyecto
Bien para mi diseño esta era mi idea para el proyecto, una ventana, en el centro un área donde se muestra   el texto del archivo para editarse. En la parte superior un menú con las opciones para darle formato al texto, abrir, cerrar y guardar archivos, para buscar palabras o partes del programa, etc.
tambien debía tener un área arriba para separar los archivos abiertos y un área donde se mostrara el proyecto en el que se trabaja actualmente.


y esta es la version actual de la interfaz



Los componentes utilizados para crear la interfaz gráfica son los siguientes

  • JFrame para dibujar la ventana.
  • JPanel
  • BorderLayout
  • FLowLayout
  • JMenuBar para dibujar la barra de menú superior que contiene los menús.
  • JMenu son los menús de opciones contenidos en el JMenuBar al dar click sobre ellos se despliega un submenu
  • JMenuItem son los botones que se muestran en el JMenu.
  • JTextPane es el área donde se muestra y edita el texto.
  • JLabel que muestra etiquetas dentro de los componentes.




Layouts
Para acomodar de forma que mas nos guste los componentes en java utilizamos los Layouts y aquí las características de algunos:

  • FlowLayout el cual acomoda los componentes en el orden en el que se agregan al contenedor de izquierda a derecha en forma horizontal.
  • BoxLayout al igual que el FlowLayout acomoda los componentes en el orden que se agregan pero de norte a sur y en forma vertical.
  • BorderLayout en este se acomodan los componentes como en puntos cardinales(norte, sur, este y oeste) y al centro.
  • GridLayout en este caso se crean celdas y se agregan componentes en la celda especificada.
  • GridBagLayout es igual que el anterior se crean celdas de NxN pero en este los componentes pueden ocupar varias celdas horizontal y verticalmente. 



(imagen obtenida de "http://javafaq.nu/img/java_lectures/mt1420-2003-2004-lecture16-14_1.jpg")

Para el proyecto solo utilice un BorderLayout en la forma que se muestra en la imagen el norte el JMenuBar, al centro el JTabbedPane y al sur un JLabel.




Saludos.

10 comentarios:

  1. Excelente comparativa de AWT y SWING, me gustaría recomendarte un boton que te permita ocultar el area de proyecto, yo por ejemplo que he trabajado con eclipse me siento asfixiado de tantos paneles extras, a veces el usuario le gustaría trabajar en una interfaz simple y sencilla.
    Saludos Max :D

    ResponderBorrar
  2. Por cierto noté que el indicador de linea y columna está del lado opuesto que en el diseño, ahora si ya es todo por ahora :P

    ResponderBorrar
  3. la clase JTextPane tiene un metodo que se llama addCaretListener que te puede serivr saber en que parte del documento se trabaja y hacer que se actualice bien lo de lineas y columnas

    ResponderBorrar
  4. :D jeje no habia visto ese listener :P ahora solo ocupo saber como cambiar el texto del JLabel :)

    ResponderBorrar
  5. Si deseas cambiar el contenido de un JLabel, yo lo logre redibujando la pantalla cada vez que lo necesito.

    Sería bueno que implementes una clase que realice de manera independiente la ventana y que esta sea como la clase que administra la GUI en general, ahí mismo incluye un método administre los paneles, los coloque en la ventana y redibuje la ventana o panel actual para mostrar el nuevo contenido.

    Los métodos repaint() y updateUI() de java pueden servirte mucho para esta tarea.

    ResponderBorrar
  6. Cuando quieres cambiar el contenido de algun componente en tu ventana, es necesario redibujar todo el panel.
    Las funciones updateUI() y repaint() aplicadas al panel que contiene el elemento a actualizar te pueden ayudar mucho.
    Te recomiento armar un metodo cuya funcion sea gestionar esta tarea, que se encargue de colocar el panel activo y redibujarlo.

    ResponderBorrar
  7. Max va muy bien tu proyecto... Aunque yo te recomendaria poner un boton para poder cerrar cada tab o pestana de cada archivo.
    Podrias utilizar el metodo setComponentAt(int index, Component component) del JTabbedPane para que puedas anadir el boton

    Saludos.

    ResponderBorrar
  8. eit, que tal, la aplicación se ve muy buena, aqui te dejo un tutorial donde sobre el como ponerle la "X" al JtabedPane, creo que te seria muy util,

    http://java-elrincondetucasa.blogspot.com/2011/02/jtabbedpane-con-x.html

    no explica mucho, pero creo que el codigo de ejemplo te puede servir.

    Saludos!

    ResponderBorrar
  9. Max, tu proyecto te va quedando cada vez mejor, te recominedo y si tienes tiempo, para que se vea mas padre, es que el editor de texto te identifique algunas palabras y le las muestre en un color, asi como los demas editores y tambien apoyo con lo que dice ricardo

    ResponderBorrar
  10. Puntos extra: Isaísas, Max, JC, Cecy, Abrahan, José y Richi. 5 por la entrada a Max.

    ResponderBorrar