DISEÑO DE INTERFACES UTILIZANDO

HERRAMIENTA GOMOCKINGBIRD

MANUAL DE LABORATORIO Nº 9 - Diseño de Interfaces

Actividad de Proyecto: Determinar la estructura lógica del sistema.

 Diseño de interfaces utilizando
herramienta gomockingbird

Ingresar al siguiente sitio de internet: https://gomockingbird.com/

Al iniciar aparece la siguiente información:

Damos clic en el botón:

2
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

Interfaz de gomockingbird.

3
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

Vamos a conocer la interfaz que vamos a crear con la presente herramienta:

4
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

Pasos para crear la interfaz

1. Ubicarnos en el menú file y dar clic en la opción new para crear nuestra
nueva interfaz.

2. Al dar clic en esa opción nuestra área de trabajo ya esta vacía y lista
para iniciar.

3. Agregamos un rectángulo grande donde se van agregar todos los demás

controles de la interfaz. Buscamos el objeto Rectangle al lado izquierdo
en el bloque widgets, damos un clic sostenido en el objeto, lo llevamos al
área de trabajo y lo soltamos.

5
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

Al agregarlo lo ampliamos al tamaño deseado, de acuerdo a las necesidades.

4. Vamos agregar a la interfaz el titulo REGISTRAR PACIENTE. Para ello

buscamos el objeto llamado text, clic sostenido y lo soltamos en la parte
superior interna del Rectángulo.

Al agregar el objeto text, podemos cambiar directamente el texto deseado

por el texto inicial Some Text.

Al cambiar el texto la interfaz va quedando así:

6
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

Podemos cambiar el tamaño y color del texto como lo indica la siguiente

gráfica. Las opciones las tenemos en la barra de herramientas.

Vamos a cambiar el tamaño a 22 en Font size y cambiar el color de texto

como lo muestra la siguiente imagen:

7
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

5. Ahora vamos agregar el texto Identificación y su caja de texto respectiva.

Agregamos el objeto texto y lo cambiamos por Identificación.

6. Después agregamos el objeto Text Input Box con clic sostenido y lo

soltamos en el área de trabajo al frente del objeto de texto identificación.
Eliminamos la palabra Some text. Al agregar la interfaz debe quedar así:

Podemos modificar el tamaño del Text Input Box, de acuerdo las

necesidades.

8
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

7. De la misma forma lo hacemos para los elementos nombres, apellidos,

dirección, teléfono y correo. Al realizar la interfaz debe ir quedando así:

8. Vamos agregar ahora el objeto Text y cambiamos el texto por estrato.

9. Después agregamos el objeto DropDown al frente el objeto de texto

llamado estrato.

Al agregar el elemento aparece así:

9
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

La interfaz va quedando así:

10. De la misma forma hacemos para los elementos tipo de sangre y

genero. Al finalizar la interfaz debe quedar así:

10
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

11. Para continuar agregamos un objeto Text y colocamos el texto Nombre

Acudiente. Agregamos su respectiva caja de texto.

Al agregar los anteriores elementos la interfaz va quedando así:

12. Ahora agregamos a la interfaz dos Botones y a uno de ellos le colocamos

la palabra REGISTRAR y al otro CANCELAR. Para ello buscamos el objeto
llamado Button.

11
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

Al agregarlos la interfaz queda así:

13. Vamos agregar una línea horizontal debajo de la línea superior del
rectángulo. Para ello utilizamos el objeto llamado Horizontal Line.

Ahora seleccionamos y la línea y todo el rectángulo lo agrupamos dando

clic en el botón de la barra de herramientas que se llama Group.

12
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

Ahora agregamos un texto en la parte superior en medio del borde externo

del rectángulo y la línea que acabamos de agregar. Cambiamos el texto
por: Centro odontológico: Registrar Paciente. Al finalizar la interfaz debe
quedar así:

14. Para terminar procedemos a guardarlo. Dar clic en menú File y después
en Save as. Aparece la siguiente ventana:

Ingresamos un nombre a nuestra interfaz. Como ejemplo vamos a colocar

registrarPaciente.

También puede exportarlo a formato PDF o PNG. Para ello dar clic en
menú File y después por Export seleccionar PDF o PNG.

13
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je
 Diseño de interfaces utilizando
herramienta gomockingbird

14
F AVA - F or ma c ión e n Ambie nt e s Vir t ua le s de Apr e ndiz a je S E NA - S e r v ic io Na c iona l de Apr e ndiz a je