domingo, 15 de mayo de 2011

~Semana 13. Implementación de Interfaces Gráficas

Semana 13
Materia: Taller de Programación Orientada a Objetos
Hora: Jueves M1-M2



Hola a todos, en esta entrada les mostraré parte de código de mi interfaz gráfica. Para realizar mi interfaz gráfica utilicé una herramienta muy útil que te genera el código automáticamente. Netbeans:)




En este programa creé un JFrame que es el que se ve en la imagen de arriba, como pueden ver arriba se encuentran dos apartados, Source y Design en el apartado de Design se encuentran las paletas donde están los diferentes tipos de elementos para la interfaz (botones, panel, tablas, etc). Solo es cuestión de seleccionar el elemento que queramos poner y ponerlo en el JFrame. También se pueden modificar los elementos por ejemplo el tipo de letra, el color, etc. 




En esta ventana edite el Texto de Bienvenido a Nutrilife para hacerlo más grande y con letras negritas. Para hacer esto solo tienes que seleccionar el objeto que quieres modificar y hay un apartado del lado derecho que dice Properties. En ese apartado se encuentran diferentes propiedades de este objeto para que los puedas modificar. 

También puedes agregar Labels con imagenes como la imagen que yo puse del logo de mi programa. Para agregar la imagen al label tienes que crear un label y en sus propiedades hay una que dice icon, ahí puedes seleccionar la imagen que deseas poner en el Lable.






Ahora veamos partes del código. Primero les pondré la parte de código del Logo, de la frase Bienvenido a Nutrilife y de el primer botón.





setTitle("Nutrilife");

        jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/nutrilife/gui/logo_1201.png"))); // NOI18N

        jLabel2.setFont(new java.awt.Font("DejaVu Sans", 1, 48)); // NOI18N
        jLabel2.setText("Bienvenido a Nutrilife! ");

        jButton1.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton1.setText("NUEVO PACIENTE");
        jButton1.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton1ActionPerformed(evt);
            }

Como pueden ver en esta partesita del código la parte de setTitle sirve para ponerle el nombresito que va mero arriba en la ventana y le puse que apareciera Nutrilife, luego viene el JLabel1 que tiene el ícono o la imagen de mi programa, como pueden ver se pone con setIcon y se pone en getResourse la ubicación de la imagen, luego viene el JLabel2 que es el Label donde puse Bienvenido a Nutrilife! primero se pone la letra con setFont y vienen las propiedades de la letra (tipo de letra, tamaño) y también tiene otro método que es setText que es al que se le tiene que poner que quieres que diga el Label en este caso es "Bienvenido a Nutrilife!". Luego viene el botón que es el JButton1 el que viene siendo Nuevo Paciente el cual tiene un actionListener y dentro de este un actionPerformed que es para que le pongas lo que quieres que haga el botón. En mi caso yo le puse que ese botón quiero que abra una nueva ventana.



private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
    PacienteGUI form = new PacienteGUI();
    form.setVisible(true);
}              


Este botón habla a la ventana PacienteGUI que también esta declarada como JFrame. Se las muestro a continuación.


Vamos a correr estos JFrames.



Cuando le picamos al botón Crear Paciente nos aparece la siguente ventana.


Le agregué una línea al código del primer botón para que al momento de que abra la otra ventana se cierre la ventana anterior.

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
    PacienteGUI form = new PacienteGUI();
    form.setVisible(true);
    this.dispose();
} 
  


Ahora mostraré el código de la interfaz gráfica del primer JFrame

