Eine funktionierende GUI entwerfen mit MeTOS unter BeOS


System: BeOS, Zeta

© Marc Timmen - Vielen Dank für die Erlaubnis, diese Anleitung mit in der BeSly aufnehmen zu dürfen.


Einführung:

Die folgenden Ausführungen sind für Anfänger bestimmt. Dies ist KEIN vollständiges Tutorium für C++, sondern eine einfache Schritt-für-Schritt Anleitung.

Hier wird gezeigt, wie man ein Programm mit einem graphischen GUI-Editor entwickelt. Wir zeichnen einen Button, der Signale sendet und kompilieren das Ganze dann unter der eingebauten BeIDE zu einem lauffähigen Programm. Und das ist gar nicht so schwer...

Systemvoraussetzungen:

1) BeOS DeveloperEdition 1.1 oder besser (BeOS PersonalEdition 5.0 geht auch).
2) Installiertes MeTOS. Diesen Fensterdesigner gibt es bei http://www.bebits.com
3) Installiertes Dont worry. Gibt es auch dort. Ist ein PlugIn für die BeIDE. Damit hat man beim Programmieren CodeCompletion, d. h. beim Programmieren werden Befehlsvarianten vorgeschlagen.

Der Compiler ist ja schon eingebaut. Daher legen wir, wenn die Programme MeTOS und Dont worry installiert sind, nun los.

Startet MeTOS. Nun öffnen sich mehrere Fenster. Das sieht dann etwa so aus:



Man sieht hier 4 Fenster. Das sind:

-Das "MeTOS"-Fenster: zum Abspeichern des Entwurfs, zum Code erzeugen.
-Das "AddONS"-Fenster. Das ist der Werkzeugkasten. Darin sind Fenster, Buttons, Textboxen, Listen, Menüs zum Anordnen.
-Das "OBJECTS"-Fenster. Hier ordnet ihr die Werkzeuge an.
-Das "PROPERTIES"-Fenster. Für den Feinschliff. Gefällt der Fenstertitel nicht? Soll auf Mausklicks reagiert werden? Hier wird das festgelegt.

Wenn man ein Programm für BeOS schreibt, braucht man immer folgendes:

1. eine Programmhülse (damit das BeOS weiß: das ist ein selbständiges Programm)
2. ein Fenster (damit man Buttons, Textboxen etc. darauf plazieren kann)
3. ein empfangsbereites Fenster (damit der Button beim Anklicken auch etwas auslöst)

Dabei hilft das MeTOS kräftig mit.

1. eine Programmhülse

Beginnen wir mit der Hülse. Aktiviert das "AddONS"-Fenster. Dann klickt auf das oberste Element, BProject. Das brauchen wir, um das Programm in der BeIDE zum Laufen zu bringen. Zieht das "BProject"-Element auf das "Objects"-Fenster und lasst es dort los. Ist es richtig, sieht es aus wie auf der Abbildung.



Im "AddONS"-Fenster sind nun zwei weitere Elemente verfügbar. Diese sind weiß hinterlegt, nämlich "BApplication" und "BWindow".



Wir schreiben ein Programm für BeOS, also eine BApplication. Also anfassen...



...und auf dem "Objects"-Fenster ablegen, bis es so aussieht:



Das war die Hülse. Nun kommt das Fenster.

2. ein Fenster

Das Fenster ist unsere eigentliche Arbeitsfläche beim Entwerfen. Erst wenn man ein Fenster hat, darf man die übrigen Werkzeuge ( Buttons etc.) benutzen (MeTOS schaltet sie dann frei). Also nehmen wir das Fenster-Element aus dem Werkzeugkasten...



...und fügen es den "Objects" hinzu. Und zwar so:



