Look de ventanas

Fecha: 7 de Marzo Look ventanas. VentanaNice

Qu les ha parecido hasta ahora el manejo de las ventanas? Interesante verdad? .no, no pues no. Nadie dijo que la programacin es fcil, solo es para personas que realmente tienen amor por la carrera, al principio renegamos, si es cierto pero es cuestin de prctica. Ahora veremos algo que especialmente a m no me gusta mucho e inclusive es mi dolor de cabeza: el diseo. Hablaremos de cmo podemos hacer nuestras ventanas un poco ms personalizables. Tal vez lo podamos aplicar a tu agenda - espera? Eso es!, ah tenemos el siguiente reto. Veamos que tal es tu creatividad. Empezaremos por trabajar con un proyecto nuevo, pon mucha atencin en lo que podemos realizar con las ventanas, - espero que todo esto salga bien. 1. Abriremos un nuevo proyecto y empezaremos por agregar un paquete llamado view con un formulario (jFrame) llamado ventana.

Figura 1 2. Agrega un botn (jButoon) para que puedas ver un poquito los cambios, vamos a empezar con el look and feel que tiene java por defecto, da clic derecho sobre el formulario (jFrame) y en Preview Design podrs elegir entre cinco diferentes estilos que ya vienen predeterminados (figura 2).

Figura 2 De esta forma veremos cmo cada uno cambia el aspecto de nuestro formulario, quieres verlo un poco mejor? entonces puedes descargar Laffy desde esta direccin: http://download.java.net/javadesktop/laffy/Laffy.jnlp Laffy es una aplicacin que te permite explorar la parte de swing en sus look and feel. 1

A partir de la versin 7 de Netbeans trabajamos con Nimbus por default, pero t puedes cambiarlo para que veas como van quedando tus formularios. 3. Vamos a abrir el cdigo de Java para esto vamos a darle clic en Source

Figura 3 Una vez ah nos guiaremos por el Main, en esa misma parte aparece un cuadro referente al look and feel (figura 4). En la parte izquierda damos clic en el smbolo de + y abrimos el cdigo que hace referencia a las cualidades de la ventana (figura 4).

Figura 4 En la figura 5 se muestra la lnea de cdigo que llama al estilo que se usar en la ventana. Es en esta parte donde puedes ir probando cada uno de los modos, algunos no cambian mucho pero te puede interesar algo llamativo. Vamos te dar 10 minutos para que los revises, solo cambia la palabra Nimbus por el estilo que desees (Metal, CDE/Motif,Windows, Windows Classic). listo!, vamos, vamos, es tiempo de avanzar.

Figura 5 4. Continuamos, qu te parece? Interesante verdad, mhh nooo???? Bueno tratare de sorprenderte, vamos a poner una pantalla de bienvenida para una aplicacin de ventanas con swing, esta ventana contendr una etiqueta (jLabel),un boton (jButton) y un slider (jSlider). Figura 6.

Figura 6 5. Vamos a este sitio http://sourceforge.net/projects/napkinlaf/?source=dlp , descargamos el archivo y lo agregamos a las libreras, damos clic derecho en Libraries de nuestro proyecto, le ponemos Agregar Carpeta/Jar y damos de alta el que acabamos de descargar. La carpeta de Libraires quedar como la figura 7.

Figura 7 Vamos al cdigo y modificamos un poco el mtodo donde dice run, de tal manera que queda algo como en la figura 8. No olviden incluir las libreras en la seccin import.

Figura 8

9. Ejecutamos la ventana y listo ya tenemos una interfaz con un LookAndFeel nuevo (figura 9). El formulario se ve un poco raro pero es por la nueva librera, todava no est totalmente lanzada, pero hay muchos en internet que podemos utilizar.

Figura 9

El icono
Muchas veces nos preguntamos Cmo puedo cambiar el iconito de Java en la esquina de la ventana? (figura 10), aunque sea la esencia de dicho lenguaje buscaremos cambiarlo. Realmente java tiene muchos problemas con el manejo de las imgenes pero como se han de dar cuenta tenemos muchas clases que podemos utilizar para manejarlas por lo que creo no tendremos problemas por eso.

