Folgende Webseite wurde aus dem Englische übersetzt: http://www.TheEasyGambasDoku.de    Zurück

Wie man Hello World unter Gambas programmiert !

Beginn eines Neuen Projekts

Zunächst ... starten Sie Gambas! ;-)

Clicken Sie auf "Create a new project".

Geben Sie dem Projekt einen Namen.

Den Tip des Tages können Sie wegdrücken oder anschauen.

Das leere Projekt

Jetzt erscheinen 3 Fenster:

Die Werkzeugkiste = Toolbox:

Das Eigenschaftenfenster = The Property Editor:

Der Projekt Manager:

Überlegungen am Anfang

Das Program "Hello World" solle eine grafische Bedienoberfläche GUI haben. Mit Gambas kann man erst diese Bedienoberfläche festlegen und den Programmcode schreibt man später. Die Bedienoberfläche kann man jederzeit wieder ändern.

Jede grafische Bedienoberfläche hat verschiedene Komponenten wie Befehlsknöpfe, Bezeichnungsfelder, Menüauswahlfelder oder Listenfelder. Auf englisch heißen diese Komponenten widgets.
Die Urkomponente ist die Form , ( das form-widget oder auch window oder auch Fenster genannt) . Um eine neue Form zu schaffen klicken Sie "Project manager / File / Add / Form".

Geben sie der "Form" einen Namen!
Um Verwechslungen zu vermeiden, sollten Sie am besten einen Namen wählen, der die Komponente als Form kennzeichnet beispielsweise FmyHello, FAnfang oder FHelloWorld.

Im Projekt Manager taucht jetzt die neue Form in Ihrem Projekt aus.
Außerdem wird eine Klasse (=class) mit demselben Namen erzeugt.
In der Klasse legt man fest, wie sich die Form verhalten soll.

Sie haben 2 Fenster , eines um die Bedienoberfläche festzulegen und eines um den Programmcode zu schreiben. Mit "Ctrl-W" können Sie zwischen beiden hin und her springen. Mit einem Klick auf eine Komponente springt man auch automatisch in den dazugehörigen Programmcode.
Der Grafik oder Form Editor:

Der Editor für den Programmcode ( warum mußte er denn unbedingt schwarz sein ?) :

Der erste Befehlsknopf ( = Button) und das Bezeichnerfeld ( = 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.

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. 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.
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.

Schreiben Sie den Programmcode:

Die garfische Bedienoberfläche ist jetzt fertig.
Jetzt kann der Programmcode geschrieben werden. Wenn man den Knopf anclickt, dann sollte das Bezeichnerfeld ( = label) den Text "Hello World" zeigen.
Klicken Sie mit der rechten Maustaste auf den auf den Knopf im Formeditor und dann wählen Sie "Event" = Aktion, Ereignis aus. Jetzt erscheint folgendes Menüfeld:

Hier kann man das Ereignis auswählen, unter dem der Programmcode ablaufen soll.

You can try two doubleclick the Button, then the popup does not popup and 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 "gambas-language-encyclopaedia-<version>.pdf" .

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.

Run the program

Right click in the Code Editor and click "Save". Then click "Project Manager / Project / Run"

Congratulations!