Practica Menú

Suarez Reyes Salvador

Domínguez Gorostieta Leonardo
Hernandez Barrientos Jesus E.
Garcia Moran Eduardo
Mendoza Acevedo Yarid A.
Gonzalez Reyes Juan D.

Clase: 7M1
Programación Avanzada
 1. Índice
1. Índice............................................................................................................................................................. 1
2. Introducción: .......................................................................................................................................... 2
3. Programas utilizados....................................................................................................................... 3
4. Librerías Utilizadas............................................................................................................................. 3
5. Descripción de librerías ................................................................................................................. 3
6. Elaboración .............................................................................................................................................4
6.1.-Menú desplegable........................................................................................................................ 11
7. Elaboración de interfaz. ............................................................................................................... 16
8. Ventajas de NetBeans. ................................................................................................................. 18
9. Desventajas de NetBeans.......................................................................................................... 18
9.1.-Solución de error de capa:..................................................................................................... 18
10. Imágenes sin fondo. ................................................................................................................. 20
10.1.- Identificar imágenes con y sin fondo ....................................................................... 20
11. Conclusión. ........................................................................................................................................... 22
 2. Introducción:

El presente proyecto mostrara la simulación a un menú, utilizando el

programa NetBeans para programar y usar de forma mas grafica las
interfaces, poniendo en practica lo aprendido en clase, además de tener la
iniciativa para investigar y hacer mas autodidacta y tenga mejor
presentación visual nuestro proyecto. El proyecto lleva por nombre
GorosMovie el cual simula un software de películas con diferentes
categorías o las categorías más visitadas de internet.
 3. Programas utilizados

IMAGEN 1.0 NETBEANS

IDE de NetBeans es una interfaz de desarrollo integrado de código abierto

y gratuito para el desarrollo de aplicaciones en los sistemas operativos
Windows, Mac, Linux y Solaris.

4. Librerías Utilizadas

IMAGEN 1.1 LIBRERÍAS

5. Descripción de librerías
Se utilizaron nuevas librerías que obtuvimos con ayuda de blogs, esto que
nos agregaba era tanto nuevos Label, Label transparentes, nuevas barras
de password y de username, lo cual ayudo que nuestro proyecto quedara
con una mejor presentación al igual que nos agradó más estos nuevos
ítems.
IMAGEN 1.3 LIBRERÍAS UTILIZADAS.

6. Elaboración

Para la elaboración de este proyecto se necesitaron varias librerías,

consultar varios videos, de igual manera varias páginas en las cuales nos
fuimos orientando.
Al igual que íbamos unificando todo lo aprendido para que nuestro
proyecto fuera tomando la forma ideal o la que mejor nos pareciera a
nosotros.
1. Como primer paso abrimos nuestro programa NetBeans y
crearemos un nuevo proyecto.

IMAGEN 1.4 APERTURA DE PROGRAMA.

IMAGEN 1.5 SELECCIÓN DE APLICACIÓN

2. Quitaremos la opción de Create Main Class y clic en finish

IMAGEN 1.6 ASIGNACIÓN DE PROYECTO SIN MAIN CLASS.

 3. En el nombre damos clic derecho, new y JFrame eso nos creara un
nuevo formulario el cual es el JFrame en este abrirá nuestro espacio
de trabajo en el cual agregaremos imágenes, Label, el nombre de
usuario y contraseña.

IMAGEN 1.7 CREACIÓN DE FORMULARIO

IMAGEN 1.8 ASIGNACIÓN DE NOMBRE A FORMULARIO.

IMAGEN 1.9 FORMULARIO CREADO

4. En este espacio de trabajo agregaremos todas nuestras imágenes,

en donde escribirán el nombre de usuario, contraseña y la iremos
agrupando según nuestro gusto para nuestra interfaz. Con ayuda de
nuestro panel de herramientas.

IMAGEN 1.10 POSICIONAMIENTO DE ELEMENTOS DENTRO DEL ÁREA DE TRABAJO.

5. Comenzaremos a programar el nombre de usuario, contraseña, esto

con ayuda de dos variables Sting, una la cual es el nombre de usuario
y la segunda la cual es el password. Si nuestro pass y username son
correctos entonces tenemos que enlazar con nuestro siguiente
JFrame, para esto debemos crear un nuevo JFrame como en el paso
número 3.
IMAGEN 1.11 PROGRAMACIÓN BOTÓN LOGIN.

6. Si no es igual a nuestras variables entonces nos lanzara un error esto

con ayuda del JOptionPane.

IMAGEN 1.12 MENSAJE DE ERROR.

7. Pasaremos a diseñar nuestro siguiente Frame, este Frame. En mi

caso este frame es para saber que usuario es, aunque todos en lanzan
a la misma ventana, podemos crear un frame para cada usuario y
editarlo según su nombre.
IMAGEN 1.13 MENÚ DE USUARIOS.

8. Se creo un icono para “cada usuario” el cual programamos dando clic

derecho, evento, mouse y mouse clicked.

IMAGEN 1.14 EVENTO CREADO PARA VINCULAR FORMULARIOS.

 9. El código que agregaremos será el siguiente

IMAGEN 1.15 CÓDIGO PARA PASAR AL SIGUIENTE FORMULARIO.

10. En un nuevo JFrame diseñaremos nuestra cartelera, junto con el

menú en el caso del menú se hizo uno desplegable. De igual manera
se editó con Photoshop las imágenes para que quedaran a nuestros
gustos y parámetros.

IMAGEN 1.16 CREANDO INTERFAZ.

Para colocar las imágenes de las series o películas que hay disponible
pusimos como objeto un Label, y en este paso se le dio un absolute layout
la cual nos dejara posicionar cada imagen a nuestro gusto ya que
tendremos un lienzo libre de colocar cada imagen.

