# Tutorial - Erstellung eines GUI-Taschenrechners - (Teil I: Fenstergestaltung)

In diesem Tutorial sollst du an die Erstellung eines Taschenrechners ähnlich der Windowsversion herangeführt werden. Dazu werden die GUI-Funktionen von AutoIt verwendet.
Es wird angenommen, dass du genau weißt, wie man Skripte schreibt und ausführt, wie es im Tutorial GUI MsgBox gezeigt wird.

Fenstererstellung - Teil I (Design)
In diesem Teil werden wir beginnen, ein Fenster af GUI-Basis zu erstellen. Es ist hilfreich, bereits ein funktionelles Design für unser Programm im Kopf zu haben.
Das bedeutet zu wissen, wie viele und welche Controls wir benötigen. In diesem Fall werden wir das Desiogn des Windows-Rechners einfach übernehmen.
Fig. 1: So wird unser Taschenrechner am Ende dieses Teiles aussehen.

Fig. 1

Zu Beginn binden wir die Library "GUIConstants.au3" ein, die uns viele Konstanten zur Nutzung in unserem Fenster zur Verfügung stellt. Diese Konstanten bezeichnen die Werte von Stilen und Parametern, die das Erscheinungsbild, die Ereignisse und Zustände jedes Controls definieren. (Normalerweise ist die Datei "GUIConstants.au3" bereits im AutoIt-Ordner vorhanden). Später werden wir sehen, wie man damit umgeht, für den Moment binden wir die Datei aber einfach einmal ein:

#include <GUIConstants.au3>

Wie könnte es anders sein, kommen wir nun zur Definition des Fensters durch seinen Titel, seine Größe und seine Position mit der GUICreate-Funktion. Die Werte des Fensters sind in unserem Fall folgende:
Titel = "Calculator"
Breite = 260
Höhe = 230
Die entsprechnde Codezeile wäre also:

GUICreate ("Calculator", 260, 230)

Speichern der Identifikation (ID) jedes Controls
Im Definitionsteil werden wir an den Punkt gelangen, an dem wir jeder Schaltfläche ("Button") eine Variable zuweisen. Bei dieser Zuweisung speichert die Variable die Control ID, die es uns erlaubt, "ihr Verhalten" zur Laufzeit zur manipulieren. Darum wird es in Teil 2 diese Tutorials gehen.
Variablenbenennung
Die Benennung jeder Variable ist grundsätzlich Geschmackssache, aber es ist nützlich, die Variablen nach ihrer Funktion zubennenen. Im nächsten Beipsiel wird dazu folgende Syntax verwedet: $CTRL_btn1 das bedeutet "Für das GUI-Control - Es ist eine Schaltfläche ("Button"), lfd. Nummer 1", die Parameter für diese Beispiel-Schaltfläche sind die folgenden:
Text = " 1", Links = 54, Oben = 138, Breite = 36, Höhe = 29

$CTRL_btn1 = GUICtrlCreateButton (" 1", 54, 138, 36, 29)

Das macht den Code einfacher lesbar und verständlicher.
Erstellung aller Controls
Wie in Fig.1 zu sehen, brauchen wir verschiedene Schaltflächen, die wir mit GUICtrlCreateButton erstellen. Die Schaltflächen, die wir definieren sind: Die Ziffern 0 bis 9, die Operatoren, Speicherfunktionen wie z.B. Memory Clear ("MC"), Memory Restore ("MR"), usw. Du kannst den Code einfach von hier kopieren und in dein Skript einfügen:

