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!!