SlideShare una empresa de Scribd logo
1
JAVA: LAYOUTS Y PANELES
Técnicas de distribución de elementos en las ventanas
A la hora de diseñar una ventana se tienen en cuenta dos cosas:
La facilidad a la hora de colocar muchos componentes en la ventana.
Que dichos componentes estén siempre visibles independientemente del tamaño de la ventana.
La distribución AbsoluteLayout por ejemplo nos da mucha facilidad a la hora de colocar los elementos en la
ventana, pero sin embargo los componentes no se adaptan a los cambios de tamaño.
El Diseño Libre en cambio permite crear ventanas en las que sus componentes se “recolocan” según el
tamaño de estas pero a cambio crece la dificultad del diseño.
Para aprovechar las ventajas de los distintos layouts y minimizar sus inconvenientes, es habitual en java
crear una estructura de paneles cada uno de ellos con un layout distinto, según nuestras necesidades.
Normalmente, al JFrame se le asigna un layout que lo divida en zonas, como puede ser el BorderLayout o
el GridLayout. Luego, dentro de cada una de estas zonas se introduce un panel (objeto JPanel). Y a cada
uno de estos paneles se le asigna el layout que más le convenga al programador (FlowLayout, Diseño
Libre, AbsoluteLayout, etc…) Finalmente, dentro de cada panel se añaden los componentes de la ventana.
Ejercicio guiado
1. Crea un nuevo proyecto en java.
Se pretende crear un proyecto con una ventana de diseño complejo. Para ello sigue los siguiente pasos:
2. En primer lugar, asigna un BorderLayout al JFrame:
3. El BorderLayout divide la ventana principal en zonas. Ahora añade un panel (JPanel) a la zona norte de
la ventana.
R.M. 420-94-ED
JFrame
(BorderLayout o GridLayout)
JPanel 1
(Diseño Libre, AbsoluteLayout o
JPanel 2
(Diseño Libre, AbsoluteLayout o
Componentes Componentes
Etc…
1
4. Cambia el nombre a este panel y llámalo panelTitulo, ya que contendrá el nombre del programa.
5. Añade otro panel, esta vez a la parte central. El panel se llamará panelDatos:
6. Añade un nuevo panel en la parte sur de la ventana. Su nombre será panelEstado.
NOTA. A veces resulta complicado agregar un panel en una zona de la ventana cuando tenemos un
BorderLayout. Puedes entonces hacer clic con el derecho sobre JFrame en el Inspector y activar la opción
Agregar desde paleta – Swing – JPanel.
Panel en la zona norte.
1
7. Si el panel no se coloca en el sitio deseado, se puede seleccionar en el Inspector y activar su propiedad
Dirección, e indicar la zona donde se quiere colocar:
El panel debería estar situado finalmente en el sur de la ventana:
8. El Inspector tendrá la siguiente forma ahora:
1
9. Añade ahora tu solo un panel en la zona oeste llamado panelBotonera y otro en la zona esta llamado
panelVerificacion. El Inspector debería tener la siguiente forma al finalizar:
10 Cada panel puede ser diseñado de forma individual, simplemente haciendo doble clic sobre él. Así
pues, empezaremos diseñando el panel panelBotonera. Haz doble clic sobre él.
11. En la parte izquierda del NetBeans aparecerá únicamente el panelBotonera. Agrándalo para que tenga
la siguiente forma:
12. A cada panel se le puede asignar un Layout distinto. A este panel le asignaremos un AbsoluteLayout
para poder colocar cada elemento donde quiera. Asigna un AbsoluteLayout al panel haciendo clic con el
derecho sobre él en el Inspector. El Inspector debería quedar así:
13. Ahora añade cuatro botones al panel. Observa como tienes libertad total para colocar cada botón
donde quieras. Procura que el panel quede así:
(No nos vamos a preocupar en este ejercicio de los nombres de los componentes)
14. Ahora diseña el panel panelVerificación haciendo doble clic sobre él.
1
15. Asígnale también un layout AbsoluteLayout.
16. Coloca en él cuatro casillas de verificación. El aspecto del panel al terminar debe ser parecido al
siguiente:
Y el Inspector debe tener un estado similar a este:
17 Ahora se diseñará el panelTitulo. Haz doble clic sobre él.
18. En este caso se le añadirá un FlowLayout. Recuerda que este layout hace que cada elemento se
coloque uno detrás de otro.
19. Añade al panel dos etiquetas como las que siguen. Ponle un borde a cada una:
El Inspector tendrá este aspecto en lo que se refiere al panelTitulo...
20 El panelEstado lo diseñaremos sin asignar ningún layout, es decir, usando el Diseño Libre. En él
añadiremos tres etiquetas de forma que estas mantengan una distancia relativa con respecto al límite
derecho del panel. Dicho de otra forma, que siempre estén pegadas a la parte derecha del panel:
Observa las líneas “guía”. Indican que las etiquetas dependen de la parte derecha del panel. A su vez cada
una depende de la otra. Es como si estuvieran “enganchadas”, como los vagones de un tren.
21. El panelDatos lo vamos a complicar un poco. Haz doble clic sobre él para diseñarlo y asígnale un
GridLayout.
1
22. Marca el GridLayout y asígnale 2 filas y 2 columnas, para que interiormente tenga forma de una rejilla
como esta:
23. A cada una de las divisiones del GridLayout del panelDatos le asignaremos un nuevo panel. Añade al
panelDatos cuatro paneles. Esto lo puedes hacer fácilmente haciendo clic con el botón derecho del ratón
sobre el panelDatos en el Inspector y eligiendo la opción Añadir desde paleta – Swing – JPanel.
El aspecto del inspector debería ser como el que sigue, en lo que se refiere al panelDatos:
24. Asignaremos a cada uno de los cuatro paneles los siguientes nombres: panelEtiqueta1, panelCuadro1,
panelEtiqueta2, panelCuadro2. El panel quedará así en el Inspector.
Así pues, el panel panelDatos tiene forma de rejilla con cuatro celdas, y en cada celda hay un panel.
Puede imaginarse el panelDatos así:
panelDatos
PanelEtiqueta
1
PanelCuadro1
PanelEtiqueta
2
PanelCuadro2
25 Ahora añada al panelEtiqueta1 y al panelEtiqueta2 sendas etiquetas. Y al panelCuadro1 y
panelCuadro2 sendos cuadros de textos. El panel panelDatos debe quedar así:
26 Finalmente ejecuta el programa y comprueba como se comportan los elementos según el panel donde
se encuentre y el layout asignado a cada uno.
CONCLUSIÓN
1
Para el diseño de ventanas muy complejas, ser suelen definir layouts que dividan en zonas el JFrame,
como por ejemplo el BorderLayout o el GridLayout.
Dentro de cada una de dichas zonas se añade un JPanel, al que se le asigna un AbsoluteLayout, un
FlowLayout o se mantiene el Diseño Libre.
Es posible asignar a un panel un layout de zonas, como el GridLayout, y, a su vez, introducir en él nuevos
paneles, y así sucesivamente.

Más contenido relacionado

PPTX
Colegio nacional nicolás esguerra
PPTX
Presentación1
PPTX
Curso derive factorizar
PPTX
Panel de control
PPTX
Curso derive factorizar
PPTX
Curso derive: FACTORIZAR
PPTX
Selleccinar diapositivas
DOCX
Unidad 4
Colegio nacional nicolás esguerra
Presentación1
Curso derive factorizar
Panel de control
Curso derive factorizar
Curso derive: FACTORIZAR
Selleccinar diapositivas
Unidad 4

La actualidad más candente (12)

DOCX
PPTX
Curso derive factorizar
PPTX
Curso derive factorizar
PDF
56236357 interfaz-power-point-2007
PPTX
Curso derive calcular límites
PPTX
Panel de control
PPTX
Curso derive calcular derivadas
DOCX
DOCX
Macromedia flash 8 unidad 4
DOCX
Curso derive factorizar
Curso derive factorizar
56236357 interfaz-power-point-2007
Curso derive calcular límites
Panel de control
Curso derive calcular derivadas
Macromedia flash 8 unidad 4
Publicidad

Destacado (12)

PPT
PDF
Jds Digital Signage Solutions
PPT
poster_final
PDF
Fietsbeleidsplan Zandvoort 26 jan
PPT
Clase 1 it management.
DOC
B.Com-MBA 6 years Exp.
PPT
Unidad 4
PDF
Biocrude from Switchgrass
PDF
Bsl Securite luxury hotel presentation
PPT
India globalisation 1
PPT
anthocyanin
PPTX
characterization of PPO in ataulfo mango
Jds Digital Signage Solutions
poster_final
Fietsbeleidsplan Zandvoort 26 jan
Clase 1 it management.
B.Com-MBA 6 years Exp.
Unidad 4
Biocrude from Switchgrass
Bsl Securite luxury hotel presentation
India globalisation 1
anthocyanin
characterization of PPO in ataulfo mango
Publicidad

Similar a Articulo programacion java (1) (20)

PDF
Curso java 6
DOCX
Concepto de layout
PPTX
5. Gestores de Posicionamiento - Eventos.pptx
DOCX
Layout
DOCX
Layout
PDF
Practica
PDF
Practica
PPTX
Programacion_II_04_disposicion_contenedores
PDF
PPT
abstract window tool kit
PPT
Entorno gráfico en Java
PPT
Entorno grafico en Java
PPT
AWT- JAVA
PDF
Vbr Awt 01
DOCX
Ejemplo j internalframe_gine
DOCX
Introduccion de-aplicaciones-visuales
PPTX
Actividad 4 presentacion multimedia modulo 4
PDF
Manejo de ventanas 2
PDF
PDF
Swing
 
Curso java 6
Concepto de layout
5. Gestores de Posicionamiento - Eventos.pptx
Layout
Layout
Practica
Practica
Programacion_II_04_disposicion_contenedores
abstract window tool kit
Entorno gráfico en Java
Entorno grafico en Java
AWT- JAVA
Vbr Awt 01
Ejemplo j internalframe_gine
Introduccion de-aplicaciones-visuales
Actividad 4 presentacion multimedia modulo 4
Manejo de ventanas 2
Swing
 

Más de I.S.T. Santo Domingo (6)

DOC
Articulo java web
DOCX
Tema para alumnos de computacion e informatica
DOCX
Informe de auditoria
PDF
Fundamentos teoricos de la contabilidad gubernamental
PDF
Pcge empresa industrial
DOCX
Elementos del costo
Articulo java web
Tema para alumnos de computacion e informatica
Informe de auditoria
Fundamentos teoricos de la contabilidad gubernamental
Pcge empresa industrial
Elementos del costo

Último (20)

PPTX
Historia Inteligencia Artificial Ana Romero.pptx
PDF
Maste clas de estructura metálica y arquitectura
PDF
capacitación de aire acondicionado Bgh r 410
PPTX
Propuesta BKP servidores con Acronis1.pptx
PPTX
modulo seguimiento 1 para iniciantes del
PPTX
Power Point Nicolás Carrasco (disertación Roblox).pptx
PDF
ADMINISTRACIÓN DE ARCHIVOS - TICS (SENA).pdf
PPT
El-Gobierno-Electrónico-En-El-Estado-Bolivia
PPTX
RAP01 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
PPTX
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
PPTX
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
PDF
Instrucciones simples, respuestas poderosas. La fórmula del prompt perfecto.
PDF
programa-de-estudios-2011-guc3ada-para-el-maestro-secundarias-tecnicas-tecnol...
PDF
MANUAL de recursos humanos para ODOO.pdf
DOCX
Zarate Quispe Alex aldayir aplicaciones de internet .docx
PPTX
COMO AYUDAN LAS TIC EN LA EDUCACION SUPERIOR.pptx
PDF
Influencia-del-uso-de-redes-sociales.pdf
PDF
clase auditoria informatica 2025.........
PPTX
Presentación de Redes de Datos modelo osi
PPTX
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
Historia Inteligencia Artificial Ana Romero.pptx
Maste clas de estructura metálica y arquitectura
capacitación de aire acondicionado Bgh r 410
Propuesta BKP servidores con Acronis1.pptx
modulo seguimiento 1 para iniciantes del
Power Point Nicolás Carrasco (disertación Roblox).pptx
ADMINISTRACIÓN DE ARCHIVOS - TICS (SENA).pdf
El-Gobierno-Electrónico-En-El-Estado-Bolivia
RAP01 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
sa-cs-82-powerpoint-hardware-y-software_ver_4.pptx
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
Instrucciones simples, respuestas poderosas. La fórmula del prompt perfecto.
programa-de-estudios-2011-guc3ada-para-el-maestro-secundarias-tecnicas-tecnol...
MANUAL de recursos humanos para ODOO.pdf
Zarate Quispe Alex aldayir aplicaciones de internet .docx
COMO AYUDAN LAS TIC EN LA EDUCACION SUPERIOR.pptx
Influencia-del-uso-de-redes-sociales.pdf
clase auditoria informatica 2025.........
Presentación de Redes de Datos modelo osi
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx

Articulo programacion java (1)

  • 1. 1 JAVA: LAYOUTS Y PANELES Técnicas de distribución de elementos en las ventanas A la hora de diseñar una ventana se tienen en cuenta dos cosas: La facilidad a la hora de colocar muchos componentes en la ventana. Que dichos componentes estén siempre visibles independientemente del tamaño de la ventana. La distribución AbsoluteLayout por ejemplo nos da mucha facilidad a la hora de colocar los elementos en la ventana, pero sin embargo los componentes no se adaptan a los cambios de tamaño. El Diseño Libre en cambio permite crear ventanas en las que sus componentes se “recolocan” según el tamaño de estas pero a cambio crece la dificultad del diseño. Para aprovechar las ventajas de los distintos layouts y minimizar sus inconvenientes, es habitual en java crear una estructura de paneles cada uno de ellos con un layout distinto, según nuestras necesidades. Normalmente, al JFrame se le asigna un layout que lo divida en zonas, como puede ser el BorderLayout o el GridLayout. Luego, dentro de cada una de estas zonas se introduce un panel (objeto JPanel). Y a cada uno de estos paneles se le asigna el layout que más le convenga al programador (FlowLayout, Diseño Libre, AbsoluteLayout, etc…) Finalmente, dentro de cada panel se añaden los componentes de la ventana. Ejercicio guiado 1. Crea un nuevo proyecto en java. Se pretende crear un proyecto con una ventana de diseño complejo. Para ello sigue los siguiente pasos: 2. En primer lugar, asigna un BorderLayout al JFrame: 3. El BorderLayout divide la ventana principal en zonas. Ahora añade un panel (JPanel) a la zona norte de la ventana. R.M. 420-94-ED JFrame (BorderLayout o GridLayout) JPanel 1 (Diseño Libre, AbsoluteLayout o JPanel 2 (Diseño Libre, AbsoluteLayout o Componentes Componentes Etc…
  • 2. 1 4. Cambia el nombre a este panel y llámalo panelTitulo, ya que contendrá el nombre del programa. 5. Añade otro panel, esta vez a la parte central. El panel se llamará panelDatos: 6. Añade un nuevo panel en la parte sur de la ventana. Su nombre será panelEstado. NOTA. A veces resulta complicado agregar un panel en una zona de la ventana cuando tenemos un BorderLayout. Puedes entonces hacer clic con el derecho sobre JFrame en el Inspector y activar la opción Agregar desde paleta – Swing – JPanel. Panel en la zona norte.
  • 3. 1 7. Si el panel no se coloca en el sitio deseado, se puede seleccionar en el Inspector y activar su propiedad Dirección, e indicar la zona donde se quiere colocar: El panel debería estar situado finalmente en el sur de la ventana: 8. El Inspector tendrá la siguiente forma ahora:
  • 4. 1 9. Añade ahora tu solo un panel en la zona oeste llamado panelBotonera y otro en la zona esta llamado panelVerificacion. El Inspector debería tener la siguiente forma al finalizar: 10 Cada panel puede ser diseñado de forma individual, simplemente haciendo doble clic sobre él. Así pues, empezaremos diseñando el panel panelBotonera. Haz doble clic sobre él. 11. En la parte izquierda del NetBeans aparecerá únicamente el panelBotonera. Agrándalo para que tenga la siguiente forma: 12. A cada panel se le puede asignar un Layout distinto. A este panel le asignaremos un AbsoluteLayout para poder colocar cada elemento donde quiera. Asigna un AbsoluteLayout al panel haciendo clic con el derecho sobre él en el Inspector. El Inspector debería quedar así: 13. Ahora añade cuatro botones al panel. Observa como tienes libertad total para colocar cada botón donde quieras. Procura que el panel quede así: (No nos vamos a preocupar en este ejercicio de los nombres de los componentes) 14. Ahora diseña el panel panelVerificación haciendo doble clic sobre él.
  • 5. 1 15. Asígnale también un layout AbsoluteLayout. 16. Coloca en él cuatro casillas de verificación. El aspecto del panel al terminar debe ser parecido al siguiente: Y el Inspector debe tener un estado similar a este: 17 Ahora se diseñará el panelTitulo. Haz doble clic sobre él. 18. En este caso se le añadirá un FlowLayout. Recuerda que este layout hace que cada elemento se coloque uno detrás de otro. 19. Añade al panel dos etiquetas como las que siguen. Ponle un borde a cada una: El Inspector tendrá este aspecto en lo que se refiere al panelTitulo... 20 El panelEstado lo diseñaremos sin asignar ningún layout, es decir, usando el Diseño Libre. En él añadiremos tres etiquetas de forma que estas mantengan una distancia relativa con respecto al límite derecho del panel. Dicho de otra forma, que siempre estén pegadas a la parte derecha del panel: Observa las líneas “guía”. Indican que las etiquetas dependen de la parte derecha del panel. A su vez cada una depende de la otra. Es como si estuvieran “enganchadas”, como los vagones de un tren. 21. El panelDatos lo vamos a complicar un poco. Haz doble clic sobre él para diseñarlo y asígnale un GridLayout.
  • 6. 1 22. Marca el GridLayout y asígnale 2 filas y 2 columnas, para que interiormente tenga forma de una rejilla como esta: 23. A cada una de las divisiones del GridLayout del panelDatos le asignaremos un nuevo panel. Añade al panelDatos cuatro paneles. Esto lo puedes hacer fácilmente haciendo clic con el botón derecho del ratón sobre el panelDatos en el Inspector y eligiendo la opción Añadir desde paleta – Swing – JPanel. El aspecto del inspector debería ser como el que sigue, en lo que se refiere al panelDatos: 24. Asignaremos a cada uno de los cuatro paneles los siguientes nombres: panelEtiqueta1, panelCuadro1, panelEtiqueta2, panelCuadro2. El panel quedará así en el Inspector. Así pues, el panel panelDatos tiene forma de rejilla con cuatro celdas, y en cada celda hay un panel. Puede imaginarse el panelDatos así: panelDatos PanelEtiqueta 1 PanelCuadro1 PanelEtiqueta 2 PanelCuadro2 25 Ahora añada al panelEtiqueta1 y al panelEtiqueta2 sendas etiquetas. Y al panelCuadro1 y panelCuadro2 sendos cuadros de textos. El panel panelDatos debe quedar así: 26 Finalmente ejecuta el programa y comprueba como se comportan los elementos según el panel donde se encuentre y el layout asignado a cada uno. CONCLUSIÓN
  • 7. 1 Para el diseño de ventanas muy complejas, ser suelen definir layouts que dividan en zonas el JFrame, como por ejemplo el BorderLayout o el GridLayout. Dentro de cada una de dichas zonas se añade un JPanel, al que se le asigna un AbsoluteLayout, un FlowLayout o se mantiene el Diseño Libre. Es posible asignar a un panel un layout de zonas, como el GridLayout, y, a su vez, introducir en él nuevos paneles, y así sucesivamente.