Choose and validate a color
Connect color selection to change feedback and explicit validation.
A visual choice and a textual color value describe the same state. Use the color control’s documented format when assigning a value in BASIC. Keep a validation message on the affected control instead of replacing unrelated Form feedback.
Step 1Prepare a safe practice project#
Extract the archive into a new writable folder, separate from your own application. Open ColorPicker.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
{
"schemaVersion": 1,
"projectId": "7f2b5b7d-5e70-46b8-97bd-f66b6ee63604",
"name": "ColorPickerSample",
"kind": "DesktopApp",
"ai": {
"storeChatsInProject": false
},
"language": {
"dialect": "McBasic1",
"requireExplicit": true,
"compare": "Binary",
"defaultArrayBase": 0
},
"application": {
"bundleIdentifier": "com.mcbasic.samples.colorpicker",
"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 | "ColorPicker — McBasic" |
Width | 520 |
Height | 260 |
MinWidth | 420 |
MinHeight | 220 |
| Type | Name | Parent |
|---|---|---|
| ColorPicker | clrAccent | Form |
| Label | lblValue | Form |
| CommandButton | cmdCheck | Form |
| ValidationProvider | valColors | Component tray |
clrAccent · exact Inspector values
| Property | Value |
|---|---|
Left | 48 |
Top | 64 |
Width | 180 |
Height | 32 |
Value | "#4F8DFF" |
TabIndex | 0 |
| Anchor edges | Left, Top |
lblValue · exact Inspector values
| Property | Value |
|---|---|
Left | 48 |
Top | 120 |
Width | 400 |
Height | 32 |
Caption | "Selected: #4F8DFF" |
| Anchor edges | Left, Top |
cmdCheck · exact Inspector values
| Property | Value |
|---|---|
Left | 48 |
Top | 168 |
Width | 120 |
Height | 32 |
Caption | "Check color" |
TabIndex | 1 |
| Anchor edges | Left, Top |
valColors · exact Inspector values
| Property | Value |
|---|---|
Target | "" |
ErrorText | "" |
Step 3Connect the events explicitly#
frmMain
| Object | Event | Procedure | Parameters |
|---|---|---|---|
| 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.
Option ExplicitPrivate Sub Form_Load()
Initialize state before enabling dependent actions. Keep the shared declarations and startup dependencies with this procedure.
Private Sub Form_Load()
clrAccent.Value = "#4F8DFF"
lblValue.Caption = clrAccent.Value
End SubPrivate Sub clrAccent_Change()
Read the current value or selection and update its dependent interface. The binding above determines which object calls this handler.
Private Sub clrAccent_Change()
lblValue.Caption = "Selected: " & clrAccent.Value
End SubPrivate Sub cmdCheck_Click()
Enter the complete action, including its input checks and calls to helper procedures.
Private Sub cmdCheck_Click()
valColors.Target = "clrAccent"
If clrAccent.Value = "#000000" Then
valColors.ErrorText = "Black requires review."
Else
valColors.ErrorText = ""
End If
If clrAccent.IsValid And valColors.IsValid Then
lblValue.Caption = "Ready: " & clrAccent.Value
Else
lblValue.Caption = "Invalid (" & CStr(valColors.ErrorCount) & "): " & valColors.FirstError
End If
End SubCopy the complete Forms/frmMain.bas file
Replace the file once; do not append duplicate procedures.
Option Explicit
Private Sub Form_Load()
clrAccent.Value = "#4F8DFF"
lblValue.Caption = clrAccent.Value
End Sub
Private Sub clrAccent_Change()
lblValue.Caption = "Selected: " & clrAccent.Value
End Sub
Private Sub cmdCheck_Click()
valColors.Target = "clrAccent"
If clrAccent.Value = "#000000" Then
valColors.ErrorText = "Black requires review."
Else
valColors.ErrorText = ""
End If
If clrAccent.IsValid And valColors.IsValid Then
lblValue.Caption = "Ready: " & clrAccent.Value
Else
lblValue.Caption = "Invalid (" & CStr(valColors.ErrorCount) & "): " & valColors.FirstError
End If
End SubStep 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:
mcbasic check ColorPicker.mcbproj
mcbasic run ColorPicker.mcbprojAcceptance checklist
- Choose a different color and observe Change.
- Use the check button to validate the selection.
- Return to the original color and check feedback again.
Step 7Make one change and repeat the tests#
Apply the selected color to a label after successful validation.
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.
20f4bfed6b · Build manifest