Daraufhin erscheint das Fenster. Wir ändern nun den Fenstertitel. Der Fenstertitel ist eine Objekt-Eigenschaft von "Window1". Wie ihr unten seht, ist "Window1" im Objects-Fenster Lila hinterlegt, also das aktive Objekt. Klickt man nun auf das "Properties"-Fenster, werden dessen Eigenschaften angezeigt. Also die "Properties" (engl.: Eigenschaften) von "Window1". Wir ändern nun den Fenstertitel auf: "Hier kommt der Fenstertitel rein".



Jetzt kommt der Button hinzu. Geht zum Werkzeugkasten, holt euch einen BButton...



...und legt ihn, wie gehabt, auf dem Objects-Fenster, unterhalb von Window1, ab. Nun ändern wir noch den Button-Titel. Dazu aktiviert man das Button-Objekt im Objects-Fenster, geht dann auf das "Properties"-Fenster und ändert, wie abgebildet, den Namen auf "Die Beschriftung".



Klickt man das neue Fenster nun an, erscheint das Fenster und der Button mit neuem Titel.

3. ein empfangsbereites Fenster

Nun muss das Fenster auf Empfang geschaltet werden. Dabei geht man so vor:

1. Aktiviert das Window1-Objekt, wie abgebildet.



2. Geht auf "Properties", dort auf "Functions" und setzt dort, wie abgebildet, ein grünes Häkchen vor die Funktion "void MessageReceived(BMessage * message)".



Damit ist das Fenster "Window1" nun empfangsbereit für alle Tastendrücke, Mausklicks. Sämtliche Signale werden in der Prozedur "MessageReceived" ausgewertet. Leider geschieht dies nicht automatisch. Das heißt, wir müssen in der BeIDE nun von Hand die Signalauswertung (=Reaktion auf Klicks) programmieren. Dort bekommt der Button ein eindeutiges Signal zugeordnet. Dort programmieren wir dann auch eine Reaktion auf jeden Buttondruck.

Geht nun auf das MeTOS-Fenster, speichert alles ab ("Save as" ) unter dem Namen: "ButtonBeispiel"



Dann legt MeTOS einen Ordner an, der sich im HOME-Verzeichnis befindet. Habt ihr als Namen "ButtonBeispiel" eingetippt, legt MeTOS den Ordner mit allen notwendigen Dateien in den Ordner unter "home/ButtonBeispiel/" ab.

Klickt anschließend auf "Generator->Generate C++", dann auf ''Start'', anschließend auf '' Write Files'' (Speichere die erzeugten Dateien).



War alles richtig, sieht es dann so aus:



Teil 2 - Verwendung der MeTOS-Dateien in der BeIDE



Nun starten wir die "BeIDE". Dabei gehen wir so vor:

1. Zunächst erzeugen wir eine leere Projekthülse mit der BeIDE.
2. Dann binden wir die von MeTOS-erzeugten Dateien darin ein.
3. Dann ändern wir den Code ab, damit Mausklicks registriert werden.
4. Anschließend kompilieren wir das ganze Projekt dann unter der BeIDE.

Dazu ein paar Bilder:

1. Also, zunächst BeIDE starten und "File", dann "New Project" anklicken.



Dann erscheint dieses Fenster. Wir wählen "BeApp" aus (es ist ja ein BeOS-Programm)...



...und erzeugen die Projekthülse mit Klick auf "Create".

Nun nennen wir das ganze mal einfach "BeispielProgramm.proj". In dieser Datei wird alles zum Projekt gespeichert und bestätigen dies mit Klick auf "Save".



Nun erscheint dieses Fenster. Wir sehen darin bereits zwei Libraries," libbe.so" und "libroot.so" die BeOS zum Kompilieren braucht.



2. Was fehlt, sind die von MeTOS erzeugten Dateien. Wir binden sie nun ein, indem wir in diesem Fenster zunächst "Project" anklicken, dann "Add Files".



Jetzt suchen wir den Ordner, wo die von MeTOS-generierten Dateien gespeichert sind. Hier liegt der Ordner im Verzeichnis /home/ButtonBeispiel/. Also Ordner auswählen (siehe Bild), dann die vier Dateien markieren (per Mausklick, mit gedrückter SHIFT-Taste). Diese Auswahl bestätigt ihr mit Klick auf "ADD".



