Steuerelemente
Steuerelemente sind Bestandteile einer Benutzeroberfläche und dienen zur Interaktion mit dem Bediener. Da uns bei
der Verwendung des Flex SDKs das Package fl und deren untergeordnete Packages und Klassen fehlen, sind die
Möglichkeiten der Steuerelemente sehr begrenzt. Trotzdem lassen sich mit den hier vorgestellten Elementen einiges anstellen.
Des Weiteren sollte beachtet werden, dass in Flash-Anwendungen vor allem grafische Bestandteile und Bilder verwendet werden,
welche wir in diesem und im nächsten Thema ebenfalls vorstellen werden.
Um Steuerelemente (zumeist die Basisklasse InteractiveObject) zu erzeugen, wird ein Objekt der jeweiligen Klasse
instanziiert. Um das Element einem „Container“ (z. B. der Klasse Sprite) hinzuzufügen, müssen wir die Funktion
addChild() aufrufen. Zur Erinnerung: Unsere Main-Klasse ist von der Klasse Sprite
abgeleitet. Steuerelemente können mittels der Eigenschaften x und y positioniert werden.
Beide Werte sind auf den Wert 0 voreingestellt. Die Position 0|0 befindet sich in der Ecke oben
links. Die Einstellung der Größe kann mittels der Eigenschaften width und height erfolgen.
Unsere Anwendung hat bisher immer die Größe von 800x600 Pixeln. Diese Einstellung kann in FlashDevelop in den Projekteinstellungen
(Project → Properties) jedoch jederzeit geändert werden. Eine weitere nützliche Eigenschaft ist
visible, welche einen Wert vom Typ Boolean erwartet und es ermöglicht, das Element auszublenden.
Mittels der Eigenschaft name können wir dem Steuerelement einen Namen geben. Diese Eigenschaft wird zumeist
nur dann gesetzt, wenn wir später auf das Element mittels der Funktion getChildByName() des sogenannten
Anzeigeobjekt-Containers (z. B. Sprite) zugreifen möchten. Das Entfernen eines Steuerelementes aus dem
Container kann mittels der Funktion removeChild() durchgeführt werden. Dieser Funktion muss dabei das Objekt des
zu entfernenden Steuerelements übergeben werden.
Textfeld
Ein Textfeld können wir mittels der Klasse TextField darstellen und erzeugen. Dieses Textfeld kann dabei nur zur
Anzeige dienen (sozusagen ein „Label“), nicht änderbar jedoch selektierbar sein oder zur Eingabe durch den Benutzer verwendet
werden. Über die Eigenschaft text kann der anzuzeigende Text bzw. der eingegebene Text abgerufen
werden. Mittels der Eigenschaft selectable lässt sich steuern, ob der Text markiert werden kann. Standardmäßig
ist dies erlaubt (Wert true). Mit der Eigenschaft type und dem Wert der statischen Konstante
INPUT der TextFieldType-Klasse kann festgelegt werden, dass der Text änderbar ist.
Um die Schrifteinstellungen eines Textfelds zu ändern, müssen wir ein Objekt der TextFormat-Klasse erzeugen. Dem
Konstruktor können dabei unter anderem die Schriftart (Eigenschaft font), die Schriftgröße (Eigenschaft size)
und die Schriftfarbe (Eigenschaft color) übergeben werden. Weitere Eigenschaften sind u. a. bold (Fettdruck),
italic (kursiver Text), underline (unterstrichener Text) und align (horizontale Ausrichtung).
Zeichenketten-Konstanten für die Textausrichtung können aus der Klasse TextFormatAlign abgerufen werden. Um dem
TextField-Objekt das TextFormat-Objekt zuzuweisen, können wir der Eigenschaft defaultTextFormat
das TextFormat-Objekt zuweisen. Alternativ können wir auch die Funktion setTextFormat() verwenden. Hierbei
muss jedoch beachtet werden, dass dieser Aufruf immer nach der Zuweisung der text-Eigenschaft erfolgen muss. Des
Weiteren ist es möglich, der Funktion zwei weitere Parameter (Startindex und Endindex) zu übergeben, um somit die Formatierung nur
auf einen bestimmten Teil des Texts anzuwenden.
var meinTextFormat:TextFormat = new TextFormat("Times", 30, 0xFF0000); // 0xFF0000 = rot
meinTextFormat.bold = true; // Fettdruck
meinTextFormat.italic = true; // kursiver Text
meinTextFormat.align = TextFormatAlign.RIGHT; // rechtsbündiger Text
Mittels der Eigenschaften background (Datentyp Boolean) und backgroundColor (Datentyp
uint) ist es möglich, dem Textfeld eine Hintergrundfarbe zu geben. Durch die Eigenschaft border
(Datentyp Boolean) und borderColor (Datentyp uint) kann ein Rahmen eingestellt werden.
displayAsPassword legt fest, ob es sich bei dem Textfeld um ein Eingabefeld für Passwörter handelt, um somit die
Zeichen „verschlüsselt“ darzustellen. Wollen wir mittels der TextField-Klasse einen mehrzeiligen Text
erzeugen, so muss der Wert der Eigenschaft multiline auf true gesetzt werden.
// Überschrift "Formular"
var ueberschrift:TextField = new TextField();
var ueberschriftFormat:TextFormat = new TextFormat("Arial", 50);
ueberschriftFormat.bold = true;
ueberschriftFormat.align = TextFormatAlign.CENTER;
ueberschrift.y = 20;
ueberschrift.width = 800;
ueberschrift.height = 60;
ueberschrift.selectable = false;
ueberschrift.text = "Formular";
ueberschrift.setTextFormat(ueberschriftFormat);
addChild(ueberschrift);
// Beschriftungsfelder
var beschriftungVorname:TextField = new TextField();
var beschriftungNachname:TextField = new TextField();
var beschriftungFormat:TextFormat = new TextFormat("Arial", 20);
beschriftungFormat.align = TextFormatAlign.RIGHT;
beschriftungVorname.y = 100;
beschriftungNachname.y = 140;
beschriftungVorname.width = beschriftungNachname.width = 390;
beschriftungVorname.height = beschriftungNachname.height = 30;
beschriftungVorname.selectable = beschriftungNachname.selectable = false;
beschriftungVorname.text = "Vorname:";
beschriftungVorname.setTextFormat(beschriftungFormat);
beschriftungNachname.text = "Nachname:";
beschriftungNachname.setTextFormat(beschriftungFormat);
addChild(beschriftungVorname);
addChild(beschriftungNachname);
// Eingabefelder
var eingabeVorname:TextField = new TextField();
var eingabeNachname:TextField = new TextField();
var eingabeFormat:TextFormat = new TextFormat("Arial", 20);
eingabeVorname.x = eingabeNachname.x = 410;
eingabeVorname.y = 100;
eingabeNachname.y = 140;
eingabeVorname.width = eingabeNachname.width = 150;
eingabeVorname.height = eingabeNachname.height = 30;
eingabeVorname.border = eingabeNachname.border = true;
eingabeVorname.type = eingabeNachname.type = TextFieldType.INPUT;
eingabeVorname.defaultTextFormat = eingabeFormat;
eingabeNachname.defaultTextFormat = eingabeFormat;
addChild(eingabeVorname);
addChild(eingabeNachname);
Button
Ein Button wird in AS mittels der Klasse SimpleButton dargestellt. Die Klasse SimpleButton enthält keinen
darstellbaren Bereich, jedoch können dem Button verschiedene Steuerelemente zugewiesen werden, welche angezeigt werden sollen,
wenn der Button sich in einem bestimmten Status befindet. Hierfür besitzt die SimpleButton-Klasse die vier Eigenschaften
hitTestState, overState, downState und upState. overState ist aktiv,
wenn sich unser Mauszeiger innerhalb des Buttons bzw. innerhalb des „Erkennungsrechtecks“ befindet, die Maustaste jedoch
nicht gedrückt ist. downState ist mit overState zu vergleichen, jedoch mit dem Unterschied, dass beim
downState die Maustaste und somit der Button gedrückt wird. Um das Drücken des Buttons zu erkennen, müssen wir
das Klick-Event registrieren (dazu jedoch später mehr). Der Status upState ist aktiv, wenn sich der Mauszeiger außerhalb
der Schaltfläche (engl. button) befindet. hitTestState legt das Anzeigeobjekt bzw. Steuerelement fest, welches
zur sogenannten Kollisionserkennung dient. Das Element, welches in der hitTestState-Eigenschaft festgelegt ist,
wird dabei nicht durch die SimpleButton-Klasse grafisch dargestellt (außer es wurde manuell mittels addChild()
zum Container hinzugefügt). Aus diesem Grund wird der Eigenschaft hitTestState oft das gleiche Objekt wie der Eigenschaft
upState zugewiesen (siehe Beispiel). Mit der Eigenschaft useHandCursor wird festgelegt, ob der Hand-Cursor
an Stelle des Pfeil-Cursors angezeigt werden soll. Die Standardeinstellung dieser Eigenschaft ist true.
var textAnzeigeA:TextField = new TextField();
var textAnzeigeB:TextField = new TextField();
var textAnzeigeC:TextField = new TextField();
var textFormat:TextFormat = new TextFormat("Arial", 80);
// Text
textAnzeigeA.text = "Komm her ...";
textAnzeigeB.text = "Drück mich ...";
textAnzeigeC.text = "Lass los ...";
// Hintergrund und Rahmen
textAnzeigeA.backgroundColor = 0xFF0000;
textAnzeigeB.backgroundColor = 0x00FF00;
textAnzeigeC.backgroundColor = 0x0000FF;
textAnzeigeA.background = textAnzeigeB.background = textAnzeigeC.background = true;
textAnzeigeA.border = textAnzeigeB.border = textAnzeigeC.border = true;
// Position und Größe
textAnzeigeA.x = textAnzeigeB.x = textAnzeigeC.x = 100;
textAnzeigeA.y = textAnzeigeB.y = textAnzeigeC.y = 50;
textAnzeigeA.width = textAnzeigeB.width = textAnzeigeC.width = 600;
textAnzeigeA.height = textAnzeigeB.height = textAnzeigeC.height = 100;
// Textformatierung
textFormat.align = TextFormatAlign.CENTER;
textFormat.bold = true;
textAnzeigeA.setTextFormat(textFormat);
textAnzeigeB.setTextFormat(textFormat);
textAnzeigeC.setTextFormat(textFormat);
// Button
var button:SimpleButton = new SimpleButton();
button.hitTestState = textAnzeigeA;
button.overState = textAnzeigeB;
button.downState = textAnzeigeC;
button.upState = textAnzeigeA;
addChild(button);
Bild
Um ein Bild (JPG-, PNG- oder GIF-Dateiformat) innerhalb einer AS3-Anwendung darzustellen, benötigen wir die Loader-Klasse.
Über die Funktion load() kann das Bild geladen werden. Als Parameter wird der Pfad zu der Datei mittels eines
URLRequest-Objekts (siehe Beispiel) angegeben. Im Beispiel wird ein Event registriert (Zeile 11), welches auslöst, wenn
das Bild erfolgreich geladen wurde. In der Event-Funktion (imageLoaded()) wird dann das Bild skaliert und erst im
Anschluss dem Anzeigeobjekt-Container hinzugefügt.
private var bildLader:Loader;
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// Bild Ladevorgang starten
bildLader = new Loader();
bildLader.x = 300;
bildLader.y = 200;
bildLader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
bildLader.load(new URLRequest("Bild-Test.jpg"));
}
private function imageLoaded(e:Event):void
{
// Bild von 250x250px auf 200x200px skalieren
bildLader.width = bildLader.height = 200;
// Bild anzeigen
addChild(bildLader);
}