Introduction
The lesson ‘Your First Program‘ 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 ‘Hello World’ program. ‘Hello World’ is usually the first program developed when learning a new language.
Graphical User Interface (GUI)
The GUI we want to use in this first program consists of the following elements (controls):
- A Window titled “Hello”;
- A first Label with the text “Your Name”;
- A Text Field to enter the name of the user;
- A Button with the text (Caption) “Press this button”;
- A second Label with the text “Carlos, Welcome to the Xojo website”.
Window, Label, TextField, Button are controls available in the Library pane of the IDE.
Design the GUI
Window
As you may remember from the first lesson, after creating a new application, one window is already available on the IDE.
The title of a newly created window is always ‘Untitled‘. The title can be changed by selecting the window and pressing the Inspector button in the toolbar. I have marked the Title property with a red arrow on the screenshot. I changed the Title property of the window from ‘untitled‘ into ‘Hello‘.
All controls are given a default name. The default name of a newly created window is ‘Window1‘. I changed the Name property ‘Window1‘ to ‘HelloWindow‘ (blue arrow on the screenshot).
A control can be resized by dragging the selection handles on the control or to change the Width and Height values in the Inspector.
Use Title case (all words in the name start with an upper case letter) to name a Window control and add the word 'Window' as a suffix (e.g. HelloWindow).
Label1
The Label control can be selected from the Library and dragged into our window. The default text of a newly created label is ‘Untitled‘. The default name of the first newly created label is ‘Label1‘.
The Text property of the label can be changed in the Inspector (see red arrow on the screenshot). I changed the Text property to ‘Your name‘.
I also changed the Name property of the label into ‘YourNameLabel‘ (see blue arrow on the screenshot).
Use Title case (all words in the name start with an upper case letter) to name a Label control and add the word 'Label' as a suffix (e.g. YourNameLabel).
Text Field
Text Fields will be used to enter data into an application. I changed the default Name property (‘TextField1‘) of the added Text Field to ‘YourNameField‘.
Use Title case (all words in the name start with an upper case letter) to name a Text Field control and add the word 'Field' as a suffix (e.g. YourNameField).
Button
Buttons are used to initiate an action. In this example, when you press the button, a welcome message will appear.
The default text (‘Button‘) on a newly added button can be changed in the Caption property. I changed the text on the button to ‘Press this button‘ (see red arrow on the screenshot).
The default name (‘Button1‘) of a newly added button can be changed in the Name property. I renamed the button to ‘WelcomeButton‘ (see blue arrow on the screenshot).
Use Title case (all words in the name start with an upper case letter) to name a Button control and add the word 'Button' as a suffix (e.g. WelcomeButton).
Label2
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 Label control just below the button, cleared the default text in the Text property, changed the Name property into ‘WelcomeMessageLabel‘ and changed the Text Color property to red.
Navigator
After designing the GUI the Navigation pane (left hand side of the IDE) shows the names of all controls (see screenshot to the left of this paragraph).
Adding Code
Event Handler
The action (to display a welcome message) is started as soon as the WelcomeButton is pressed. Actions are handled by code added to Event Handlers. The contextual menu to select an Event Handler appears after a ‘control-click’ on macOS (‘right-click’ on Windows) on the WelcomeButton item in the Navigator.
An Event Handler can be chosen from the available list:
Selecting the Event Handler ‘Pressed‘ (see screenshot to the left of this paragraph) opens the Code Editor in the middle of the IDE.
In the Code Editor you specify what should happen when the button named WelcomeButton is pressed. The following code can be entered in the code editor:
WelcomeMessageLabel.Text = YourNameField.Text + ",Welcome to the Xojo website"
The statement is easy to understand: add the text “, Welcome to the Xojo website” to the name entered in the Text property of the Text Field named YourNameField (YourNameField.Text) and assigns the result to the Text property of the Label named WelcomeMessageLabel (WelcomeMessageLabel.Text).
Run the Program
The program can be executed by pressing the Run button in the toolbar. Execution can be stopped by pressing ‘command-Q’.