McBasic™ 0.7.881 · Build 881 · 7 min read

Hands-on tutorial · Lists & navigation

Use the compatibility control family

Work with UpDown, MonthView, DTPicker, TabStrip and FlatScrollBar.

1 Form / control designs1 complete BASIC filesGuided sample project

Download complete project Complete event code

Similar-looking controls are not interchangeable APIs. The sample uses each component’s own property and event contract, including FlatScrollBar.Scroll(Position). A TabStrip selects a tab-like item; it is not the same containment model as TabControl with TabPage children.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open CompatibilityControls.mcbproj in McBasic™. Keep every declared source, layout, resource and migration file together.

To reconstruct it yourself, create a DesktopApp project and add the files declared below. In the complete project, follow these steps as a guided rebuild: replace each named source file once and Check after all its procedures are present.

Exact project configuration

project.mcproj

{
  "schemaVersion": 1,
  "projectId": "d7c6a338-8f68-43e0-952a-a076b21cb90e",
  "name": "CompatibilityControlsSample",
  "kind": "DesktopApp",
  "ai": {
    "storeChatsInProject": false
  },
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.samples.compatibilitycontrols",
    "version": "0.1.0",
    "buildNumber": "1",
    "startupFormId": "form-main",
    "shutdownMode": "OnStartupFormClosed"
  },
  "forms": [
    {
      "id": "form-main",
      "typeName": "frmMain",
      "layout": "Forms/frmMain.form.json",
      "code": "Forms/frmMain.bas"
    }
  ],
  "modules": [],
  "classes": [],
  "tests": [],
  "references": [],
  "resources": [],
  "targets": [
    "osx-arm64"
  ],
  "capabilities": []
}

Step 2Build the Form and set its properties#

frmMain

Select the Form first and set its properties. Add containers before their children. These are initial Designer values, not statements to paste into a procedure.

Form property	Value
`Caption`	`"Compatibility controls — McBasic"`
`Width`	`760`
`Height`	`560`
`MinWidth`	`680`
`MinHeight`	`500`

Type	Name	Parent
UpDown	`updQuantity`	Form
MonthView	`mvwCalendar`	Form
DTPicker	`dtpAppointment`	Form
TabStrip	`tbsSection`	Form
FlatScrollBar	`fsbOffset`	Form
Label	`lblStatus`	Form
CommandButton	`cmdClose`	Form

updQuantity · exact Inspector values

Property	Value
`Left`	`28`
`Top`	`28`
`Width`	`150`
`Height`	`34`
`Minimum`	`0`
`Maximum`	`20`
`Value`	`4`
`Increment`	`2`
`Alignment`	`"Right"`
`ReadOnly`	`False`
`TabIndex`	`0`
Anchor edges	Left, Top

mvwCalendar · exact Inspector values

Property	Value
`Left`	`28`
`Top`	`82`
`Width`	`300`
`Height`	`250`
`Value`	`"2026-09-28"`
`MinimumDate`	`"2020-01-01"`
`MaximumDate`	`"2030-12-31"`
`SelStart`	`"2026-09-28"`
`SelEnd`	`"2026-09-30"`
`MultiSelect`	`True`
`MaxSelCount`	`7`
`FirstDayOfWeek`	`"Monday"`
`ShowToday`	`True`
`TabIndex`	`1`
Anchor edges	Left, Top

dtpAppointment · exact Inspector values

Property	Value
`Left`	`368`
`Top`	`28`
`Width`	`340`
`Height`	`36`
`Value`	`"2026-09-28 14:30:00"`
`MinimumDate`	`"2020-01-01 00:00:00"`
`MaximumDate`	`"2030-12-31 23:59:59"`
`Mode`	`"DateTime"`
`Format`	`"Custom"`
`CustomFormat`	`"yyyy-MM-dd"`
`Clock`	`"24Hour"`
`UseSeconds`	`False`
`MinuteIncrement`	`5`
`ReadOnly`	`False`
`ShowCheckBox`	`True`
`Checked`	`True`
`TabIndex`	`2`
Anchor edges	Left, Top, Right

