Mostrando entradas con la etiqueta interfaz. Mostrar todas las entradas
Mostrando entradas con la etiqueta interfaz. Mostrar todas las entradas

16 may 2011

Demostración final

Taller de Programación Orientada a Objetos 
Semana 14 

Diapositivas en persona o video en YouTube.


Demostración final
Ver más presentaciones de Esteban González.





En esta demostración:
- En que lenguaje.
- Porqué.
- Con que herramientas.
- Como obtenerlas.
- Como instalarlas.
- Highlights de código.
- Documentación del código.
- Como compilar/ejecutar (el software y las pruebas).
- Qué hace el programa, qué falta.
- Qué fue difícil, tardado, etc.

Presentación final

Programación Orientada a Objetos 
Semana 14 

Diapositivas en persona o video en YouTube.


Presentación final
Ver más presentaciones de Esteban Gonzalez.


Para esta presentación:
- Para qué sirve tu proyecto.
- Para quién es tu proyecto.
- Porqué.
- Diseño de clases (UML clases).
- Diseño de función (UML secuencia).
- Diseño de pruebas.
- Diseño de pantallas.
- Opcional (Base de datos, serializacion, distribuidos).

10 may 2011

Implementación de interfaces gráficas

Taller de Programación Orientada a Objetos 
Semana 13 

Códigos documentados que implementan pantallas gráficas con la funcionalidad correcta de los componentes ya incorporada.

Tal y como había creado mi diseño en papel, lo intente reproducir en Java lo más parecido posible y lo siguiente fue el resultado.

Como ya mencione antes esta es la ventana principal de mi programa, y sus opciones están en la barra lateral izquierda.


El código de esta parte. Es donde están acomodados los paneles, y el uso de acomodo mediante paneles adentro de paneles...


Esta es la segunda ventana que había propuesto. Es donde tenemos las opciones de ver los archivos de datos que tenemos hasta el momento y que se mostrarán a un lado en el panel blanco cuanod se haya seleccionado alguno.


Aquí es la ventana de opciones que se tendrán al tener una gráfica. Como ven le falta meterle más contenido aquí y es porque me falta implementar bien esta parte ya que solo he logrado crear pequeños ejemplos de gráficas pero desde Netbeans.


El código que genera el acomodo de los paneles. Para el cambio de paneles en la ventana sin necesidad de crear una ventana nueva, utilizo un repaint() para actualizar los paneles.


Lo de mostrar la información de un archivo aun no logro acomodarlo en el panel blanco, que más bien sería un JTextArea, y solo me sale en terminal. Espero corregirlo bien para la demostración del jueves.

Ejemplos de gráficas generadas con JFreeChart.

Estas imágenes son ejemplo del uso de la librería JFreeChart en Java para la creación de imágenes.


En la anterior me hace idea a lo que quiero llegar... un botón al final para guardar la gráfica.

Aquí los otros dos tipos de gráficas que tengo pensado incluir:

Lineal:

Pastel:

Poco a poco va tomando forma.

Diseño de interfaces gráficas

Programación Orientada a Objetos 
Semana 13 

Dibujos de diseños de pantallas que identifican los componentes utilizados, su posicionamiento y función.

Primero... ¿Qué es la interfaz gráfica?

La interfaz gráfica de usuario, conocida también como GUI (Graphical User Interface) es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz.

Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador.

Habitualmente las acciones se realizan mediante manipulación directa, para facilitar la interacción del usuario con la computadora. Surge como evolución de los intérpretes de comandos que se usaban para operar los primeros sistemas operativos y es pieza fundamental en un entorno gráfico. Como ejemplos de interfaz gráfica de usuario, cabe citar los entornos de escritorio Windows, el X-Window de GNU/Linux o el de Mac OS X, Aqua.

En el contexto del proceso de interacción persona-ordenador, la interfaz gráfica de usuario es el artefacto tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático.

Dibujos de ventanas

Aquí les muestro los dibujos de las pantallas tal y como yo quiero que queden, por lo menos hasta este momento.

En la primer ventana desplegada quiero que se muestre una barra lateral a la izquierda que muestre las opciones en este caso del menú principal: Ver bases de datos, Crear nueva, Recientes. Abajo se encuentra el botón Salir con la misma función del cierre de la ventana con la tacha de la esquina superior izquierda. El nombre del programa es desplegado en la ventana. A un lado esta un panel blanco que da la bienvenida mientras no se tenga que mostrar nada ahí.


El botón de bases de datos debe mostrarte en la ventana los archivos que se tienen disponibles para abrir y visualizar en pantalla.


Vemos que se tiene bajo la lista de archivos el botón Menú que te hace regresar a la ventana anterior.

Así es como se mostraría una tabla con los datos del archivo, no serían en celdas como lo es habitual en Excel pero si nos permite ver que información se encuentra ahí.


Vemos que al final se encuentra el botón graficar que nos permite precisamente crear una gráfica con los datos mostrados en la tabla.

Al crear la gráfica esta se muestra con las opciones predeterminadas y nos permite en la lista de opciones hacer cambios a esta misma.


Falta también un botón al final de la gráfica que nos permita guardar la gráfica como una imagen con el formato .png o .jpg y que estas se puedan mostrar en una ventana que se despliegue al presionar Recientes de la ventana principal.

Referencias:
Definición de interfaz gráfica