martes, 10 de mayo de 2011

Interfaces Gráficas (Taller)

En esta entrada les presentaré los códigos para representar los bocetos de la interfaz que diseñé anteriormente para el proyecto.

(Presentare las líneas encargadas de la construcción únicamente de la interfaz para no extenderme mucho.)

Primero la interfaz del Menú de Inicio o Panel de Control Principal.

Esta interfaz es el menu de bienvenida al usuario, por el que este accedera a las opciones del sistema.

Iniciamos declarando el método que contendrá los objetos que se encargaran de crear la interfaz con sus componentes.

private void initComponents() {

        jLabel1 = new javax.swing.JLabel();
        jLabel2 = new javax.swing.JLabel();
        jLabel3 = new javax.swing.JLabel();
        jLabel4 = new javax.swing.JLabel();
        jLabel5 = new javax.swing.JLabel();
        jTextField1 = new javax.swing.JTextField();
        jButton1 = new javax.swing.JButton();

Ahora, declaramos cada componente de la interfaz con sus atributos.
jLabel1.setBackground(new java.awt.Color(0, 0, 0));
        jLabel1.setFont(new java.awt.Font("Arial", 1, 18));
        jLabel1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        jLabel1.setText("MENU PRINCIPAL");
        jLabel1.setHorizontalTextPosition(javax.swing.SwingConstants.CENTER);

        jLabel2.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel2.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        jLabel2.setText("1 -> Agregar Producto");

        jLabel3.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel3.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        jLabel3.setText("2 -> Ver Lista de Productos");

        jLabel4.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel4.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        jLabel4.setText("3 -> Salir del Sistema");

        jLabel5.setFont(new java.awt.Font("Arial", 1, 14));
        jLabel5.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        jLabel5.setText("Ingrese numero de opcion:");

        jTextField1.setHorizontalAlignment(javax.swing.JTextField.TRAILING);

        jButton1.setFont(new java.awt.Font("Tahoma", 1, 10));
        jButton1.setText("ACCEDER");

Y por último, crear el Panel y la Ventana de la interfaz, seguido del acomodo que tendrán todos los componentes antes declarados, para darle estética a la interfaz, se declaran tamaños, posiciones y coordenadas de cada uno de estos, uno por uno.
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addGap(75, 75, 75)
                .addComponent(jLabel1, javax.swing.GroupLayout.DEFAULT_SIZE, 362, Short.MAX_VALUE)
                .addGap(163, 163, 163))
            .addGroup(layout.createSequentialGroup()
                .addGap(90, 90, 90)
                .addComponent(jLabel5)
                .addGap(38, 38, 38)
                .addComponent(jTextField1, javax.swing.GroupLayout.PREFERRED_SIZE, 33, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addContainerGap(224, Short.MAX_VALUE))
            .addGroup(layout.createSequentialGroup()
                .addContainerGap(161, Short.MAX_VALUE)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addComponent(jLabel2)
                    .addComponent(jLabel3)
                    .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING)
                        .addComponent(jButton1, javax.swing.GroupLayout.PREFERRED_SIZE, 87, javax.swing.GroupLayout.PREFERRED_SIZE)
                        .addComponent(jLabel4)))
                .addGap(220, 220, 220))
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addGap(12, 12, 12)
                .addComponent(jLabel1, javax.swing.GroupLayout.PREFERRED_SIZE, 37, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                .addComponent(jLabel2, javax.swing.GroupLayout.PREFERRED_SIZE, 20, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                .addComponent(jLabel3, javax.swing.GroupLayout.PREFERRED_SIZE, 25, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addGap(4, 4, 4)
                .addComponent(jLabel4, javax.swing.GroupLayout.PREFERRED_SIZE, 25, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addGap(18, 18, 18)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE, false)
                    .addComponent(jLabel5, javax.swing.GroupLayout.PREFERRED_SIZE, 28, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent(jTextField1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(41, 41, 41)
                .addComponent(jButton1, javax.swing.GroupLayout.PREFERRED_SIZE, 34, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addGap(144, 144, 144))
        );

        pack();
    }

Proceso de Compilación/Ejecución:


Resultado Final:

Ahora vamos con la interfaz del panel de Altas de Productos.

Para el panel de Altas de Productos practicamente es lo mismo que en el del panel de control solo que ahora se ven mas JLabels y JTextFields.

Este Panel o Interfaz tiene el objetivo de llenar un formulario para poder dar de alta un producto en el sistema y guardarlo.

Primero el método que contendrá objetos y atributos de los componentes de la interfaz gráfica. 
private void initComponents() {

        jLabel1 = new javax.swing.JLabel();
        jLabel2 = new javax.swing.JLabel();
        jLabel3 = new javax.swing.JLabel();
        jLabel4 = new javax.swing.JLabel();
        jLabel5 = new javax.swing.JLabel();
        jTextField1 = new javax.swing.JTextField();
        jTextField2 = new javax.swing.JTextField();
        jTextField3 = new javax.swing.JTextField();
        jTextField4 = new javax.swing.JTextField();
        jButton1 = new javax.swing.JButton();

        jLabel1.setFont(new java.awt.Font("Tahoma", 1, 18));
        jLabel1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        jLabel1.setText("Ingreso de Datos del Producto");
        jLabel1.setCursor(new java.awt.Cursor(java.awt.Cursor.CROSSHAIR_CURSOR));

        jLabel2.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel2.setText("NOMBRE");

        jLabel3.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel3.setText("ID");

        jLabel4.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel4.setText("CANTIDAD DISPONIBLE");

        jLabel5.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel5.setText("PRECIO UNITARIO");

        jButton1.setFont(new java.awt.Font("Tahoma", 1, 14));
        jButton1.setText("AGREGAR");

Y enseguida, todo el procedimiento de acomodo y ordenación de los componentes de la interfaz.

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(layout.createSequentialGroup()
                        .addGap(179, 179, 179)
                        .addComponent(jButton1))
                    .addGroup(layout.createSequentialGroup()
                        .addGap(70, 70, 70)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                            .addComponent(jLabel1)
                            .addGroup(layout.createSequentialGroup()
                                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                                    .addComponent(jLabel3, javax.swing.GroupLayout.PREFERRED_SIZE, 44, javax.swing.GroupLayout.PREFERRED_SIZE)
                                    .addComponent(jLabel4)
                                    .addComponent(jLabel5))
                                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                                    .addGroup(layout.createSequentialGroup()
                                        .addGap(32, 32, 32)
                                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                                            .addComponent(jTextField4, javax.swing.GroupLayout.DEFAULT_SIZE, 136, Short.MAX_VALUE)
                                            .addComponent(jTextField3, javax.swing.GroupLayout.DEFAULT_SIZE, 136, Short.MAX_VALUE)))
                                    .addComponent(jTextField1, javax.swing.GroupLayout.DEFAULT_SIZE, 168, Short.MAX_VALUE)))
                            .addGroup(layout.createSequentialGroup()
                                .addComponent(jLabel2, javax.swing.GroupLayout.PREFERRED_SIZE, 80, javax.swing.GroupLayout.PREFERRED_SIZE)
                                .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                                .addComponent(jTextField2, javax.swing.GroupLayout.DEFAULT_SIZE, 251, Short.MAX_VALUE)))))
                .addContainerGap())
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addContainerGap()
                .addComponent(jLabel1, javax.swing.GroupLayout.PREFERRED_SIZE, 57, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addGap(18, 18, 18)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jLabel3, javax.swing.GroupLayout.PREFERRED_SIZE, 25, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent(jTextField1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jLabel2, javax.swing.GroupLayout.PREFERRED_SIZE, 23, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addComponent(jTextField2, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(35, 35, 35)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jLabel4)
                    .addComponent(jTextField3, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(29, 29, 29)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jLabel5)
                    .addComponent(jTextField4, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE))
                .addGap(30, 30, 30)
                .addComponent(jButton1)
                .addContainerGap(javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
        );

        pack();
    } 

