DVX_GUI/docs/dvxbasic_ide_guide.html

758 lines
41 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DVX BASIC IDE Guide</title>
<style>
body { font-family: sans-serif; margin: 0; padding: 0; display: flex; }
nav { width: 250px; min-width: 250px; background: #f0f0f0; padding: 16px;
border-right: 1px solid #ccc; height: 100vh; overflow-y: auto;
position: sticky; top: 0; box-sizing: border-box; }
nav ul { list-style: none; padding-left: 16px; margin: 4px 0; }
nav > ul { padding-left: 0; }
nav a { text-decoration: none; color: #0066cc; }
nav a:hover { text-decoration: underline; }
main { flex: 1; padding: 24px 32px; max-width: 800px; }
h1 { border-bottom: 2px solid #333; padding-bottom: 4px; }
h2 { border-bottom: 1px solid #999; padding-bottom: 2px; margin-top: 32px; }
h3 { margin-top: 24px; }
pre { background: #f8f8f8; border: 1px solid #ddd; padding: 8px;
overflow-x: auto; font-size: 14px; }
blockquote { background: #fffde7; border-left: 4px solid #ffc107;
padding: 8px 12px; margin: 12px 0; }
hr { border: none; border-top: 1px solid #ccc; margin: 24px 0; }
img { max-width: 100%; }
.topic { margin-bottom: 48px; }
</style>
</head>
<body>
<nav>
<h3>Contents</h3>
<ul>
<li><a href="#ide.overview">Overview</a>
<ul>
<li><a href="#ide.menu.file">Menu Reference</a>
<ul>
<li><a href="#ide.menu.file">File Menu</a></li>
<li><a href="#ide.menu.edit">Edit Menu</a></li>
<li><a href="#ide.menu.run">Run Menu</a></li>
<li><a href="#ide.menu.view">View Menu</a></li>
<li><a href="#ide.menu.window">Window Menu</a></li>
<li><a href="#ide.menu.tools">Tools Menu</a></li>
<li><a href="#ide.menu.help">Help Menu</a></li>
</ul>
</li>
<li><a href="#ide.toolbar">Toolbar</a></li>
<li><a href="#ide.editor">Code Editor</a></li>
<li><a href="#ide.designer">Form Designer</a></li>
<li><a href="#ide.project">Project System</a></li>
<li><a href="#ide.properties">Properties Panel</a></li>
<li><a href="#ide.toolbox">Toolbox</a></li>
<li><a href="#ide.debugger">Debugger</a></li>
<li><a href="#ide.debug.locals">Debug Windows</a>
<ul>
<li><a href="#ide.debug.locals">Locals Window</a></li>
<li><a href="#ide.debug.callstack">Call Stack Window</a></li>
<li><a href="#ide.debug.watch">Watch Window</a></li>
<li><a href="#ide.debug.breakpoints">Breakpoints Window</a></li>
</ul>
</li>
<li><a href="#ide.immediate">Immediate Window</a></li>
<li><a href="#ide.output">Output Window</a></li>
<li><a href="#ide.findreplace">Find / Replace</a></li>
<li><a href="#ide.preferences">Preferences</a></li>
<li><a href="#ide.shortcuts">Keyboard Shortcuts</a></li>
</ul>
</li>
</ul>
<h3>Index</h3>
<ul>
<li><a href="#ide.overview">DVX BASIC</a></li>
<li><a href="#ide.overview">IDE</a></li>
<li><a href="#ide.overview">Visual Basic</a></li>
<li><a href="#ide.overview">Development Environment</a></li>
<li><a href="#ide.menu.file">File Menu</a></li>
<li><a href="#ide.menu.file">New Project</a></li>
<li><a href="#ide.menu.file">Open Project</a></li>
<li><a href="#ide.menu.file">Save Project</a></li>
<li><a href="#ide.menu.file">Close Project</a></li>
<li><a href="#ide.menu.file">Project Properties</a></li>
<li><a href="#ide.menu.file">Add File</a></li>
<li><a href="#ide.menu.file">Save File</a></li>
<li><a href="#ide.menu.file">Save All</a></li>
<li><a href="#ide.menu.file">Remove File</a></li>
<li><a href="#ide.menu.file">Exit</a></li>
<li><a href="#ide.menu.edit">Edit Menu</a></li>
<li><a href="#ide.menu.edit">Cut</a></li>
<li><a href="#ide.menu.edit">Copy</a></li>
<li><a href="#ide.menu.edit">Paste</a></li>
<li><a href="#ide.menu.edit">Select All</a></li>
<li><a href="#ide.menu.edit">Delete</a></li>
<li><a href="#ide.menu.edit">Find</a></li>
<li><a href="#ide.menu.edit">Find Next</a></li>
<li><a href="#ide.menu.edit">Replace</a></li>
<li><a href="#ide.menu.run">Run Menu</a></li>
<li><a href="#ide.menu.run">Run</a></li>
<li><a href="#ide.menu.run">Debug</a></li>
<li><a href="#ide.menu.run">Run Without Recompile</a></li>
<li><a href="#ide.menu.run">Stop</a></li>
<li><a href="#ide.menu.run">Step Into</a></li>
<li><a href="#ide.menu.run">Step Over</a></li>
<li><a href="#ide.menu.run">Step Out</a></li>
<li><a href="#ide.menu.run">Run to Cursor</a></li>
<li><a href="#ide.menu.run">Toggle Breakpoint</a></li>
<li><a href="#ide.menu.run">Clear Output</a></li>
<li><a href="#ide.menu.run">Save on Run</a></li>
<li><a href="#ide.menu.view">View Menu</a></li>
<li><a href="#ide.menu.view">Code View</a></li>
<li><a href="#ide.menu.view">Design View</a></li>
<li><a href="#ide.menu.view">Toolbar Toggle</a></li>
<li><a href="#ide.menu.view">Status Bar Toggle</a></li>
<li><a href="#ide.menu.view">Menu Editor</a></li>
<li><a href="#ide.menu.window">Window Menu</a></li>
<li><a href="#ide.menu.tools">Tools Menu</a></li>
<li><a href="#ide.menu.tools">Preferences</a></li>
<li><a href="#ide.menu.tools">Debug Layout</a></li>
<li><a href="#ide.menu.help">Help Menu</a></li>
<li><a href="#ide.menu.help">About</a></li>
<li><a href="#ide.toolbar">Toolbar</a></li>
<li><a href="#ide.editor">Code Editor</a></li>
<li><a href="#ide.editor">Syntax Highlighting</a></li>
<li><a href="#ide.editor">Object Dropdown</a></li>
<li><a href="#ide.editor">Function Dropdown</a></li>
<li><a href="#ide.editor">Line Numbers</a></li>
<li><a href="#ide.editor">Auto-indent</a></li>
<li><a href="#ide.designer">Form Designer</a></li>
<li><a href="#ide.designer">Design Surface</a></li>
<li><a href="#ide.designer">Grid Snapping</a></li>
<li><a href="#ide.designer">Grab Handles</a></li>
<li><a href="#ide.designer">Control Placement</a></li>
<li><a href="#ide.designer">WYSIWYG</a></li>
<li><a href="#ide.project">Project System</a></li>
<li><a href="#ide.project">Project Files</a></li>
<li><a href="#ide.project">.dbp Files</a></li>
<li><a href="#ide.project">Project Explorer</a></li>
<li><a href="#ide.project">Source Map</a></li>
<li><a href="#ide.properties">Properties Panel</a></li>
<li><a href="#ide.properties">Control Properties</a></li>
<li><a href="#ide.properties">Property List</a></li>
<li><a href="#ide.properties">Control Tree</a></li>
<li><a href="#ide.toolbox">Toolbox</a></li>
<li><a href="#ide.toolbox">Controls</a></li>
<li><a href="#ide.toolbox">Widget Palette</a></li>
<li><a href="#ide.debugger">Debugger</a></li>
<li><a href="#ide.debugger">Breakpoints</a></li>
<li><a href="#ide.debugger">Stepping</a></li>
<li><a href="#ide.debugger">Debug Mode</a></li>
<li><a href="#ide.debugger">DBG_IDLE</a></li>
<li><a href="#ide.debugger">DBG_RUNNING</a></li>
<li><a href="#ide.debugger">DBG_PAUSED</a></li>
<li><a href="#ide.debug.locals">Locals Window</a></li>
<li><a href="#ide.debug.locals">Variable Inspection</a></li>
<li><a href="#ide.debug.callstack">Call Stack</a></li>
<li><a href="#ide.debug.callstack">Stack Trace</a></li>
<li><a href="#ide.debug.watch">Watch Window</a></li>
<li><a href="#ide.debug.watch">Watch Expressions</a></li>
<li><a href="#ide.debug.breakpoints">Breakpoints Window</a></li>
<li><a href="#ide.immediate">Immediate Window</a></li>
<li><a href="#ide.immediate">REPL</a></li>
<li><a href="#ide.immediate">Expression Evaluation</a></li>
<li><a href="#ide.immediate">Variable Assignment</a></li>
<li><a href="#ide.output">Output Window</a></li>
<li><a href="#ide.output">PRINT Output</a></li>
<li><a href="#ide.output">Runtime Errors</a></li>
<li><a href="#ide.output">Compile Errors</a></li>
<li><a href="#ide.findreplace">Find</a></li>
<li><a href="#ide.findreplace">Replace</a></li>
<li><a href="#ide.findreplace">Find Next</a></li>
<li><a href="#ide.findreplace">Search</a></li>
<li><a href="#ide.preferences">Preferences</a></li>
<li><a href="#ide.preferences">Settings</a></li>
<li><a href="#ide.preferences">Tab Width</a></li>
<li><a href="#ide.preferences">Option Explicit</a></li>
<li><a href="#ide.shortcuts">Keyboard Shortcuts</a></li>
<li><a href="#ide.shortcuts">Hotkeys</a></li>
<li><a href="#ide.shortcuts">Accelerators</a></li>
</ul>
</nav>
<main>
<div class="topic" id="ide.overview">
<h1>DVX BASIC IDE Guide</h1>
<h2>DVX BASIC IDE Guide</h2>
<p>DVX BASIC is a Visual BASIC development environment for the DVX GUI System. It provides a VB3-style integrated development environment with a code editor, form designer, project system, and a full interactive debugger -- all running natively on DOS under the DVX windowing system.</p>
<p>This guide covers every feature of the IDE: menus, toolbar, editor, form designer, project management, debugger, and auxiliary windows.</p>
<h3>IDE Windows</h3>
<p>The DVX BASIC IDE is modeled after Visual Basic 3.0. It consists of several floating windows arranged on the DVX desktop:</p>
<ul>
<li>Main Toolbar Window -- anchored at the top of the screen. Contains the menu bar, toolbar buttons, and status bar.</li>
<li>Code Editor -- the primary editing surface for BASIC source code, with Object/Event dropdowns, syntax highlighting, and line numbers.</li>
<li>Form Designer -- a visual design surface for .frm files, showing a WYSIWYG preview of the form with grab handles for resizing controls.</li>
<li>Project Explorer -- a tree view listing all files in the project.</li>
<li>Toolbox -- a palette of available controls for placing on forms.</li>
<li>Properties Panel -- a tree of controls and a list of editable properties for the selected control.</li>
<li>Output Window -- displays PRINT output and runtime errors.</li>
<li>Immediate Window -- an interactive REPL for evaluating expressions and modifying variables at runtime.</li>
</ul>
<p>Debug Windows -- Locals, Call Stack, Watch, and Breakpoints windows that appear automatically when debugging.</p>
<p>The IDE compiles BASIC source into bytecode and runs it in an integrated virtual machine (VM). Programs execute in cooperative slices (10,000 VM steps per slice), yielding to the DVX event loop between slices so the GUI remains responsive.</p>
<p><a href="#ide.menu.file">File Menu</a></p>
<p><a href="#ide.menu.edit">Edit Menu</a></p>
<p><a href="#ide.menu.run">Run Menu</a></p>
<p><a href="#ide.menu.view">View Menu</a></p>
<p><a href="#ide.menu.window">Window Menu</a></p>
<p><a href="#ide.menu.tools">Tools Menu</a></p>
<p><a href="#ide.menu.help">Help Menu</a></p>
<p><a href="#ide.toolbar">Toolbar</a></p>
<p><a href="#ide.editor">Code Editor</a></p>
<p><a href="#ide.designer">Form Designer</a></p>
<p><a href="#ide.project">Project System</a></p>
<p><a href="#ide.properties">Properties Panel</a></p>
<p><a href="#ide.toolbox">Toolbox</a></p>
<p><a href="#ide.debugger">Debugger</a></p>
<p><a href="#ide.debug.locals">Locals Window</a></p>
<p><a href="#ide.debug.callstack">Call Stack Window</a></p>
<p><a href="#ide.debug.watch">Watch Window</a></p>
<p><a href="#ide.debug.breakpoints">Breakpoints Window</a></p>
<p><a href="#ide.immediate">Immediate Window</a></p>
<p><a href="#ide.output">Output Window</a></p>
<p><a href="#ide.findreplace">Find / Replace</a></p>
<p><a href="#ide.preferences">Preferences</a></p>
<p><a href="#ide.shortcuts">Keyboard Shortcuts</a></p>
</div>
<div class="topic" id="ide.menu.file">
<h1>File Menu</h1>
<h2>File Menu</h2>
<pre> Menu Item Shortcut Description
--------- -------- -----------
New Project... Create a new DVX BASIC project.
Open Project... Open an existing .dbp project file.
Save Project Save the current project file to disk.
Close Project Close the current project (prompts to save unsaved changes).
---
Project Properties... Edit project metadata (name, author, version, startup form, icon, etc.).
---
Add File... Ctrl+O Add a .bas or .frm file to the project. If no project is open, creates an implicit project from the file.
Save File Ctrl+S Save the active file to disk.
Save All Save all modified files in the project.
---
Remove File Remove the selected file from the project (prompts to save if modified).
---
Exit Close the IDE (prompts to save unsaved changes).</pre>
<p><a href="#ide.menu.edit">Edit Menu</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.menu.edit">
<h1>Edit Menu</h1>
<h2>Edit Menu</h2>
<pre> Menu Item Shortcut Description
--------- -------- -----------
Cut Ctrl+X Cut selected text to the clipboard.
Copy Ctrl+C Copy selected text to the clipboard.
Paste Ctrl+V Paste text from the clipboard.
---
Select All Ctrl+A Select all text in the active editor.
---
Delete Del Delete the selected text or control (in the form designer).
---
Find... Ctrl+F Open the Find/Replace dialog.
Find Next F3 Find the next occurrence of the search text.
Replace... Ctrl+H Open the Find/Replace dialog with replace enabled.</pre>
<p><a href="#ide.menu.run">Run Menu</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.menu.run">
<h1>Run Menu</h1>
<h2>Run Menu</h2>
<pre> Menu Item Shortcut Description
--------- -------- -----------
Run F5 Compile and run the program. If paused at a breakpoint, resumes execution with debugging disabled (runs free).
Debug Shift+F5 Compile and run with the debugger active. Breakpoints are active but execution does not pause at the first statement. If paused, resumes to the next breakpoint.
Run Without Recompile Ctrl+F5 Re-run the last compiled module without recompiling.
Stop Esc Stop the running program immediately.
---
Step Into F8 Execute one statement, stepping into SUB/FUNCTION calls. If idle, starts a debug session and breaks at the first statement.
Step Over Shift+F8 Execute one statement, stepping over SUB/FUNCTION calls.
Step Out Ctrl+Shift+F8 Run until the current SUB/FUNCTION returns.
Run to Cursor Ctrl+F8 Run until execution reaches the line where the cursor is positioned.
---
Toggle Breakpoint F9 Toggle a breakpoint on the current editor line.
---
Clear Output Clear the Output window.
---
Save on Run Checkbox: when enabled, all modified files are saved automatically before compiling. Persisted in preferences.</pre>
<p><a href="#ide.menu.view">View Menu</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.menu.view">
<h1>View Menu</h1>
<h2>View Menu</h2>
<pre> Menu Item Shortcut Description
--------- -------- -----------
Code F7 Switch to Code view for the active file (or the file selected in the Project Explorer).
Designer Shift+F7 Switch to Design view for the active form file.
---
Toolbar Checkbox: show or hide the toolbar. Persisted in preferences.
Status Bar Checkbox: show or hide the status bar. Persisted in preferences.
---
Menu Editor... Ctrl+E Open the Menu Editor dialog for the active form. Allows designing menu bars with captions, names, levels, checked state, and enabled state.</pre>
<p><a href="#ide.menu.window">Window Menu</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.menu.window">
<h1>Window Menu</h1>
<h2>Window Menu</h2>
<pre> Menu Item Description
--------- -----------
Code Editor Show or raise the Code Editor window.
Output Show or raise the Output window.
Immediate Show or raise the Immediate window.
Locals Show or raise the Locals debug window.
Call Stack Show or raise the Call Stack debug window.
Watch Show or raise the Watch debug window.
Breakpoints Show or raise the Breakpoints window.
---
Project Explorer Show or raise the Project Explorer window.
Toolbox Show or raise the Toolbox window.
Properties Show or raise the Properties panel.</pre>
<p><a href="#ide.menu.tools">Tools Menu</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.menu.tools">
<h1>Tools Menu</h1>
<h2>Tools Menu</h2>
<pre> Menu Item Description
--------- -----------
Preferences... Open the Preferences dialog (editor settings and project defaults).
---
Debug Layout Checkbox: toggle a debug overlay that shows widget layout boundaries. Useful for diagnosing widget layout issues.</pre>
<p><a href="#ide.menu.help">Help Menu</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.menu.help">
<h1>Help Menu</h1>
<h2>Help Menu</h2>
<pre> Menu Item Description
--------- -----------
About DVX BASIC... Show the About dialog with version and copyright information.</pre>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.toolbar">
<h1>Toolbar</h1>
<h2>Toolbar</h2>
<p>The toolbar is organized into four groups separated by vertical dividers. Each button has a tooltip showing its name and keyboard shortcut.</p>
<h3>File Group</h3>
<pre> Button Shortcut Action
------ -------- ------
Open Ctrl+O Add a file to the project (same as File &gt; Add File).
Save Ctrl+S Save the active file.</pre>
<h3>Run Group</h3>
<pre> Button Shortcut Action
------ -------- ------
Run F5 Compile and run the program.
Stop Esc Stop the running program.</pre>
<h3>Debug Group</h3>
<pre> Button Shortcut Action
------ -------- ------
Debug Shift+F5 Start or resume a debug session.
Step Into F8 Step into the next statement.
Step Over Shift+F8 Step over the next statement.
Step Out Ctrl+Shift+F8 Step out of the current procedure.
Run to Cursor Ctrl+F8 Run to the cursor position.</pre>
<h3>View Group</h3>
<pre> Button Shortcut Action
------ -------- ------
Code F7 Switch to Code view.
Design Shift+F7 Switch to Design view.</pre>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.editor">
<h1>Code Editor</h1>
<h2>Code Editor</h2>
<p>The Code Editor is the primary editing window for BASIC source code. It occupies the center of the screen, below the toolbar and above the Output and Immediate windows.</p>
<h3>Object and Function Dropdowns</h3>
<p>At the top of the Code Editor are two dropdown lists:</p>
<ul>
<li>Object -- lists (General) plus all objects (form name, control names, menu item names). Selecting an object filters the Function dropdown.</li>
</ul>
<p>Function -- lists all event handlers (procedures) for the selected object. Implemented handlers are listed first (plain text); unimplemented handlers follow in brackets (e.g., [Click]). Selecting an unimplemented event creates a new event handler stub.</p>
<p>The editor shows one procedure at a time. Each procedure has its own buffer, and switching between them is instantaneous. The (General) section contains module-level declarations and code.</p>
<h3>Syntax Highlighting</h3>
<p>The editor applies real-time syntax coloring as you type. The following categories are highlighted in distinct colors:</p>
<pre> Category Examples
-------- --------
Keywords IF, THEN, FOR, NEXT, SUB, FUNCTION, DIM, PRINT, SELECT, CASE, DO, LOOP, WHILE, WEND, END, EXIT, CALL, GOSUB, GOTO, RETURN, DECLARE, CONST, TYPE, AND, OR, NOT, XOR, MOD, etc.
Type names INTEGER, LONG, SINGLE, DOUBLE, STRING, BOOLEAN, BYTE, TRUE, FALSE
String literals &quot;Hello, World!&quot;
Comments ' This is a comment, REM This is a comment
Numbers 42, 3.14
Operators =, &lt;, &gt;, +, -, *, /, \, &amp;</pre>
<h3>Editor Features</h3>
<ul>
<li>Line numbers -- displayed in the gutter on the left side.</li>
<li>Auto-indent -- new lines are automatically indented to match the previous line.</li>
<li>Tab handling -- the Tab key is captured by the editor. Tab width and whether to insert spaces or tab characters are configurable in Preferences (default: 3 spaces).</li>
<li>Gutter click -- clicking in the line number gutter toggles a breakpoint on that line.</li>
</ul>
<p>Line decorations -- breakpoint lines show a red dot in the gutter. The current debug line (when paused) is highlighted with a yellow background.</p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.designer">
<h1>Form Designer</h1>
<h2>Form Designer</h2>
<p>The Form Designer provides a visual design surface for editing .frm files. Switch to it with Shift+F7 or the Design toolbar button. It opens in a separate window showing a WYSIWYG preview of the form.</p>
<h3>Design Surface</h3>
<ul>
<li>Grid snapping -- controls snap to an 8-pixel grid (DSGN_GRID_SIZE) when placed or resized.</li>
<li>Selection -- click a control to select it. The selected control is highlighted with grab handles.</li>
<li>Grab handles -- 6x6 pixel handles appear on the right edge (E), bottom edge (S), and bottom-right corner (SE) of the selected control. Drag a handle to resize the control.</li>
<li>Reordering -- drag a control vertically to reorder it within the form's layout (VBox/HBox).</li>
<li>Placing controls -- select a control type in the Toolbox, then click on the form to place a new instance. The control is auto-named (e.g., Command1, Command2). Clicking the same tool again deselects it (toggles back to pointer mode).</li>
<li>Menu bar preview -- if the form has menu items (defined via the Menu Editor), a preview menu bar is rendered on the design window.</li>
</ul>
<p>Delete key -- removes the selected control from the form.</p>
<h3>Form Properties</h3>
<p>Forms have the following design-time properties: Name, Caption, Width, Height, Left, Top, Layout (VBox or HBox), Centered, AutoSize, and Resizable.</p>
<p><a href="#ide.properties">Properties Panel</a></p>
<p><a href="#ide.toolbox">Toolbox</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.project">
<h1>Project System</h1>
<h2>Project System</h2>
<h3>Project Files (.dbp)</h3>
<p>A DVX BASIC project is stored as a .dbp file (DVX BASIC Project). The project file records:</p>
<ul>
<li>Name -- the project display name (up to 32 characters).</li>
<li>Startup Form -- which form to show automatically when the program starts.</li>
<li>Metadata -- Author, Company, Version, Copyright, Description, and Icon Path (for compiled binaries).</li>
</ul>
<p>File list -- relative paths (8.3 DOS names) of all .bas and .frm files in the project. Each entry tracks whether it is a form file.</p>
<h3>Source Map</h3>
<p>When the project is compiled, all files are concatenated into a single source stream. A source map tracks which lines belong to which file, enabling accurate error reporting and debugger navigation across multiple files. For .frm files, an injected BEGINFORM directive is prepended to the code section.</p>
<h3>Project Operations</h3>
<pre> Operation Description
--------- -----------
New Project Creates a blank project with a name and directory. A default .frm file is added automatically.
Open Project Opens a .dbp file and loads all referenced files into memory.
Save Project Writes the .dbp file to disk.
Close Project Closes the project, prompting to save unsaved changes.
Add File Adds a .bas or .frm file to the project. Opening a file without a project auto-creates an implicit project.
Remove File Removes a file from the project (prompts to save if modified).
Project Properties Opens a dialog for editing project metadata (name, author, company, version, copyright, description, icon, startup form).</pre>
<h3>Project Explorer</h3>
<p>The Project Explorer is a tree view window listing all project files. Double-click a file to open it: .bas files open in Code view, .frm files open in Design view. The selected file in the Project Explorer determines the target for View &gt; Code and View &gt; Designer commands.</p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.properties">
<h1>Properties Panel</h1>
<h2>Properties Panel</h2>
<p>The Properties panel (Window &gt; Properties) has two sections:</p>
<ul>
<li>Control tree -- a TreeView at the top listing the form and all its controls in layout order. Click a control name to select it in both the Properties panel and the Form Designer. Drag items in the tree to reorder controls in the form's layout.</li>
</ul>
<p>Property list -- a two-column ListView below the tree showing property names and values for the selected control. Double-click a property value to edit it via an InputBox dialog. Changes take effect immediately in the designer preview.</p>
<p>Each control type exposes different properties (e.g., Caption, Text, Width, Height, MaxWidth, MaxHeight, Weight, Alignment, Enabled, Visible, and type-specific properties like DataSource and DataField for data-bound controls).</p>
<p><a href="#ide.designer">Form Designer</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.toolbox">
<h1>Toolbox</h1>
<h2>Toolbox</h2>
<p>The Toolbox (Window &gt; Toolbox) is a floating palette of buttons, one for each available control type. Controls are loaded dynamically from the widget plugin registry -- any widget DXE that provides a basName appears in the toolbox.</p>
<p>Click a tool to select it (the active tool name is stored in the designer state), then click on the form to place a new instance. Click the same tool again to deselect it and return to pointer mode.</p>
<h3>Available Controls</h3>
<pre> VB Name Description
------- -----------
CommandButton Push button that triggers a Click event.
Label Static text label.
TextBox Single-line text input field.
TextArea Multi-line text editor.
CheckBox On/off checkbox.
OptionButton Radio button (mutually exclusive within a group).
ListBox Scrollable list of items.
ComboBox Drop-down combo box.
DropDown Simple drop-down list.
PictureBox Canvas for drawing and images.
Image Static image display.
ImageButton Clickable image button.
Frame Grouping container with a labeled border.
VBox Vertical layout container.
HBox Horizontal layout container.
WrapBox Flow layout container that wraps items to the next row.
Splitter Resizable split between two child panes.
ScrollPane Scrollable container for large content.
TabStrip Tabbed container with multiple pages.
ListView Multi-column list with headers.
TreeView Hierarchical tree control.
ProgressBar Progress indicator bar.
HScrollBar Horizontal slider/scrollbar.
SpinButton Numeric up/down spinner.
Line Horizontal or vertical separator line.
Spacer Invisible spacing element for layout.
Timer Non-visual timer that fires periodic events.
Toolbar Toolbar container for buttons.
StatusBar Status bar at the bottom of a form.
Terminal ANSI terminal emulator control.
Data Data control for binding to a database.
DBGrid Data-bound grid for displaying database query results.</pre>
<p><a href="#ide.designer">Form Designer</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.debugger">
<h1>Debugger</h1>
<h2>Debugger</h2>
<p>The DVX BASIC IDE includes a full interactive debugger. The debugger operates as a state machine with three states:</p>
<pre> State Description
----- -----------
DBG_IDLE No program loaded or running.
DBG_RUNNING Program is executing (VM running in slices).
DBG_PAUSED Execution is paused at a breakpoint or step point. The IDE GUI is fully interactive.</pre>
<h3>Starting a Debug Session</h3>
<ul>
<li>Shift+F5 (Debug) -- compiles the project and starts execution in debug mode. Breakpoints are active but execution does not pause at the first statement.</li>
<li>F8 (Step Into) -- if idle, starts a debug session and breaks at the first statement.</li>
</ul>
<p>F5 (Run) -- compiles and runs without the debugger. No breakpoints are active. If already paused, resumes execution with debugging disabled.</p>
<h3>Breakpoints</h3>
<h4>Setting Breakpoints</h4>
<ul>
<li>Press F9 to toggle a breakpoint on the current editor line.</li>
</ul>
<p>Click in the line number gutter to toggle a breakpoint on that line.</p>
<h4>Breakpoint Validation</h4>
<p>Not every line can have a breakpoint. The IDE validates the line content and silently refuses to set breakpoints on:</p>
<ul>
<li>Blank lines</li>
<li>Comment lines (' or REM)</li>
<li>SUB and FUNCTION declaration lines</li>
</ul>
<p>END SUB and END FUNCTION lines</p>
<h4>Breakpoint Storage</h4>
<p>Each breakpoint records the project file index, the code line number within the file, the procedure index, and the procedure name (as Object.Event). When the project is compiled, breakpoints are converted to concatenated source line numbers that match the VM's OP_LINE opcodes.</p>
<h4>Visual Indicators</h4>
<ul>
<li>Breakpoint lines show a red dot in the gutter.</li>
</ul>
<p>The current debug line (when paused) has a yellow background.</p>
<h4>Breakpoint Adjustment on Edit</h4>
<p>When lines are added or removed in the editor, breakpoints below the edit point are automatically shifted to stay on the correct line.</p>
<h3>Stepping</h3>
<pre> Action Shortcut Behavior
------ -------- --------
Step Into F8 Execute one statement. If the statement is a SUB/FUNCTION call, step into it.
Step Over Shift+F8 Execute one statement. If the statement is a SUB/FUNCTION call, execute the entire call and break at the next line in the current scope.
Step Out Ctrl+Shift+F8 Run until the current SUB/FUNCTION returns to its caller.
Run to Cursor Ctrl+F8 Run until execution reaches the line under the cursor.</pre>
<h3>The Debug Run Loop</h3>
<p>When a program is running in debug mode, the IDE enters a cooperative loop:</p>
<ul>
<li>The VM executes up to 10,000 steps per slice.</li>
<li>If the VM hits a breakpoint (BAS_VM_BREAKPOINT), the state transitions to DBG_PAUSED. The IDE navigates the code editor to the breakpoint line, highlights it in yellow, auto-opens the Locals and Call Stack windows, and updates all debug windows.</li>
<li>While paused, the IDE pumps dvxUpdate() continuously, keeping the GUI responsive. The user can inspect variables, modify them in the Immediate window, step, continue, or stop.</li>
</ul>
<p>When the user resumes (F5/Shift+F5/F8/etc.), the state transitions back to DBG_RUNNING and the loop continues.</p>
<h3>Stopping</h3>
<p>Press Esc or click the Stop toolbar button at any time to halt execution. The VM is destroyed, debug state resets to DBG_IDLE, and the IDE restores the designer windows that were hidden at run start.</p>
<p><a href="#ide.debug.locals">Locals Window</a></p>
<p><a href="#ide.debug.callstack">Call Stack Window</a></p>
<p><a href="#ide.debug.watch">Watch Window</a></p>
<p><a href="#ide.debug.breakpoints">Breakpoints Window</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.debug.locals">
<h1>Locals Window</h1>
<h2>Locals Window</h2>
<p>When the debugger pauses, the Locals and Call Stack windows are auto-opened (if not already visible). The Watch and Breakpoints windows can be opened manually from the Window menu.</p>
<p>Shows variables for the current execution scope. Displayed as a three-column ListView:</p>
<pre> Column Content
------ -------
Name Variable name (internal mangled names like static variable placeholders are filtered out).
Type Data type: Integer, Long, Single, Double, String, Boolean, Array, UDT. Array types show the element type (e.g., Integer()).
Value Current value. Strings are shown in quotes. Booleans as True/False. Arrays show bounds and element count (e.g., Integer(0 To 9) [10]). Uninitialized arrays show (uninitialized).</pre>
<p>The Locals window displays:</p>
<ul>
<li>Local variables for the current procedure (matched by proc index).</li>
<li>Global (module-level) variables.</li>
</ul>
<p>Form-scoped variables for the current form (if the program is executing within a form context).</p>
<p>Up to 64 variables are displayed. The window is resizable.</p>
<p><a href="#ide.debug.callstack">Call Stack Window</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.debug.callstack">
<h1>Call Stack Window</h1>
<h2>Call Stack Window</h2>
<p>Shows the current call chain as a two-column ListView:</p>
<pre> Column Content
------ -------
Procedure Procedure name (or (module) for module-level code).
Line Line number where execution is paused (shown for the topmost frame).</pre>
<p>The current location is shown first, followed by each caller in the call stack (walking from the deepest frame back to the module entry point). Up to 32 frames are displayed.</p>
<p><a href="#ide.debug.watch">Watch Window</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.debug.watch">
<h1>Watch Window</h1>
<h2>Watch Window</h2>
<p>Allows monitoring arbitrary expressions while debugging. The window has a text input at the top and a two-column ListView below:</p>
<pre> Column Content
------ -------
Expression The watch expression text.
Value Evaluated result (or &lt;error&gt; if evaluation fails). Blank when not paused.</pre>
<h3>Adding Watch Expressions</h3>
<p>Type an expression in the text input and press Enter. Up to 16 watch expressions can be active at once.</p>
<h3>Watch Expression Syntax</h3>
<p>Watch expressions support:</p>
<ul>
<li>Simple variable names: x, count</li>
<li>Array subscripts: arr(5), matrix(2, 3)</li>
<li>UDT field access: player.name</li>
<li>Combined: items(i).price</li>
</ul>
<p>Arbitrary BASIC expressions (compiled and evaluated against the paused VM's state): x + y * 2, Len(name$)</p>
<h3>Editing and Deleting</h3>
<ul>
<li>Double-click or press Enter on a watch entry to move it back into the input box for editing.</li>
</ul>
<p>Press Delete to remove the selected watch expression.</p>
<p><a href="#ide.debug.breakpoints">Breakpoints Window</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.debug.breakpoints">
<h1>Breakpoints Window</h1>
<h2>Breakpoints Window</h2>
<p>Lists all set breakpoints as a three-column ListView:</p>
<pre> Column Content
------ -------
File Project file path.
Procedure Procedure name (Object.Event format, or (General)).
Line Code line number within the file.</pre>
<ul>
<li>Double-click a breakpoint to navigate the code editor to that location.</li>
</ul>
<p>Press Delete to remove selected breakpoints (multi-select is supported).</p>
<p><a href="#ide.debugger">Debugger</a></p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.immediate">
<h1>Immediate Window</h1>
<h2>Immediate Window</h2>
<p>The Immediate window is an interactive REPL at the bottom-right of the screen. Type a line of BASIC and press Enter to evaluate it. Results appear inline below your input.</p>
<h3>Expression Evaluation</h3>
<p>If the input is not a recognized statement keyword, it is automatically wrapped in a PRINT statement. For example, typing 2 + 2 evaluates as PRINT 2 + 2 and displays 4.</p>
<p>You can also type full statements:</p>
<ul>
<li>PRINT x * 2 -- evaluate and print an expression.</li>
<li>DIM tmp As Integer -- declare a temporary variable.</li>
</ul>
<p>LET x = 42 -- explicit assignment (see below).</p>
<p>Parse or runtime errors are displayed inline with an Error: prefix.</p>
<h3>Inspecting Variables While Paused</h3>
<p>When the debugger is paused at a breakpoint, the Immediate window has access to the running VM's state. Global variable values are copied into the evaluation VM, so expressions like count or name$ &amp; &quot; test&quot; display live values.</p>
<h3>Assigning Variables While Paused</h3>
<p>When paused, you can modify variables in the running program directly from the Immediate window using assignment syntax:</p>
<pre><code>variableName = newValue</code></pre>
<p>The optional LET keyword is also accepted:</p>
<pre><code>LET variableName = newValue</code></pre>
<p>Assignment works for:</p>
<ul>
<li>Scalar variables -- x = 42, name$ = &quot;test&quot;</li>
<li>Array elements -- arr(5) = 100, matrix(2, 3) = 7.5</li>
<li>UDT fields -- player.score = 1000</li>
</ul>
<p>Combined -- items(0).price = 9.99</p>
<p>The new value is written directly into the VM's live variable slot (local, global, or form scope). A confirmation message is displayed, and the Locals and Watch windows update automatically to reflect the change.</p>
<p>If the assignment target cannot be resolved (unknown variable, out-of-bounds index, wrong type), an error message is displayed.</p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.output">
<h1>Output Window</h1>
<h2>Output Window</h2>
<p>The Output window is a read-only TextArea at the bottom-left of the screen. It displays:</p>
<ul>
<li>PRINT output -- all PRINT statement output from the running program is appended here.</li>
<li>Runtime errors -- if the VM encounters a runtime error (division by zero, out-of-bounds, etc.), the error message and line number are displayed in the output with an Error on line N: prefix.</li>
</ul>
<p>Compile errors -- if compilation fails, the error message and location are shown.</p>
<p>The output buffer holds up to 32,768 characters. Use Run &gt; Clear Output to clear it.</p>
<p>INPUT statements prompt the user via a modal InputBox dialog; the prompt text is also echoed to the Output window.</p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.findreplace">
<h1>Find / Replace</h1>
<h2>Find / Replace</h2>
<p>Open with Ctrl+F (Find) or Ctrl+H (Replace). The Find/Replace dialog is modeless -- it stays open while you continue editing.</p>
<h3>Dialog Controls</h3>
<pre> Control Description
------- -----------
Find input The text to search for.
Replace checkbox + input Enable replacement mode and enter replacement text.
Scope Radio group: Function, Object, File, or Project. Default is Project.
Direction Radio group: Forward or Backward.
Match Case Checkbox: case-sensitive search.</pre>
<h3>Buttons</h3>
<pre> Button Action
------ ------
Find Next Find the next occurrence. Wraps across procedures, files, and the entire project depending on the scope setting.
Replace Replace the current match and find the next one.
Replace All Replace all occurrences within the selected scope.
Close Close the dialog.</pre>
<h3>Keyboard Shortcut</h3>
<p>F3 repeats the last search (Find Next) without opening the dialog.</p>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.preferences">
<h1>Preferences</h1>
<h2>Preferences</h2>
<p>Open via Tools &gt; Preferences. Settings are saved to dvxbasic.ini in the app's config directory.</p>
<h3>Editor Section</h3>
<pre> Setting Description Default
------- ----------- -------
Skip comments/strings when renaming When renaming a control or form, skip occurrences inside comments and string literals. On
Require variable declaration (OPTION EXPLICIT) When enabled, variables must be declared with DIM before use. Off
Tab width Number of spaces per tab stop (1-8). 3
Insert spaces instead of tabs When enabled, pressing Tab inserts spaces. When disabled, inserts a real tab character. On</pre>
<h3>New Project Defaults Section</h3>
<p>These fields set the default values for new project metadata:</p>
<pre> Field Description Default
----- ----------- -------
Author Default author name. (empty)
Company Default company name. (empty)
Version Default version string. 1.0
Copyright Default copyright notice. (empty)
Description Default project description (multi-line). (empty)</pre>
<p><a href="#ide.overview">Back to Overview</a></p>
</div>
<div class="topic" id="ide.shortcuts">
<h1>Keyboard Shortcuts</h1>
<h2>Keyboard Shortcuts</h2>
<pre> Shortcut Action
-------- ------
Ctrl+O Add File
Ctrl+S Save File
Ctrl+A Select All
Ctrl+X Cut
Ctrl+C Copy
Ctrl+V Paste
Ctrl+F Find
Ctrl+H Replace
Ctrl+E Menu Editor
F3 Find Next
F5 Run
Shift+F5 Debug
Ctrl+F5 Run Without Recompile
Esc Stop
F7 Code View
Shift+F7 Design View
F8 Step Into
Shift+F8 Step Over
Ctrl+Shift+F8 Step Out
Ctrl+F8 Run to Cursor
F9 Toggle Breakpoint
Del Delete</pre>
<hr>
<p>DVX BASIC 1.0 -- Copyright 2026 Scott Duensing</p>
</div>
</main>
</body>
</html>