1

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

programación es fácil, solo es para personas que realmente

tienen amor por la carrera, al principio renegamos, si es cierto

pero es cuestión de práctica. Ahora veremos algo que

especialmente a mí no me gusta mucho e inclusive es mi dolor

de cabeza: el diseño. Hablaremos de cómo podemos hacer

nuestras ventanas un poco más 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 atención 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 botón (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” podrás elegir entre cinco diferentes estilos que ya vienen predeterminados

(figura 2).

Figura 2

De esta forma veremos cómo cada uno cambia el aspecto de nuestro formulario, ¿quieres verlo

un poco mejor? entonces puedes descargar Laffy desde esta dirección:

http://download.java.net/javadesktop/laffy/Laffy.jnlp

Laffy es una aplicación que te permite explorar la parte de swing en sus “look and feel”.

2

A partir de la versión 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 código 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 símbolo de “+” y abrimos el código

que hace referencia a las cualidades de la ventana (figura 4).

Figura 4

En la figura 5 se muestra la línea de código 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 aplicación de ventanas con

swing, esta ventana contendrá una etiqueta (jLabel),un boton (jButton) y un slider (jSlider). Figura

6.

3

Figura 6

5. Vamos a este sitio http://sourceforge.net/projects/napkinlaf/?source=dlp , descargamos el

archivo y lo agregamos a las librerías, 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 código y modificamos un poco el método donde dice “run”, de tal manera que queda

algo como en la figura 8. No olviden incluir las librerías en la sección “import”.

Figura 8

4

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 librería, todavía no está totalmente

lanzada, pero hay muchos en internet que podemos utilizar.

Figura 9

El icono

Muchas veces nos preguntamos ¿Cómo 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 imágenes 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.

5

Figura 11

Vamos a la vista de diseño “Design” y seleccionamos ahora nuestro “JFrame” y escogeremos en

propiedades “iconImage” y seleccionaremos el botón 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”, también cuida los paréntesis.

NOTA 2: Es probable que debas agregar la siguiente línea en la sección de “import”:

import javax.swing.ImageIcon;

Si todo es correcto al ejecutar la aplicación aparecerá la ventana con icono mejorado. Figura 14.

Figura 13

Figura 14

6

Títulos de ventana

Para los títulos 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 más que suficiente. Figura 16.

Figura 15

Figura 16

Desgraciadamente el conjunto de librerías de swing no tiene un componente de imagen (o

“picture”) como otros lenguajes por lo que es difícil trabajar con las imágenes. 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 botón con “…”. Figura 17

Figura 17

En la nueva ventana escogemos el paquete donde están las imágenes (paquete “Img”) y solo la

seleccionamos. Figura 18.

Figura 18

7

¡Listo! a trabajar con imágenes, de hecho puedes ponérselas inclusive a los botones. Figura 19.

Todo depende de la imaginación de cada uno de nosotros.

Figura 19

En java las imágenes deben de ser del tamaño necesario por lo que hay que buscar cual es el

tamaño idóneo 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 añadiremos dos funciones al código, por lo que vamos al “Source” y buscamos el

constructor “Ventana” (dentro de él encontrarás el método “initComponents”). Noten que debajo

del constructor voy a escribir dos métodos, una de ellas me permite ajustar la imagen a un tamaño

por medio de una escala y la otra me permite cambiar la imagen de la etiqueta. El código 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.

8

Esto hará que mi Mario funcione igual. ¿?, ¿Todo eso para hacer lo mismo?, bueno no, ya vamos,

no te desesperes. Regresamos al diseño (Desig) y daremos clic derecho en el “Slider” y

posteriormente escogeremos la opción de “stateChange” para poder trabajar. Figura 20.

Figura 20

Al evento agregamos lo siguiente:

Guardamos y ejecutamos, ya tenemos nuestra aplicación con un poco de efecto.

9

Ya conocimos cómo darle un poco de diseño 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 creación del club de programación, a veces programar puede ser divertido.