AS3-Tutorium: Flex: Butterfly 03 variable number of rounds

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

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

Umfang: 3 (einige wichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 5 (ausgezeichnet)

AS3-Tutorium: Butterfly: Flash | Flex

Flex: Übersicht | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5

Flatternder Schmetterling

Im zweiten Teil des Flex-Tutoriums die Anwendung erweiter: Anstelle einer festen Anzahl von Runden zu fliegen, kann der Benutzer die Zahl der Runden vorgeben. Hierbei werden als Button und Texteingabefeld Flex-Komponenten (Spark) an Stelle von Flash-Komponenten verwendet. Diese sind wesentlich flexibler. Zum Beispiel kann das Aussehen frei definiert werden (Skinning).

<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly03Flex4Flash11/swf/Butterfly03Flex4Flash11.swf</swf> Musterlösung (Flex 4/Flash CS5) (SVN-Repository)

Musterlösung (Flex 4/Flash CS4) (SVN-Repository)

Weiterentwicklung von Teil 2 des Flex-Tutoriums

Die Programmierung des Flex-Projektes führt die Programmierung des Flex-Projektes Butterfly03Flex weiter. Sie können daher entweder Ihre Lösung von Teil 2 nehmen und gemäß den nachfolgenden Beschreibungen erweitern. Oder Sie erstellen ein neues Projekt Butterfly03Flex und kopieren den Ordner assets und den Inhalt von Ordner lib. Zu guter Letzt kopieren Sie den Inhalt der Datei Butterfly02Flex.mxml und fügen diesen in die Datei Butterfly03Flex.mxml des neuen Projektes ein.

Im Folgenden arbeiten Sie ausschließlich im Flash Builder.

Die Input-Komponente

1. Im Paket-Explorer: Klick mit der rechten auf Butterfly03/Flex/src/(Standardpaket) → Neu → MXML-Komponente → Name: Input → Fertig stellen.
2. Im Editorfenster von Input.mxml (wurde automatisch geöffnet): Wechsel in den Design-Modus (Design) → Rahmen der Kompnente verkleinern → Button-, Label- und TexInput-Komponente aus dem Komponentenfenster in das Editorfesnter ziehen.
3. Im Editorfenster von Input.mxml: Die Eigenschaften der drei Kompnenten bearbeiten:
   • Label: Den Text Beschriftung nach Doppelklick auf diesen Text in Anzahl Runden : ändern. Eventuell Font anpassen (Eigenschaften-Fenster).
   • Button: Den Text Button nach Doppelklick auf diesen Text in Start ändern.
   • Button: Selektieren → Im Eigenschaften-Fenster rechts ID eintragen: buttonStart.
   • TextInput: Skalieren, evtl. Font anpassen.
   • TextInput: Selektieren → Im Eigenschaften-Fenster rechts ID eintragen: inputRounds.
   • Alle drei Komponenten wie gewünscht anordnen.

Der MXML-Code der Input-Komponente (Quellenmodus) sollte in etwa wie folgt aussehen (Sie können diesen Code auch direkt in Ihre Datei kopieren):

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="76">
  <s:Button x="120" y="44" label="Start" id="buttonStart"/>
  <s:TextInput x="120" y="10" width="70" id="inputRounds"/>
  <s:Label x="12" y="10" height="22" 
           fontSize="14" verticalAlign="middle"
           text="Anzahl Runden:" />
</s:Group>

Quellen

• Kowarschick, W.: Multimedia-Programmierung
• Musterlösung (Flex 4/Flash CS5)
• Musterlösung (Flex 4/Flash CS4)

SVN-Repository-Verweise

• Musterlösung (Flex 4/Flash CS5)
• Musterlösung (Flex 4/Flash CS4)




Dieser Artikel ist GlossarWiki-konform.