SEBASTIAN GOMEZ INICIO BLOG SOBRE

search here Search

CREACIN Y
PERSONALIZACIN DE
INTERFACES GRFICAS ABOUT ME
USANDO NETBEANS
octubre 20, 2015 Sebastian Gomez Java Leave a comment

Trabajar JAVA desde NetBeans es una gran manera de agilizar algunos de

nuestros desarrollos ya que nos permite hacer muchas cosas, pero una de las
ms importantes cosas es que nos ofrece NetBeans es la creacin de SEBASTIAN GOMEZ
interfaces grcas por medio de una interfaz grca (Valga la redundancia).
Podemos programar aplicando varios de los conceptos de la programacin He participado en diferentes
orientada a objetos: polimorsmo, herencia, todo lo que queramos por startups Colombianas y
consola, pero, Basta simplemente con limitarnos a ver los resultados que estadounidences, he trabajado
PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API
arroja nuestra aplicacin en una consola o una ventana de resultados? Es por para algunas empresas en
esto que si queremos avanzar, hacer y ver las cosas de una manera diferente, EE.UU. (San Francisco y Los
adems de tener una aplicacin con vista amigable ante los ojos del usuario o ngeles), Medelln Colombia y
cliente, debemos empezar a trabajar con interfaces gracas o los famosos Santiago de Chile donde
form que nos brindan muchsimas herramientas de programacin. actualmente resido. Mi
experiencia es el desarrollo de
web y mvil full stack como
front-end y back-end.

Es por esto que en este pequeo tutorial trataremos sobre este tema y se
ensearn las principales cosas o bsicas a tener en cuenta, adems de cmo
hacerlo, al momento de trabajar con interfaces grficas.

Empezaremos creando un nuevo proyecto en NetBeans como normalmente AROUND THE WEB
lo hacemos.

Crearemos un paquete en nuestra aplicacin y dentro de l agregaremos un

nuevo JFrame form, con el cual haremos un Loguin o Inicio de sesin a
nuestra aplicacin por medio de Interfaces grcas. Es de muchsima
importancia que nuestras aplicaciones a desarrollar tengan controles de
accesos con inicios de sesin, puesto que cualquiera podra meterse a ella y
arruinar o hacer modificaciones no deseadas a la aplicacin de la compaa.
Popular Recent

Bastar con hacer click derecho sobre el paquete > New > JFrame form Y
4 Comments
ya tendremos la interfaz de lo que ser nuestro Loguin.
Angular 2 con
Javascript Hola
Mundo Parte 3

4 Comments
Conectar y usar
PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API
 Mandrill con Laravel
5

4 Comments
Angular 2 aplicacin
que saluda Parte 4

4 Comments
Introduccin a
Firebase para
Por lo que general en JAVA NetBeans luego de hacer esto nos quedara
Android
nuestra interfaz base y el cuadro de herramientas al lado derecho con el que
trabajaremos. 2 Comments
Angular 1 vs Angular
2 Parte 2

CATEGORAS
C++
Desarrollo Web
Firebase
Inteligencia Artificial
Dentro de la caja de herramientas o Palette nos iremos a Swing Controls y
Java
de all arrastraremos un Panel o JPanel el cual bastara con arrastrarlo hasta
nuestra interfaz.

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

Una vez hecho esto, despus de agregar todos los Label, Button y Text Field
necesarios tendremos algo parecido a esto:

Los Label nos servirn para poner anuncios o textos simples dentro de
nuestra interfaz, solo basta con arrastrar uno hasta la interfaz, darle click
derecho > Edit Text y ponerle el texto deseado a mostrar.
Los Text Field o Text Box, cajas de texto sern los ms importantes,
puesto que nos servirn para recibir los datos o valores con que nuestra
aplicacin trabajar, har clculos o guardar en una base de datos en caso de
estar trabajando con una.

Y nalmente los Button o botones, nos desencadenaran la accin que

queramos al momento de hacer click sobre alguno de ellos.
OJO: Es importante saber que el TextField de Password no ser una caja de
texto comn y corriente a las dems, puesto que ah se ingresar la contrasea
para el inicio de sesin.

ARCHIVOS
mayo 2016
noviembre 2015

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

 octubre 2015
septiembre 2015
julio 2015
junio 2015
mayo 2015

