home
GUI [Graphical User Interface]

Version 1.0 by TT-Soft für QuickBasic 4.5 und Future-Library

Benutzer-Handbuch und Referenz

1. Einleitung

Dieser GUI wurde von TT-Soft (Member of East-Power-Soft) im September/Oktober 2001 entwickelt. Letzte Update's und mehr findest Du unter: http://www.East-Power-Soft.de
Das Basic-Programm und alle seine Teile (SUB’s) sind grundsätzlich als Freeware zu verstehen und dürfen angepasst bzw. editiert werden. Eine Weitergabe der Software ist nicht verboten, sondern sogar erwünscht.

Ausnahmen:
Dieser GUI nutzt die Future-Library V3.50 von Future-Software, created by Michael Rye Sørensen and Jorden Chamid (c)1999-2000 by Future Software. Diese Library wird nicht mitgeliefert. Sie ist unter www.qb45.com im Original oder auf unserer Homepage www.East-Power-Soft.de mit deutscher Übersetzung erhältlich. Diese Library ist Freeware und darf weitergegeben werden. Jedoch, ohne die Zustimmung von Future-Software, weder editiert noch anderweitig geändert werden.
Die im GUI verwendete Palette wurde mit Paint-Shop-Pro erzeugt. Paint-Shop-Pro ist ein eingetragenes Warenzeichen der Firma JASC-Inc.

Hinweis:
East-Power-Soft, TT-Soft, Future-Software und JASC-Inc. distanzieren sich von Problemen bzw. Hard- oder auch Softwarebeschädigungen, die durch den Einsatz der Library, einzelner Komponenten bzw. des GUI’s entstehen. Sollten Fehler im Originalprogramm festgestellt werden, so bitten ich um eine Benachrichtigung und kurze Beschreibung des Fehlers (E-Mail: TT-Soft@East-Power-Soft.de).

2. Lieferumfang
Im Paket enthalten sind folgende Dateien:

EXAMPLE.BAS Beispiel zum Benutzen des GUI.
EPS-GUI.BAS Die SUB-Routinen des GUI (diese Datei sollte als Modul eingebunden werden). Beim Laden des Beispiels wird das automatisch erledigt.
EPS-GUI.FNT Der Schriftfont, der vom GUI benutzt wird. Der Font ist Future-Lib kompatibel. Ist der Font nicht verfügbar, wird die normale Schrift benutzt.
EPS-GUI.PAL Eine besonders angepaßte 256-Farben-Palette. Auch wenn’s nicht so aussieht, in dieser Palette stecken so ziemliche alle Farben die man benötigt. 256 Farben-BMP-Bilder die im GUI geladen werden, müssen diese Farben haben, da es sonst zu Fehlern in der Darstellung kommt. Diese Palette ist zu Paint-Shop-Pro kompatibel. Natürlich kannst Du dir auch eine eigene zusammenstellen. Die Variablen für die Farben die die Elemente benutzen, findest du weiter unten.
EPS-GUI.BI Die INCLUDE-Datei für den GUI. In ihr befinden sich alle Variablen, deren Deklarationen usw.
EXAMPLE.MAK Die MAK-Datei zum Beispiel.

Die EPS-GUI.BAS stellt den eigentlichen GUI dar. Die Datei EXAMPLE.BAS ist ein Beispiel wie man die Fähigkeiten des GUI nutzen kann. Als Beispiel wurde eine CommonDialogBox gewählt, da dies in meinen Augen erstens ein gutes Beispiel abgibt und zweitens häufig benötigt wird.

3. Fangen wir an
Als erstes benötigen wir die Future-Library. Mit dem dazugehörigen Builder binden wir die Module für SVGA, SVGA-Maus-Unterstützung, Font-Laden sowie Bildimport/export ein.

Die EpsInitialize Routine muß vor allen anderen aufgerufen werden. Hier finden alle notwendigen Prüfungen statt, wie z.B. Auflösung, Speicher, Font usw.
Die Variablen, die alle diese Werte angeben befinden sich in der INCLUDE-Datei und können dort editiert werden. Eine Übersicht über die nötigsten Variablen ist weiter unten.