Figura 10 1. Bueno vamos a empezar, escogeremos una buena imagen, debe de ser una buena, para eso ponemos nuestra figura dentro de nuestro proyecto. Para eso creamos un nuevo paquete llamado Img y ah arrastramos nuestra imagen (figura 11), en este caso cuida que la imagen no est muy saturada porque de lo contrario no se apreciara bien.

Figura 11 Vamos a la vista de diseo Design y seleccionamos ahora nuestro JFrame y escogeremos en propiedades iconImage y seleccionaremos el botn con los para ayudarnos del asistente. Figura 12

Figura 12 Aparecer una ventana donde seleccionamos la propiedad Custom Code (Figura 13). Dentro del cuadro pondremos: new ImageIcon(getClass().getResource("/Img/icono.png")).getImage() NOTA: Ten mucho cuidado el nombre icono.png este nombre corresponda al nombre de la imagen que importaste al paquete Img, tambin cuida los parntesis. NOTA 2: Es probable que debas agregar la siguiente lnea en la seccin de import: import javax.swing.ImageIcon; Si todo es correcto al ejecutar la aplicacin aparecer la ventana con icono mejorado. Figura 14.

Figura 13

Figura 14

Ttulos de ventana
Para los ttulos de la ventana solo hay que seleccionar nuestro jFrame y encontrar la propiedad Title que se encuentra en las propiedades (figura 15). Ponemos un texto representativo de la venta y con eso es ms que suficiente. Figura 16.

Figura 15

Figura 16

Desgraciadamente el conjunto de libreras de swing no tiene un componente de imagen (o picture) como otros lenguajes por lo que es difcil trabajar con las imgenes. Para mi caso tenemos que insertar una JLabel, s, una etiqueta la cual nos servir para poder insertar mi imagen. Para esto seleccionamos la jLabel y vamos a la propiedad de icon y abrimos el asistente dando clic en el botn con . Figura 17

Figura 17 En la nueva ventana escogemos el paquete donde estn las imgenes (paquete Img) y solo la seleccionamos. Figura 18.

Figura 18 6

Listo! a trabajar con imgenes, de hecho puedes ponrselas inclusive a los botones. Figura 19. Todo depende de la imaginacin de cada uno de nosotros.

Figura 19 En java las imgenes deben de ser del tamao necesario por lo que hay que buscar cual es el tamao idneo para que no se pixelen y tengas un trabajo de calidad pero para los que somos tercos pues nimo, vamos a ver que se puede hacer. Jugaremos un rato con el Mario. Primero aadiremos dos funciones al cdigo, por lo que vamos al Source y buscamos el constructor Ventana (dentro de l encontrars el mtodo initComponents). Noten que debajo del constructor voy a escribir dos mtodos, una de ellas me permite ajustar la imagen a un tamao por medio de una escala y la otra me permite cambiar la imagen de la etiqueta. El cdigo es como sigue: NOTA: Tengan cuidado con el nombre de la etiqueta (jLabel) es probable que en su caso se llame jLabel2 u otro nombre si es que lo cambiaron. Recuerden que la etiqueta con la que trabajaremos es la que tiene la imagen.

Esto har que mi Mario funcione igual. ?, Todo eso para hacer lo mismo?, bueno no, ya vamos, no te desesperes. Regresamos al diseo (Desig) y daremos clic derecho en el Slider y posteriormente escogeremos la opcin de stateChange para poder trabajar. Figura 20.

Figura 20 Al evento agregamos lo siguiente:

Guardamos y ejecutamos, ya tenemos nuestra aplicacin con un poco de efecto.

Ya conocimos cmo darle un poco de diseo a las pantallas, ahora te toca a ti, como reto adorna la ventana de tu agenda, vamos tu puedes!, deja tus comentarios en DevTequila de Facebook ah podemos atenderte.

Esta es una creacin del club de programacin, a veces programar puede ser divertido.