Es por esto que dentro de la caja de herramienta buscaremos y arrastraremos un

Password Field que ser el que usaremos al momento de ingresar la contrasea
para el inicio de sesin en nuestra aplicacin. Ms adelante veremos por qu no
utilizar TextField o caja de texto comn y corriente para el ingreso de la
contrasea.
Para empezar a programar la funcionalidad del botn o del inicio de sesin,
daremos doble click al botn de nuestra interfaz, al que le dimos el nombre
de Ingresar y nos abrir dentro del cdigo su evento o accin en la cual
ingresaremos el cdigo que nos servir para que en el momento de hacer
click al botn, ste ejecute el cdigo dentro de l y as desencadene o dispare
la accin a realizar.

Procedemos a insertar el cdigo:

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

NOTA: Para entender la funcionalidad del cdigo y leer la explicacin completa
de cada uno, favor revisar los archivos .java del ejercicio, puesto que la explicacin
principal del tutorial es interfaces grcas y por resumir no se explicarn dichos
cdigos aqu, ya estn explicados dentro de los archivos
Ahora ya despus de insertar el respectivo cdigo dentro del botn, ya
tendremos la funcionalidad de ste lista, as cada vez que el usuario ingrese
su ID, contrasea y presione el botn Ingresar dicho cdigo y accin se
ejecutar y validar los datos recin ingresados, en caso de ser correctos le
permitir pasar al men principal o en caso contrario le mostrar un mensaje
indicando que ha ingresado algn dato incorrecto.
Para personalizar nuestra ventana con un fondo, adems de ponerle un
logotipo o icono en la parte superior de la ventana, procedemos a ingresar el
siguiente cdigo en la clase principal de nuestro JFrame Loguin:
Nota: Al momento en que visualizamos nuestra ventana JFrame estamos
parados sobre la opcin Design, para programar cdigo dentro de tal, debemos
seleccionar la opcin Source

En el cdigo anterior, estamos haciendo referencia a la imagen que ser

nuestro fondo y a la que ser nuestro icono superior de la ventana. Esto se
hace indicando la ubicacin, el nombre del paquete o carpeta dentro del
proyecto en donde estn las imgenes y el nombre de la imagen a utilizar. (Es
importante poner los nombres tal cual, puesto que cualquier letra faltante, una
PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API
mayscula o minscula no debida nos generara un error)
Por ende crearamos un nuevo paquete dentro de nuestro proyecto donde
slo almacenaremos las imgenes o iconos a utilizar. Para agregarlas basta
con arrastrarlas desde el Escritorio de nuestro computador o desde donde
las tengamos hasta el paquete dentro de NetBeans.

Luego de haber seguido todos los pasos anteriores ya deberamos tener

nuestra ventana de Inicio de sesin de la siguiente forma al momento de
ejecutar el proyecto;
A excepcin del tipo de letra y color que se escogen a gusto personal por
medio de las propiedades de cada Label, se selecciona el Label > click
derecho > Propiedades y ah cambiaramos los estilos de letra y color.

Ntese el icono en la parte de arriba de la ventana y un pequeo ttulo.

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

Es importante notar que si ingresamos el ID de usuario se visualizarn los
caracteres de forma normal puesto que para l utilizamos un TextField.
Mientras que al momento de ingresar la contrasea, slo se visualizarn
asteriscos en vez de los caracteres verdaderos que componen nuestra
contrasea, esta es la propiedad nica del Password Field, la cual nos ayuda
a proteger nuestra contrasea haciendo que nadie la visualice al momento en
que la digitamos.

En caso de ingresar algn dato incorrecto nos mostrar el siguiente mensaje.

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

Y luego de los tres intentos errneos nos mostrar otro mensaje y nos sacar
de la aplicacin.

Luego de iniciar sesin nos debe mandar a una nueva ventana la cual ser
nuestro men principal, procedemos a crearla.

Para ello creamos un nuevo JFrame form de la misma forma en que creamos
el primero y le agregamos Label y botones, un botn Calculate que nos
llevar a otra nueva ventana y uno Exit que nos sacar de la aplicacin.
Lo nico diferente que tendremos en esta nueva ventana ser un Menu Bar
que nos servir para tener accesos directos y hacer las mismas funciones que
hacen los dos botones.
PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API
Bastar con arrastrarlo desde la caja de herramientas y acomodarlo a gusto
en nuestro JFrame form.

