| Selector de colores |
| Paso 2: Operativa |
Insertar un Panel en la zona Norte de un Frame 
Ventana Palette y AWT selecccionado
- como podemos ver AWT tiene varios componentes gráficos como por ejemplo
- Label
- Button
- TextField
- TextArea
- marcamos con el puntero del ratón el componente Panel y lo arrastramos sobre el área del marco para depositarlo en la zona norte del panel
Ventana Inspector
- esta ventana nos indica que [Frame] trabaja con un Gestor de Organización BorderLayout que es el Gestor de Organización por defecto de los frames
- como hemos añadido un panel, éste se muestra en esta ventana como Panel1[Panel] y nos indica que el Gestor de Organización utilizado es el Flowlayout que es el Gestor de Organización por defecto de los paneles
![NetBeans 6 - nuevo Panel - Design | Inspector | [Frame] | BorderLayout | panel1 [Panel] | FlowLayout](images/netbeansNuevoPanel -b.png)
Ventana SelectorColoresMarc
- ahora hacemos clic con el botón derecho del ratón sobre el panel que acabamos de depositar en el marco y seleccionamos Change Variable Name ...
- en el cuadro de diálogo Rename, en el campo de texto New Name escribimos pnlNorte
- pnlNorte es una variable de instancia que apunta a un Objeto de tipo Panel
![NetBeans 6 - nuevo Panel - Design | panel1 [Panel] | Change Variable Name ...](images/netbeansNuevoPanel -c.png)
Código Java generado por el entorno de diseño de NetBeans
Hacemos clic sobre el botón Source y veremos el código fuente Java generado por el entorno de diseño de NetBeans
package paqawt;
public class SelectorColoresMarc extends java.awt.Frame {
public SelectorColoresMarc() {
initComponents();
}
private void initComponents() {
pnlNorte = new java.awt.Panel();
addWindowListener(new java.awt.event.WindowAdapter() {
public void windowClosing(java.awt.event.WindowEvent evt) {
exitForm(evt);
}
});
add(pnlNorte, java.awt.BorderLayout.NORTH);
pack();
}
private void exitForm(java.awt.event.WindowEvent evt) {
System.exit(0);
}
public static void main(String args[]) {
SelectorColoresMarc marco = new SelectorColoresMarc();
marco.setSize(300,200);
marco.setTitle("Selector de colores");
marco.setVisible(true);
}
// Variables declaration - do not modify
private java.awt.Panel pnlNorte;
// End of variables declaration
} |
- private java.awt.Panel pnlNorte;
- como vimos en los ejemplos de Fundamentos del curso, las variables de instancia siempre estaban ubicadas justo después de la declaración de la Clase
- el entorno de desarrollo NetBeans ubica las variables de instancia de componentes visuales al final de la Clase
- esta línea de código declara una variable de referencia llamada pnlNorte que cuando sea inicializada apuntará a un Objeto de tipo Panel
- pnlNorte = new java.awt.Panel();
- ahora se está creando una instancia de tipo Panel
- add(pnlNorte, java.awt.BorderLayout.NORTH);
- y ahora se está añadiendo el Objeto de tipo Panel apuntado por la variable de referencia pnlNorte a la zona norte del marco SelectorColoresMarc
Insertar tres botonos en un Panel
Ventana Palette y botón AWT selecccionado
Para insertar el primer botón, hacemos clic sobre el componente gráfico Button y desplazamos el puntero del ratón a la zona del panel norte. Una vez allí volvemos a hacer clic para depositar el Objeto de tipo Button en el mencionado panel
![NetBeans 6 - nuevo Button - Design | Inspector | [Frame] | pnlNorte [Panel] | button1 [Button]](images/netbeansNuevoButton -a.png)
Ventana SelectorColoresMarc
Ahora hacemos clic con el botón derecho del ratón sobre el botón que acabamos de depositar en el panel y seleccionamos Change Variable Name ...
- en el cuadro de diálogo Rename, escribimos btnRojo en el campo de texto New Name
- btnRojo es una variable de instancia que apunta a un Objeto de tipo Button
Ventana Inspector
Como hemos añadido un botón, éste se muestra en esta ventana como btnRojo [Button] y nos indica que está incluido en el Panel pnlNorte
![NetBeans 6 - nuevo Button - Design | Inspector | [Frame] | pnlNorte [Panel] | btnRojo [Button]](images/netbeansNuevoButton -b.png)
Ventana Properties de btnRojo
Aquí vamos a decir que el botón va a mostrar el texto Rojo a través de la propiedad label
- simplemente tenemos que escribir Rojo en la columna de la derecha de la propiedad label
Código Java generado por el entorno de diseño de NetBeans
Hacemos clic sobre el botón Source y veremos el código fuente Java generado por el entorno de diseño de NetBeans
package paqawt;
public class SelectorColoresMarc extends java.awt.Frame {
public SelectorColoresMarc() {
initComponents();
}
private void initComponents() {
pnlNorte = new java.awt.Panel();
btnRojo = new java.awt.Button();
addWindowListener(new java.awt.event.WindowAdapter() {
public void windowClosing(java.awt.event.WindowEvent evt) {
exitForm(evt);
}
});
btnRojo.setLabel("Rojo");
pnlNorte.add(btnRojo);
add(pnlNorte, java.awt.BorderLayout.NORTH);
pack();
}
private void exitForm(java.awt.event.WindowEvent evt) {
System.exit(0);
}
public static void main(String args[]) {
SelectorColoresMarc marco = new SelectorColoresMarc();
marco.setSize(300,200);
marco.setTitle("Selector de colores");
marco.setVisible(true);
}
// Variables declaration - do not modify
private java.awt.Button btnRojo;
private java.awt.Panel pnlNorte;
// End of variables declaration
} |
- private java.awt.Button btnRojo;
- esta línea de código declara una variable de referencia llamada btnRojo que cuando sea inicializada apuntará a un Objeto de tipo Button
- btnRojo = new java.awt.Button();
- ahora se está creando una instancia de tipo Button
- btnRojo.setLabel("Rojo");
- el texto que mostrará el botón se indica invocando al método setLabel(...)
- pnlNorte.add(btnRojo);
- y ahora se está añadiendo el Objeto de tipo Button apuntado por la variable de referencia btnRojo en el panel que tenemos situado en el norte de nuestro marco
Ahora podemos ejecutar la Clase SelectorColoresMarc para ver el resultado del trabajo realizado hasta ahora.
Tal y como hemos insertado el botón rojo en el panel norte y le hemos dado un nombre a su variable de referencia y hemos cambiado su texto, ahora vamos a hacer lo mismo con los botones Verde y Azul utilizando los siguientes nombres
- btnVerde, Verde
- btnAzul, Azul
Colocar los tres botonos a la izquierda del Panel
Ventana Inspector
Seleccionamos Flowlayout perteneciente a pnlNorte
ventana FlowLayout - Properties
En la propiedad Alignment cambiamos Center por Left
Para cambiar el espacio en pixels entre los botones
Ventana Inspector
Seleccionamos Flowlayout perteneciente al pnlNorte
Ventana FlowLayout - Properties
En la propiedad Horizontal Gap cambiamos 5 por 15
Insertar un Panel en la zona Centro de un Frame
Ventana Palette y botón AWT selecccionado
Hacemos clic sobre el componente gráfico Panel y desplazamos el puntero del ratón sobre el área del Frame por debajo del panel norte y una vez que el puntero del ratón está posicionado en esa zona volvemos a hacer clic. Veremos que aparece un rectángulo con un borde de color naranja en la parte centro del marco
Ventana Inspector
Como hemos añadido un Panel, éste se muestra en esta ventana como Panel2 [Panel] y nos indica que el Gestor de Organización utilizado es el Flowlayout debido a que éste es el Gestor de Organización por defecto de los Paneles
Ventana Inspector
Hacemos clic con el botón derecho del ratón sobre el nodo panel1 [Panel] y seleccionamos Change Variable Name ...
- en el cuadro de diálogo Rename, en el campo de texto New Name introducimos pnlCentro
- pnlCentro es una variable de instancia que apunta a un Objeto de tipo Panel
![NetBeans 6 - nuevo panel centro - Design | Inspector - [Frame] | panel1 [Panel] | Change Variable Name ...](images/netbeansNuevoPanelCentro -a.png)
Ahora podemos ejecutar la Clase SelectorColoresMarc para ver el resultado del trabajo realizado hasta ahora.
