Construyendo programas usando conceptos básicos de programación orientada a objetos [Parte 01]
Bienvenido, vamos a trabajar con el paradigma de Programación Orientada a Objetos, utilizando la librería java swing, la cual nos permitirá crear las ventanas GUI en nuestro proyecto.
El programa a desarrollar tendrá una clase Cuadrado con sus respectivos atributos, contructor y métodos y un formulario el que deberá permitir ingresar el atributo lado del Cuadrado y devolver el calculo del área al hacer clic en el botón calcular, y que también se considere un botón borrar para volver a empezar si se desea realizar otro calculo.
Empezaremos creando un nuevo proyecto, puedes guiarte a través de las imágenes que te brindan paso a paso la secuencia para el desarrollo de este ejemplo.
Hacemos clic en el botón que se encuentra marcado para crear un nuevo proyecto.
Seleccionaremos la categoría y luego el tipo de proyecto según el lenguaje de programación elegido en la categoría.
Luego haz clic en el botón Siguiente >, para poder continuar con la siguiente ventana:
La cual mostrará un campo de texto haciendo mención al nombre del proyecto, el cual cambiará dependiendo de lo que se decida.
Si deseas puedes cambiar la localización de la creación del proyecto.
Te recomendamos quitar el checkbox, la cual indica si se desea crear la clase principal, esto al finalizar el proceso de creación del proyecto, automáticamente creará un paquete, dentro de ello una clase ambos con el mismo nombre del proyecto. Pero en nuestro caso lo haremos desde cero.
Esperamos mientras termina el proceso de creación de nuestro proyecto.
Una vez terminado, al lado izquierdo en la pestaña de proyectos, podrás apreciar que el proyecto con el nombre que acabas de crear. A continuación deberás expandir para explicarte de qué componentes se encuentra compuesto.
Consta de dos carpetas la primera denominada paquetes de fuentes (source package) y el segundo denominado bibliotecas (libraries), según el idioma en el cual hayas descargado tu IDE.
En la primera carpeta se trabajará con el código de nuestro lenguaje de programación, y en el segundo se podrá integrar o importar algúna librería, biblioteca e incluso un proyecto externo.
Ahora vas a crear dos paquetes, uno con el nombre "cls" y otro con el nombre "vst"; el primero será nuestro paquete para organizar todos los archivos que serán los modelos de cada uno de nuestras clases (atributos, constructor, métodos).
Y el segundo paquete permitirá organizar las vistas de nuestro proyecto como son los JFrame y/o JDialog. Cada uno de ellos con sus propias características.
Por ejemplo se ha culminado la creación de la clase cuadrado. Mostrando la estructura de la clase como a continuación se demuestra:
Una vez creada nuestra clase cuadrado podrás realizar la codificación de los atributos, los constructores, y los métodos; los cuales permitirán realizar una mejor interactividad al momento de instanciar los objetos de esa clase.
Una vez creada correctamente la clase cuadrado. Se pasará a crear el formulario GUI,en JFrame, al igual que cuando se creo la clase cuadrado, se hará clic derecho sobre el paquete, seleccionamos la palabra nuevo >, a continuación hacemos clic en JFrame Form, y luego clic en Finalizar.
Finalizado el proceso se puede apreciar que se creó un lienzo del JFrame Form. 1.- El entorno de trabajo de nuestra ventana, 2.- La pestaña lateral derecha superior con los componentes que se pueden agregar al área de trabajo, 3.- La pestaña lateral derecha inferior correspondiente a propiedades, enlace, eventos, código.
Para poder trabajar dentro de un JFrame es necesario indicarle el diseño u orientación dentro de él, para colocar los componentes que contrendrán sin tener ningún problema. Para ello harás clic derecho sobre el JFrame, mostrando una serie de opciones de las cuales seleccionaremos "activar gestor de distribución", dentro de la cual haremos clic en el diseño de borde por defecto (default). Esto permitirá añadir dentro el componente Panel, para trabajarlo como área para la distribución de nuestros componentes.
Presta mucha atención.
Aparentemente no sufrirá cambios nuestro JFrame, sin embargo al hacer clic en Panel como se indica en la imagen siguiente, sin necesidad de arrastrar basta con un sólo clic se podrá llevar el componente sobre la ventana a trabajar. Siga los pasos a continuación:
Todo el área de trabajo mostrará líneas punteadas de color anaranjado, indicando que el Panel abarcará todo ese espacio. Luego clic para soltar el componente y listo podemos darle las propiedades que deseas a tu entorno.
Vamos a configurar la propiedad border de nuestro componente Panel, así que vamos a hacer clic en el boton indicado en la siguiente imagen, mostrando una ventana detallada de esa propiedad.
En la ventana de propiedades del border seleccionarás la opción "Borde con Título". Lo cual mostrará una serie de opciones como el borde mismo, el título que desees colocar a tu borde, el color del texto, el tipo de letra o fuente, la justificación o tambien conocida como alineación de texto horizontal o vertical, y por último la posición.
Debes colocar el título que quieres que contenga el borde.
Seguido debes seleccionar el color si deseas cambiarlo, justo en el boton con los tres puntos. Mostrando una gama de colores de los cuales podrá seleccionar según su preferencia. Luego clic en aceptar.
Ahora podrás seleccionar si deseas el tipo de fuente o tipo de letra y para finalizar, hacer clic en aceptar.
Tendrás como resultado un Panel con bordes a su alrededor y con el título que describiste en la parte superior alineada a la izquierda.
A continuación agrega los componentes para completar el diseño de tu formulario, el nuestro tendrá un JLabel, un JTextField, y dos JButton, cada uno con su particularidad y propiedades en su mayoría similar.
El JLabel o también en castellano conocida como etiqueta nos permite mostrar la descripción o acción de forma textual. Fíjate en la imagen a continuación:
Para cambiar el texto del componente basta con un clic derecho sobre él, y mostrará una lista como en la imagen y debes seleccionar la primera opción que dice Editar Texto:
Podrás ver que inmediatamente el componente se vuelve editable y ahora si puedes comenzar a escribir el nuevo texto que consideraste colocar, también puedes hacerlo a través de una selección al componente y próximamente presionar la tecla F2 para cambiar el texto del componente de manera más directa, como cuando deseas cambiar el nombre a cualquier archivo de tu sistema operativo.
Continuamos agregando el JTextField conocido en castellano como el campo de texto, el cual nos permite ingresar dentro de él, un valor alfanumérico, este será evaluado con la acción que se realice con los botones que más adelante estaremos incluyendo dentro de nuestro formulario.
Al igual que el JLabel este componente JTextField tiene escrito dentro un valor, para ello haremos el mismo proceso como anteriormente lo trabajamos, y redimencionarás el componente a unos 70 unidades en tamaño. Tal como lo hacemos en la siguiente imagen:
Para terminar con nuestro formulario insertaremos ahora los JButton que nos faltan, ambos en la parte inferior derecha de nuestra área de trabajo.
Estos al igual que los anteriores componentes también tienen un texto dentro, y para diferenciarlos vamos a cambiar el texto de cada uno de ellos según corresponda, a la izquierda será el botón calcular y a la derecha el botón borrar.
Ahora puedes ver en la imagen que se a terminar el diseño de nuestro formulario, sin embargo ahora nos queda desarrollar la lógica para el funcionamiento, para ello deberás colocar a cada componente que funcionará un nombre de componente, denominado nombre de variable siendo muy distinto al texto que anteriormente hiciste cambios.
Para realizar esto, harás clic derecho al igual que antes, pero seleccionarás cambiar nombre de variable, esto nos permitirá diferenciar un componente de otro. Y saber según nuestros criterios de programación ¿cuál es cuál?, no teniendo dificultad al momento de hacer el llamado a estos objetos dentro de nuestra programación.
Una vez hecho el cambio simplemente clic en Aceptar.
Una vez realizado todo este proceso, puedes continuar haciendo doble clic sobre el botón calcular, iniciaremos la programación de nuestro formulario.
Inmediatamente nos mostrará el lado de la programación y nuestro cursor se ubicará automáticamente dentro del método de nuestro componente. Recordando que el nombre de nuestra variable del botón Calcular es "btnCalcular" nuestro metodo se llamará "btnCalcularActionPerformed".
Recordando lo que debe hacer nuestro programa, permitir ingresar el lado de un cuadrado cualquiera, permitiendo también números decimales, sólo números y que al momento de hacer clic en calcular, inmediatamente muestre a través de un JOptionPane (Mensaje) el área según las dimensiones ingresadas. Es por ello que lo primero a desarrollar será la evaluación de la caja de texto si se encuentra vacía o no, de ser el vacío mostrar el mensaje "Ingresar el lado, primero...".
private void btnCalcularActionPerformed(java.awt.event.ActionEvent evt) {
if(txtLado.getText().length() > 0){
//Continuar con el procedimiento
}else{
//Mostrar mensaje "Ingresar el lado, primero..."
}
}
Dentro de la sentencia if colocaremos la recepción del valor proveniente de la caja de texto, pero recuerda que ese valor es de tipo String (cadena) la cual no será compatible con un valor double, por ello se debe de convertir con el método parseDouble.
Debes instanciar ahora un objeto de la clase cuadrado, el cual tendrá por nombre de variable "cuadrado", éste constructor recibirá como parámetro el valor convertido en decimal de la caja de texto, e inmediatamente a través del objeto cuadrado y con el apoyo de un JOptionPanel se muestra el resultado del área obtenido según la dimensión del lado.
if(txtLado.getText().length() > 0){
double lado = Double.parseDouble(txtLado.getText());
clsCuadrado cuadrado = new clsCuadrado(lado);
JOptionPane.showMessageDialog(null, "El área es: " + cuadrado.calcularArea());
}
Para terminar la codificación del botón se colocará dentro lo siguiente.
private void btnCalcularActionPerformed(java.awt.event.ActionEvent evt) {
if(txtLado.getText().length() > 0){
double lado = Double.parseDouble(txtLado.getText());
clsCuadrado cuadrado = new clsCuadrado(lado);
JOptionPane.showMessageDialog(null, "El área es: " + cuadrado.calcularArea());
}else{
JOptionPane.showMessageDialog(this, "Ingresar el lado, primero...");
txtLado.requestFocus();
}
}
Teniendo como resultado tal como se encuentra en la imagen siguiente:
Ahora continuaremos con el botón borrar, para ello hacemos doble clic en él, y codificarás lo siguiente:
private void btnBorrarActionPerformed(java.awt.event.ActionEvent evt) {
txtLado.setText("");
txtLado.requestFocus();
}
Para sólo permitir decimales nos ubicaremos en seleccionar el campo de texto, luego nos dirigimos a la propiedades y ubicamos eventos, selecciona el evento KeyTyped.
private void txtLadoKeyTyped(java.awt.event.KeyEvent evt) {
char k = evt.getKeyChar();
if(!txtLado.getText().contains(".")){
if(!Character.isDigit(k) && k != 46){
getToolkit().beep();
evt.consume();
}
}else{
if(!Character.isDigit(k)){
getToolkit().beep();
evt.consume();
}
}
}
Ahora si puedes ejecutar el proyecto para ver su funcionamiento. Y seguir perfeccionando esta pequeña aplicación y crear tus propios proyectos.
Si te gusto este artículo no te olvides de compartir con tus amigos en tus redes sociales y dejar tu comentario en la parte inferior de este artículo.
Si deseas descargar el código dejo el link a continuación. (Descargar)
Comentarios
Publicar un comentario