Formularios y Cajas de Herramientas (1)

Para hacer un programa gráfico, usaremos (ademas de clases y/o módulos) también formularios. En el Ide de gambas, para crear una aplicación gráfica, siguirémos los pasos del ejemplo hola mundo usando un formulario.

Siguiendo los pasos del ejemplo, llegariamos a esta pantalla:

fig 1: detalle del editor de gambas3

En el punto (4) de la figura 1, podemos ver el formulario, que podemos cambiar de tamaño, pulsando en los cuadros blancos que aparecen al borde.

Las dimensiones del formulario también se pueden cambiar mediante código, haz doble click en el formulario (cambiaremos de la pestaña "FMain.form" a "Fmain.class", y aparecera esta pantalla, donde podemos escribir el siguiente código:

"Me" se refiere el objeto actual (que es nuestro formulario Fmain), y las propiedades width y height (ancho y largo), le podemos dar valores para que cuando se ejecute, el formulario cuando se abra tenga las dimensiones expecificadas. Para ejecutarlo se pulsa sobre el botón  indicado.

Ademas de las dos formas explicadas, hay una tercera, que es usando el panel de propiedades (punto 1 de la figura 1), donde podemos buscar la propiedad y cambiar su valor:

Como vemos el Ide de gambas, nos da la ayuda de la propiedad que estemos editando. (punto 2 de la figura 1)

Nota:
La pestaña  "jerarquía" nos sirve cuando añadamos varios objetos en un formulario, se puedan  ordenar para cuando pulsemos la tecla "Tab", "salten" de uno a otro según nuestros criterio.


Pasamos a explicar el cuadro de herramientas: (punto 3 de la figura 1).
Aqui tenemos varias pestañas, con distintos botones:

Controles: Label, listbox, picturebox, progresbar, combobox, texbox, etc...

Controles:  listView, treeView, ColumView, DirView,FileView,GridView,TableView,IconView

Diversos cuadros de dialogos estander: colores, calendario, ficheros, carpetas, tipos de letra

DrawArea (para dibujar) y distintos contenedores para organizar los controles

Controles especiales: timer, printer embedder, TryIcon

El contenido de estas pestañas puede aumentar si tenemos mas componentes añadidos al  proyecto (menu Proyecto/Propiedades/Componentes)


Para añadir un control a nuestro formulario, simplemente tenemos que "cogerlo" y "arrastrarlo"

Para terminar, con esta introducción a los formularios, comentarios que se pueden añadir tantos formularios como necesitemos (incluso podemos reutilizar formularios de otros proyectos), todo ello desde la ventana del Proyecto (tecla F10) donde haciendo click en "Fuente", y Formulario podemos añadir nuevos formularios o existentes

 Para añadir nuevo formulario, elegimos la pestaña "Nuevo" y si es para añadir uno existente la pestaña "Existente"

Pestaña Nueva (crear formulario vacio) y Existente (añadir formulario ya creado)

"HOLA MUNDO" visual (usando un formulario)

Es este post, os explico como realizar una aplicación visual o gráfica con Gambas.

Seguimos los pasos siguientes:
1)  Ejecutamos el ide de gambas3

$gambas3

2) Elegimos en el menu "Nueva Aplicación"

3) A continuación elegimos el  tipo de proyecto

(1) Tipo: Para elegir que la aplicación será gráfica.
(2) Opciones: Elegimos internalización, para que podamos traducir nuestra aplicación a otros idiosmas
(3) Pulsamos el botón siguiente.

4) Elegimos el directorio donde se creará la aplicación:

5) A continuación escribimos el nombre del directorio del proyecto y el titulo de la nueva aplicación.

Por ejemplo, pongamos en (1) y (2) "PruebaGrafica"

6) Ahora se inicia el Ide de programación, apareciendo  la ventana de "Consejo del Día"

Podemos ver varios consejos pulsando los botones de "siguiente" y "previo".
 Pulsad "Cerrar"


7) Bien, ahora estamos en el ide de gambas...en el Área de trabajo:

En la parte izquierda, esta el arbol de nuestro proyecto, donde iremos añadiendo los archivos a nuestra aplicación (formularios, clases, módulos, imagenes, etc..)

Hay uno ya creado, "Fmain", haced doble click en él...

Ahora vamos a añadir un botón a nuestro formulario. En controles pulsamos sobre el icono "Button", y arrastramos al formulario.y soltamos.

Una vez puesto el botón, hacemos doble click en él, nos sale la pantalla del código:
También podemos pulsar  el botón: 

 

Aqui escribiremos el código de nuestra aplicación:

Vamos a hacer que se muestre un mensaje cuando se pulse el botón, para ello escribimos:

Public Sub Button1_Click()

  Message.Info(("Hola este es mi primer programa"))End

Y ahora pulsamos el botón de ejecutar:

Aparecerá nuestro formulario

 , y pulsando sobre el botón

¡¡ Objetivo conseguido!!, nuestra primera aplicación visual en Gambas.

Descarga el código del programa: Enlace


Nota:
Como veis en el menú inicial,  nos dá 3 opciones de crear la aplicación gráfica.

- La 1º es la más genérica (según lo que tengamos instalado en nuestro ordenador, el interprete de Gambas3 usará Qt o Gtk)
- La 2º usa la librería gráfica Qt.
- La 3º usa la librería gráfica GTK+

A efectos prácticos a la hora de programar en Gambas esto no nos incluye y un programa se hace igual, ya que la mayoría de los controles gráficos que se usan normalmente están presentes en los 3 modos.

Personalmente yo siempre uso la opción de "Aplicación gráfica QT", ya que nunca he tenido problemas para ejecutar la aplicaciones, sin embargo con GTK si he tenido problemas, que se solucionaban cambiando a QT.