sábado, 10 de octubre de 2015

004.- Cuadros Combinados con Java y NetBeans

A continuación presento un ejemplo de uso práctico de cuadros combinados en NetBeans.



Realiza los siguientes pasos:



1.- Crea un nuevo proyecto.

2.- Dentro de Source Package crea un Java Package y llamalo paqueteInicial.

3.- Dentro de paqueteInicial crea un JFrame Form y nombralo VentanaInicial.

4.- Dentro de VentanaInicial sigue realizando los siguientes pasos.


5.- Agrega una etiqueta con borde llamada etiPuntoCardinal.

6.- Añade un cuadro combinado (también conocido como combo). Los cuadros combinados son objetos de la clase JComboBox. Básicamente un combo es una lista desplegable.




7.- Cambia el nombre al JComboBox por cboPuntosCardinales. El diseño de tu ventana debe ser el siguiente:




8.- Para cambiar los elementos de cboPuntosCardinales hay que recurrir a su propiedad model; selecciona el combo en la ventana, luego haz click en el botón con tres puntos que está a la derecha de su propiedad model, se mostrará lo siguiente:



9.- Borra los elementos actuales que contiene el combo y escribe los siguientes:

              Este
              Oeste
              Norte
              Sur


10.- Acepta los cambios y ejecuta el programa para que se pueda ver el contenido del combo.





11.- Al hacer clik en el algún elemento del combo debería mostrarse en la etiqueta el punto cardinal elegido; para lograr esto tenemos que escribir el siguiente código en el evento ActionPerformed del cboPuntosCardinales:

    String mensaje = "Punto Cardinal elegido: ";
        
    mensaje = mensaje + cboPuntosCardinales.getSelectedItem().toString();

    etiPuntoCardinal.setText(mensaje);



12.- En la primera línea del código anterior se declara la variable mensaje de tipo cadena, en esta misma línea se inicializa a dicha variable con el texto: "Punto Cardinal elegido: ".

13.- En la segunda línea de código se agrega a la variable mensaje el texto del item seleccionado en el combo a través de su método getSelectedItem y convirtiéndo en texto con toString.

14.- Y en la tercera línea de código se muestra el contenido de la variable mensaje en la etiqueta etiPuntoCardinal haciendo uso del método setText.


15.- Prueba el funcionamiento del programa ejecutándolo, si seleccionas el elemento Norte se mostrará la siguiente ventana:




16.- A los combos o cuadros combinados se les puede utilizar además como cuadros de texto, permitiendo que se pueda escribir texto en ellos, para esto tenemos que activar su propiedad editable.




17.- Ejecuta el programa y prueba a escribir texto en el cuadro combinado, al pulsar enter se mostrará en la etiqueta el texto escrito en el combo.





=====================================================================
=====================================================================
CONCLUSIÓN:

Los cuadros combinados o combos (JComboBox) son listas desplegables, que permiten elegir un sólo elemento de toda la lista.

Los cuadros combinados pueden ser utilizados también como cuadros de texto activando su propiedad editable, permitiendo de esta manera escribir dentro de ellos.

Haciendo uso de su método getSelectedItem se puede obtener el texto del elemento seleccionado o el texto escrito dentro del cuadro combinado.

=====================================================================
=====================================================================




jueves, 8 de octubre de 2015

003.- Botones de Radio o Botones de Opción con Java y NetBeans

A continuación presento un ejemplo de uso práctico de botones de opción en NetBeans.

Realiza los siguientes pasos:



1.- Crear un nuevo proyecto.

2.- Dentro de Source Package crea un Java Package y llamalo paqueteInicial.

3.- Dentro de paqueteInicial crea un JFrame Form y nombralo VentanaInicial.

4.- Dentro de VentanaInicial haz lo siguiente:

      a) Agrega un botón (JButton) con el texto "Aceptar" y nombralo btnAceptar.

      b) Añade una etiqueta (JLabel) sin texto, con borde y nombralo etiPuntosCardinales.

      c) Inserta un panel (JPanel), el cual es un objeto rectangular donde se puede colocar elementos como etiquetas, botones, campos de texto, etc.


      d) Después de agregar el panel en la VentanaInicial para su fácil ubicación agregale un borde de a siguiente forma:
      • Selecciona el panel haciendo un click sobre el.
      • En la ventana de propiedades busca la propiedad border y haz click sobre el botón con tres puntos que está a su derecha.

      • Busca el tipo de borde llamado Titled Border (Borde con Título) para luego colocar el título Puntos Cardinales: como se muestra en la siguiente imagen:

      • Acepta los cambios.