Luego de arrastrarlo procedemos a darle nombre a cada opcin.

Ahora desde la caja de herramientas arrastraremos un Menu Item para

cada una de las dos opciones.

Bastar con seleccionar el Menu Item y arrastrarlo hasta la parte de arriba

del Menu Bar donde dice Calcular y soltarlo.

Y ahora ya tenemos una sub-opcin de nuestro acceso directo Calcular, el

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API
cual despus de programarlo y aadirle una imagen, quedara de la siguiente
forma:

Lo mismo hacemos con el de Salir, agregamos un Menu Item y lo

personalizamos.

Para personalizar cada opcin debemos de seleccionar el Menu Item > click
derecho > Propiedades y desde all seleccionar una imagen deseada que se
encuentre dentro de nuestro proyecto y agregarle un texto. Ejemplo:

Ntese lo anterior donde estn los puntos rojos. Se selecciona un icono, se

agrega un texto a mostrar y en acelerator se pone una tecla de acceso
directo, la cual tambin se visualizar en forma de texto;

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

Con la nica diferencia que si presionamos Ctrl + S nos ejecutar la accin
deseada que programaremos a continuacin dentro del cdigo del JFrame
form.
(Tambin en vez de presionar las teclas de acceso directo podemos hacer
simplemente click y nos ejecutar la misma accin.)

Cada programacin de los botones o accesos directos se hace y trabaja de la

misma forma en que se programaron los botones en el JFrame form del
Loguin. Luego de programar cada botn y acceso directo, adems de
personalizar con imagen de fondo e icono de ventana nuestro JFrame que
ser el men principal, nos quedara de la siguiente forma al ejecutarlo:

Con los accesos directos totalmente funcionales, ya sea por medio de click o
las teclas:
PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API
Ahora crearemos la ventana Calcular a la cual accederemos despus de dar
click al botn Calculate desde el anterior men principal.

Creamos un nuevo JFrame form y le agregamos los Label, Botones, Cajas de

texto y dems cosas como lo explicamos al inicio del tutorial.

Agregaremos tres TextField, dos que nos servirn para ingresar dos
nmeros y otro que ser para mostrar el resultado de la operacin.
Tambin dispondremos de cuatro botones para realizar los clculos, Sumar,
Restar, Multiplicar y Dividir, adems de uno para limpiar los campos y otro
para regresar al men principal.
Procedemos a programar:

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

En el Mtodo principal de la Clase de nuestro JFrame form aplicamos el
cdigo para personalizar la ventana con imagen de fondo e icono de ventana
como anteriormente lo hemos hecho en las ventanas anteriores.
Programamos el evento click o accin del botn suma con el siguiente
cdigo:

Los dems botones, Restar, Multiplicar y Dividir se programan de la misma

forma con el mismo cdigo, la nica diferencia es que cambian los signos en la
variable Reslt donde se realiza la operacin; +, , *, /

Acciones a ejecutar cuando se de click a los botones Limpiar o Regresar:

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

 Ventana Calculadora ya ejecutada y aplicando la accin o evento del botn
SUMAR:

Nota: Hay que tener en cuenta que dentro del cdigo para trabajar con todos los
objetos de JFrame form es necesario aadir las libreras correspondientes:

Y eso es todo tendremos lista una sencilla pero bonita interfaz grca. Si
quieres descargar los archivos fuente haz click aqu.
(Este tutorial ha sido hecho con la colaboracin del estudiante Diego Ramirez
Montes del curso de programacin orientada a objetos).

Java Netbeans. Programacin orientada a objetos.

Solucin al problema de las torres de Hanoi usando PDDL

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API
 Herencia y Polimorfismo

LEAVE A COMMENT
Tu direccin de correo electrnico no ser publicada. Los campos
obligatorios estn marcados con *
Comment

Name *

Email *

Website

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API

 Post Comment

LOCATION AROUND THE WEB

Av Providencia 229, Providencia,

Region Metropolitana, Santiago
de Chile

Copyright 2015 - Sebastian Gomez. Powered by ThemeArt and WordPress.

PDF created on http://www.htm2pdf.co.uk via the HTML to PDF API