EpsDefineElements muß nach der EpsInitialize Routine aufgerufen werden. In ihr befinden sich alle Definitionen bzw. Eigenschaften zu den einzelnen Elementen. Also z.B. wo sich welches Fenster, Button etc. befindet.

Alle SUBs die mit EpsDraw beginnen (z.B. EpsDrawButton) zeichnen das jeweilige Element, gekennzeichnet durch seine Nummer. Ausnahme ist die Routine EpsDrawScreen. Sie zeichnet den gesamten Bildschirm und alle auf ihm sichtbaren Fenster, Elemente usw. Diese Routinen prüfen jedoch nicht, ob das jetzt darzustellende Element auch gerade im aktiven, bzw. in einem sichtbaren Fenster liegt. Ausnahme ist auch hier natürlich die EpsDrawScreen Routine.

Folgende Elemente stehen zur Verfügung:

- AWindow (Fenster)
- Button (Schaltknöpfe)
- Frame (Rahmen)
- Picture (Bilder [256 Farben BMP])
- TextField (Texteingabefelder)
- Label (Textanzeigefelder)
- CheckBox (Optionsfelder)
- RadioButton (Auswahlfelder)
- Scrollbar (Schieberegler)
- Percentbar (Fortschrittleisten)
- TextBox (Listenauswahlbox)


Die EpsMainLoop ist, wie ihr Name schon sagt, die eigentliche Engine die alle Elemente steuert und deren Funktionsweise koordiniert.

4. Die Variablen
Hier nun eine Übersicht der wichtigsten Variablen die voreingestellt werden sollten (müssen). Sie befinden sich in der INCLUDE-Datei (EPS-GUI.BI).

ScreenDimX = 800
ScreenDimY = 600
Bildschirm Auflösung
DesktopColor = 2
White = 8
LightGrey = 7
Grey = 6
DarkGrey = 3
Black = 0
Marker = 65
Blue = 76
Das sind die Variablen für die Farben die vom GUI verwendet werden. Voreingestellt sind Werte die sich auf die von uns erstellte Palette beziehen.
MainKey$ = CHR$(0) + CHR$(&H6B) hier kann eine Taste angegeben werden, die im Notfall die Engine stoppt. Voreingestellt ist ALT+F4
FontName$ = "EPS-GUI.FNT" Name und gegebenenfalls die Position des Font‘s
PaletteName$ = "EPS-GUI.PAL" Name und gegebenenfalls die Position der Palette
StableWindow = False Diese Variable gibt an wie sich die Fenster verhalten. Ist False eingestellt, können die Fenster verschoben und zwischen ihnen gewechselt werden. Ist der Wert True, muß das Fenster erst bearbeitet und kann nicht verschoben werden. Das ist z.B. bei einem Message-Fenster oder einer CommonDialogBox sinnvoll.
MaxAWindow = 10
MaxTextField = 10
MaxCheckBox = 10
MaxButton = 10
MaxScrollBar = 10
MaxPercentBar = 10
MaxLabel = 20
MaxFrame = 10
MaxPicture = 10
MaxTextBox = 10
Die Maximumwerte jedes der Elemente. Diese Werte sollten auf das nötigste begrenzt werden, da sonst unnötig viel Speicher reserviert wird.

5. Die Handhabung
Ich habe im GUI bewusst auf diverse Prüfungen verzichtet, wie z.B. ob ein Button auch tatsächlich in ein Fenster passt, usw. Dies verbraucht nicht nur einen haufen Speicherplatz, sondern ist auch unnötig, da man ja ohnehin prüft ob es passt oder nicht. Generell ist der GUI sehr „sporadisch“. Schließlich soll er lediglich die Möglichkeit bieten, seinem Programm die nötige grafische Oberfläche zur Verfügung zu stellen. So ging es mir bei der Entwicklung hauptsächlich darum, daß er sehr Leistungsfähig aber trotzdem klein und leicht verständlich bzw. handhabbar ist.

Beginnen wir mit einem kleinen Beispiel. Wir erstellen uns eine Message-Box. Die Definitionen für ein Fenster und einen „OK“ - Button schreiben wir in die SUB EpsDefineElements. Und so könnte das z.B. aussehen:

