-
Notifications
You must be signed in to change notification settings - Fork 57
/
Copy pathquickstart.html
825 lines (765 loc) · 75.9 KB
/
quickstart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
<!doctype html>
<html class="no-js" lang="en" data-content_root="./">
<head><meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="color-scheme" content="light dark"><meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Quickstart" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/Embarcadero/quickstart.html" />
<meta property="og:site_name" content="DelphiVCL | Documentation" />
<meta property="og:description" content="Let’s check for a few available classes, functions, and objects. We need to create instances/objects for classes like Button and Form. There are many other classes and functions but only one object..." />
<meta property="og:image" content="https://github.com/Embarcadero/DelphiVCL4Python/blob/main/images/DelphiVCL4Python(256px).png" />
<meta property="og:image:alt" content="DelphiVCL | Documentation" />
<meta name="description" content="Let’s check for a few available classes, functions, and objects. We need to create instances/objects for classes like Button and Form. There are many other classes and functions but only one object..." />
<link rel="index" title="Index" href="genindex.html" /><link rel="search" title="Search" href="search.html" /><link rel="next" title="Example Gallery" href="examples.html" /><link rel="prev" title="Tutorials & Guides" href="tutorials_guides.html" />
<link rel="shortcut icon" href="_static/favicon.ico"/><!-- Generated with Sphinx 8.2.3 and Furo 2024.08.06 -->
<title>Quickstart - DelphiVCL Documentation</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css?v=8f2a1f02" />
<link rel="stylesheet" type="text/css" href="_static/styles/furo.css?v=354aac6f" />
<link rel="stylesheet" type="text/css" href="_static/copybutton.css?v=76b2166b" />
<link rel="stylesheet" type="text/css" href="_static/graphviz.css?v=4ae1632d" />
<link rel="stylesheet" type="text/css" href="_static/styles/furo-extensions.css?v=302659d7" />
<link rel="stylesheet" type="text/css" href="_static/custom.css?v=93c9b8cc" />
<style>
body {
--color-code-background: #f8f8f8;
--color-code-foreground: black;
--color-content-foreground: #000000;
--color-background-primary: #ffffff;
--color-background-border: #ffffff;
--color-sidebar-background: #f8f9fb;
--color-brand-content: #1c00e3;
--color-brand-primary: #192bd0;
--color-link: #c93434;
--color-link--hover: #5b0000;
--color-inline-code-background: #f6f6f6;;
--color-foreground-secondary: #000;
}
@media not print {
body[data-theme="dark"] {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
--color-content-foreground: #ffffffd9;
--color-background-primary: #131416;
--color-background-border: #303335;
--color-sidebar-background: #1a1c1e;
--color-brand-content: #2196f3;
--color-brand-primary: #007fff;
--color-link: #51ba86;
--color-link--hover: #9cefc6;
--color-inline-code-background: #262626;
--color-foreground-secondary: #ffffffd9;
}
@media (prefers-color-scheme: dark) {
body:not([data-theme="light"]) {
--color-code-background: #202020;
--color-code-foreground: #d0d0d0;
--color-content-foreground: #ffffffd9;
--color-background-primary: #131416;
--color-background-border: #303335;
--color-sidebar-background: #1a1c1e;
--color-brand-content: #2196f3;
--color-brand-primary: #007fff;
--color-link: #51ba86;
--color-link--hover: #9cefc6;
--color-inline-code-background: #262626;
--color-foreground-secondary: #ffffffd9;
}
}
}
</style></head>
<body>
<script>
document.body.dataset.theme = localStorage.getItem("theme") || "auto";
</script>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-toc" viewBox="0 0 24 24">
<title>Contents</title>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024">
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"/>
</svg>
</symbol>
<symbol id="svg-menu" viewBox="0 0 24 24">
<title>Menu</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</symbol>
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</symbol>
<symbol id="svg-sun" viewBox="0 0 24 24">
<title>Light mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather-sun">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</symbol>
<symbol id="svg-moon" viewBox="0 0 24 24">
<title>Dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-moon">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
</svg>
</symbol>
<symbol id="svg-sun-with-moon" viewBox="0 0 24 24">
<title>Auto light/dark, in light mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="icon-custom-derived-from-feather-sun-and-tabler-moon">
<path style="opacity: 50%" d="M 5.411 14.504 C 5.471 14.504 5.532 14.504 5.591 14.504 C 3.639 16.319 4.383 19.569 6.931 20.352 C 7.693 20.586 8.512 20.551 9.25 20.252 C 8.023 23.207 4.056 23.725 2.11 21.184 C 0.166 18.642 1.702 14.949 4.874 14.536 C 5.051 14.512 5.231 14.5 5.411 14.5 L 5.411 14.504 Z"/>
<line x1="14.5" y1="3.25" x2="14.5" y2="1.25"/>
<line x1="14.5" y1="15.85" x2="14.5" y2="17.85"/>
<line x1="10.044" y1="5.094" x2="8.63" y2="3.68"/>
<line x1="19" y1="14.05" x2="20.414" y2="15.464"/>
<line x1="8.2" y1="9.55" x2="6.2" y2="9.55"/>
<line x1="20.8" y1="9.55" x2="22.8" y2="9.55"/>
<line x1="10.044" y1="14.006" x2="8.63" y2="15.42"/>
<line x1="19" y1="5.05" x2="20.414" y2="3.636"/>
<circle cx="14.5" cy="9.55" r="3.6"/>
</svg>
</symbol>
<symbol id="svg-moon-with-sun" viewBox="0 0 24 24">
<title>Auto light/dark, in dark mode</title>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="icon-custom-derived-from-feather-sun-and-tabler-moon">
<path d="M 8.282 7.007 C 8.385 7.007 8.494 7.007 8.595 7.007 C 5.18 10.184 6.481 15.869 10.942 17.24 C 12.275 17.648 13.706 17.589 15 17.066 C 12.851 22.236 5.91 23.143 2.505 18.696 C -0.897 14.249 1.791 7.786 7.342 7.063 C 7.652 7.021 7.965 7 8.282 7 L 8.282 7.007 Z"/>
<line style="opacity: 50%" x1="18" y1="3.705" x2="18" y2="2.5"/>
<line style="opacity: 50%" x1="18" y1="11.295" x2="18" y2="12.5"/>
<line style="opacity: 50%" x1="15.316" y1="4.816" x2="14.464" y2="3.964"/>
<line style="opacity: 50%" x1="20.711" y1="10.212" x2="21.563" y2="11.063"/>
<line style="opacity: 50%" x1="14.205" y1="7.5" x2="13.001" y2="7.5"/>
<line style="opacity: 50%" x1="21.795" y1="7.5" x2="23" y2="7.5"/>
<line style="opacity: 50%" x1="15.316" y1="10.184" x2="14.464" y2="11.036"/>
<line style="opacity: 50%" x1="20.711" y1="4.789" x2="21.563" y2="3.937"/>
<circle style="opacity: 50%" cx="18" cy="7.5" r="2.169"/>
</svg>
</symbol>
<symbol id="svg-pencil" viewBox="0 0 24 24">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-pencil-code">
<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
<path d="M13.5 6.5l4 4" />
<path d="M20 21l2 -2l-2 -2" />
<path d="M17 17l-2 2l2 2" />
</svg>
</symbol>
<symbol id="svg-eye" viewBox="0 0 24 24">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-eye-code">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path
d="M11.11 17.958c-3.209 -.307 -5.91 -2.293 -8.11 -5.958c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6c-.21 .352 -.427 .688 -.647 1.008" />
<path d="M20 21l2 -2l-2 -2" />
<path d="M17 17l-2 2l2 2" />
</svg>
</symbol>
</svg>
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
<label class="overlay sidebar-overlay" for="__navigation">
<div class="visually-hidden">Hide navigation sidebar</div>
</label>
<label class="overlay toc-overlay" for="__toc">
<div class="visually-hidden">Hide table of contents sidebar</div>
</label>
<a class="skip-to-content muted-link" href="#furo-main-content">Skip to content</a>
<div class="page">
<header class="mobile-header">
<div class="header-left">
<label class="nav-overlay-icon" for="__navigation">
<div class="visually-hidden">Toggle site navigation sidebar</div>
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
</label>
</div>
<div class="header-center">
<a href="index.html"><div class="brand">DelphiVCL Documentation</div></a>
</div>
<div class="header-right">
<div class="theme-toggle-container theme-toggle-header">
<button class="theme-toggle">
<div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>
<svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"></use></svg>
<svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"></use></svg>
<svg class="theme-icon-when-dark"><use href="#svg-moon"></use></svg>
<svg class="theme-icon-when-light"><use href="#svg-sun"></use></svg>
</button>
</div>
<label class="toc-overlay-icon toc-header-icon" for="__toc">
<div class="visually-hidden">Toggle table of contents sidebar</div>
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
</label>
</div>
</header>
<aside class="sidebar-drawer">
<div class="sidebar-container">
<div class="sidebar-sticky"><a class="sidebar-brand" href="index.html">
<div class="sidebar-logo-container">
<img class="sidebar-logo only-light" src="_static/DelphiVCL4Python-sidebar.svg" alt="Light Logo"/>
<img class="sidebar-logo only-dark" src="_static/DelphiVCL4Python-sidebar-dark.svg" alt="Dark Logo"/>
</div>
<span class="sidebar-brand-text">DelphiVCL Documentation</span>
</a><form class="sidebar-search-container" method="get" action="search.html" role="search">
<input class="sidebar-search" placeholder="Search" name="q" aria-label="Search">
<input type="hidden" name="check_keywords" value="yes">
<input type="hidden" name="area" value="default">
</form>
<div id="searchbox"></div><div class="sidebar-scroll"><div class="sidebar-tree">
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="installation.html">Installation</a></li>
<li class="toctree-l1 current has-children"><a class="reference internal" href="tutorials_guides.html">Tutorials & Guides</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" role="switch" type="checkbox"/><label for="toctree-checkbox-1"><div class="visually-hidden">Toggle navigation of Tutorials & Guides</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
<li class="toctree-l2 current current-page"><a class="current reference internal" href="#">Quickstart</a></li>
<li class="toctree-l2"><a class="reference internal" href="examples.html">Example Gallery</a></li>
<li class="toctree-l2"><a class="reference internal" href="faq.html">Frequently Asked Questions</a></li>
</ul>
</li>
<li class="toctree-l1 has-children"><a class="reference internal" href="reference.html">Reference Manual</a><input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" role="switch" type="checkbox"/><label for="toctree-checkbox-2"><div class="visually-hidden">Toggle navigation of Reference Manual</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2 has-children"><a class="reference internal" href="reference_index/delphivcl_classes.html">DelphiVCL</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" role="switch" type="checkbox"/><label for="toctree-checkbox-3"><div class="visually-hidden">Toggle navigation of DelphiVCL</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Object.html">Object</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.StyleManager.html">StyleManager</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Stream.html">Stream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Monitor.html">Monitor</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomStyleServices.html">CustomStyleServices</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Persistent.html">Persistent</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Strings.html">Strings</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Picture.html">Picture</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Collection.html">Collection</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Canvas.html">Canvas</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Graphic.html">Graphic</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Bitmap.html">Bitmap</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Icon.html">Icon</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Metafile.html">Metafile</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Component.html">Component</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Timer.html">Timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.OpenDialog.html">OpenDialog</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.MenuItem.html">MenuItem</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Menu.html">Menu</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.FileOpenDialog.html">FileOpenDialog</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ContainedActionList.html">ContainedActionList</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Control.html">Control</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomBindingsList.html">CustomBindingsList</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BasicBindComponent.html">BasicBindComponent</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BasicAction.html">BasicAction</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BaseBindScopeComponent.html">BaseBindScopeComponent</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BaseLinkingBindSource.html">BaseLinkingBindSource</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ContainedAction.html">ContainedAction</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BindingsList.html">BindingsList</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BoundLabel.html">BoundLabel</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomControl.html">CustomControl</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Label.html">Label</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.WinControl.html">WinControl</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomActionList.html">CustomActionList</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.MainMenu.html">MainMenu</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.PopupMenu.html">PopupMenu</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.SaveDialog.html">SaveDialog</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ActionList.html">ActionList</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.MediaPlayer.html">MediaPlayer</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomToggleSwitch.html">CustomToggleSwitch</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomActivityIndicator.html">CustomActivityIndicator</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomAction.html">CustomAction</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Action.html">Action</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BaseObjectBindSource.html">BaseObjectBindSource</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomPrototypeBindSource.html">CustomPrototypeBindSource</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ActivityIndicator.html">ActivityIndicator</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ToggleSwitch.html">ToggleSwitch</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.PrototypeBindSource.html">PrototypeBindSource</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ContainedBindComponent.html">ContainedBindComponent</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BindComponentDelegate.html">BindComponentDelegate</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.LinkPropertyToFieldDelegate.html">LinkPropertyToFieldDelegate</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.LinkControlDelegate.html">LinkControlDelegate</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomLinkPropertyToField.html">CustomLinkPropertyToField</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.LinkControlToFieldDelegate.html">LinkControlToFieldDelegate</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.LinkPropertyToField.html">LinkPropertyToField</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomLinkControlToField.html">CustomLinkControlToField</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomLinkListControlToField.html">CustomLinkListControlToField</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.LinkControlToField.html">LinkControlToField</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.LinkListControlToField.html">LinkListControlToField</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BitBtn.html">BitBtn</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Button.html">Button</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CheckBox.html">CheckBox</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ColorBox.html">ColorBox</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ComboBox.html">ComboBox</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ControlBar.html">ControlBar</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomGrid.html">CustomGrid</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomEdit.html">CustomEdit</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomForm.html">CustomForm</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomStatusBar.html">CustomStatusBar</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomTabControl.html">CustomTabControl</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.DateTimePicker.html">DateTimePicker</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.GroupBox.html">GroupBox</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Header.html">Header</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.LabeledEdit.html">LabeledEdit</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ListBox.html">ListBox</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Notebook.html">Notebook</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Page.html">Page</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.PageControl.html">PageControl</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Panel.html">Panel</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.RadioButton.html">RadioButton</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.RadioGroup.html">RadioGroup</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ScrollBar.html">ScrollBar</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.SpinButton.html">SpinButton</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.StaticText.html">StaticText</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.TabSheet.html">TabSheet</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ToolBar.html">ToolBar</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.TrackBar.html">TrackBar</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomDrawGrid.html">CustomDrawGrid</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomMemo.html">CustomMemo</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomNumberBox.html">CustomNumberBox</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Edit.html">Edit</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.SpinEdit.html">SpinEdit</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Form.html">Form</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.StatusBar.html">StatusBar</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.TabControl.html">TabControl</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.DrawGrid.html">DrawGrid</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.Memo.html">Memo</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.NumberBox.html">NumberBox</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.StringGrid.html">StringGrid</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.CustomMemoryStream.html">CustomMemoryStream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.HandleStream.html">HandleStream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.MemoryStream.html">MemoryStream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.ResourceStream.html">ResourceStream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.FileStream.html">FileStream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BytesStream.html">BytesStream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.BufferedFileStream.html">BufferedFileStream</a></li>
<li class="toctree-l3"><a class="reference internal" href="reference/delphivcl.StringStream.html">StringStream</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 has-children"><a class="reference internal" href="changelog.html">Changelog</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" role="switch" type="checkbox"/><label for="toctree-checkbox-4"><div class="visually-hidden">Toggle navigation of Changelog</div><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
<li class="toctree-l2"><a class="reference internal" href="changelog/0.1.40-changelog.html">v0.1.40</a></li>
<li class="toctree-l2"><a class="reference internal" href="changelog/1.0.0-changelog.html">v1.0.0</a></li>
<li class="toctree-l2"><a class="reference internal" href="changelog/1.0.1-changelog.html">v1.0.1</a></li>
<li class="toctree-l2"><a class="reference internal" href="changelog/1.0.2-changelog.html">v1.0.2</a></li>
<li class="toctree-l2"><a class="reference internal" href="changelog/1.0.3-changelog.html">v1.0.3</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="contributing.html">Contributing</a></li>
</ul>
</div>
</div>
</div>
</div>
</aside>
<div class="main">
<div class="content">
<div class="article-container">
<a href="#" class="back-to-top muted-link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"></path>
</svg>
<span>Back to top</span>
</a>
<div class="content-icon-container">
<div class="theme-toggle-container theme-toggle-content">
<button class="theme-toggle">
<div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>
<svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"></use></svg>
<svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"></use></svg>
<svg class="theme-icon-when-dark"><use href="#svg-moon"></use></svg>
<svg class="theme-icon-when-light"><use href="#svg-sun"></use></svg>
</button>
</div>
<label class="toc-overlay-icon toc-content-icon" for="__toc">
<div class="visually-hidden">Toggle table of contents sidebar</div>
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
</label>
</div>
<article role="main" id="furo-main-content">
<section id="quickstart">
<h1>Quickstart<a class="headerlink" href="#quickstart" title="Link to this heading">¶</a></h1>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>Before proceeding, install DelphiVCL and make sure it’s running properly by
following the directions provided in <a class="reference internal" href="installation.html"><span class="doc">Installation</span></a>.</p>
</div>
<p>Let’s check for a few available classes, functions, and objects.</p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>>>><span class="w"> </span>delphivcl.Button
<class<span class="w"> </span><span class="s1">'Button'</span>>
>>><span class="w"> </span>delphivcl.Form
<class<span class="w"> </span><span class="s1">'Form'</span>>
>>><span class="w"> </span>delphivcl.Application
<Delphi<span class="w"> </span>object<span class="w"> </span>of<span class="w"> </span><span class="nb">type</span><span class="w"> </span>TApplication<span class="w"> </span>at<span class="w"> </span>557897D1F5C2>
</pre></div>
</div>
<p>We need to create instances/objects for classes like <a class="reference internal" href="reference/delphivcl.Button.html"><span class="doc">Button</span></a> and
<a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a>. There are many other classes and functions but only one object:
<code class="docutils literal notranslate"><span class="pre">Application</span></code> instance, which is an existing singleton instance. <code class="docutils literal notranslate"><span class="pre">Application</span></code> is the source
of every GUI application that we create.</p>
<p>We’re compiling three guides that explain the basics at a level where you can get started with
the package to build some applications.</p>
<section id="vcl-guide-1-the-simplest-app">
<h2>VCL Guide 1: The Simplest App<a class="headerlink" href="#vcl-guide-1-the-simplest-app" title="Link to this heading">¶</a></h2>
<p>Let’s now create a simple GUI application. The code for it is:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span><span class="w"> </span><span class="nn">delphivcl</span><span class="w"> </span><span class="kn">import</span> <span class="o">*</span>
<span class="c1"># Initialize the GUI Application</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Initialize</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Title</span> <span class="o">=</span> <span class="s2">"Hello DelphiVCL"</span>
<span class="c1"># Create the Form - GUI Window</span>
<span class="n">app</span> <span class="o">=</span> <span class="n">Form</span><span class="p">(</span><span class="n">Application</span><span class="p">)</span>
<span class="c1"># Set the Window's Caption on Title bar</span>
<span class="n">app</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Welcome"</span><span class="p">)</span>
<span class="n">app</span><span class="o">.</span><span class="n">Show</span><span class="p">()</span>
<span class="n">FreeConsole</span><span class="p">()</span>
<span class="c1"># Run the GUI application</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Run</span><span class="p">()</span>
<span class="c1"># Destroy the GUI application as we close it</span>
<span class="n">app</span><span class="o">.</span><span class="n">Destroy</span><span class="p">()</span>
</pre></div>
</div>
<p>Using the above code, we just create an empty GUI app. Please save the above code and
run it to see the following output:</p>
<img alt="_images/simple_quickstart.png" src="_images/simple_quickstart.png" />
<p>Let’s explore and understand the functionality of the code:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span><span class="w"> </span><span class="nn">delphivcl</span><span class="w"> </span><span class="kn">import</span> <span class="o">*</span>
<span class="c1"># Initialize the GUI Application</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Initialize</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Title</span> <span class="o">=</span> <span class="s2">"Hello DelphiVCL"</span>
</pre></div>
</div>
<p>At first, we import everything from <code class="docutils literal notranslate"><span class="pre">delphivcl</span></code>. Then, we initialized the GUI application and
set a title for it. Later, we create the GUI application window using the following code:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">app</span> <span class="o">=</span> <span class="n">Form</span><span class="p">(</span><span class="n">Application</span><span class="p">)</span>
<span class="c1"># Set the Window's Caption on Title bar</span>
<span class="n">app</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Welcome"</span><span class="p">)</span>
</pre></div>
</div>
<p>We can to refer all the classes as part of the import as components. The <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a>
is a special component and is different from all other components that create the GUI window and
contain all other components. We instantiated the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> with <code class="docutils literal notranslate"><span class="pre">Application</span></code>
as a parameter in the above code and assigned it to the <code class="docutils literal notranslate"><span class="pre">app</span></code> object. All the components, including
<a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a>, has a method <code class="docutils literal notranslate"><span class="pre">setProps()</span></code> to set their properties. Here we’ve set
the name that appears on the title bar of the Form/GUI window using the <code class="docutils literal notranslate"><span class="pre">Caption</span></code> property.</p>
<p>Let’s look at the following few lines of the code;</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">app</span><span class="o">.</span><span class="n">Show</span><span class="p">()</span>
<span class="n">FreeConsole</span><span class="p">()</span>
<span class="c1"># Run the GUI application</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Run</span><span class="p">()</span>
<span class="c1"># Destroy the GUI application as we close it</span>
<span class="n">app</span><span class="o">.</span><span class="n">Destroy</span><span class="p">()</span>
</pre></div>
</div>
<p>As we created the application and set its properties, we shall show it on the screen using the
<code class="docutils literal notranslate"><span class="pre">app.show()</span></code> code snippet. GUI applications run in interaction with the command window (console).
To make the GUI perform better without lags, we use <code class="docutils literal notranslate"><span class="pre">FreeConsole()</span></code> to give primary control to
the GUI interface. <code class="docutils literal notranslate"><span class="pre">Application.Run()</span></code> starts the GUI interaction loop between the GUI and the
user of the GUI application. When we close the GUI application, <code class="docutils literal notranslate"><span class="pre">app.Destroy()</span></code> takes care of
not crashing it.</p>
</section>
<section id="vcl-guide-2-the-helloworld-app">
<h2>VCL Guide 2: The HelloWorld App<a class="headerlink" href="#vcl-guide-2-the-helloworld-app" title="Link to this heading">¶</a></h2>
<p>We discussed the most basic ideas about the <code class="docutils literal notranslate"><span class="pre">delphivcl</span></code> library in the first simplest quickstart.
We created an empty GUI application without displaying anything on the Form/GUI window. Also, we
didn’t use any object-oriented approach to create the GUI application. So, let’s expand on those
ideas and develop an object-oriented version of that and display a text message.</p>
<p>First, let’s look at the code to achieve our idea. You might be able to guess what the below code
does as you understood the basics from the first guide.</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span><span class="w"> </span><span class="nn">delphivcl</span><span class="w"> </span><span class="kn">import</span> <span class="o">*</span>
<span class="k">class</span><span class="w"> </span><span class="nc">GUIApp</span><span class="p">(</span><span class="n">Form</span><span class="p">):</span>
<span class="k">def</span><span class="w"> </span><span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">owner</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Welcome"</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">lblHello</span> <span class="o">=</span> <span class="n">Label</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">lblHello</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span>
<span class="n">Parent</span><span class="o">=</span><span class="bp">self</span><span class="p">,</span>
<span class="n">Caption</span><span class="o">=</span><span class="s2">"Hello DelphiVCL for Python"</span><span class="p">)</span>
<span class="k">def</span><span class="w"> </span><span class="nf">main</span><span class="p">():</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Initialize</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Title</span> <span class="o">=</span> <span class="s2">"Hello DelphiVCL"</span>
<span class="n">app</span> <span class="o">=</span> <span class="n">GUIApp</span><span class="p">(</span><span class="n">Application</span><span class="p">)</span>
<span class="n">app</span><span class="o">.</span><span class="n">Show</span><span class="p">()</span>
<span class="n">FreeConsole</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Run</span><span class="p">()</span>
<span class="n">app</span><span class="o">.</span><span class="n">Destroy</span><span class="p">()</span>
<span class="n">main</span><span class="p">()</span>
</pre></div>
</div>
<img alt="_images/hello_world_quickstart.png" src="_images/hello_world_quickstart.png" />
<p>In the following line of the code:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="n">app</span> <span class="o">=</span> <span class="n">GUIApp</span><span class="p">(</span><span class="n">Application</span><span class="p">)</span>
</pre></div>
</div>
<p>Instead of instantiating the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> directly, we instantiated a class -
<code class="docutils literal notranslate"><span class="pre">GUIApp</span></code> that inherited the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> class. Let’s investigate the
code in the <code class="docutils literal notranslate"><span class="pre">GUIApp</span></code> class:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="k">class</span><span class="w"> </span><span class="nc">GUIApp</span><span class="p">(</span><span class="n">Form</span><span class="p">):</span>
<span class="k">def</span><span class="w"> </span><span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">owner</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Welcome"</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">lblHello</span> <span class="o">=</span> <span class="n">Label</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">lblHello</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span>
<span class="n">Parent</span><span class="o">=</span><span class="bp">self</span><span class="p">,</span>
<span class="n">Caption</span><span class="o">=</span><span class="s2">"Hello DelphiVCL for Python"</span><span class="p">)</span>
</pre></div>
</div>
<p>As we instantiated the <code class="docutils literal notranslate"><span class="pre">GUIApp</span></code> using <code class="docutils literal notranslate"><span class="pre">app</span> <span class="pre">=</span> <span class="pre">GUIApp(Application)</span></code>, the <code class="docutils literal notranslate"><span class="pre">owner</span></code> argument gets
assigned with the <code class="docutils literal notranslate"><span class="pre">Application</span></code> object. After that, <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> uses the
<code class="docutils literal notranslate"><span class="pre">owner</span></code> in its initialization and creates an empty Form/GUI window. This <code class="docutils literal notranslate"><span class="pre">owner</span></code> variable can
be of any other name as it’s just a placeholder of the <code class="docutils literal notranslate"><span class="pre">Application</span></code> object. In the first line
of the <code class="docutils literal notranslate"><span class="pre">GUIApp</span></code> initialization, we’ve set the <code class="docutils literal notranslate"><span class="pre">Caption</span></code> property of the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a>.</p>
<p>Then we instantiated the <a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a> component/class with the instance/object
of the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> as its parameter using the <code class="docutils literal notranslate"><span class="pre">self.lblHello</span> <span class="pre">=</span> <span class="pre">Label(self)</span></code>
code snippet. We use <a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a> to display any single-line text messages.
Every component other than <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> will have a parent and is set using
the <code class="docutils literal notranslate"><span class="pre">Parent</span></code> property. The parent holds the child component in it.</p>
<p>In our code, we’re setting <a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a>’s parent as <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a>
using the <code class="docutils literal notranslate"><span class="pre">Parent=self</span></code>. So, now the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> object - <code class="docutils literal notranslate"><span class="pre">app</span></code> holds the
<a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a> object - <code class="docutils literal notranslate"><span class="pre">lblHello</span></code>. Next, the text of the <a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a>
is set using its <code class="docutils literal notranslate"><span class="pre">Caption</span></code> property. So, the Form/GUI window gets populated by a text message - <strong>Hello
DelphiVCL for Python</strong>.</p>
<p>We used all the default positions and sizes of the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> and <a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a>
and didn’t handle any events in this guide. However, we shall implement them and introduce some new
components in the following advanced quick start guide.</p>
</section>
<section id="vcl-guide-3-the-todo-app">
<h2>VCL Guide 3: The ToDo App<a class="headerlink" href="#vcl-guide-3-the-todo-app" title="Link to this heading">¶</a></h2>
<p>Let us create a TODO Task Application to understand some components of GUI Applications.</p>
<p>Let’s take a look at the code to achieve that:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="kn">from</span><span class="w"> </span><span class="nn">delphivcl</span><span class="w"> </span><span class="kn">import</span> <span class="o">*</span>
<span class="k">class</span><span class="w"> </span><span class="nc">TodoApp</span><span class="p">(</span><span class="n">Form</span><span class="p">):</span>
<span class="k">def</span><span class="w"> </span><span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">Owner</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"A TODO GUI Application"</span>
<span class="bp">self</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">700</span><span class="p">,</span> <span class="mi">500</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_lbl</span> <span class="o">=</span> <span class="n">Label</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_lbl</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Parent</span><span class="o">=</span><span class="bp">self</span><span class="p">,</span> <span class="n">Caption</span><span class="o">=</span><span class="s2">"Enter your TODO task"</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_lbl</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">125</span><span class="p">,</span> <span class="mi">25</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span> <span class="o">=</span> <span class="n">Edit</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Parent</span><span class="o">=</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">250</span><span class="p">,</span> <span class="mi">20</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span> <span class="o">=</span> <span class="n">Button</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">Parent</span> <span class="o">=</span> <span class="bp">self</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">150</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Add Task"</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">OnClick</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">__add_task_on_click</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span> <span class="o">=</span> <span class="n">Button</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Parent</span> <span class="o">=</span> <span class="bp">self</span><span class="p">,</span> <span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Delete Task"</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">150</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span><span class="o">.</span><span class="n">OnClick</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">__del_task_on_click</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span> <span class="o">=</span> <span class="n">ListBox</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">Parent</span> <span class="o">=</span> <span class="bp">self</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">300</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="mi">350</span><span class="p">)</span>
<span class="k">def</span><span class="w"> </span><span class="nf">__add_task_on_click</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">Sender</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">Items</span><span class="o">.</span><span class="n">Add</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">Text</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">Text</span> <span class="o">=</span> <span class="s2">""</span>
<span class="k">def</span><span class="w"> </span><span class="nf">__del_task_on_click</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">Sender</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">Items</span><span class="o">.</span><span class="n">Delete</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
<span class="k">def</span><span class="w"> </span><span class="nf">main</span><span class="p">():</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Initialize</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Title</span> <span class="o">=</span> <span class="s2">"TODO App"</span>
<span class="n">app</span> <span class="o">=</span> <span class="n">TodoApp</span><span class="p">(</span><span class="n">Application</span><span class="p">)</span>
<span class="n">app</span><span class="o">.</span><span class="n">Show</span><span class="p">()</span>
<span class="n">FreeConsole</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Run</span><span class="p">()</span>
<span class="n">app</span><span class="o">.</span><span class="n">Destroy</span><span class="p">()</span>
<span class="n">main</span><span class="p">()</span>
</pre></div>
</div>
<p>As you save and run the above code, you should get the following GUI as a result:</p>
<img alt="_images/todo_quickstart_1.png" src="_images/todo_quickstart_1.png" />
<p>Let’s get to the details of what our code does behind the scenes. First, take a look at
the <code class="docutils literal notranslate"><span class="pre">main()</span></code> function:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="k">def</span><span class="w"> </span><span class="nf">main</span><span class="p">():</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Initialize</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Title</span> <span class="o">=</span> <span class="s2">"TODO App"</span>
</pre></div>
</div>
<p>In the above, <code class="docutils literal notranslate"><span class="pre">Application</span></code> instance is part of the <code class="docutils literal notranslate"><span class="pre">delphivcl</span></code> library that takes
control of the GUI applications that we create. First line initializes the application,
and the second line sets a title to the application.</p>
<p>Let’s look at other lines of code of the <code class="docutils literal notranslate"><span class="pre">main()</span></code> function;</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="o">...</span>
<span class="n">app</span> <span class="o">=</span> <span class="n">TodoApp</span><span class="p">(</span><span class="n">Application</span><span class="p">)</span>
<span class="n">app</span><span class="o">.</span><span class="n">Show</span><span class="p">()</span>
<span class="n">FreeConsole</span><span class="p">()</span>
<span class="n">Application</span><span class="o">.</span><span class="n">Run</span><span class="p">()</span>
<span class="n">app</span><span class="o">.</span><span class="n">Destroy</span><span class="p">()</span>
</pre></div>
</div>
<p>Above, We instantiated the <code class="docutils literal notranslate"><span class="pre">TodoApp</span></code> class with <code class="docutils literal notranslate"><span class="pre">Application</span></code> as the <code class="docutils literal notranslate"><span class="pre">Owner</span></code>. We
can show the GUI application on the screen using the <code class="docutils literal notranslate"><span class="pre">app.show()</span></code> method. GUI applications
run in interaction with the command window (console). To make the GUI perform better without
lags, we use <code class="docutils literal notranslate"><span class="pre">FreeConsole()</span></code> to give primary control to the GUI interface.
<code class="docutils literal notranslate"><span class="pre">Application.Run()</span></code> starts the GUI interaction loop between the GUI and the user of the
GUI application. When we close the GUI application, <code class="docutils literal notranslate"><span class="pre">app.Destroy()</span></code> takes care of not
crashing it.</p>
<p>As we instantiated the GUI using <code class="docutils literal notranslate"><span class="pre">app</span> <span class="pre">=</span> <span class="pre">TodoApp(Application)</span></code>, the following code runs:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="k">class</span><span class="w"> </span><span class="nc">TodoApp</span><span class="p">(</span><span class="n">Form</span><span class="p">):</span>
<span class="k">def</span><span class="w"> </span><span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">Owner</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"A TODO GUI Application"</span>
<span class="bp">self</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">700</span><span class="p">,</span> <span class="mi">500</span><span class="p">)</span>
</pre></div>
</div>
<p>We inherit the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> class from the <code class="docutils literal notranslate"><span class="pre">delphivcl</span></code> library to create
our GUI. In DelphiVCL, all the GUIs are treated as forms. The name of the GUI pop-up window
is set using the <code class="docutils literal notranslate"><span class="pre">Caption</span></code> property/attribute. The line <code class="docutils literal notranslate"><span class="pre">self.SetBounds(100,</span> <span class="pre">100,</span> <span class="pre">700,</span> <span class="pre">500)</span></code>
is used to set:</p>
<ul class="simple">
<li><p>GUI window’s origin position comparable to screen’s origin position = (100, 100)</p></li>
<li><p>length of the GUI window = 700 pixels</p></li>
<li><p>width of the GUI window = 500 pixels.</p></li>
</ul>
<p>The upper left corner of the screen is treated as the <code class="docutils literal notranslate"><span class="pre">(0,</span> <span class="pre">0)</span></code> coordinate with the left side
as positive width and down as positive height. We can visualize it as shown below:</p>
<img alt="_images/todo_quickstart_2.png" src="_images/todo_quickstart_2.png" />
<p>Let’s look at the following few lines of code:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="o">...</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_lbl</span> <span class="o">=</span> <span class="n">Label</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_lbl</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Parent</span><span class="o">=</span><span class="bp">self</span><span class="p">,</span> <span class="n">Caption</span><span class="o">=</span><span class="s2">"Enter your TODO task"</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_lbl</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">125</span><span class="p">,</span> <span class="mi">25</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span> <span class="o">=</span> <span class="n">Edit</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">Parent</span> <span class="o">=</span> <span class="bp">self</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">250</span><span class="p">,</span> <span class="mi">20</span><span class="p">)</span>
</pre></div>
</div>
<p>Above the first 3 lines of code will create the text - <strong>Enter your TODO task</strong> that you see on
the GUI app. It does so by instantiating the <a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a> class of the
<code class="docutils literal notranslate"><span class="pre">delphivcl</span></code> library. Every component (<a class="reference internal" href="reference/delphivcl.Label.html"><span class="doc">Label</span></a> here) has a <code class="docutils literal notranslate"><span class="pre">SetProps()</span></code>
method to set its properties. Every component will have a scope that is set using its <code class="docutils literal notranslate"><span class="pre">Parent</span></code>
property/attribute, which is set to <code class="docutils literal notranslate"><span class="pre">self</span></code> here. The <code class="docutils literal notranslate"><span class="pre">Caption</span></code> property sets the string of the
text label. Similar to GUI app/Form, every component needs to be placed inside the GUI/Form using
the <code class="docutils literal notranslate"><span class="pre">SetBounds()</span></code> method. For components, the top left corner of their parent (GUI window here)
is considered as the origin - <code class="docutils literal notranslate"><span class="pre">(0,</span> <span class="pre">0).</span></code></p>
<p>The next 3 lines of code create the edit box using the <a class="reference internal" href="reference/delphivcl.Edit.html"><span class="doc">Edit</span></a> class.
We can also set the properties/attributes directly without using the <code class="docutils literal notranslate"><span class="pre">SetProps()</span></code> method like
we did here using the code <code class="docutils literal notranslate"><span class="pre">self.task_text_box.Parent</span> <span class="pre">=</span> <span class="pre">self</span></code>. With the Form/GUI window as
the parent of the Edit box, we can visualize its position and size as shown in the below figure.
The width of the Edit box is automatically set to the default value.</p>
<img alt="_images/todo_quickstart_3.png" src="_images/todo_quickstart_3.png" />
<p>Let’s look at next few lines of code:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="o">...</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span> <span class="o">=</span> <span class="n">Button</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">Parent</span> <span class="o">=</span> <span class="bp">self</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">150</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span><span class="mi">100</span><span class="p">,</span><span class="mi">30</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Add Task"</span>
<span class="bp">self</span><span class="o">.</span><span class="n">add_task_btn</span><span class="o">.</span><span class="n">OnClick</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">__add_task_on_click</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span> <span class="o">=</span> <span class="n">Button</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span><span class="o">.</span><span class="n">SetProps</span><span class="p">(</span><span class="n">Parent</span> <span class="o">=</span> <span class="bp">self</span><span class="p">,</span> <span class="n">Caption</span> <span class="o">=</span> <span class="s2">"Delete Task"</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">150</span><span class="p">,</span><span class="mi">120</span><span class="p">,</span><span class="mi">100</span><span class="p">,</span><span class="mi">30</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">del_task_btn</span><span class="o">.</span><span class="n">OnClick</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">__del_task_on_click</span>
</pre></div>
</div>
<p>Above lines of code create 2 Buttons - <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Task</span></code> and <code class="docutils literal notranslate"><span class="pre">Delete</span> <span class="pre">Task</span></code> using the
<a class="reference internal" href="reference/delphivcl.Button.html"><span class="doc">Button</span></a> instance of the <code class="docutils literal notranslate"><span class="pre">delphivcl</span></code> package. For the buttons, one extra
thing you’ll find is an event handling using <code class="docutils literal notranslate"><span class="pre">self.add_task_btn.OnClick</span> <span class="pre">=</span> <span class="pre">self.__add_task_on_click</span></code>
and <code class="docutils literal notranslate"><span class="pre">self.del_task_btn.OnClick</span> <span class="pre">=</span> <span class="pre">self.__del_task_on_click</span></code> for <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Task</span></code> and <code class="docutils literal notranslate"><span class="pre">Delete</span> <span class="pre">Task</span></code>
buttons respectively. We shall look after this in just a while.</p>
<p>Let’s look at the next few lines of code:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="o">...</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span> <span class="o">=</span> <span class="n">ListBox</span><span class="p">(</span><span class="bp">self</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">Parent</span> <span class="o">=</span> <span class="bp">self</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">SetBounds</span><span class="p">(</span><span class="mi">300</span><span class="p">,</span><span class="mi">50</span><span class="p">,</span><span class="mi">300</span><span class="p">,</span><span class="mi">350</span><span class="p">)</span>
</pre></div>
</div>
<p>In the above lines of code, we created a list box using the <a class="reference internal" href="reference/delphivcl.ListBox.html"><span class="doc">ListBox</span></a>
instance. Let’s now look at the event handling methods to <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Task</span></code> and <code class="docutils literal notranslate"><span class="pre">Delete</span> <span class="pre">Task</span></code>
buttons:</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="o">...</span>
<span class="k">def</span><span class="w"> </span><span class="nf">__add_task_on_click</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">Sender</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">Items</span><span class="o">.</span><span class="n">Add</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">Text</span><span class="p">)</span>
<span class="bp">self</span><span class="o">.</span><span class="n">task_text_box</span><span class="o">.</span><span class="n">Text</span> <span class="o">=</span> <span class="s2">""</span>
<span class="k">def</span><span class="w"> </span><span class="nf">__del_task_on_click</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">Sender</span><span class="p">):</span>
<span class="bp">self</span><span class="o">.</span><span class="n">list_of_tasks</span><span class="o">.</span><span class="n">Items</span><span class="o">.</span><span class="n">Delete</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
</pre></div>
</div>
<p>For all the events other than <code class="docutils literal notranslate"><span class="pre">OnClick</span></code>, the <a class="reference internal" href="reference/delphivcl.Form.html"><span class="doc">Form</span></a> automatically
sends a single argument (<code class="docutils literal notranslate"><span class="pre">Sender</span></code> here - this can be any name). We can add a task to the
list box by typing anything into the text box and pressing on <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Task</span></code> button. DelphiVCL
library based GUIs support tab controls too, where you can also navigate from one component
to another using the tab. So, you can press the Tab key on the keyboard, and as <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Task</span></code>
button gets highlighted, you can press Enter/Return key to fire its event. We add text from
the text box to the list box using <code class="docutils literal notranslate"><span class="pre">Add()</span></code> method under <code class="docutils literal notranslate"><span class="pre">Items</span></code> under
<a class="reference internal" href="reference/delphivcl.ListBox.html"><span class="doc">ListBox</span></a> instance. We delete the earlier added events on a first-come,
first-serve basis by pressing the <code class="docutils literal notranslate"><span class="pre">Delete</span> <span class="pre">Task</span></code> button.</p>
<section id="you-re-done">
<h3>You’re done!<a class="headerlink" href="#you-re-done" title="Link to this heading">¶</a></h3>
<p>With a working installation of DelphiVCL and these sample projects under your belt,
you’re ready to start creating applications of your own.</p>
</section>
</section>
</section>
</article>
</div>
<footer>
<div class="related-pages">
<a class="next-page" href="examples.html">
<div class="page-info">
<div class="context">
<span>Next</span>
</div>
<div class="title">Example Gallery</div>
</div>
<svg class="furo-related-icon"><use href="#svg-arrow-right"></use></svg>
</a>
<a class="prev-page" href="tutorials_guides.html">
<svg class="furo-related-icon"><use href="#svg-arrow-right"></use></svg>
<div class="page-info">
<div class="context">
<span>Previous</span>
</div>
<div class="title">Tutorials & Guides</div>
</div>
</a>
</div>
<div class="bottom-of-page">
<div class="left-details">
<div class="copyright">
Copyright © 2020-2023, Embarcadero Python Dev Team
</div>
Made with <a href="https://www.sphinx-doc.org/">Sphinx</a> and <a class="muted-link" href="https://pradyunsg.me">@pradyunsg</a>'s
<a href="https://github.com/pradyunsg/furo">Furo</a>
</div>
<div class="right-details">
</div>
</div>
</footer>
</div>
<aside class="toc-drawer">
<div class="toc-sticky toc-scroll">
<div class="toc-title-container">
<span class="toc-title">
On this page
</span>
</div>
<div class="toc-tree-container">
<div class="toc-tree">
<ul>
<li><a class="reference internal" href="#">Quickstart</a><ul>
<li><a class="reference internal" href="#vcl-guide-1-the-simplest-app">VCL Guide 1: The Simplest App</a></li>
<li><a class="reference internal" href="#vcl-guide-2-the-helloworld-app">VCL Guide 2: The HelloWorld App</a></li>
<li><a class="reference internal" href="#vcl-guide-3-the-todo-app">VCL Guide 3: The ToDo App</a><ul>
<li><a class="reference internal" href="#you-re-done">You’re done!</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</aside>
</div>
</div><script src="_static/documentation_options.js?v=5929fcd5"></script>
<script src="_static/doctools.js?v=9bcbadda"></script>
<script src="_static/sphinx_highlight.js?v=dc90522c"></script>
<script src="_static/scripts/furo.js?v=5fa4622c"></script>
<script src="_static/clipboard.min.js?v=a7894cd8"></script>
<script src="_static/copybutton.js?v=f281be69"></script>
<script src="_static/responsiveSvg.js?v=f1528c9d"></script>
</body>
</html>