tbsSection · exact Inspector values

Property	Value
`Left`	`368`
`Top`	`92`
`Width`	`340`
`Height`	`42`
`Items`	`"General\nDetails\nAdvanced"`
`SelectedIndex`	`1`
`Alignment`	`"Top"`
`MultiRow`	`False`
`HotTracking`	`True`
`TabIndex`	`3`
Anchor edges	Left, Top, Right

fsbOffset · exact Inspector values

Property	Value
`Left`	`368`
`Top`	`164`
`Width`	`340`
`Height`	`20`
`Minimum`	`0`
`Maximum`	`100`
`Value`	`25`
`SmallChange`	`1`
`LargeChange`	`10`
`ViewportSize`	`20`
`Orientation`	`"Horizontal"`
`TabIndex`	`4`
Anchor edges	Left, Top, Right

lblStatus · exact Inspector values

Property	Value
`Left`	`368`
`Top`	`220`
`Width`	`340`
`Height`	`100`
`Caption`	`"Compatibility state"`
`WordWrap`	`True`
Anchor edges	Left, Top, Right

cmdClose · exact Inspector values

Property	Value
`Left`	`568`
`Top`	`448`
`Width`	`140`
`Height`	`36`
`Caption`	`"Close"`
`TabIndex`	`5`
Anchor edges	Right, Bottom

Step 3Connect the events explicitly#

frmMain

Object	Event	Procedure	Parameters
`updQuantity`	`Change`	`updQuantity_Change`	`Change()`
`mvwCalendar`	`Change`	`mvwCalendar_Change`	`Change()`
`dtpAppointment`	`Change`	`dtpAppointment_Change`	`Change()`
`tbsSection`	`Change`	`tbsSection_Change`	`Change()`
`fsbOffset`	`Scroll`	`fsbOffset_Scroll`	`Scroll(ByVal Position As Long)`
`cmdClose`	`Click`	`cmdClose_Click`	`Click()`
Form	`Load`	`Form_Load`	`()`

Step 4Enter the complete behavior#

Open the named source file. Enter declarations first, then every procedure. Expand a procedure for its full body, or copy the complete file. Helpers are required: do not stop after entering the first Click handler.

`Forms/frmMain.bas`

Enter these declarations at file scope, before the procedures.

Forms/frmMain.bas · declarations

Option Explicit

Private Sub Form_Load()

Initialize state before enabling dependent actions. Keep the shared declarations and startup dependencies with this procedure.

Forms/frmMain.bas · Form_Load

Private Sub Form_Load()
    updQuantity.Value = 4
    mvwCalendar.Value = CDate("2026-09-28")
    dtpAppointment.Value = CDate("2026-09-28T14:30:00")
    tbsSection.SelectedIndex = 1
    fsbOffset.Value = 25
    ShowState
End Sub

Private Sub updQuantity_Change()

Read the current value or selection and update its dependent interface. The binding above determines which object calls this handler.

Forms/frmMain.bas · updQuantity_Change

Private Sub updQuantity_Change()
    ShowState
End Sub

Private Sub mvwCalendar_Change()

Read the current value or selection and update its dependent interface. The binding above determines which object calls this handler.

Forms/frmMain.bas · mvwCalendar_Change

Private Sub mvwCalendar_Change()
    ShowState
End Sub

Private Sub dtpAppointment_Change()

Read the current value or selection and update its dependent interface. The binding above determines which object calls this handler.

Forms/frmMain.bas · dtpAppointment_Change

Private Sub dtpAppointment_Change()
    ShowState
End Sub

Private Sub tbsSection_Change()

Read the current value or selection and update its dependent interface. The binding above determines which object calls this handler.

Forms/frmMain.bas · tbsSection_Change