SUB EpsDefineElements

   AWindow(1).Caption = “Message-Box“
   AWindow(1).BackColor = Grey
   AWindow(1).High = 150
   AWindow(1).Widh = 250
   AWindow(1).PosX = 100
   AWindow(1).PosY = 100
   AWindow(1).State = True
   AWindow(1).Visible = True

   Button(1).Caption = „OK“
   Button(1).High = 20
   Button(1).Widh = 40
   Button(1).PosX = 105
   Button(1).PosY = 70
   Button(1).Alignment = Center
   Button(1).State = True
   Button(1).InWindow = 1

END SUB


Nun gut, nachdem wir die Elemente für Fenster und Button definiert haben, rufen wir als nächstes die EpsDrawScreen Routine auf. Sie zeichnet alle Elemente auf den Bildschirm, zumindestens die die gerade sichtbar sind. An diesem Punkt wird klar wie wir ein neues Fenster aufrufen, oder schließen können. Es muß nur die Variable AWindow(n).Visible umgestellt werden und die EpsDrawScreen Routine aufgerufen werden. sofort erscheint, bzw. verschwindet das jeweilige Fenster und mit ihm alle Elemente die sich darin befinden. Doch im Moment ist unsere MessageBox sichtbar und wir wollen den „OK“-Button abfragen. Wie machen wir das? Prinzipiell kann man sagen, das wir eine einzige große Schleife benötigen. In ihr fragen wir kontinuierlich ab, ob einer der Button oder eines der anderen Elemente gedrückt wurde und reagieren dann entsprechend. Ob, wo oder wann das Element betätigt wurde, bzw. ob es überhaupt möglich ist dieses Element zu betätigen prüft die Engine. Wir schreiben als Code nur die Reaktion darauf. Als Beispiel wollen wir die MessageBox wieder schließen wenn der „OK“-Button gedrückt wurde. Alles zusammen sieht dann, inklusive Abfrageschleife, so aus:

REM $INCLUDE:‘FUTURE.BI‘
REM $INCLUDE:‘EPS-GUI.BI‘

EpsInitialise
EpsDefineElements
EpsDrawScreen

DO: EpsMainLoop
   IF PressedButton = 1 THEN
      AWindow(2).Visible = False
      EpsDrawScreen
   END IF
LOOP UNTIL INKEY$ = MainKey$

ReSetScreen
END

Das ist alles. Eigentlich total easy – oder? Abgefragt wird von der Engine übrigens jeder Maus-Klick der in irgend ein Element ging, außer dem Frame und dem Label. Also auch Bilder können abgefragt werden. Die Abfrage- und Einstellungs-Variablen siehst du in nachfolgender Übersicht. Insgesamt sind alle Variablen zugänglich und zu jeder Zeit veränderbar. Interessant sind vielleicht noch die verwendeten Variablen für die Maus:

MX = aktuelle Mausposition X
MY = aktuelle Mausposition Y
MB = Status der Mausknöpfe (0 = keiner gedrückt, 1 = linker, 2 = rechter Mausknopf)

6. Die Elemente, Routinen und Elementeigenschaften:

SUB EpsDrawWindow (Nummer des Fensters von 1 bis MaxAWindow)

AWindow(n).Caption Beschriftung des Fensters
AWindow(n).BackColor Hintergrundfarbe des Fensters
AWindow(n).High Höhe des Fensters
AWindow(n).Widh Breite des Fensters
AWindow(n).PosX Position auf Bildschirm
AWindow(n).PosY Position auf Bildschirm
AWindow(n).State True oder False für aktiv oder inaktiv (es kann natürlich nur ein Fenster aktiv sein)
AWindow(n).Visible True oder False für sichtbar oder nicht sichtbar
StableWindow True oder False, wird True gesetzt, muß das aktuelle Fenster bearbeitet und kann nicht verschoben werden. (z.B. für eine CommonDialog- oder MessageBox)

SUB EpsDrawButton (Nummer des Buttons von 1 bis MaxButton)

Button(n).Caption Beschriftung des Buttons
Button(n).High Höhe des Buttons
Button(n).Widh Breite des Buttons
Button(n).PosX Position innerhalb des Fensters
Button(n).PosY Position innerhalb des Fensters
Button(n).Alignment Left, Right oder Center (Ausrichtung der Beschriftung)
Button(n).State True oder False (bei False kann der Button nicht betätigt werden)
Button(n).InWindow In welchem Fenster befindet sich der Button
PressedButton Gibt die ButtonNummer zurück, wenn einer gedrückt wurde.

