AS3-Tutorium: Flash: Calculator 01 integer

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 4 (großteils überprüft)

Umfang: 1 (zu gering)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 5 (ausgezeichnet)

AS3-Tutorium: Calculator: Flash | Flex

Flash: Übersicht | Teil 1 | Teil 2

Taschenrechner

In diesem Teil des Tutoriums wird beschrieben, wie ein einfacher Taschenrechner implementiert werden kann. Dieser kann nur Interzahlen verarbeiten. Auf Komma- und Exponential-Darstellungen wird ebenso verzichtet, wie auf eine Fehlerbehandlung bei einer Division durch Null.

<swf width="300" height="420">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/calculator/calculator_01_integer/Calculator01Flash11.swf</swf> Musterlösung (SVN-Repository)

Datenmodell

Im Folgenden wird ein Klassendiagramm beschrieben, dass die Implementierung des obigen Taschenrechners gemäß dem LDVCS-Paradigmas ermöglicht. Den für dieses Model von StarUML erzeugten Code-Rahmen finden Sie im Ordner staruml_code der Musterlösung. Beachten Sie allerdings, dass die Attribute im Allgemeinen mit Hilfe von Getter- und Setter-Methoden implementiert werden müssen. Insbesondere für die Attribute data, controller, logic und keyInput, die von der Main-Klasse Calculator01Flash initialisiert werden, sollten nur Setter-Methoden definiert werden. Auf diese Attribute wird niemals von außerhalb zugegriffen.

Medium:AS3-Tutorium Calculator 01 Flash Class Diagram.jpg

Vier LDVCS-Komponenten

Aus folgenden vier LDVCS-Komponenten besteht der Taschenrechner (eine Service-Komponente gibt es nicht, da der Taschenrechner weder konfiguriert werden muss noch mit anderen Anwendungen kommuniziert):

ViewCalculator

Die View-Komponente enthält ein Panel bestehnd aus Digitalziffern (ein Vorzeichen-Element und acht Sieben-Segment-Elemente) zum Darstellen des Rechenergebnisses. Außerdem enthält sie 16 Tasten zur Eingabe von Ziffern und Operatoren.

ControllerCalculator

Der Controller bietet eine Methode keyClick, die von der View aufgerufen wird, sobald eine Taste gedrückt wird. Dieser Methode wird im Parameter p_value übergeben, welche Taste gedrückt wurde: 0, ..., 9, "C", "=", "+", "-", "×", "÷". Der Controller überfügt über zwei Attribute, die bei Programmstart initialisiert werden:

• keyInput enthält das Stage-Objekt, um auf Tastatur-Ereignisse direkt zugreifen zu können. Damit kann der Taschenrechner auch über die Tastatur gesteuert werden.
• logic enthält die Logik-Komponente der Anwendung. Die Aufgabe des Controllers ist es, die Methoden dieser Komponenten abhängig von der Benutzer-Eingabe aufzurufen.

LogicCalculator

Aufgabe der Logik-Komponente ist es, abhängig von der Benutzeraktion

• Drücken einer Ziffer: addDigit
• Drücken einer Operatortaste: addOperator
• Drücken der Clear-Taste: clear)

ein neues Ergebnis zu berechnen und diese im Data-Objekt zu speichern. Das Data-Objekt wird bei Programmstart initialisiert.

DataCalculator

Das Daten-Objekt enthält alle Daten die von der View visualisiert werden können:

• value: Die Zahl, die aktuell erfasst wird bzw, das Ergebnis, nachdem eine mathematische Operation ausgeführt wurde.
• operator: Der Operator, der als nächstes angewendet werden soll (wenn die aktuelle Zahl vollständig eingegeben wurde).
• oldValue: Die letzte Zahl, die erfasst bzw. gerechnet wurde. Diese wird mit der aktuellen Zahl (mit Hilfe des zuvor eingegebenen Operators) verknüpft, sobald der nächste Operator ("=", "+", "-", "×", "÷") gedrückt wird.

Im obigen Beispiel wird allerdings nur der Wert des Atributes value visualisiert.

Separation of Concerns

Jede der im Diagramm angegebenen Klassen hat genau eine Aufgabe (vgl. Programmierprinzipen „Separation of Concernse“ und „Single responsibility principle“):

LED

Visualisierung einer LED (Leuchtdiode), die ein- und ausgeschaltet werden kann.

LEDRed

Ein Flash-Symbol, das eine rote LED visualisiert und LED als Basisklasse hat. (In der Musterlösung wurden zwei weitere Flash-Symbole mit der Basis-Klasse LED erstellt: LEDPlusRed und LEDMinusRed. Dies ist aber nicht unbedingt notwendig, wenn man ein als LED ein einfaches Rechteck verwendet.)

Sign

Visualisierung eines Vorzeichen-Elements, bestehend aus ein bis drei LEDs. In der Musterlösung kann das Element drei Werte annehmen: positiv, negativ, ausgeschaltet

Digit

Visualisierung eines Sieben-Segment-Elements, bestehend aus sieben LEDs. In der Musterlösung kann ein deratiges Element ide Ziffern 0 bis 9 darstellen sowie ausgeschaltet sein. Weitere Werte (wie z.B. ein E für Error) sind denkbar.