Private Sub tbsSection_Change()
    ShowState
End Sub

Private Sub fsbOffset_Scroll(ByVal Position As Long)

Enter this helper in the named source file, outside every other procedure. Its callers are included in the same project.

Forms/frmMain.bas · fsbOffset_Scroll

Private Sub fsbOffset_Scroll(ByVal Position As Long)
    ShowState
End Sub

Private Sub ShowState()

Enter this helper in the named source file, outside every other procedure. Its callers are included in the same project.

Forms/frmMain.bas · ShowState

Private Sub ShowState()
    lblStatus.Caption = "Qty=" & CStr(updQuantity.Value) & _
        " · Date=" & Format(mvwCalendar.Value, "yyyy-MM-dd") & _
        " · At=" & Format(dtpAppointment.Value, "yyyy-MM-dd HH:mm:ss") & _
        " · Tab=" & tbsSection.SelectedItem & _
        " · Scroll=" & CStr(fsbOffset.Value)
End Sub

Private Sub cmdClose_Click()

Enter the complete action, including its input checks and calls to helper procedures.

Forms/frmMain.bas · cmdClose_Click

Private Sub cmdClose_Click()
    Unload Me
End Sub

Copy the complete Forms/frmMain.bas file

Replace the file once; do not append duplicate procedures.

Forms/frmMain.bas

Option Explicit

Private Sub Form_Load()
    updQuantity.Value = 4
    mvwCalendar.Value = CDate("2026-09-28")
    dtpAppointment.Value = CDate("2026-09-28T14:30:00")
    tbsSection.SelectedIndex = 1
    fsbOffset.Value = 25
    ShowState
End Sub

Private Sub updQuantity_Change()
    ShowState
End Sub

Private Sub mvwCalendar_Change()
    ShowState
End Sub

Private Sub dtpAppointment_Change()
    ShowState
End Sub

Private Sub tbsSection_Change()
    ShowState
End Sub

Private Sub fsbOffset_Scroll(ByVal Position As Long)
    ShowState
End Sub

Private Sub ShowState()
    lblStatus.Caption = "Qty=" & CStr(updQuantity.Value) & _
        " · Date=" & Format(mvwCalendar.Value, "yyyy-MM-dd") & _
        " · At=" & Format(dtpAppointment.Value, "yyyy-MM-dd HH:mm:ss") & _
        " · Tab=" & tbsSection.SelectedItem & _
        " · Scroll=" & CStr(fsbOffset.Value)
End Sub

Private Sub cmdClose_Click()
    Unload Me
End Sub

Step 5Keep resources and storage reproducible#

No external resource or migration files are declared. Any inline migration, seed data or local JSON is present in the code above. Runtime application data and private preferences are not included in the archive.

Step 6Check, run and test the result#

Save all files and run Check. Resolve diagnostics before Run. Developer CLI users can work from the extracted folder:

Developer CLI

mcbasic check CompatibilityControls.mcbproj
mcbasic run CompatibilityControls.mcbproj

Acceptance checklist

Change the UpDown value and inspect the summary.
Choose dates in MonthView and DTPicker.
Select a TabStrip item.
Move FlatScrollBar and confirm its Position argument is reflected.

Step 7Make one change and repeat the tests#

Replace one compatibility control with its alternative only after mapping its properties and events explicitly.

Save a working Git checkpoint first. Change one behavior, Check again and repeat the acceptance checklist. Compare with the downloaded solution if a regression appears.

Source baseline 20f4bfed6b · Build manifest

Use the compatibility control family

Step 1Prepare a safe practice project#

Step 2Build the Form and set its properties#

frmMain

Step 3Connect the events explicitly#

frmMain

Step 4Enter the complete behavior#

Forms/frmMain.bas

Step 5Keep resources and storage reproducible#

Step 6Check, run and test the result#

Acceptance checklist

Step 7Make one change and repeat the tests#

Continue learning#

`Forms/frmMain.bas`