SUB EpsDrawFrame (Nummer des Rahmens von 1 bis MaxFrame)

Frame(n).Caption Beschriftung des Rahmens
Frame(n).High Höhe des Rahmens
Frame(n).Widh Breite des Rahmens
Frame(n).PosX Position innerhalb des Fensters
Frame(n).PosY Position innerhalb des Fensters
Frame(n).ForeColor Schriftfarbe
Frame(n).InWindow In welchem Fenster befindet sich der Rahmen

SUB CheckBox (Nummer der CheckBox von 1 bis MaxCheckBox)

CheckBox(n).Caption Beschriftung der CheckBox
CheckBox(n).Art 0 = Radio-Button, 1 = CheckBox
CheckBox(n).PosX Position innerhalb des Fensters
CheckBox(n).PosY Position innerhalb des Fensters
CheckBox(n).ForeColor Schriftfarbe
CheckBox(n).State wenn Art = 0, True oder False; wenn Art = 1, TrueOn, TrueOff, FalseOn oder FalseOff
CheckBox(n).InWindow In welchem Fenster befindet sich die CheckBox
PressedCheckBox Gibt die Nummer der CheckBox zurück die gedrückt wurde. Die logische Steuerung (also der Wechsel von True auf False z.B.) muß der User selbst programmieren. Diese Funktion habe ich mit Absicht so gewählt, weil sie so die größtmögliche Flexibilität garantiert.

SUB EpsDrawScrollBar (Nummer der ScrollBar von 1 bis MaxScrollBar)

ScrollBar(n).Direction 0 = horizontal, 1 = vertikal
ScrollBar(n).High Höhe der ScrollBar
ScrollBar(n).Widh Breite der ScrollBar
ScrollBar(n).PosX Position innerhalb des Fensters
ScrollBar(n).PosY Position innerhalb des Fensters
ScrollBar(n).Min Minimumwert
ScrollBar(n).Max Maximumwert
ScrollBar(n).Value aktueller Wert
ScrollBar(n).Tip gibt an um welchen Wert erhöht bzw. vermindert wird, wenn einer der Button gedrückt wurde.
ScrollBar(n).State wird nur von der Engine benutzt
ScrollBar(n).InWindow In welchem Fenster befindet sich die ScrollBar
PressedScrollBar Gibt die Nummer der ScrollBar zurück, welche gerade betätigt wurde.

SUB EpsDrawPercentBar (Nummer der Prozentleiste von 1 bis MaxPercentBar)

PercentBar(n).Art True = mit Prozentangabe, False = ohne
PercentBar(n).High Höhe der Prozentleiste
PercentBar(n).Widh Breite der Prozentleiste
PercentBar(n).PosX Position innerhalb des Fensters
PercentBar(n).PosY Position innerhalb des Fensters
PercentBar(n).Value Wert der Prozentleiste in Prozent
PercentBar(n).InWindow In welchem Fenster befindet sich die Prozentleiste

SUB EpsDrawLabel (Nummer des Labels von 1 bis MaxLabels)

Label(n).Caption Beschriftung des Labels
Label(n).High Höhe des Labels
Label(n).Widh Breite des Labels
Label(n).PosX Position innerhalb des Fensters
Label(n).PosY Position innerhalb des Fensters
Label(n).ForeColor Schriftfarbe
Label(n).BackColor Hintergrundfarbe
Label(n).Border True = Rahmen, False = ohne
Label(n).Alignment Schriftausrichtung (Left, Right oder Center)
Label(n).InWindow In welchem Fenster befindet sich das Label

SUB EpsDrawPicture (Nummer des Bildes von 1 bis MaxPicture)

