Bienvenido

En Custom te damos la bienvenida a este blog donde encontraras artículos interesantes sobre las tecnologías del presente así como artículos relacionados con programación, base de datos, electrónica, telecomunicaciones y mucho mas. No olvides dejar tu comentario después de leer alguno de nuestros artículos.

Conociendo Java

Conociendo Java

Bueno amigos como sabrán algunas veces nos es difícil adaptarnos al cambio tecnológico al que ha estado sujeto el mundo en los últimos años, tal es el caso de los sistemas informáticos para los cuales día a día surgen nuevos lenguajes de programación para su creación. Hoy en el mercado existe gran variedad de paquetes de software con licencias caras, pero por que obtener un software que nos genere costos adicionales a nuestro proyecto, es por ello que me enfocare al uso del software libre, mencionando exclusivamente el caso de Java y su capacidad.

Iniciare con algo no tan tradicional en la programación de Java para principiantes, pero si con algo de gran utilidad con lo cual podremos incorporarnos a la pronta producción de aplicaciones en Java. Aprovechando el potencial de algunas herramientas de software libre como lo son Netbeans, MySql y Navicat lite for MySql podremos entender la gran capacidad que nos da el Java, al transcurso de esta publicación ire mencionando y explicando diversos puntos importantes como lo son la declaración de variables, herencia, metamorfismo, apuntadores, arrays entre otros.

El objetivo de esta lección es introducir el API Swing de diseñar una simple aplicación que convierte la temperatura de Celsius a Fahrenheit. Su interfaz gráfica se básicos, centrándose sólo en un subconjunto de los componentes Swing disponibles. Vamos a utilizar el IDE NetBeans GUI constructor, lo que hace la interfaz de usuario la creación de una simple cuestión de arrastrar y soltar. Su generación automática de código característica simplifica el proceso de desarrollo GUI, que le permite centrarse en la lógica de aplicación en lugar de la infraestructura subyacente.

Debido a que esta es una lección paso a paso lista de medidas concretas a tomar, le recomendamos que ejecute el NetBeans IDE y realizar cada paso mientras lee a lo largo. Esta será la forma más rápida y cómoda para comenzar la programación con Swing. Si no están en condiciones de hacerlo, a lo largo de la simple lectura debe seguir siendo útil, ya que cada paso se ilustra con capturas de pantalla.

Si prefiere el enfoque tradicional de programación de cada uno de los componentes manualmente (sin la ayuda de un IDE), pensar de esta lección como un punto de entrada en los niveles inferiores ya los debates previstos en otras partes del tutorial. Hipervínculos en cada debate le llevará a las enseñanzas relacionadas, en caso de que desee aprender este tipo de nivel inferior detalles.

El acabado GUI para esta aplicación se verá como sigue:




Desde el punto de vista del usuario final perspectiva, el uso es simple: entrar en una temperatura (en Celsius) en el cuadro de texto, haga clic en el "Convert" botón, y ver la conversión de temperatura (en grados Fahrenheit) aparecen en pantalla. La minimizar, maximizar, cerrar los botones y se comportarán como se espera, y la aplicación también tendrá un título que aparece en la parte superior de la ventana.
Desde una perspectiva del programador, vamos a escribir la aplicación en dos etapas principales. En primer lugar, vamos a poblar el GUI con los diversos componentes Swing y los arreglos como se muestra arriba. Entonces, vamos a añadir la lógica de aplicación, por lo que en realidad el programa realiza una conversión cuando el usuario pulsa el "Convert" botón.

Si han trabajado con el NetBeans IDE en el pasado, gran parte de esta sección se verá familiar, desde los pasos iniciales son similares para la mayoría de los proyectos. Sin embargo, los pasos siguientes describen los ajustes que son específicos de esta solicitud, a fin de cuidar a seguirlos de cerca.

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto, poner en marcha el NetBeans IDE y elija Nuevo proyecto en el menú Archivo:





La creación de un nuevo proyecto

Atajos de teclado para cada comando colocará en el extremo derecho de cada elemento de menú. El aspecto del NetBeans IDE puede variar entre plataformas, pero la funcionalidad seguirá siendo el mismo.

Paso 2: Elige General -> Java Application

A continuación, seleccione General de la columna de categorías, Java y Aplicación de Proyectos de la columna:



Usted puede notar la mención de "J2SE" en la descripción panel, que es el antiguo nombre de lo que ahora es conocido como el "Java SE" plataforma. Pulse el botón "Siguiente" para continuar.

Paso 3: Establezca un Nombre del proyecto

