## How to say "Hello World"

- How to say "Hello World"
  - Creating a new Project
  - The empty Project
  - Creating the Basics
  - The first Button and Label
  - Setting some properties
  - Start coding
  - Run the program

### Creating a new Project

First of all ... start Gambas! ;-)
Click on "Create a new project".
Give the project a name.
Tips are never enough ;-)

### The empty Project

Now 3 Windows should be open:
The Toolbox:
The Property Editor:
The Project Manager:

### Creating the Basics

The program "Hello World" should have a GUI (graphical user interface). With Gambas you can design the GUI first and write the code later. You can change the GUI at any time, but it is easier to design your program first and then start coding ;-)
Every GUI is made out of different components like buttons, labels, progress bars, containers, ... I will call them widgets.
The most basic widget of all GUIs is the form-widget. To create a form, click "Project manager / File / Add / Form".
Give the "Form" a name!
To prevent confusion in the future, choose a name that marks this widget as a Form, like FMyForm or FHelloWorld.
In the Project Manager you can see the Form in your project.
There is a class with the same name as the form created also.
In the class you define how the form should behave.
You have two windows, one to design the GUI and one to write the code in. You can switch between them with "Ctrl-W" or cycle through all the windows with "Ctrl-Tab".
The Form Editor:
The Code Editor:

### The first Button and Label

To create a button, just click the Button symbol in the toolbox and then draw the button on the form. To do this: Left click where the top left corner of the button should be, keep the mouse button pressed and move to where the bottom right corner should be, then release the mouse button.<div align="center"> This is what it should look like.
If the button is marked, you see its properties in the property editor, like the position (X,Y), the size (Width, Height), the colors (Background, Foreground) and the caption (Text).
Change the Text property and see what happens.
A Label display text on the form at a position and style of your choosing.

### Setting some properties

To give the Label a new color you just have to change the rgb-variable "Background" in the property editor.
An rgb-variable has 6 numbers, the first and second define the red component of the color, the third and fourth define the green component and the fifth and sixth numbers define the blue component. It is in the same hex style as HTML colors. One way of getting the codes that make up your favorite colors is to use the graphics image program Gimp and its 'Color Picker' tool or its color pallete.
Or click on the "..." button in the properties dialog while you have "Background" selected, and use Gambas' own color picker which is similar.
Important! Don't forget the leading "&H" and the "&" at the end of the color string!
To change the color of the form, you have to click on the form, so you see the properties of the form in the property editor.

### Start coding

The GUI is ready.
Now the code can be written. If the button is clicked, the label should show the text "Hello World".
Right-click the button in the Form Editor and then click "Event". Now you see this popup menu:
Here you can choose the event which should start your method.
You can doubleclick the Button, then with no existing events, a default event is set.
If you have done so, the Code Editor pops up and two lines of code are added.
This is the first and the last line of the method in which you can define what will happen if the choosen event happens. The name of the method depends on the chosen event also. The event is part of the name!
The button should change the label. But how can it be done? Have a look in the Component Explorer. Click "Project Manager / View / Component explorer" or just press the F2 key.
Choose "Label" in the left side of the window. There you can see, which properties, events or functions the components offers to you. On the right side of the window you will see a short description.
More information can be found in the language reference .
OK, now you can add your first line of code.
Now, you will need the following lines in the Main method:

       DIM hForm AS Form
       hForm = NEW FMyHello
       hForm.show

(h stands for handle)
To understand this you have to know something about Object Oriented Programming. (Just have a look at "Don't fear the OOP")
The GUI "FMyHello" is just a model, when the program starts a copy of it is made, its name is "hForm". The last line is to make HForm visible.
Though in recent versions of Gambas it's no longer necessary to insert this code (because forms are "self-instantiating") it's good to know this concept as it will be very important in your later Gambas programming.

### Run the program

Right click in the Code Editor and click "Save". Then click "Project Manager / Project / Run" (or simply press the F5 key.)

Congratulations!