Picture(n).High Höhe des Bildes
Picture(n).Widh Breite des Bildes
Picture(n).PosX Position innerhalb des Fensters
Picture(n).PosY Position innerhalb des Fensters
Picture(n).Source Quelle (z.B. "C:\BILD.BMP") Das Bild muß eine 256 Farben BMP Datei sein, die mit der Palette übereinstimmt die die Engine verwendet. Die hier verwendete Palette ist eine "Paint Shop Pro" Palette. Mit ihr kann das Bild angepaßt werden.
Picture(n).Border True oder False (True wenn Rahmen erwünscht)
Picture(n).InWindow In welchem Fenster befindet sich das Bild
PressedPicture Gibt die Nummer des Bildes zurück, wenn auf ihm die Maustaste gedrückt wurde.

SUB EpsDrawTextField (Nummer des Textfeldes von 1 bis MaxTextField)

TextField(n).Caption Text der editiert werden soll. Der Text darf max. 255 Zeichen lang sein (inkl. Dummy) Der Text muß mit einem Dummy Zeichen, CHR$(0), enden. Die Länge des Eingabestrings (ohne Dummy) bestimmt wie viele Zeichen eingegeben werden können. Der Text wird am Fensterende nicht abgeschnitten.
TextField(n).Widh Breite des Textfeldes
TextField(n).PosX Position innerhalb des Fensters
TextField(n).PosY Position innerhalb des Fensters
TextField(n).State True oder False, wenn False ist kein editieren möglich
TextField(n).BackColor Hintergrundfarbe wenn aktiv (bei inaktiv wird Farbe des Fensters angenommen)
TextField(n).ForeColor Vordergrund- bzw. Schriftfarbe
TextField(n).InWindow In welchem Fenster befindet sich das Bild
PressedTextField Gibt die Nummer des Textfeldes zurück, welches gerade editiert wurde. (Der Wert wird nur zurückgegeben, wenn mit RETURN beendet wurde)

SUB EpsDrawTextBox (Nummer der TextBox von 1 bis MaxTextBox)

TextBox(n).Caption Texteinträge (müssen durch Leerzeichen getrennt und mit Dummy, CHR$(0), abgeschlossen sein)
TextBox(n).Index Gibt bei PressedTextBox den gedrückten Index zurück
TextBox(n).Entrys Angabe über die Anzahl der Elemente (Zeilen) in der Textbox
TextBox(n).PosX Position innerhalb des Fensters
TextBox(n).PosY Position innerhalb des Fensters
TextBox(n).High Höhe der TextBox
TextBox(n).Widh Breite der TextBox
TextBox(n).ForeColor Vordergrund- bzw. Schriftfarbe
TextBox(n).BackColor Hintergrundfarbe
TextBox(n).Border True oder False
TextBox(n).Alignment Left, Right oder Center, Ausrichtung des Textes
TextBox(n).InWindow In welchem Fenster befindet sich die TextBox
PressedTextBox Gibt die Nummer der TextBox zurück, in die gedrückt wurde


7. Nachtrag und Tipps
Natürlich können alle Routinen die nicht benötigt werden einfach gelöscht werden. Also wenn man z.B. keine Frame’s benutzt, kann die SUB EpsDrawFrames ohne weiteres gelöscht werden. Um Speicherplatz zu sparen, ist es auch sinnvoll die SUB-Routinen (EPS-GUI.BAS) in eine Quick-Bibliothek umzuwandeln und direkt in QuickBasic einzubinden. Weiterhin kann man sich vielleicht eine Lade-Routine schreiben, die alle Daten für die Fenster, Buttons usw. lädt. Ohne dies ist es nämlich ne ganze Menge Schreibarbeit. Ich habe allerdings keine eigene Routine dafür geschrieben, da sich so besser erklären läßt wozu der GUI fähig ist.

Natürlich setze ich den GUI selbst auch ein, wofür habe ich ihn sonst entwickelt ;-). Ausserdem habe ich vor, einen Formeneditor zu schreiben, mit dessen Hilfe man leichter Fenster erstellen und Elemente darin positionieren kann. Spätestens dann kommt allerdings eine Laderoutine. Also immer mal auf unserer Seite vorbeischauen ob sich was getan hat. Solltest Du Lust bekommen haben diesen GUI einzusetzen, dann wäre es nett wenn Du mir Dein fertiges Produkt, oder zumindest einen Screenshot davon, mal zeigen könntest.

Viel Spaß und gutes Gelingen wünscht TT-Soft.