Ahora escriba "CelsiusConverterProject" como el nombre del proyecto. Puede dejar la ubicación del proyecto y carpeta de proyecto conjunto campos a sus valores por defecto, o haga clic en el botón Examinar para seleccionar una ubicación alternativa a su sistema.



Asegúrese de que anuló la casilla "Crear main de Clase"; dejar esta opción sin palomear pues esta genera una nueva clase como el punto principal de entrada para la solicitud, pero nuestra principal ventana GUI (creado en el paso siguiente) servirá con ese fin, lo que la comprobación de esta casilla no es necesario. Haga clic en el botón "Finalizar" cuando haya terminado.


Cuando termina el IDE de carga, verá una pantalla similar a la anterior. Todos los paneles se vacía a excepción de los proyectos panel en la esquina superior izquierda, lo que demuestra el recién creado proyecto.


Paso 4: Añadir un JFrame Forma



Ahora clic con el botón derecho CelsiusConverterProject el nombre y elija Nuevo -> Formulario de JFrame (JFrame Swing es la clase responsable de la principal marco para su aplicación.) Usted aprenderá la manera de designar esta clase como la aplicación del punto de entrada más adelante en esta lección.


Paso 5: Nombre de la GUI de la clase

A continuación, escriba CelsiusConverterGUI como el nombre de clase, y aparecerá como el nombre del paquete también. Usted puede en escribir en el nombre de este paquete todo lo que quiera, pero aquí estamos siguiendo el tutorial de convención de nombrar el paquete después de la lección en la que se resida.



El resto de los campos debería ser automáticamente rellenado, como se muestra arriba. Haga clic en el botón Finalizar cuando haya terminado.



Cuando termina el IDE de carga, el panel de la derecha, se mostrará un tiempo de diseño, vista gráfica de la CelsiusConverterGUI. Es en esta pantalla que en la que puede arrastrar, soltar, y manipular los distintos componentes Swing.

No es necesario aprender cada aspecto de la NetBeans IDE antes de explorar su capacidad de creación de GUI. De hecho, las únicas características que usted realmente necesita entender son la paleta, la Zona de Diseño, Editor de la Propiedad, y el Inspector. Aquí hablaremos de estas características a continuación.

La Paleta

La paleta contiene todos los componentes ofrecidos por el API Swing. Usted probablemente puede ya adivinar lo que muchos de estos componentes están a favor, aunque esta es la primera vez que los utilizaras (JLabel es una etiqueta de texto, JList es una lista desplegable, etc).


De esta lista, nuestra aplicación utilizará sólo JLabel (un texto básico etiqueta), JTextField (para que el usuario pueda entrar en la temperatura), y JButton (para convertir la temperatura de Celsius a Fahrenheit.)

El área de diseño

El Área de Diseño es donde usted va a construir visualmente su GUI. Tiene dos puntos de vista: código fuente (Source), y el diseño (Design). Diseño de vista es el valor por defecto, como se indica a continuación. Puede cambiar entre puntos de vista en cualquier momento haciendo clic en sus respectivas fichas.


La cifra anterior muestra un único objeto JFrame, representada por el gran rectángulo sombreado con líneas azules. Comúnmente el comportamiento esperado es generado automáticamente por el IDE y aparece en la fuente vista con un comportamiento de no editable en un color azul entre las secciones de código conocida como bloques vigilado.


Un vistazo rápido al código fuente revela que la IDE ha creado un método privado llamado initComponents, que inicializa los diversos componentes de la GUI. También le dice a la aplicación que se prepare para realiza el diseño de algunas tareas específicas, como los paquetes y componentes que pronto se añadirán en la pantalla.

No se sienta que usted necesita para entender este código en detalle, lo mencionamos aquí simplemente para explorar la pestaña código fuente. Para obtener más información sobre estos componentes, consulte:

Cómo hacer Marcos (Principal de Windows) y como se exponen los componentes en un contenedor.

El editor de propiedad

El Editor de la Propiedad hace lo que su nombre implica: que te permite editar las propiedades de cada componente. El Editor de la Propiedad es intuitivo de usar; en el verás una serie de filas - una línea para cada propiedad - donde puedes hacer clic y editar sin entrar en el código fuente directamente. La siguiente figura muestra el Editor de la propiedad para la nueva JFrame objeto:



La captura de pantalla de arriba muestra las distintas propiedades de este objeto, como color de fondo, color, tipo de letra, y el cursor.

El Inspector

