Semana 13
Materia: Programación Orientada a Objetos
Hora: Martes M1-M3
Hola a todos, en esta entrada les mostráre dibujos que realicé de mas o menos como quiero que quede mi programa con la interfaz gráfica.
Primero que nada hablemos de las interfaces gráficas. La interfaz gráfica también conocida como GUI (Graphical User Interface) es la forma en que el programa se comunica más facilmente con el usuario, donde los comandos de nuestro programa se muestran por medio de objetos gráficos (botones, ventanas,etc.) e imagenes.
Los dispositivos de interfaz humana se diseñan para conectar alguna parte del cuerpo del ser humano con la interfaz gráfica de forma que puedan ser introducidos al sistema. La mayoría son dispositivos que permiten introducir directamente información de "acción" al ordenador que tiene una iterfaz gráfica.
Por ejemplo el mouse es un dispositivo de interfaz humana, puede representar en la interfaz gráfica cosas como "apuntar", "pulsar", "arrastrar", "mover", etc. Los dispositivos más importantes son el teclado, el mouse, el trackball (bola), el cursor táctil (touchpad), la tableta gráfica y el Joystick.
Estos dispositivos se utilizan para introducir un tipo de información específica al sistema a través de interfaz gráfica.
Las ventanas son utilizadas de forma interactiva para la visualización, navegación de la información en un interfaz gráfico de usuario. A través de ellas podemos ver documentos, aplicaciones, íconos en los cuales se pueden realizar diferentes acciones.
Las siguientes imagenes son los dibujos que realicé de como me gustaría que quedara mi sistema ya con interfaz gráfica.
Primero que nada la pantalla de bienvenida donde se muestra el logo, el nombre de mi programa y un mensaje de bienvenida que dice "Bienvenido a Nutrilife!". También están los botones de Paciente, Dieta y Salir. El botón de Paciente te lleva a otra pantalla donde te aparecen los datos del paciente que ahorita les mostraré. El botón de Dieta lleva a otra ventana donde se muestra la tabla de energía que también ahorita mostraré y explicaré. Por último el botón salir como su nombre lo dice es para salir del sistema.
Primero vemos la ventana de paciente en la siguiente imagen, mi idea es que esta ventana tenga pestañas arriba donde se vaya cambiando para ir a las diferentes clases de paciente, como antecedentes familiares, enfermedades, entre otras cosas. Bueno en esta ventana se llenan los datos personales del paciente: nombre, edad, fecha de nacimiento, etc.. No todos los campos son obligatorios si no tiene por ejemplo teléfono foráneo o dirección foranea no es necesario que lo ponga. Los campos donde se llenarán estos datos son cuadros de texto, en algunos casos y por ejemplo en estado civil puse circulitos donde seleccionará el estado civil en el que se encuentra. Esta ventana tiene dos botones el de Guardar datos y Salir. Guardar datos se utilizará para guardar los datos que ya se hayan ingresado, estos datos van para la base de datos. El botón salir es para salir del sistema.
Ahora veamos las ventanas de Dieta. En esta ventana se muestra una tabla que es la tabla que sirve para hacer la dieta. En la energía se pone las kcal que el paciente debe comer por día, luego dependiendo de los resultados de los estudios se pondrá el porcentaje de carbohidratos, proteínas y lípidos que debe consumir el paciente. En esta ventana se encuentran dos botones uno que es continuar que es para seguir con la dieta y salir para salir del sistema.
Ahora veamos que pasará si le damos continuar en esta ventana. Se mostrará la pestaña de lácteos donde aparecen los alimentos lácteos permitidos en la dieta. Al lado de cada lácteo puse un cuadrito donde tendrá que poner el número de intercambios que podrá consumir de ese alimento. Esto es para que se realicen los cálculos correspondientes dependiendo de cada alimento. Abajo de esto se encuentra una sugerencia con un * y están los botones de continuar y salir.
Bueno esto es todo lo de esta entrada, espero que quede así como lo planie estaría perfecto, no se que tan dificil este pero primero quiero hacerlo sencillo y que funcione y ya después estaré modificandolo para mejorarlo. Comenten para puntos extras ya saben :D saludos!
Vaya.... si esta muy bien planeado :) Te felicito
ResponderEliminarOye solo un detalle, seria bueno que mejor le dieras otra función a tu botón de salir, no precisamente de cierre y salida, mejor algo como regresar a la opción anterior o menú anterior para que así no haya que re-abrir el sistema cada vez que termines una tarea :)
Vas bien mi chava, echale ganas :D
Esta muy bonita tu interfaz :) creo que podrías para la pantalla de bienvenida creo que podrías utilizar un "BorderLayout" para acomodarlo, en la parte norte podrías poner un "GridbagLayout" para acomodar el botón de cerrar y el texto con fondo gris que dice Nutrilife, en el centro puedes poner el logo y el otro texto y acomodarlo con otro "GridbagLayout" y al sur con un flowLayout alineado a la derecha para agregar los botones que podrian ser "JButton".
ResponderEliminaraquí una imagen donde muestra como se ven los Layouts
http://javafaq.nu/img/java_lectures/mt1420-2003-2004-lecture16-14_1.jpg
para añadir los layouts aun componente que puede ser la ventana JFrame, un JPanel o cualquier componente que descienda de un container simplemente estableces el Layout con la funcion setLayout
aquí un ejemplo de borderLayout:
JPanel p = new JPanel();
p.setLayout(new BorderLayout());
p.add(new Button("Okay"), BorderLayout.SOUTH);
y asi añadir mas paneles adentro de paneles o componentes con la funcion add :)
Para añadir el logo de nutrilife o imágenes puedes usar la clase ImageIcon
ResponderEliminarhttp://download.oracle.com/javase/1.4.2/docs/api/javax/swing/ImageIcon.html
Simplemente mandas como parámetro el link de tu imagen, lo añades a un Label y añades el Label a tu ventana :)
aquí un ejemplo:
ImageIcon icon = createImageIcon("images/middle.gif",
"a pretty but meaningless splat");
label1 = new JLabel("Image and Text", icon, JLabel.CENTER);
...
label3 = new JLabel(icon);
http://download.oracle.com/javase/tutorial/uiswing/components/icon.html
En este link vienen mas ejemplos y una imagen de como queda ese ejemplo :)
mira encontre un ejemplo muy bueno que podria servirte para cambiar de ventanas en tu programa http://java-elrincondetucasa.blogspot.com/2011/02/cambiar-paneles-en-tiempo-de-ejecucion.html
ResponderEliminarLo que hace es definir un panel principal, luego un panel llamado etiqueta y cuando quiere cambiar de ventana quita todos los paneles dentro del panel principal con
"panelPrincipal.removeAll();"
y luego le añade el panel que quiere que se muestre en la pantalla y actualiza y repinta el panel principal de esta manera
JPanel petiqueta=new JPanel();
petiqueta.add(panelActual);
panelPrincipal.add(petiqueta,BorderLayout.SOUTH);
panelPrincipal.updateUI();
panelPrincipal.repaint();
repaint();
"panelactual" es el panel que quiere que se muestre en la pantalla saludos
Juan Carlos, muchas gracias por tu comentario, si es buena idea lo que dices :) de echo modifiqué algunas cosas en la interfaz gráfica después de hacer estos dibujitos y no había puesto un botón de regresar o algo así solo puse uno de continuar.. pero que bueno que me dijiste tienes razon. De echo también tengo que hacer que al abrir otra ventana por ejemplo en la de Bienvenida cuando oprimes paciente se abre otra ventana y pues tiene que cerrarse la de atrás eso también tengo que hacerlo.
ResponderEliminarY Max ya entendi lo que me dices, si lo haré para que quede más organizado, muchas gracias por los tutoriales y por tus comentarios me ayudan mucho. Ahorita estoy viendo lo de como conectar mi base de datos para que cuando llenen el formulario de Paciente se vaya todo a la base de datos, creo que al final es cuando modificaré las cosas de la interfaz para que se vea más bonita porque si no nunca acabaré primero tengo que hacer que funcione y guarde los datos en la base de datos. Pero esto me servirá mucho cuando lo haga, muchas gracias por tus aportaciones, de echo te confieso que tuve unos problemitas cuando quería cambiar de ventanas si estaba programando bien el código pero me estorbaba una cosita que no recuerdo bien que era pero al quitarla todo funciono perfectamente :D muchas gracias chavos y suerte con su proyecto! y Mira que bien que me dijiste como hacer que se quiten los demás paneles me sirve mucho no sabía como Gracias(:
ResponderEliminareit, que tal, se ven muy buenas las ventanas que estas diseñando, yo te recomendaría que las programes todas, y después programes cada uno de los eventos que se pueden dar, y ya al ultimo las verificaciones de campo de texto y demás, también te recomendaría que intentaras programar en terminal, sin IDE`s esto porque si lo programas así, al terminarlo ya podrás programar cualquier GUI sin problema. Supongo que tendrás una base de datos al menos para los clientes, así que estaría bueno que en la ventanita pusieras solo el ID del paciente o el nombre, y que automáticamente se llenen todos los campos.
ResponderEliminarSaludos!
Cinco por la entrada. Luego, tres puntos extra para Max, uno para JC, José y Cármen.
ResponderEliminar