private void initComponents() {

        jLabel1 = new javax.swing.JLabel();
        jLabel2 = new javax.swing.JLabel();
        jButton1 = new javax.swing.JButton();
        jButton2 = new javax.swing.JButton();
        jButton3 = new javax.swing.JButton();
        jButton4 = new javax.swing.JButton();
        jButton5 = new javax.swing.JButton();
        jButton6 = new javax.swing.JButton();
        jButton7 = new javax.swing.JButton();
        jButton8 = new javax.swing.JButton();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
        setTitle("Nutrilife");

        jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/nutrilife/gui/logo_1201.png"))); // NOI18N

        jLabel2.setFont(new java.awt.Font("DejaVu Sans", 1, 48)); // NOI18N
        jLabel2.setText("Bienvenido a Nutrilife! ");

        jButton1.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton1.setText("NUEVO PACIENTE");
        jButton1.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton1ActionPerformed(evt);
            }
        });

        jButton2.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton2.setText("MODIFICAR PACIENTE");
        jButton2.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton2ActionPerformed(evt);
            }
        });

        jButton3.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton3.setText("BORRAR PACIENTE");
        jButton3.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton3ActionPerformed(evt);
            }
        });

        jButton4.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton4.setText("VER PACIENTES");
        jButton4.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton4ActionPerformed(evt);
            }
        });

        jButton5.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton5.setText("NUEVA DIETA");
        jButton5.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton5ActionPerformed(evt);
            }
        });

        jButton6.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton6.setText("MODIFICAR DIETA");
        jButton6.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton6ActionPerformed(evt);
            }
        });

        jButton7.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton7.setText("BORRAR DIETA");
        jButton7.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton7ActionPerformed(evt);
            }
        });

        jButton8.setFont(new java.awt.Font("DejaVu Sans Light", 1, 18));
        jButton8.setText("VER DIETAS");
        jButton8.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButton8ActionPerformed(evt);
            }
        });

        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addContainerGap()
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(layout.createSequentialGroup()
                        .addComponent(jLabel1, javax.swing.GroupLayout.PREFERRED_SIZE, 206, javax.swing.GroupLayout.PREFERRED_SIZE)
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                        .addComponent(jLabel2))
                    .addGroup(layout.createSequentialGroup()
                        .addGap(92, 92, 92)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING, false)
                            .addComponent(jButton2, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.DEFAULT_SIZE, 250, Short.MAX_VALUE)
                            .addComponent(jButton3, javax.swing.GroupLayout.DEFAULT_SIZE, 250, Short.MAX_VALUE)
                            .addComponent(jButton4, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.DEFAULT_SIZE, 250, Short.MAX_VALUE)
                            .addComponent(jButton1, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
                        .addGap(171, 171, 171)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                            .addComponent(jButton8, javax.swing.GroupLayout.DEFAULT_SIZE, 267, Short.MAX_VALUE)
                            .addComponent(jButton7, javax.swing.GroupLayout.DEFAULT_SIZE, 267, Short.MAX_VALUE)
                            .addComponent(jButton6, javax.swing.GroupLayout.DEFAULT_SIZE, 267, Short.MAX_VALUE)
                            .addComponent(jButton5, javax.swing.GroupLayout.DEFAULT_SIZE, 267, Short.MAX_VALUE))
                        .addGap(61, 61, 61)))
                .addGap(47, 47, 47))
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(layout.createSequentialGroup()
                        .addGap(34, 34, 34)
                        .addComponent(jLabel1)
                        .addGap(63, 63, 63))
                    .addGroup(layout.createSequentialGroup()
                        .addContainerGap(129, Short.MAX_VALUE)
                        .addComponent(jLabel2)
                        .addGap(32, 32, 32)))
                .addGap(26, 26, 26)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jButton1, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent(jButton5, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(30, 30, 30)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jButton2, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent(jButton6, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(30, 30, 30)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jButton3, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent(jButton7, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(34, 34, 34)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jButton4, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent(jButton8, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(131, 131, 131))
        );

        pack();
    }// 

Bueno tengo un problema con mi interfaz, ya logré conectarla a la base de datos pero no he podido conectar cada JTextField con mi base de datos para que al escribir en los JTextFields se guarden los datos en la base de datos. Si me guarda los datos al correr el programa pero en "terminal" 


Elegimos la opcion 2..


Escribimos los datos que nos piden, no importa si algunos datos no los llenamos y ahora veamos que ya se muestra en la base de datos :).