El último componente del IDE NetBeans que utilizaremos en esta lección es el Inspector:
El Inspector proporciona una representación gráfica de su aplicación de componentes. Vamos a utilizar el Inspector de una sola vez, para cambiar unos nombres de variables a algo distinto de los predeterminados.


Iniciando el diseño

En esta sección se explica cómo usar el IDE NetBeans para crear la aplicación del GUI. Como usted arrastrar cada componente de la paleta para el Área de Diseño, la IDE auto-generar el código fuente apropiado.

Paso 1: Ponga el Título


Primero, defina el título de la aplicación del JFrame para "Conversor Celsius", a cargo de un solo clic en el JFrame en el Inspector:

Selección del JFrame

A continuación, configure su título de propiedad con el Editor:


Configuración del Título

Puede configurar el título, ya sea por doble clic en el título de propiedad y entrar en el nuevo texto directamente, o haciendo clic en el botón y entrar el título en el campo correspondiente. O, como un atajo, puede dar solo clic en el JFrame del inspector y entrar en su nuevo texto directamente sin necesidad de utilizar el editor de propiedad.

Paso 2: Añadir un JTextField
A continuación, arrastra un JTextField de la paleta a la esquina superior izquierda del Área de Diseño. Al acercarse a la esquina superior izquierda, el constructor GUI se proporcionará señales visuales (líneas de puntos) sugieren que el espaciamiento adecuado. El uso de estas señales como una guía, una gota JTextField en la esquina superior izquierda de la ventana como se muestra a continuación:


Adición de un JTextField

Usted puede tener la tentación de borrar el texto por defecto "JTextField1", pero basta con dejarlo en su lugar por ahora. Vamos a reemplazar más adelante en esta lección como hacemos los ajustes finales a cada uno de los componentes. Para obtener más información sobre este componente, consulte Cómo usar los campos de texto.


Paso 3: Añadir un JLabel

A continuación, arrastra un JLabel en el Área de Diseño. A la derecha de la JTextField, una vez más para ver señales visuales que indican una cantidad adecuada de espaciamiento. Asegúrese de que la base del texto para este componente se alinea con la de los JTextField. Las señales visuales proporcionados por el IDE debe hacer tan fácil de determinar.


Paso 4: Añadir un JButton

A continuación, arrastra un JButton de la paleta y la posición hacia la izquierda y debajo del JTextField. Una vez más, las señales visuales ayudarán a guiar en el lugar.


Adición de un JButton

Usted puede tener la tentación de ajustar manualmente el ancho de la JButton y JTextField, sino dejarlas como están por el momento. Usted aprenderá a ajustar correctamente estos componentes más adelante en esta lección.

Paso 5: Añadir una segunda JLabel



Adición de un segundo JLabel

Por último, añadir un segundo JLabel, repitiendo el proceso en el paso 2. Coloque la segunda etiqueta a la derecha de la JButton, como se muestra arriba.


Ajuste de la GUI CelsiusConverter

Con los componentes GUI en la actualidad, es el momento de hacer los ajustes finales. Existen algunas formas diferentes de hacerlo; el orden sugerido aquí es sólo un posible enfoque.

Paso 1: Ponga el Componente Texto


En primer lugar, lentamente, haga doble clic en el JTextField y JButton para cambiar el texto por defecto que fue insertado por el IDE. Para ello, haga clic, y luego hacer una pausa, a continuación, haga clic de nuevo en el componente. Si lo prefiere, puede clic con el botón derecho el componente y, a continuación, elija Editar texto. Al borrar el texto de la JTextField, que se reducirá en tamaño como se indica a continuación. Cambiar el texto de la JButton de "JButton1" a "Convertir". También cambiar la parte superior JLabel texto a "C" y la parte inferior a "Fahrenheit".



Configuración del componente de texto

Paso 2: Defina el Componente Tamaño

A continuación, haga clic en el JTextField y componentes JButton. Esto se hará hincapié en cada uno demostrando que son seleccionados. Clic con el botón derecho (control-clic para usuarios de Mac) mismo tamaño -> misma anchura. Los componentes será la misma anchura, como se indica a continuación. Cuando se realiza este paso, asegúrese de que JFrame sí misma no es seleccionado. Si es así, el mismo tamaño menú no se activa.





Configuración del JTextField y JButton Tallas

Paso 3: Retire el Espacio Extra