; Ziffernschaltflächen
$CTRL_btn0 = GUICtrlCreateButton("0", 54, 171, 36, 29)
$CTRL_btn1 = GUICtrlCreateButton("1", 54, 138, 36, 29)
$CTRL_btn2 = GUICtrlCreateButton("2", 93, 138, 36, 29)
$CTRL_btn3 = GUICtrlCreateButton("3", 132, 138, 36, 29)
$CTRL_btn4 = GUICtrlCreateButton("4", 54, 106, 36, 29)
$CTRL_btn5 = GUICtrlCreateButton("5", 93, 106, 36, 29)
$CTRL_btn6 = GUICtrlCreateButton("6", 132, 106, 36, 29)
$CTRL_btn7 = GUICtrlCreateButton("7", 54, 73, 36, 29)
$CTRL_btn8 = GUICtrlCreateButton("8", 93, 73, 36, 29)
$CTRL_btn9 = GUICtrlCreateButton("9", 132, 73, 36, 29)
$CTRL_btnPeriod = GUICtrlCreateButton(".", 132, 171, 36, 29)
; Speicherfunktionen
$CTRL_btnMClear = GUICtrlCreateButton("MC", 8, 73, 36, 29)
$CTRL_btnMRestore = GUICtrlCreateButton("MR", 8, 106, 36, 29)
$CTRL_btnMStore = GUICtrlCreateButton("MS", 8, 138, 36, 29)
$CTRL_btnMAdd = GUICtrlCreateButton("M+", 8, 171, 36, 29)
; Operatoren
$CTRL_btnChangeSign = GUICtrlCreateButton("+/-", 93, 171, 36, 29)
$CTRL_btnDivision = GUICtrlCreateButton("/", 171, 73, 36, 29)
$CTRL_btnMultiplication = GUICtrlCreateButton("*", 171, 106, 36, 29)
$CTRL_btnSubtract = GUICtrlCreateButton("-", 171, 138, 36, 29)
$CTRL_btnAdd = GUICtrlCreateButton("+", 171, 171, 36, 29)
$CTRL_btnAnswer = GUICtrlCreateButton("=", 210, 171, 36, 29)
$CTRL_btnInverse = GUICtrlCreateButton("1/x", 210, 138, 36, 29)
$CTRL_btnSqrt = GUICtrlCreateButton("sqrt", 210, 73, 36, 29)
$CTRL_btnPercentage = GUICtrlCreateButton("%", 210, 106, 36, 29)
$CTRL_btnBackspace = GUICtrlCreateButton("Backspace", 54, 37, 63, 29)
$CTRL_btnClearE = GUICtrlCreateButton("CE", 120, 37, 62, 29)
$CTRL_btnClear = GUICtrlCreateButton("C", 185, 37, 62, 29)
$CTRL_LblMemory = GUICtrlCreateLabel("", 12, 39, 27, 26)
$CTRL_EdtScreen = GUICtrlCreateEdit("0.", 8, 2, 239, 23)

Nachdem die Controls nun definiert sind, ist es wichtig, die folgernde Zeile hinzuzufügen, um dein Fenster mittels GUISetState anzuzeigen.

GUISetState()

Messages in Schleifen abfangen
Wie im Tutorial "Msgbox" liefert uns die Funktion GUIGetMsg als Rückgabewert den Wert eines Ereignisses in der Dialogbox. Diesen Rückgabewert speichern wir in diesem Fall in einer Variablen ($msg), die wir bei jedem Durchlauf der Do.. Until-Schleife aktualisieren. Für diesen Teil des Tutorials benutzen wir eine einfache Endlosschleife, die durchlaufen wird, bis das Ereignis, das der Konstante $GUI_EVENT_CLOSE (= -3) entspricht, eintritt. Das Fenster wird dann geschlossen und das Skript beendet. Die benötigten Skriptzeilen sind also folgende:

Do
$msg = GUIGetMsg()
Until $msg = $GUI_EVENT_CLOSE

Anwendung von Styles
An diesem Punkt sind wir schon in der Lage, unsere Dialogbox zu designen. Du kannst das Skript bereits ausführen und wirst den fast kompletten Rechner sehen. Das Control "Edit" , in dem die Ergebnisse angezeigt werden sollen, wird nicht korrekt angezeigt (Fig. 2). Wir müssen also bestimmte Style auf das Aussehen des Controls anwenden. Damit das Edit richtig dargestellt wird, benutzen wir die EDIT styles:

Fig. 2

Für dieses Beispiel müssen wir gerade einmal zwei Zielen Code anpasssen.
Erste Veränderung: Wir werden in der Zeile mit der Variablen $CTRL_EdtScreen festlegen, dass das Control (Edit) nur lesbar ($ES_READONLY) und rechtsbündig ist ($ES_RIGHT). Diese beiden Variabeln verknüpfen wir mit der BitOR-Funktion, wie es unten gezeigt wird. Wir werden außerdem $WS_EX_STATICEDGE als Parameter der erweiterten Styles (exStyle) übergeben, sodass das Edit wie eingesunken aussieht. Die detailierte Liste aller Edit-Styles findest du hier.
$CTRL_EdtScreen = GUICtrlCreateEdit (" 0.", 8, 2, 239, 23, BitOR($ES_READONLY, $ES_RIGHT), $WS_EX_STATICEDGE )

Zweite Veränderung: Außerdem modifizieren wir die Zeile mit der Variablen $CTRL_LblMemory, die ein Control von Typ "Label" repräsentiert und uns im 2. Teil dieses Tutorials den Inhalt des Rechnerspeichers anzeigen wird. Dieses Control soll ebenfalls eingesunken sein ($SS_SUNKEN). Die detailierte Liste der Label-Syles findest du hier.

$CTRL_LblMemory = GUICtrlCreateLabel ("", 12, 39, 27, 26, $SS_SUNKEN)

Nach diesen Änderungen kannst du das Skript erneut ausführen. Die Veränderungen sollten sich so auswirken, dass ein Fenster wie das in Fig. 3 entsteht. Damit sieht der Rechner so aus, wie wir ihn uns in Fig. 1 vorgestellt hatten. Schau dir hier das komplette Skript noch einmal an, wenn du möchtest.

Fig. 3

Zur Übung kannst du versuchen, manchen Buttons das Style-Attribut $BS_FLAT zuzuweisen. Dann sollte der Button flach dargestellt werden.