Proceso de Compilación/Ejecución:



Resultado Final:

Y por último la interfaz correspondiente a la opción de Consulta o Vista de inventario. Al agregar satisfactoriamente un producto el programa lo va guardando en una tabla a la que posteriormente podemos acceder desde el Panel de Control Principal.

Método donde iniciamos los componentes de esta interfaz:

private void initComponents() {

        jLabel1 = new javax.swing.JLabel();
        jScrollPane1 = new javax.swing.JScrollPane();
        jTable1 = new javax.swing.JTable();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

En este caso la demostración solo es de manera "estática" (aun estoy en proceso de conectar todas las interfaces del sistema)

Declaramos el encabezado que tendra la interfaz.

jLabel1.setFont(new java.awt.Font("Tahoma", 1, 14));
        jLabel1.setText("LISTA DE INVENTARIO DE PRODUCTOS");

Asignamos los parametros estaticos que por el momento queremos para probar y demostrar la interfaz. Como elemento extra agregue un KeyListener para que al momento que recorramos la tabla nos resalte el elemento que tenemos seleccionado (ya sea con las flechas del teclado o haciendo clic sobre una celda determinada con el apuntador del mouse).

jTable1.setBorder(javax.swing.BorderFactory.createLineBorder(new java.awt.Color(0, 0, 0)));
        jTable1.setModel(new javax.swing.table.DefaultTableModel(
            new Object [][] {
                {"001", "Escoba", "40", "19.90"},
                {null, null, null, null},
                {null, null, null, null},
                {null, null, null, null},
                {null, null, null, null}
            },
            new String [] {
                "ID", "NOMBRE", "CANTIDAD", "PRECIO UNITARIO"
            }
        ));
        jTable1.addKeyListener(new java.awt.event.KeyAdapter() {
            public void keyTyped(java.awt.event.KeyEvent evt) {
                jTable1KeyTyped(evt);
            }
        });
        jScrollPane1.setViewportView(jTable1);

Y ya por ultimo mero ordenamiento de lo que fue el encabezado y el Panel que contiene esta interfaz.

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()
                .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 563, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addContainerGap(21, Short.MAX_VALUE))
            .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
                .addContainerGap(152, Short.MAX_VALUE)
                .addComponent(jLabel1)
                .addGap(150, 150, 150))
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addContainerGap()
                .addComponent(jLabel1, javax.swing.GroupLayout.PREFERRED_SIZE, 41, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addGap(12, 12, 12)
                .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 92, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addContainerGap(56, Short.MAX_VALUE))
        );

        pack();
    }