War alles richtig, sieht es nun so in eurem Projekt-Fenster aus:



Damit wurden die vier Dateien, "Application.h", "Application.cpp", "Window1.cpp", "Window1.h" eingebunden.

Teil 3 - Reaktion auf Mausklicks einbauen



Wir holen noch einmal das Fenster mit dem Titel "Beispielprogramm.proj" in den Vordergrund, und klicken darin doppelt auf die Datei "Window1.cpp":

/**********************************/
/* Window1 based on BWindow class */
/* Created : 22/8/2007 - 4:56:39 */
/* Code Generated by MeTOS */
/**********************************/

#include "Window1.h"
#include <Button.h>

#include "Application1.h"
const uint32 U_BUTTON_1='abcd';

/***** Constructor ****/
Window1::Window1(BRect frame,const char *title,window_look look,window_feel feel,uint32 flags,uint32 workspace): BWindow(frame,title,look,feel,flags,workspace)
{
      // Allocate object
      _button1 = new BButton(BRect(39.00,84.00,158.00,127.00),"Button1","Die Beschriftung",
//statt "NULL"
new BMessage(U_BUTTON_1),B_FOLLOW_LEFT | B_FOLLOW_TOP,B_WILL_DRAW | B_NAVIGABLE);

      // Adding object
      AddChild(_button1);
}

/***** MessageReceived ****/
void Window1::MessageReceived(BMessage *message)
{
switch(message->what)
  {
  case U_BUTTON_1

      ButtonGedrueckt();
      Window1::SetTitle("neu");
   break;

  default:
  BWindow::MessageReceived(message);
  }
}

bool
Window1::QuitRequested()
{
   be_app->PostMessage(B_QUIT_REQUESTED);
   return BWindow::QuitRequested();
}


void
Window1::ButtonGedrueckt()
{
   const char *einText="Dies ist ein";
   _button1->SetLabel(einText);
}


Alle Textstellen in magenta müßt ihr von Hand hinzufügen. Anschließend speichert ihr die Datei normal als ''Window1.cpp'' ab.

Nun ändert ihr auch die Datei "Window1.h" ab. Dies ist die Header-Datei von "Window1.cpp". Wir holen noch einmal das Fenster mit dem Titel "Beispielprogramm.proj" in den Vordergrund, und klicken darin doppelt auf die Datei "Window1.h":

#ifndef _WINDOW1_H
#define _WINDOW1_H
/**********************************/
/* Window1 based on BWindow class */
/* Created : 22/8/2007 - 4:56:39 */
/* Code Generated by MeTOS */
/**********************************/

#include <Window.h>

class BButton;

class Window1 : public BWindow
{
public:
   // publics functions
   Window1(BRect frame,const char * title,window_look look,window_feel feel,uint32 flags,uint32 workspace = B_CURRENT_WORKSPACE);
   virtual void MessageReceived(BMessage * message);
   virtual bool QuitRequested();
protected:
   // protected members
   BButton *_button1;
   void ButtonGedrueckt();
};

#endif


Alle Textstellen in magenta müßt ihr von Hand hinzufügen. Sonst funktioniert das Programm nicht. Anschließend abspeichern.

So, und nun gehen wir in der BeIDE auf "Project", dann "Make". Gibt es keinen Fehler, ist das Programm fertig kompiliert. Anschließend klickt ihr "Run" an. Geht alles klar, müßte das Fenster nun erscheinen.

Klickt nun auf den Button. Seine Beschriftung ändert sich von ''Die Beschriftung'' auf: "Dies ist ein".

Den Sourcecode zu diesem Tutorial können Sie hier beziehen.

Viel Spaß damit!



Anleitung erstellt durch Marc Timmen. (BeosFriend) 2007
Bereitgestellt durch BeSly, der BeOS & Zeta Wissensbasis.