IMAGEN 1.16.1

6.1.-Menú desplegable
11. Para el menú se utilizó una librería que obtuvimos de Google, esta
librería nos ayuda a desplazar objetos o labels que nosotros creemos,
sin embargo, creamos un botón para simular el cierre y apertura de
este menú.
IMAGEN 1.17 MENÚ DE CATEGORÍAS.

12. En este caso nuestro circulo rojo, que se encuentra en la parte

superior derecha es el que hará el cierre de nuestro menú.
Agregaremos el siguiente código para que este cierre.

IMAGEN 1.18 CÓDIGO DE DESPLAZAMIENTO.

13. La librería que ocupamos para que funcione nuestro código es

IMAGEN 1.19 LIBRERÍA DE DESPLAZAMIENTO.

IMAGEN 1.20 ASIGNACIÓN DE VARIABLES.

14. Para la apertura del menú se utilizó el siguiente código, este fue en
un nuevo icono, como ya utilizamos la librería no debería generar
ningún error
IMAGEN 1.21 CÓDIGO DE DESPLAZAMIENTO OPUESTO.

15. Repetiremos este paso consecutivamente para todos nuestros

JFrame, podemos copiar y pegar el mismo material para todos
nuestros frame solo modificando las letras dependiendo en la
categoría que estemos editando.

1.22 MENÚ DE TERROR.

1.23 MENÚ DE SERIES ANIMADAS

1.24 MENÚ PELÍCULAS MARVEL.

 16. A la hora de copiar todo el menú en nuestros nuevos frame, se
copiarán con todo y código de eventos, por ejemplo, el botón de
cerrar menú se copiará tal cual y no se necesitará volver a poner la
línea de código del paso 12.

IMAGEN 1.25 EJEMPLO DE MENÚ COPIADO.

 7. Elaboración de interfaz.
Para la elaboración de la interfaz, utilizamos el programa Photoshop.

IMAGEN 1.26 VENTANA DE APERTURA PHOTOSHOP.

Se tomaron las medidas necesarias para que quedaran a la medida ya que

si lo tratábamos de modificar desde el programa NetBeans este las
recortaba, fuimos tomando medidas en milímetros ya que es la forma en la
que trabaja el programa para la elaboración de cada formulario.
IMAGEN 1.27 INTERFAZ DE PHOTOSHOP.

IMAGEN 1.28 INTERFAZ DE LOGIN.

 8. Ventajas de NetBeans.
La ventaja viene cuando agregas los botones, oh los detectores de texto, de
igual manera los passwords, el detalle es a la hora de programarlos, pero
facilita bastante ya que se encontrarán de forma mas fácil, al igual que al
hacer una acción con clics podremos programar la acción que realizara.

IMAGEN 1.29 CREACIÓN DE EVENTO PARA CADA BOTÓN.

Basta con hacer clic derecho en el botón que queremos realizar la acción,
después buscamos events, mouse y seleccionaremos mouseClicked.

9. Desventajas de NetBeans.
Una de las desventajas que encontré es:
A la hora de acomodar todos los elementos necesitamos tener una capa
libre de movimiento ya que si no la tenemos el programa acomodara todo
de forma automática, para quitarnos este problema debemos seguir los
siguientes pasos

9.1.-Solución de error de capa:

1. Clic derecho en una parte en gris, este cuando pasemos el mouse se
vera la parte gris, una vez que demos clic derecho se pondrá de color
verde
 IMAGEN 1.30 CLIC DERECHO

2. Posterior a ello pondremos el mouse en set Layout.

IMAGEN 1.31 SET LAYOUT.

3. Para finalizar daremos clic en absolute Layout.

IMAGEN 1.32 ABSOLUTE LAYOUT.

De esta forma solucionaremos el hecho de que nuestros componentes se

muevan de forma automática y podremos sobreponer uno sobre otro. El
programa no le asignara el espacio automáticamente, tendremos control
total sobre el lienzo de trabajo.
 10. Imágenes sin fondo.
Para colocar imágenes sin fondo necesitamos buscar imágenes en formato
PNG, sin embargo, no todas las imágenes en png no tienen fondo, algunas
cuentan con fondo, si esta tiene fondo hay varias opciones para poder
quitarlas, en mi caso la más fácil era con Photoshop, pero en el buscador
podemos encontrar varias opciones para este método.

IMAGEN 1.33 BÚSQUEDA DE VECTORES SIN FONDO.

10.1.- Identificar imágenes con y sin fondo

Para poder identificar este tipo de imágenes nos daremos cuenta a la hora
de darle clic en una imagen en Google, estas suelen ser en blanco en las
miniaturas, pero a la hora de dar clic esta será con un fondo cuadriculado
como en el siguiente ejemplo.
 Dando
clic se
Imagen
pierde el
fondo
blanco

IMAGEN 1.34 DIFERENCIA ENTRE VECTORES

Podemos encontrar el otro caso que en la miniatura se ve cuadriculada y

cuando das clic se ve de igual forma cuadriculada. Este su fondo es
cuadriculado. En este caso si se debe quitar el fondo.

IMAGEN 1.35 VECTOR CON FONDO CUADRICULADO.

 11. Conclusión.
El proyecto es bastante sencillo si tenemos la iniciativa de investigar mas
por nuestra cuenta, teniendo en cuenta que podemos utilizar nuevas
librerías, nuevos ítems y más. De esa forma se puede facilitar, en la web hay
muchos videos y blogs que pueden orientarnos a poder realizar nuestro
proyecto de forma rápida, sencilla y visualmente atractiva.