Panel

Visualisierung einer Intergerzahl mit maximal acht Stellen.

Key

Visualisierung eines Taschenrechner-Buttons für die Benutzereingabe. In der Musterlösung wurde allerdings nicht Button als Basisklasse verwendet, sondern MovieClip, da die Skinning-Möglichkeiten von Flash-Buttons (im Gegesatz zu Flex-Spark-Buttons) eingeschränkt sind.

ViewCalculator

Verknüpfung der anderen Komponenten mit der View:

• Das Panel muss den Wert des Attributs value der Daten-Komponente darstellen.
• Die Keys müssen, sobald sie geklickt werden, ihren Label-Wert an die Methode keyClick der Controller-Komponenten weiterleitet.

ControllerCalculator

Aufbereitung der Benutzer-Eingaben für die Logik-Komponenten. Dabei werden zwei Arten von Eingabe unterstützt:

• Eingabe per Maus-Klick (View-Komponente)
• Eingabe per Tastatur (Listener für Keyboard-Events)

LogicCalculator

Aktualisieren der Werte in der Daten-Komponente nach jeder Benutzerkation.

DataCalculator

Verwaltung der Daten, die visualisiert werden sollen:

• Speichern der Daten
• Informieren der interessierten Observers über Änderungen

Calculator01Flash11

Starten der Anwendung, insbesondere Erzeugen und Initialisieren aller LDVCS-Komponenten.

EnumKey

Bereitstellung von Konstanten, die im Controller, in der Logikkomponente sowie im Daten-Objekt verwendet werden.

Anmerkung: Das Prinzip Programmierprinzip „Single responsibility principle“ wurde nicht zu 100% umgesetzt. So könnten z.B. zwei Controller-Komponenten definiert werden, eine für die Verarbeitung von Bildschirmeingaben und eine für die Verarbetung von Tastatureingaben. Genauso könnte die Klasse ViewCalculator durch zwei Klassen ersetzt werde: Eine zur Initialisierung der Daten-Ausgabe (Panel) und eine zur Initialisierung der Benutzereingabe (Keys).

Ziel des „Single responsibility principle“ ist immer, dass es für keine Klasse mehrere Gründe geben soll, warum sie geändert werden muss. Zum Beispiel muss derzeit die Klasse ControllerCalculator geändert werden, wenn sich die Tastatureingabe ändert (was z.B. bei einem Umstieg von einer deutschen auf eine französische Tastatur notwendig wird, da der KeyboarEvent nur die Character Codes einer englischen Tastatur liefert und daher die Controller-Klasse an jede Tastatur angepasst werden muss). Aber auch, wenn die Symbole der Tasten, die per Maus aktiviert werden, geändert werden sollen, muss diese Klasse modifiziert werden, obwohl der eine Änderungswunsch nichts mit dem anderen zu tun hat.

Implementierung

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

LED: Visualisierung einer LED (Leuchtdiode)

Diese Klasse enhält eine Attribut value, das die beiden Werte LED.OFF und LED.ON annehmen kann.

Das Attribut wird mit Hilfe eines Getter-/Setter-Paares realisiert.

Die Getter-Methode liefert als Ergebnis den aktuellen Status der LED . Dieser wird aus einer privaten Zustandsvariablen ausgelesen. Auf diese Methode könnte sogar verzichtet werden, da es nicht die Aufgabe einer View ist, Auskunft über seinen Zustand zu geben. Eine View dient lediglich dazu, einen Zustand zu visualisieren.

Die Setter-Methode speichert den neuen Wert (evtl. erst nachdem sie sich davon überzeugt hat, dass dieser Wert nicht fehlerhafter ist) in der zuvor genannten privaten Zustandsvariablen (sofern die Setter-Methode implementiert wurde) und visualisiert den neuen Wert indem sie das zugeörige Objekte this (dem die Klasse LED als Basisklasse zugeordnet ist) manipuliert. Dafür gibt es mehrere Möglichkeiten:

• die Eigenschaft visible des Symbols auf true oder false setzen
• den Alphawert des Symbols verändern
• zu einer anderen Stelle in der Timeline des Symbols springen

Sign und Digit: Visualisierung eines Vorzeichen-Elements und eines Sieben-Segment-Elements

Panel: Visualisierung einer Intergerzahl

Key: Visualisierung eines Taschenrechner-Buttons

ViewCalculator: Verknüpfung der anderen Komponenten mit der View

EnumKey: Bereitstellung von Konstanten

ControllerCalculator: Aufbereitung der Benutzer-Eingaben für die Logik-Komponenten

LogicCalculator: Aktualisieren der Werte in der Daten-Komponente

Mealy-Automat

Medium:AS3-Tutorium Calculator 01 Mealy Machine.jpg

DataCalculator: Verwaltung der Daten, die visualisiert werden sollen

Calculator01Flash11: Starten der Anwendung, insbesondere Erzeugen und Initialisieren aller LDVCS-Komponenten

Quellen

• Kowarschick, W.: Multimedia-Programmierung
• Musterlösung

SVN-Repository-Verweise

• Musterlösung




Dieser Artikel ist GlossarWiki-konform.