Por último, agarra la esquina inferior derecha de la JFrame y ajustar su tamaño para eliminar cualquier espacio en blanco extra. Tenga en cuenta que si eliminar todas las del espacio (como se muestra a continuación) el título (que sólo aparece en tiempo de ejecución) no puede mostrar por completo. El usuario final es libre de cambiar el tamaño de la aplicación tal como lo desea, pero puede que quiera dejar algún espacio extra en el lado derecho para asegurarse de que todo encaja correctamente. Experimento, y utilizar la captura de terminado el GUI como guía.



Concluido el GUI

El GUI de esta aplicación se ha completado! Si el IDE NetBeans ha hecho su trabajo, usted debe sentir que la creación de este GUI es muy simple, y no es trivial, tarea. Pero tómese un minuto para hacer clic en la pestaña fuente, usted puede ser que se sorprenda en el cantidad de código que se ha generado.



Para ver el código en su totalidad, desplazarse hacia arriba y hacia abajo en el IDE, según sea necesario. Puede expandir o colapso de algunos bloques de código (como método de órganos) haciendo clic en el signo + o - símbolo en la parte izquierda de la fuente editor.

La adición de la lógica para la aplicación

Paso 1: cambiar el valor por defecto los nombres de variables

La siguiente figura muestra los nombres de variables por defecto, ya que actualmente aparecen en el Inspector. Para cada componente, el nombre de la variable aparece en primer lugar, seguido por el tipo del objeto entre corchetes. Por ejemplo, jTextField1 [JTextField] significa que "jTextField1" es el nombre de la variable y "JTextField" es su tipo.


Los nombres por defecto no son muy relevantes en el contexto de esta aplicación, así que tiene sentido a cambio de su valor por defecto es algo que es más significativo. Haga clic derecho en cada nombre de variable y elija la opción "Cambiar nombre de variable." Cuando haya terminado, los nombres de variables deberían aparecer como sigue:




Los nuevos nombres de variables son "tempTextField", "celsiusLabel", "convertButton", y "fahrenheitLabel". Cada cambio que haga en el Inspector se propagará automáticamente, su camino de vuelta en el código fuente. Puede estar seguro de que la compilación no fallará debido a errores tipográficos o errores de esa naturaleza - los errores que son comunes son al editar a mano.

Paso 2: Registrar el evento Oyentes


Cuando un usuario final interactúa con un componente Swing GUI (como hacer clic en el botón Convert), componente que generará un tipo especial de objeto - llamado un objeto de evento - que luego se emiten a cualquier otros objetos que se han registrado previamente a sí mismos como oyentes para ese evento. El IDE NetBeans hace caso oyente registro muy simple:






En el Área de Diseño, haga clic en el botón Convert para seleccionarlo. Asegúrese de que sólo el botón Convert está seleccionado (si el JFrame en sí es también seleccionado, este paso no funcionará.) Haga doble clic en el botón Convert y elija -> Acción -> ActionPerformed. Esto generará el evento de manipulación que requiere el código, lo que dejará vacío con el método para agregar su propia funcionalidad:

Hay muchos diferentes tipos de eventos que representen a los diferentes tipos de acciones que un usuario final puede tomar (clic con el ratón provoca un tipo de evento, escribiendo en el teclado provoca otro, moviendo el ratón otro, y así sucesivamente.) Nuestra solicitud es sólo se ocupan de la ActionEvent.

Paso 3: Añadir el código de conversión de temperatura

El paso final consiste simplemente en pegar el código de conversión de temperatura en el cuerpo vacío método. El siguiente código es todo lo que es necesario para convertir una temperatura de Celsius a Fahrenheit:


  1. / / Parse grados centígrados como un doble y convertir a Fahrenheit.
  2. int tempFahr = (int) ((Double.parseDouble (tempTextField.getText ()))*1.8+ 32);
  3. fahrenheitLabel.setText (tempFahr + "Fahrenheit");
Basta con copiar este código y pégalo en la convertButtonActionPerformed método como se indica a continuación:


Con el código de conversión en su lugar, la aplicación se ha completado.


Paso 4: Ejecutar la Aplicación

Ejecutando la aplicación es simplemente una cuestión de elegir Ejecutar -> Ejecutar principal del proyecto en el NetBeans IDE. La primera vez que ejecute esta aplicación, se le pedirá con un cuadro de diálogo pidiendo a CelsiusConverterGUI como la clase principal de este proyecto. Haga clic en el botón OK, y cuando el programa termina de compilar, se debería ver la aplicación que corre en su propia ventana.





Ha completado su primera aplicación Swing!

1 comentario:

Anónimo dijo...

Hola!!!, podrias publicar el codigo, es que no se alcanza a distinguir .!!
Saludos desde MEx, atte Selene