8 comentarios:

  1. Que tal Carmen, te quedo chido el logo aun no diseño el mio ): bueno quisiera comentarte que unos frames se ven más cafes y otros mas azules ¿qué paso ahi? :P No te creas es broma xP
    Bueno el comentario que te quiero hacer es el siguiente, veo bien tus implementaciones gráficas, y sugiero que mientras conectas tus ventanas con tu sistema, sería bueno que jugaras con netbeans agregando eventos para sobresaltar mas la recepcion o impresion de los datos que ingresas, puedes tambien crear tablas de dietas que funcionen como un documento ya listo para imprimir y entregarselo al cliente o con estadisticas que permitan recabar informacion sobre los pacientes para que tu prima pueda brindar cada día un trato mejor y más personalizado al cliente.
    Saludos =D

    ResponderEliminar
  2. jajajaa gracias por lo del logo, las ventanitas cafés aparecen asi porque es el Design Preview que da el programa, pero ya cuando corres el programa te aparecen mas nice azulitas, jajaja! Si eso de las tablas es muy biena idea pero todo eso lo pienso agregar mas adelante ahorita estoy viendo eso de la base de datos que no me funciona :( muchas gracias por tu aportación Adán. Saludos(:

    ResponderEliminar
  3. Muy bonito Carmen, definitivamente los Builders son muuy utiles a estas alturas XD

    Recuerda que los builder no te hacen todo magicamente, posiblemente batalles con tu base de datos porque tus ActionListeners no estan correctamente implementados y la información de cada campo no se recupera correctamente. Checa ese detalle a ver que sucede. Si tu base de datos funcionaba correctamente en la terminal, para mi que ese es el error que tienes.

    Para integrar tu base de datos con tu GUI te dejo el siguiente link, donde se explica como colocar los resultados (ResultSet) de mysql en una JTable para posteriormente solo colocar la JTable en un ScrollPane y visualizarla en tu pantalla, ojalá te sirva :)

    http://www.chuidiang.com/java/mysql/resultset_jtable.php

    Con cuidado... :)

    ResponderEliminar
  4. Muy bien Carmen =)
    Me queda una duda en la ventana donde se espera el llenado de datos del paciente... al final hay tres botones dos de ellos dicen "Guardar datos" y el otro "Continuar", que diferencia hay entre estos dos? a simple vista parecen ser lo mismo, y me quedaría con el de "Guardar Paciente"; el de "Salir" sale del programa o solo de esa ventana? si solo sale de la ventana sería mejor llamarlo Regresar. Solo sugerencias =)

    ResponderEliminar
  5. Carmen, esta excelente tu trabajo! mucho muy bien todo, pero te dare una recomendacion, a la hora de que el programa te mande un error en cualquier panel, o cualquier boton, no sabras cuales son por que todos tienen nombres iguales, lo que podrias hacer es dividirlos en diferentes nombres, ya sea en paneles o algo asi y con numeros :)

    ResponderEliminar
  6. Creo que en el campo de texto de "Nombre" seria bueno separar nombre y apellidos por cuestiones de manejo de información... otra cosa el campo edad podrías eliminarlo sacando tu misma la edad del paciente ya que el te dará su fecha completa de nacimiento.. eso es todo :D

    ResponderEliminar
  7. Hola carmen te quedo muy bien tu interfaz gráfica solo te recomiendo unas cosas en el formulario deberías tomar en cuenta la estatura del paciente, el peso del paciente para que lo tomes en cuenta ala hora de llenar el formulario para así asignar una dieta dependiendo del tipo de usuario nose también se podría incluir alergias etc.

    Con tu problema de las base de datos te dejo este tutorial que encontre en internet trata de conexión con bases de datos dentro de una aplicación Java usando Java Database Connection (JDBC)

    http://www.webtaller.com/construccion/lenguajes/java/lecciones/conexiones-db-java.php

    Y aquí te dejo un videotutorial de manejar base de datos con NetBeans

    http://www.youtube.com/watch?v=xz4lolka6vs

    Saludos (:

    ResponderEliminar
  8. Muchos comentarios muy buenos. A Cármen van 9 por la entrada y uno extra. Un punto extra también para Cecy, JC, Ramón, Héctor, Alex y Adán.

    ResponderEliminar