Construyendo la interfase

Bueno, ya tenemos abierto Gambas, es el momento de comenzar a construir la Interfaz gráfica de usuario (GUI).

Sabemos que nuestro juego tiene dos posibilidades: jugar contra el pc o competir con alguien. Por tanto precisamos al menos dos botones, uno para cargar cada tipo de juego. Y un tercer botón para salir del juego.(Este último no es 100% necesario, ya que podemos cerrar el juego desde la “x”  en la esquina de la ventana, pero nos permite salir, si lo deseamos , de manera controlada.Ya veremos esto más adelante)

Ya vimos también como colocar los controles en el formulario, arrastrándolos y dibujándolos con el ratón.

Ya tenemos nuestros tres botones. Vamos ahora a mejorar su aspecto cambiando algunas propiedades .

Text: Escriba ahí el texto a mostrar

Luego pulsando sobre el boton con tres puntitos a la derecha de la propiedad picture elegimos un icono para adornar el botón

Seleccionándolo y pulsando ok tras hacerlo.

Hacemos lo mismo para los tres botones poniendo como texto  al segundo competancia y al tercero salir, y le elegimos unos iconos acordes.

Por defecto los controles se llaman por su tipo más un numero de orden (Button1,Button2 y así sucesivamente).

Este sistema es poco práctico y dificulta la codificación. Debe ponersele un nombre adecuado a la función que cumplen maś un prefijo que denote el tipo de control.

En este caso lo llamaremos btncontra,btncompetir y btn salir.

Btn es el prefijo que yo uso para los botones, pero no hay reglas, es simplemente una convención. Hay quienes le llamarían botoncontra o más simple aún bcont. Lo importante es que su nombre nos refiera a él con claridad. Este item lo cambiaremos desde la propiedad name en la ventana de propiedades.

Si ahora presionamos la tecla f5 se ejecuta el programa, mostrando la ventana que acabamos de construir. Por supuesto que al pulsar los botones nada sucede, ya que aún no hemos codificado las acciones que deben realizar al clickear sobre ellos.

Como verán el formulario principal tiene un título, colocado desde la propiedad texto, y un icono, que  viene de la propiedad icon, ya que la propiedad picture en el caso de los formularios establece la imagen de fondo.

Anuncios
Esta entrada fue publicada en programación y etiquetada . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s