Tutorial: Trabajar con Formularios

La mayoria de las aplicaciones del mundo real necesitan mas de una ventana. En este tutorial construira un proyecto con multiples formularios que incluye un formulario principal y un dialogo de configuracion. Aprendera a abrir formularios de forma modal, pasar datos entre ellos y configurar propiedades comunes de formularios.

Paso 1: Configurar el Proyecto

1. Cree un nuevo proyecto llamado MultiFormDemo mediante Archivo → Nuevo Proyecto.
2. El IDE crea main.prg con un formulario inicial.
3. Anadiremos un segundo archivo fuente para el formulario de configuracion en el siguiente paso.

Paso 2: Disenar el Formulario Principal

1. Abra main.prg en el Disenador de Formularios.
2. Establezca el titulo del formulario a "Demo Multi-Formulario" y tamano a 700, 500.
3. Anada una Etiqueta en la parte superior para mostrar el nombre de usuario actual — establezca cValue a "Usuario: (ninguno)".
4. Anada un Boton con cPrompt establecido a "Abrir Configuracion".

Su formulario principal se vera asi:

#include "hbbuilder.ch"

function Main()

   local oForm, oLblUser, oBtnSettings

   DEFINE FORM oForm TITLE "Demo Multi-Formulario" ;
      SIZE 700, 500 FONT "Segoe UI", 10

   @ 30, 50 LABEL oLblUser VALUE "Usuario: (ninguno)" ;
      OF oForm SIZE 300, 24

   @ 80, 50 BUTTON oBtnSettings PROMPT "Abrir Configuracion" ;
      OF oForm SIZE 140, 36 ;
      ACTION OpenSettings( oForm, oLblUser )

   ACTIVATE FORM oForm CENTERED

return nil

Paso 3: Crear el Formulario de Configuracion

1. Seleccione Archivo → Nuevo Formulario para anadir un segundo formulario al proyecto. Nombrelolo settings.prg.
2. En el Disenador de Formularios para settings.prg, establezca el titulo a "Configuracion" y tamano a 400, 300.
3. Anada una Etiqueta con cValue "Su nombre:" en fila 30, columna 30.
4. Anada un Cuadro de Texto (TGet) junto a la etiqueta para que el usuario escriba su nombre.
5. Anada una Casilla de Verificacion debajo con cPrompt "Activar modo oscuro".
6. Anada dos botones: "Aceptar" y "Cancelar" en la parte inferior.

Paso 4: Implementar ShowModal y Paso de Datos

La tecnica clave es llamar a ShowModal() en el formulario de configuracion. Esto bloquea el formulario principal hasta que el usuario cierra el dialogo. Despues de que el dialogo modal se cierra, lee los valores que el usuario ingreso.

static function OpenSettings( oMainForm, oLblUser )

   local oSettings, oGetName, oChkDark, oBtnOK, oBtnCancel
   local cName := "", lDark := .F., nResult

   DEFINE FORM oSettings TITLE "Configuracion" ;
      SIZE 400, 300 FONT "Segoe UI", 10 ;
      STYLE "dialog"

   @ 30, 30 LABEL oLbl VALUE "Su nombre:" ;
      OF oSettings SIZE 100, 24

   @ 30, 140 GET oGetName VAR cName ;
      OF oSettings SIZE 220, 24

   @ 70, 30 CHECKBOX oChkDark VAR lDark ;
      PROMPT "Activar modo oscuro" ;
      OF oSettings SIZE 200, 24

   @ 220, 180 BUTTON oBtnOK PROMPT "Aceptar" ;
      OF oSettings SIZE 90, 32 ;
      ACTION ( oSettings:nModalResult := 1, oSettings:Close() )

   @ 220, 280 BUTTON oBtnCancel PROMPT "Cancelar" ;
      OF oSettings SIZE 90, 32 ;
      ACTION ( oSettings:nModalResult := 0, oSettings:Close() )

   nResult := oSettings:ShowModal( oMainForm )

   if nResult == 1
      oLblUser:SetValue( "Usuario: " + cName )
      if lDark
         oMainForm:SetDarkMode( .T. )
      else
         oMainForm:SetDarkMode( .F. )
      endif
   endif

return nil

Paso 5: Referencia de Propiedades del Formulario

Aqui estan las propiedades de formulario mas usadas que puede establecer en el Inspector de Objetos o en codigo:

Paso 6: Compilar y Probar

1. Presione F9 para compilar y ejecutar.
2. Haga clic en "Abrir Configuracion" en el formulario principal — aparece el dialogo de configuracion de forma modal.
3. Escriba un nombre, alterne la casilla y haga clic en Aceptar.
4. La etiqueta del formulario principal se actualiza para mostrar el nombre que ingreso.
5. Abra el dialogo nuevamente y haga clic en Cancelar — el formulario principal permanece sin cambios.

Flujo del Ciclo de Vida del Formulario