Antes de iniciar debemos tener en cuenta que lo que vamos hacer es crear una nueva clase, la cual heredara de la clase JPanel que será nuestro contenedor el cual podremos agregar a nuestra ventana principal, la visualización de los contenedores a crear serán controlados a través de eventos que se accionaran al presionar unos botones (JButton) que nos servirán como el menú principal de nuestra aplicación, partiendo de este concepto iniciemos con el desarrollo.
.
1.Lo primero que haremos será crear una nueva clase, la cual heredara de la clase JPanel para esto debemos hacer lo siguiente:
Nos posicionamos en el paquete view, recordemos que en este paquete agregaremos todas las clases relacionadas a nuestra interfaz gráfica. Oprimimos click derecho > seleccionamos la opción new > seleccionamos la opción JPanel Form, de esta manera la clase que vamos a crear heredara los métodos y componentes de la clase JPanel.
Creamos una nueva clase JPanel
Agregamos un nombre a nuestra clase, el cual será PanelSumarMatrices; debemos tener presente que debe estar dentro del paquete view, una vez realizado este proceso oprimimos el botón finish y ya estaria creada nuestra clase.
Asignamos un nombre a nuestra clase
2.Una vez creada nuestra clase tendremos un área de trabajo parecida a la de la imagen, muy importante estar en la sección de diseño o desing la cual esta señalada con la flecha de color rojo.
Area de trabajo interfaz grafica
En la sección del navegador (navigator) seleccionamos nuestro JPanel, oprimimos click derecho > seleccionamos la opcion set Layout > seleccionamos el layout Grid Bag Layout, el layout seleccionado nos permitirá distribuir los diferentes componentes que estaremos agregando, en la entrada anterior estuvimos explicando cómo trabaja este layout; te dejaré esta entrada para que vayas y refuerces conocimientos: Curso de JAVA: Desarrollando un software matematico desde cero 【Interfaz Grafica GUI】| PROGRAMACIÓN EN JAVA.
Asignamos un layout a nuestro JPanel
Cambiamos el color de fondo a nuestro JPanel, para esto debemos acceder a las propiedades del mismo, seleccionamos el item background, esto nos genera una paleta de colores en el cual podrán escoger el color deseado, en mi caso seleccionare el color blanco.
Cambiamos el color de fondo de nuestro JPanel
3. Iniciamos a agregar componentes a nuestro JPanel, lo primero que haremos será agregar una etiqueta de texto o JLabel, esta nos servirá para mostrar un título; debemos editar este JLabel y personalizarlo a nuestro gusto, cambiando el tipo de fuente, el tamaño de la misma, la ubicación que tendrá en el JPanel entre otras cosas.
Agregamos un JLabel
Accedemos a las propiedades del JLabel creado y vamos agregar las siguientes propiedades para personalizar nuestra etiqueta.
Nota: Para ingresar a estas propiedades deben tener en cuenta que deben posicionarse sobre el componente, oprimir click derecho y seleccionar el item properties o propiedades
Propiedades de apariencia.
Font(Fuente)
Text(Texto)
Times New Roman Bold Italic 36
Suma De Matrices
Propiedades de ubicación.
Grid x
Grid y
Grid Width
Grid Height
Anchor
Insets
0
0
3
1
center
[0, 0, 20, 0]
Propiedades de Objeto.
Variable Name
Variable Modifiers
labelTitle
private
Una vez agregada las propiedades al JLabel debería quedar de la siguiente manera.
JLabel referente al titulo
4. Seguimos agregando componentes al contenedor (JPanel) vamos a agregar un nuevo JLabel que nos servirá como identificador de los JCombobox que estaremos agregando en un momento.
Agregamos un nuevo JLabel
Igualmente accedemos a las propiedades del componente agregado y personalizamos el mismo realizando el proceso anterior, a continuación se mostrara la tabla con los datos ingresados para la personalización.
Propiedades de apariencia.
Font(Fuente)
Text(Texto)
Arial Plain 18
Número De Filas:
Propiedades de ubicación.
Grid x
Grid y
Grid Width
Grid Height
Anchor
Insets
0
1
1
1
west
[5, 20, 0, 10]
Propiedades de Objeto.
Variable Name
Variable Modifiers
labelDimensionFila
private
Al finalizar el proceso nuestro JLabel quedara de la siguiente manera.
JLabel Numero de filas
5. Repetimos el proceso anterior, esta vez vamos a agregar un JLabel que hará referencia al número de columnas, recordemos que estamos trabajando con arreglos bidimensionales, por lo tanto antes de crearlos debemos conocer las dimensiones que este llevara. Propiedades de apariencia.
Font(Fuente)
Text(Texto)
Arial Plain 18
Número De Columnas:
Propiedades de ubicación.
Grid x
Grid y
Grid Width
Grid Height
Anchor
Insets
0
2
1
1
west
[10, 20, 0, 0]
Propiedades de Objeto.
Variable Name
Variable Modifiers
labelDimensionColumna
private
Al finalizar el proceso nuestro JLabel quedara de la siguiente manera.
JLabel Número de columnas
6. El siguiente paso será agregar dos componentes de lista desplegable o JCombobox, estarán ubicados al lado de los respectivos JLabel que acabos de agregar, lo único que cambiara sera la ubicación que estos tendrán en el contenedor(JPanel).
Agregamos dos JCombobox
Propiedades de apariencia.
Model
Preferred Size
[2, 3, 4, 5, 6, 7, 8]
[31, 25]
Propiedades de ubicación.
Grid x
Grid y
Grid Width
Grid Height
Fill
Ipad X
Ipad Y
Anchor
Weight X
Weight Y
Insets
1
1
1
1
none
70
10
west
0.0
0.0
[10, 5, 0, 0]
Propiedades de Objeto.
Variable Name
Variable Modifiers
JcDimensionFila
public
Al finalizar la personalización de los componentes, estos quedarían de la siguiente manera, lo único diferente de estos será el nombre de la variable ya que uno le llamaremos JcDimensionFila y el otro JcDimensionColumna.
JCombobox personalizado
7. Agregamos otro JLabel, el cual estará al lado de los JCombobox creados en el paso anterior, esta etiqueta será informativa específicamente será la formula que se utiliza para resolver las operaciones con suma de matrices, igualmente debemos personalizar este componente.
Propiedades de apariencia.
Font
Text
Arial Plain 36
Matriz C = A + B
Propiedades de ubicación.
Grid x
Grid y
Grid Width
Grid Height
Fill
Ipad X
Ipad Y
Anchor
Weight X
Weight Y
Insets
2
1
1
2
Horizontal
0
0
west
0.0
0.0
[0, 0, 0, 0]
Propiedades de Objeto.
Variable Name
Variable Modifiers
labelFormula
private
Al finalizar tendremos el siguiente componente.
JLabel formula
8. Hemos llegado a un punto importante de nuestro desarrollo, ya que lo siguiente que vamos hacer es agregar un contenedor o JPanel, este va a contener los campos de texto(JTextField) que se generaran dependiendo los items que seleccionemos en el JCombobox, entonces procedemos a agregar un JPanel el cual debemos personalizar para que este quede ubicado en la parte inferior de los componentes ya agregados.
Propiedades de apariencia.
Border
Opaque
TitledBorder[Justification:left, position:top, text:Datos de Entrada]
false
Propiedades de ubicación.
Grid x
Grid y
Grid Width
Grid Height
Fill
Ipad X
Ipad Y
Anchor
Weight X
Weight Y
Insets
0
3
3
1
Both
0
20
center
1.0
1.0
[20, 20, 20, 20]
Propiedades de Objeto.
Variable Name
Variable Modifiers
panelAreaOperaciones
public
Agregamos un nuevo contenedor(JPanel)
9. Lo siguiente que vamos hacer es agregar un JPanel el cual se posicionara debajo del panel que creamos en el paso anterior, este contendrá dos JButton que harán referencia al Botón calcular y limpiar, estos botones pueden ser personalizados a su gusto para este ejemplo simplemente mostramos un texto y un icono en los respectivos JButton, la vista final de estos componentes quedaría de la siguiente manera.
JButton calcular y limpiar
Nota: si deseas conocer la personalización a detalle de estos componentes te recomiendo que mires el videotutorial
10. Para finalizar agregamos un JPanel el cual contendrá los campos de texto con la matriz resultante que se genere una vez se realicen los cálculos, por lo tanto este panel debe ir debajo de los JButton que agregamos en el paso anterior.
11. Inicialmente el JPanel donde se visualizara el resultado debe estar oculto, por lo tanto en la sección de nuestro código en el método constructor debemos ocultar el panel haciendo uso del método setVisible pasando como parámetro el valor false.
ocultamos JPanel
12. Al ejecutar el proyecto, el panel que trabajamos el capitulo de hoy se verá así.
CALCULATOR EC
Con esto hemos concluido con el desarrollo del capitulo de hoy, si deseas ver una explicación mas detallada te recomiendo que mires los vídeos tanto la primera parte como la segunda, los cuales dan una explicación detallada de como crear el JPanel, próximamente tendremos otra entrada en la cual seguimos con el desarrollo de este software.
¡Suscríbete Ahora!
🔻
Si tienes alguna otra forma de implementar esta ejemplo no dudes en compartirla, y así poder compartir opiniones sobre el tema.
¿Quieres aprender a realizar aún más cosas y personalizar tus programas hechos en el lenguaje de programación JAVA?, si tu respuesta es "Sí", puedes acceder a todos los tips de JAVA que hemos estado publicando en este blog, dando clic aquí.
Si te fue de gran ayuda este material, no olvides compartirlo con tus amigos. Si tienes dudas o sugerencias al respecto; puedes dejarnos tus comentarios.
Bendiciones...
▷ Curso de JAVA: Desarrollando un software matemático desde cero 【Interfaz Gráfica (JPanel)】| PROGRAMACIÓN EN JAVA
Reviewed by Jorge P.R
on
12:35 a.m.
Rating: 5
amigo como puedo descargar el codigo por hib gut sale error y en la otra opcion no lo encuentro ayudaaaaaaa:''v
ResponderBorrar