Visual Form Designer

The Form Designer is a WYSIWYG (What You See Is What You Get) form editor inspired by Borland C++Builder. Design forms visually, drop controls from the component palette, set properties in the Object Inspector, and watch the code generate automatically.

Designer Features

• Dot grid background with snap-to-grid for precise alignment
• Selection handles — 8 handles per selected control for resizing
• Rubber band selection — click and drag to select multiple controls
• Drag & drop from component palette onto form surface
• Real-time code generation — every action updates source code
• Copy/Paste controls — Cmd/Ctrl+C/V with automatic +16px offset
• Format menu — align and distribute controls

Control Selection

Single Selection

Click any control on the form to select it. A blue border with 8 resize handles appears:

• Corner handles — resize both width and height simultaneously
• Edge handles — resize width or height only
• Drag body — move the control without resizing

Multi-Selection

Hold Shift and click to add/remove controls from selection, or click and drag to create a rubber band selection rectangle. All selected controls show handles simultaneously.

Copy and Paste Controls

HarbourBuilder supports full clipboard operations for controls:

Shortcut	Action
Ctrl+C / Cmd+C	Copy selected controls to clipboard
Ctrl+V / Cmd+V	Paste controls with +16px offset
Ctrl+X / Cmd+X	Cut selected controls (copy + delete)
Delete	Delete selected controls

When pasting, controls are automatically offset by 16 pixels to avoid overlap with the original.

Format Menu

The Format menu provides 8 alignment and distribution modes:

Command	Description
Align Left	Align all selected controls to the leftmost control's left edge
Align Right	Align to the rightmost control's right edge
Align Top	Align to the topmost control's top edge
Align Bottom	Align to the bottommost control's bottom edge
Center Horizontally	Center all controls on the horizontal axis
Center Vertically	Center all controls on the vertical axis
Space Evenly Horizontal	Distribute controls evenly with equal horizontal spacing
Space Evenly Vertical	Distribute controls evenly with equal vertical spacing

Real-Time Code Generation

Every action in the designer generates corresponding xBase code. For example, dropping a button generates:

@ 120, 140 BUTTON oBtn PROMPT "Button1" ;
   OF oForm SIZE 120, 32

Changing properties in the Object Inspector updates the code immediately. The two-way sync ensures your visual design and code are always in harmony.

Design Mode vs Run Mode

Forms have an FDesignMode property that controls behavior:

Mode	Behavior
Design Mode (FDesignMode = .T.)	Controls can be selected, moved, resized. Grid background shown. Code generation active.
Run Mode (FDesignMode = .F.)	Form runs normally. Controls respond to user interaction. No code generation.

Form Properties in Designer

Property	Type	Description
nWidth, nHeight	Numeric	Form dimensions in pixels
nLeft, nTop	Numeric	Position on screen
cTitle	String	Window title bar text
nBorderStyle	Numeric	0=bsSizeable, 1=bsSingle, 2=bsNone, 3=bsToolWindow
nPosition	Numeric	0=poDesigned, 1=poCenter, 2=poCenterScreen
nWindowState	Numeric	0=wsNormal, 1=wsMinimized, 2=wsMaximized
nFormStyle	Numeric	0=fsNormal, 1=fsStayOnTop
lSizable	Logical	Allow user to resize the window
lCenter	Logical	Center form on screen when shown

Code Examples

Simple DEFINE FORM Syntax

#include "hbbuilder.ch"

function Main()
   local oForm

   DEFINE FORM oForm TITLE "Hello World" ;
      SIZE 400, 300 FONT "Segoe UI", 10

   ACTIVATE FORM oForm CENTERED
return nil

Class-Based Approach (IDE Generated)

CLASS TForm1 FROM TForm

   METHOD CreateForm()

ENDCLASS

METHOD CreateForm() CLASS TForm1
   ::cTitle  := "Form1"
   ::nLeft   := 100
   ::nTop    := 170
   ::nWidth  := 400
   ::nHeight := 300
return nil

Tips for Efficient Form Design

1. Use the Object Inspector — Set properties visually instead of writing code
2. Double-click controls — Auto-generates event handlers (e.g., OnClick for buttons)
3. Multi-select for alignment — Select multiple controls, then use Format menu to align
4. Copy/Paste for similar controls — Design one button, paste and modify for others
5. Use snap-to-grid — Keeps controls aligned without manual positioning
6. Check Two-Way Tools — Switch between designer and code view to see real-time updates
7. Save frequently — Ctrl+S saves both design data and code