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”.
1

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.
2

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
3

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.
4

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
5

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
6

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.
7

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.
8

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.
9