{"id":65,"date":"2023-12-18T13:26:58","date_gmt":"2023-12-18T13:26:58","guid":{"rendered":"https:\/\/xojo.itbib4you.be\/?page_id=65"},"modified":"2025-06-22T14:35:31","modified_gmt":"2025-06-22T14:35:31","slug":"your-first-program","status":"publish","type":"page","link":"https:\/\/xojo.itbib4you.be\/index.php\/your-first-program\/","title":{"rendered":"Your First Program"},"content":{"rendered":"\n<div class=\"wp-block-buttons is-horizontal is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background has-small-font-size has-custom-font-size wp-element-button\" href=\"https:\/\/xojo.itbib4you.be\/\">Overview<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>The lesson &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Your First Program<\/mark>&#8216; repeats some terms of the previous lesson through a simple example. In this chapter a GUI is built, the properties of some of the controls used are changed and the program is executed.<\/p>\n\n\n\n<p>The program is a modified version of the well-known &#8216;Hello World&#8217; program. &#8216;Hello World&#8217; is usually the first program developed when learning a new language.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Graphical User Interface (GUI)<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_03-1024x340.png\" alt=\"Hello GUI\" class=\"wp-image-68\" style=\"width:534px;height:auto\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_03-1024x340.png 1024w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_03-300x99.png 300w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_03-768x255.png 768w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_03.png 1194w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<p>The GUI we want to use in this first program consists of the following elements (<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">controls<\/mark>):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Window<\/mark> titled &#8220;Hello&#8221;;<\/li>\n\n\n\n<li>A first <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Label<\/mark> with the text &#8220;Your Name&#8221;;<\/li>\n\n\n\n<li>A <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text Field<\/mark> to enter the name of the user;<\/li>\n\n\n\n<li>A <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Button<\/mark> with the text (<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Caption<\/mark>) &#8220;Press this button&#8221;;<\/li>\n\n\n\n<li>A second <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Label <\/mark>with the text  &#8220;Carlos, Welcome to the Xojo website&#8221;.<\/li>\n<\/ul>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Window<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Label<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">TextField<\/mark>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Button<\/mark> are controls available in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Library<\/mark> pane of the IDE.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design the GUI<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Window<\/h3>\n\n\n\n<p>As you may remember from the first lesson, after creating a new application,  one window is already available on the IDE. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"455\" height=\"1024\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_04-455x1024.png\" alt=\"\" class=\"wp-image-71\" style=\"width:195px;height:auto\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_04-455x1024.png 455w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_04-133x300.png 133w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_04.png 596w\" sizes=\"auto, (max-width: 455px) 85vw, 455px\" \/><\/figure>\n<\/div>\n\n\n<p>The title of a newly created window is always &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Untitled<\/mark>&#8216;. The title can be changed by selecting the window and pressing the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Inspector<\/mark> button in the toolbar. I have marked the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Title<\/mark> property with a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">red arrow<\/mark> on the screenshot.  I changed the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Title<\/mark> property of the window from &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">untitled<\/mark>&#8216; into &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Hello<\/mark>&#8216;.<\/p>\n\n\n\n<p>All controls are given a default name. The default  name of a newly created window is &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Window1<\/mark>&#8216;. I changed the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Name<\/mark> property &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Window1<\/mark>&#8216; to &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">HelloWindow<\/mark>&#8216; (<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">blue arrow<\/mark> on the screenshot).<\/p>\n\n\n\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\" style=\"line-height:1.4\">A control can be resized by dragging the selection handles on the control or to change the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Width<\/mark> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Height<\/mark> values in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Inspector<\/mark>.<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\" style=\"line-height:1.4\">Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Title<\/mark> case (all words in the name start with an upper case letter) to name a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Window<\/mark> control and add the word '<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Window<\/mark>' as a suffix (e.g. HelloWindow).<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Label1<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"148\" height=\"108\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Screenshot-2023-12-14-at-15.54.08.png\" alt=\"Label\" class=\"wp-image-78\" style=\"width:80px\"\/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"463\" height=\"1024\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_06-463x1024.png\" alt=\"Label\" class=\"wp-image-81\" style=\"width:195px\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_06-463x1024.png 463w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_06-136x300.png 136w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_06.png 602w\" sizes=\"auto, (max-width: 463px) 85vw, 463px\" \/><\/figure>\n<\/div>\n\n\n<p>The <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Label<\/mark> control can be selected from the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Library<\/mark> and dragged into our window. The default text of a newly created label is &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Untitled<\/mark>&#8216;. The default name of the first newly created label is &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Label1<\/mark>&#8216;. <\/p>\n\n\n\n<p>The <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text<\/mark> property of the label can be changed in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Inspector<\/mark> (see <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">red arrow<\/mark> on the screenshot). I changed the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text<\/mark> property to &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Your name<\/mark>&#8216;.<\/p>\n\n\n\n<p>I also changed the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Name<\/mark> property of the label into &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">YourNameLabel<\/mark>&#8216; (see <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">blue arrow<\/mark> on the screenshot).<\/p>\n\n\n\n<div style=\"height:17px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\" style=\"line-height:1.4\">Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Title<\/mark> case (all words in the name start with an upper case letter) to name a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Label<\/mark> control and add the word '<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Label<\/mark>' as a suffix (e.g. YourNameLabel).<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Text Field<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"142\" height=\"130\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_07.png\" alt=\"Text Field\" class=\"wp-image-87\" style=\"width:80px\"\/><\/figure>\n<\/div>\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text Fields<\/mark> will be used to enter data into an application. I changed the default <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Name<\/mark> property (&#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">TextField1<\/mark>&#8216;) of the added <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text Field<\/mark> to &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">YourNameField<\/mark>&#8216;.<\/p>\n\n\n\n<div style=\"height:6px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\" style=\"line-height:1.4\">Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Title<\/mark> case (all words in the name start with an upper case letter) to name a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text Field<\/mark> control and add the word '<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Field<\/mark>' as a suffix (e.g. YourNameField).<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Button<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"126\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_08.png\" alt=\"Button\" class=\"wp-image-90\" style=\"width:80px\"\/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"1024\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_09a-471x1024.png\" alt=\"Button\" class=\"wp-image-105\" style=\"width:195px\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_09a-471x1024.png 471w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_09a-138x300.png 138w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_09a.png 594w\" sizes=\"auto, (max-width: 471px) 85vw, 471px\" \/><\/figure>\n<\/div>\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Buttons<\/mark> are used to initiate an action. In this example, when you press the button, a welcome message will appear. <\/p>\n\n\n\n<p>The default text (&#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Button<\/mark>&#8216;) on a newly added button can be changed in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Caption<\/mark> property. I changed the text on the button to &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Press this button<\/mark>&#8216; (see <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">red arrow<\/mark> on the screenshot). <\/p>\n\n\n\n<p>The default name (&#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Button1<\/mark>&#8216;) of a newly added button can be changed in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Name<\/mark> property. I renamed the button to &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">WelcomeButton<\/mark>&#8216; (see <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">blue arrow<\/mark> on the screenshot).<\/p>\n\n\n\n<div style=\"height:12px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-preformatted has-yellow-background-color has-background\" style=\"line-height:1.4\">Use <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Title<\/mark> case (all words in the name start with an upper case letter) to name a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Button<\/mark> control and add the word '<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Button<\/mark>' as a suffix (e.g. WelcomeButton).<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Label2<\/h3>\n\n\n\n<p>The second label on the window will be used by the application to display a welcome message after pressing the button. To define this new label, I dragged a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Label<\/mark> control just below the button, cleared the default text in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text<\/mark> property, changed the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Name<\/mark> property into &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">WelcomeMessageLabel<\/mark>&#8216; and changed the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text Color<\/mark> property to red. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Navigator<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"668\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_11.png\" alt=\"Navigation pane\" class=\"wp-image-110\" style=\"width:195px\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_11.png 500w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_11-225x300.png 225w\" sizes=\"auto, (max-width: 500px) 85vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p>After designing the GUI the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Navigation<\/mark> pane (left hand side of the IDE) shows the names of all controls  (see screenshot to the left of this paragraph).<\/p>\n\n\n\n<div style=\"height:6px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Code <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Event Handler<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"999\" height=\"1024\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_12-999x1024.png\" alt=\"Contextual menu\" class=\"wp-image-113\" style=\"width:294px;height:auto\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_12-999x1024.png 999w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_12-293x300.png 293w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_12-768x787.png 768w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_12.png 1110w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<p>The action (to display a welcome message) is started as soon as the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WelcomeButton<\/mark> is pressed. Actions are handled by code added to <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Event Handlers<\/mark>. The contextual menu to select an <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Event Handler<\/mark> appears after a &#8216;control-click&#8217; on macOS (&#8216;right-click&#8217; on Windows) on the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WelcomeButton<\/mark> item in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Navigator<\/mark>.<\/p>\n\n\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>An <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Event Handler<\/mark> can be chosen from the available list:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"614\" height=\"610\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_13a.png\" alt=\"\" class=\"wp-image-144\" style=\"width:258px;height:auto\" srcset=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_13a.png 614w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_13a-300x298.png 300w, https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_13a-150x150.png 150w\" sizes=\"auto, (max-width: 614px) 85vw, 614px\" \/><\/figure>\n<\/div>\n\n\n<p>Selecting the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Event Handler<\/mark> &#8216;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">Pressed<\/mark>&#8216; (see screenshot to the left of this paragraph)  opens the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Code Editor<\/mark> in the middle of the IDE. <\/p>\n\n\n\n<div style=\"height:7px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Code Editor<\/mark> you specify what should happen when the button named <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WelcomeButton<\/mark> is pressed. The following code can be entered in the code editor:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-light-gray-background-color has-background has-small-font-size\" style=\"line-height:1.4\">WelcomeMessageLabel.Text = YourNameField.Text + \"<mark style=\"background-color:rgba(0, 0, 0, 0);color:#960abe\" class=\"has-inline-color\">,Welcome to the Xojo website<\/mark>\"<\/pre>\n\n\n\n<p>The statement is easy to understand: add the text &#8220;<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-blue-color\">, Welcome to the Xojo website<\/mark>&#8221; to the name entered in the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text<\/mark> property of the Text Field  named <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">YourNameField<\/mark> (<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">YourNameField.Text<\/mark>) and assigns the result to the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Text<\/mark> property of the Label named <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WelcomeMessageLabel <\/mark>(<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">WelcomeMessageLabel.Text<\/mark>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Run the Program<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"70\" height=\"114\" src=\"https:\/\/xojo.itbib4you.be\/wp-content\/uploads\/2023\/12\/Xojo_10a.png\" alt=\"Run button\" class=\"wp-image-140\" style=\"width:46px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>The program can be executed by pressing the <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-bright-red-color\">Run<\/mark> button in the toolbar. Execution can be stopped by pressing &#8216;command-Q&#8217;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The lesson &#8216;Your First Program&#8216; repeats some terms of the previous lesson through a simple example. In this chapter a GUI is built, the properties of some of the controls used are changed and the program is executed. The program is a modified version of the well-known &#8216;Hello World&#8217; program. &#8216;Hello World&#8217; is usually &hellip; <a href=\"https:\/\/xojo.itbib4you.be\/index.php\/your-first-program\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Your First Program&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-65","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":69,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/65\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/65\/revisions\/596"}],"wp:attachment":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/media?parent=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}