Proceso de Compilación/Ejecución:


Resultado Final:

Bueno pues es todo por esta entrada, cualquier duda comentario o sugerencia comenten, seguiré agregandole carne a esto y se los expondré en las exposiciones finales (:

Saludos!!
Publicado por Adán Silva en 7:09

7 comentarios:

  1. Tecnologias de Software12 de mayo de 2011, 7:10

    eit que tal, te recomiendo que uses la librería swing, también te recomiendo que programes las interfaces gráficas como todo lo demás, sin IDE's, con un poco de practica se vuelve una cosa bien sencilla.

    Saludos!

    ResponderEliminar
  2. Juan Carlos Espinosa Ceniceros15 de mayo de 2011, 23:33

    Felicidades por tu interfaz :)
    Despues de batallar todo el domingo.
    Oye te recomiendo de verdad el GridBagLayout, realmente es super sencillo de usar, te dejo una referencia donde te lo explican con peras y manzanas :)

    http://www.chuidiang.com/java/layout/GridBagLayout/GridBagLayout.html

    Tu menú principal se ve interesante, podrías estar mejor si en lugar de pedir el número ponen botoncitos, o hasta un JMenuBar.

    Otra cosa que note es el proceso de compilación, porque lo haces individualmente??

    Espero te sirva el link que ye deje, suerte :)

    ResponderEliminar
  3. Cecilia Urbina16 de mayo de 2011, 1:39

    Hola Adan .. un duda en el campo donde ponen el numero para agarrar la opción que sucede cuando su escribe alguna opción equivocada.¡¡??

    creo que para evitar eso podrias utilizar en vez de ese cuadro de texto usar botones para la opcion 1 la 2 y la 3 y asi desaparecer el boton "acceder".. y una cosita más

    que sucede con los componentes cuando la ventana la haces grande...? creo que puedes usar mejor GridBagLayout

    ResponderEliminar
  4. Androidsc316 de mayo de 2011, 1:45

    Hola adan me gusto mucho tu interfaz gráfica solo una sugerencia bueno yo pienso que estaría mejor en el "menu principal" que pongas 3 botones de "Agregar prodcuto", "Ver lista" y "Salir" en lugar de escribir con el número la opción y después presionar el botón de "Acceder" lo digo para que sea de una forma mas comoda para el usuario.

    También sería bueno que el usuario pueda agregar un producto por categorías para encontrar mas rápido un producto o tal vez sería bueno una opción de busqueda.

    Saludos (:

    ResponderEliminar
  5. Adán Silva16 de mayo de 2011, 8:15

    Juan Carlos - Muchas gracias, checaré el tutorial a ver si puedo mejorar el layout de mi interfaz, y no me había dado cuenta que compile los 3 por separado xD tu sabes ya estaba algo desesperado por terminar, lo corregiré =D Gracias por tus sugerencias y observaciones n_n

    Cecy - Lo del numero de opción erróneo lo maneje en la entrada de Eventos, excepciones y errores, si el usuario introduce un dato erróneo el programa manda mensaje de error y lo cierra. Y al maximizar la ventana los componentes continúan en su lugar de origen y lo demás es puro frame... revisaré el tuto que me paso Juan Carlos para ver si lo puedo arreglar mejor. Gracias por tu comentario =D

    Alex - Gracias! Fíjate que esta interfaz la desarrolle siguiendo el protocolo que tengo con lo que usaba desde la terminal, en medida que vaya conectando la interfaz con el sistema consideraré si cambio la entrada de datos por botones que sean accesos directos quizás sea hasta más fácil y por su puesto será más atractivo, Gracias por Comentar =D

    ResponderEliminar
  6. Elisa16 de mayo de 2011, 9:53

    Bien. Lo de cómo hacer pantallas tienes a cinco puntos, pero lo de cómo conectarlas con el programa ya sabes que te faltó. Un punto extra por los comentarios a JC, Cecy, Alex y Adán.

    ResponderEliminar
  7. Chuy7 de marzo de 2012, 16:09

    ME SALVASTE LA VIDA MUCHISICIMAS GRACIAS

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)