5.- El diseño de la ventana hasta ahora debe ser el siguiente:



6.- Coloca dentro del panel cuatro botones de opción (JRadioButton).


7.- Modifica la propiedad Text de los botones de opción insertados anteriormente colocando los cuatro puntos cardinales: "Este", "Oeste", "Norte" y "Sur".

8.- Cambia el nombre de los cuatro botones de opción de tal manera que se llamen: optEste, optOeste, optNorte y optSur.

9.- Ahora la ventana tendrá el siguiente diseño:



10.- Al ejecutar el programa notarás que puedes seleccionar varios puntos cardinales a la vez, esto no debería ocurrir puesto que los botones de opción se utilizan para escoger sólo una  de varias opciones.

11.- Lo correcto es que sólo un botón de opción esté seleccionado a la vez; para ello se debe realizar los siguientes pasos.

12.- Agrega un objeto de tipo ButtonGroup a la ventana. Este objeto no se mostrará en la ventana pero si se puede ver en el Inspector (Navigator) en la sección Otros Componentes (Other Components).



13.- Cambia el nombre del ButtonGroup por el siguiente: grupoPuntosCardinales.

14.- El siguiente paso que debes hacer es que los cuatro botones de opción pertenezcan al mismo grupo, me estoy refiriendo al grupoPuntosCardinales.

15.- Selecciona el botón de opción optEste y cambia su propiedad buttonGroup, escogiendo de la lista desplegable grupoPuntosCardinales.



16.- Realiza el paso anterior para los botones de opción optOeste, optNorte y optSur.

17.- Al estar asociado los cuatro botones de opción al mismo grupo a través de su propiedad buttonGroup ocasiona que sólo se pueda activar uno de los cuatro botones de opción.

18.- Prueba ejecutando el programa.

19.- Cuando ejecutas el programa podrás observar que al inicio ningún botón de opción se encuentra seleccionado; para hacer que el botón optEste esté seleccionado desde que se ejecuta el programa copia el siguiente código en el método constructor (justo debajo de la línea de código: initComponents();):


        optEste.setSelected(true);




20.- El método setSelected nos permite activar o desactivar un botón de opción, con la línea de código anterior al colocar true como parámetro hemos activado el botón de opción optEste.

21.- Ejecuta el programa y observa como el botón de opción con el texto "Este" está activado desde el inicio.

22.- Para terminar con el programa nos falta escribir el código del botón btnAceptar para que cuando se haga click en este, nos muestre en la etiqueta etiPuntosCardinales el punto cardinal elegido. Entonces en el evento actionPerformed del botón btnAceptar programe el siguiente código:

        String mensaje = "Punto Cardinal seleccionado: ";
        
        if(optEste.isSelected()){

            mensaje = mensaje + "Este";

        }else if(optOeste.isSelected()){

            mensaje = mensaje + "Oeste";

        }else if(optNorte.isSelected()){

            mensaje = mensaje + "Norte";

        }else if(optSur.isSelected()){

            mensaje = mensaje + "Sur";

        }
        
        etiPuntosCardinales.setText(mensaje);


23.- Explicaré que realiza el código anterior:
  • Se declara una variable tipo cadena llamada mensaje y se inicializa con el texto "Punto Cardinal seleccionado: ".
  • Haciendo uso del método isSelected se comprueba si el botón de opción optEste esta activado o no, de estar activado se añade a la variable mensaje el texto "Este"; de no estar activado se sigue con la misma comprobación  de los siguientes botones de opción hasta detectar cual de ellos está activo y añadirle el texto correspondiente ya sea "Oeste", "Norte" o "Sur" a la variable mensaje.
  • Al final se muestra el contenido de la variable mensaje en la etiqueta etiPuntosCardinales a través de su método setText.

23.- Ejecuta el programa y selecciona un punto cardinal y pulsa en Aceptar. Por ejemplo al seleccionar "Norte" se muestra el siguiente resultado en la ventana:




=====================================================================
=====================================================================
CONCLUSIÓN:

Los botones de opción o botones de radio (JRadioButton) se usan cuando se desea seleccionar solamente un elemento de un grupo de opciones disponibles.

Los botones de opción se deben colocar dentro de un panel con borde para visualizarlos mejor y diferenciarlos en el caso de que en una ventana se tenga varios grupos de botones de opción.

Para cada grupo de botones de opción se debe agregar obligatoriamente un objeto de tipo Button Group y asignar a dichos botones de opción al grupo cambiando su propiedad buttonGroup.
=====================================================================
=====================================================================