Disenador Visual de Formularios
El Disenador de Formularios es un editor de formularios WYSIWYG (What You See Is What You Get) inspirado en Borland C++Builder. Disena formularios visualmente, coloca controles desde la paleta de componentes, configura propiedades en el Inspector de Objetos y observa como el codigo se genera automaticamente.
Los cambios en el disenador actualizan instantaneamente el codigo, y los cambios en el codigo actualizan instantaneamente el disenador. Tus implementaciones de METHOD siempre se preservan durante la regeneracion de codigo.
Caracteristicas del Disenador
- Fondo de cuadricula de puntos con ajuste a cuadricula para alineacion precisa
- Asas de seleccion — 8 asas por control seleccionado para redimensionar
- Seleccion elastica — haz clic y arrastra para seleccionar multiples controles
- Arrastrar y soltar desde la paleta de componentes a la superficie del formulario
- Generacion de codigo en tiempo real — cada accion actualiza el codigo fuente
- Copiar/Pegar controles — Cmd/Ctrl+C/V con desplazamiento automatico de +16px
- Menu Formato — alinear y distribuir controles
Seleccion de Controles
Seleccion individual
Haz clic en cualquier control del formulario para seleccionarlo. Aparece un borde azul con 8 asas de redimension:
- Asas de esquina — redimensionan ancho y alto simultaneamente
- Asas de borde — redimensionan solo ancho o solo alto
- Arrastrar cuerpo — mueve el control sin redimensionar
Seleccion multiple
Mantien Shift y haz clic para agregar/eliminar controles de la seleccion, o haz clic y arrastra para crear un rectangulo de seleccion elastica. Todos los controles seleccionados muestran asas simultaneamente.
Copiar y Pegar Controles
HarbourBuilder soporta operaciones completas de portapapeles para controles:
| Atajo | Accion |
|---|---|
| Ctrl+C / Cmd+C | Copiar controles seleccionados al portapapeles |
| Ctrl+V / Cmd+V | Pegar controles con desplazamiento de +16px |
| Ctrl+X / Cmd+X | Cortar controles seleccionados (copiar + eliminar) |
| Delete | Eliminar controles seleccionados |
Al pegar, los controles se desplazan automaticamente 16 pixeles para evitar superposicion con el original.
Menu Formato
El menu Formato proporciona 8 modos de alineacion y distribucion:
| Comando | Descripcion |
|---|---|
| Alinear a la izquierda | Alinea todos los controles seleccionados al borde izquierdo del control mas a la izquierda |
| Alinear a la derecha | Alinea al borde derecho del control mas a la derecha |
| Alinear arriba | Alinea al borde superior del control mas arriba |
| Alinear abajo | Alinea al borde inferior del control mas abajo |
| Centrar horizontalmente | Centra todos los controles en el eje horizontal |
| Centrar verticalmente | Centra todos los controles en el eje vertical |
| Distribuir espaciado horizontal | Distribuye controles con espaciado horizontal igual |
| Distribuir espaciado vertical | Distribuye controles con espaciado vertical igual |
Generacion de Codigo en Tiempo Real
Cada accion en el disenador genera codigo xBase correspondiente. Por ejemplo, colocar un boton genera:
@ 120, 140 BUTTON oBtn PROMPT "Button1" ; OF oForm SIZE 120, 32
Cambiar propiedades en el Inspector de Objetos actualiza el codigo inmediatamente. La sincronizacion bidireccional asegura que tu diseno visual y tu codigo esten siempre en armonia.
Modo Diseno vs Modo Ejecucion
Los formularios tienen una propiedad FDesignMode que controla el comportamiento:
| Modo | Comportamiento |
|---|---|
| Modo Diseno (FDesignMode = .T.) | Los controles se pueden seleccionar, mover, redimensionar. Se muestra la cuadricula. Generacion de codigo activa. |
| Modo Ejecucion (FDesignMode = .F.) | El formulario se ejecuta normalmente. Los controles responden a la interaccion del usuario. Sin generacion de codigo. |
Propiedades del Formulario en el Disenador
| Propiedad | Tipo | Descripcion |
|---|---|---|
nWidth, nHeight | Numerico | Dimensiones del formulario en pixeles |
nLeft, nTop | Numerico | Posicion en pantalla |
cTitle | Cadena | Texto de la barra de titulo de la ventana |
nBorderStyle | Numerico | 0=bsSizeable, 1=bsSingle, 2=bsNone, 3=bsToolWindow |
nPosition | Numerico | 0=poDesigned, 1=poCenter, 2=poCenterScreen |
nWindowState | Numerico | 0=wsNormal, 1=wsMinimized, 2=wsMaximized |
nFormStyle | Numerico | 0=fsNormal, 1=fsStayOnTop |
lSizable | Logico | Permitir al usuario redimensionar la ventana |
lCenter | Logico | Centrar formulario en pantalla al mostrar |
Ejemplos de Codigo
Sintaxis Simple DEFINE FORM
#include "hbbuilder.ch" function Main() local oForm DEFINE FORM oForm TITLE "Hola Mundo" ; SIZE 400, 300 FONT "Segoe UI", 10 ACTIVATE FORM oForm CENTERED return nil
Enfoque Basado en Clases (Generado por el IDE)
CLASS TForm1 FROM TForm METHOD CreateForm() ENDCLASS METHOD CreateForm() CLASS TForm1 ::cTitle := "Formulario1" ::nLeft := 100 ::nTop := 170 ::nWidth := 400 ::nHeight := 300 return nil
Puedes usar cualquiera de los dos enfoques. La sintaxis DEFINE FORM es mas simple para aplicaciones pequenas, mientras que el enfoque basado en clases es mejor para aplicaciones complejas con multiples formularios.
Consejos para un Diseno Eficiente de Formularios
- Usa el Inspector de Objetos — Configura propiedades visualmente en lugar de escribir codigo
- Doble clic en controles — Genera automaticamente manejadores de eventos (p. ej., OnClick para botones)
- Seleccion multiple para alineacion — Selecciona multiples controles y luego usa el menu Formato para alinear
- Copiar/Pegar para controles similares — Disena un boton, pega y modifica para los demas
- Usa ajuste a cuadricula — Mantiene los controles alineados sin posicionamiento manual
- Revisa las herramientas bidireccionales — Alterna entre vista de disenador y codigo para ver actualizaciones en tiempo real
- Guarda frecuentemente — Ctrl+S guarda tanto los datos de diseno como el codigo