Beispiel: Erstellen einer einfachen Anwendung

So erstellen Sie das HelloWorld-Projekt und die Greeter-Klasse in Flex:

1. Wählen Sie in Flash Builder „File“ > „New“ > „Flex Project“ (Datei > Neu > Flex-Projekt).

2. Geben Sie den Projektnamen „HelloWorld“ ein. Stellen Sie sicher, dass der Anwendungstyp auf „Web (runs in Adobe Flash Player)“ (wird in Adobe Flash Player ausgeführt) eingestellt ist. Klicken Sie dann auf „Finish“ (Fertig stellen).

   Flash Builder erstellt Ihr Projekt und zeigt es im Paket-Explorer an. Standardmäßig enthält das Projekt bereits eine Datei namens „HelloWorld.mxml“, die im Editor geöffnet ist.

3. Um nun in Flash Builder eine benutzerdefinierte ActionScript-Klassendatei zu erstellen, wählen Sie „File“ > „New“ > „ActionScript Class“ (Datei > Neu > ActionScript-Klasse).

4. Geben Sie im Dialogfeld „New ActionScript Class“ (Neue ActionScript-Klasse) Greeter als Klassennamen in das Feld „Name“ ein und klicken Sie auf „Finish“ (Fertig stellen).

   Ein neues Fenster zum Bearbeiten von ActionScript wird angezeigt.

   Fahren Sie mit dem Abschnitt Hinzufügen von Code zur Greeter-Klasse fort.

So erstellen Sie die Greeter-Klasse in Flash Professional:

1. Wählen Sie in Flash Professional „Datei“ > „Neu“ aus.

2. Wählen Sie im Dialogfeld „Neues Dokument“ die Option „ActionScript-Datei“ aus und klicken Sie dann auf „OK“.

   Ein neues Fenster zum Bearbeiten von ActionScript wird angezeigt.

3. Wählen Sie „Datei“ > „Speichern“. Wählen Sie den Ordner für die Anwendung aus, geben Sie der ActionScript-Datei den Namen Greeter.as und klicken Sie dann auf „OK“.

   Fahren Sie mit dem Abschnitt Hinzufügen von Code zur Greeter-Klasse fort.

So fügen Sie der Greeter-Klasse Code hinzu:

1. Geben Sie den folgenden Code in die neue Datei ein (möglicherweise wurde ein Teil des Codes bereits hinzugefügt):

   package 
   { 
       public class Greeter 
       { 
           public function sayHello():String 
           { 
               var greeting:String; 
               greeting = "Hello World!"; 
               return greeting; 
           } 
       } 
   }

   Die Greeter-Klasse enthält eine einzige sayHello() -Methode, die einen String zurückgibt, der die Worte „Hello World!“ enthält.

2. Wählen Sie im Menü „Datei“ den Befehl „Speichern“, um die ActionScript-Datei zu speichern.

Die Greeter-Klasse kann nun in einer Anwendung verwendet werden.

So erstellen Sie eine ActionScript-Anwendung mit Flash Professional:

1. Wählen Sie „Datei“ > „Neu“.

2. Wählen Sie im Dialogfeld „Neues Dokument“ die Option „Flash-Datei (ActionScript 3.0)“ aus und klicken Sie dann auf „OK“.

   Ein neues Dokumentfenster wird angezeigt.

3. Wählen Sie „Datei“ > „Speichern“. Wählen Sie den Ordner aus, der bereits die Klassendatei „Greeter.as“ enthält, weisen Sie dem Flash-Dokument den Namen HelloWorld.fla zu und klicken Sie auf „OK“.

4. Wählen Sie in der Werkzeugpalette von Flash Professional das Textwerkzeug aus. Definieren Sie auf der Bühne durch Ziehen ein neues Textfeld mit einer Breite von ca. 300 Pixel und einer Höhe von ca. 100 Pixel.

5. Weisen Sie dem auf der Bühne ausgewählten Textfeld im Bedienfeld „Eigenschaften“ den Texttyp „Dynamischer Text“ zu. Geben Sie mainText als Instanznamen des Textfelds ein.

6. Klicken Sie auf das erste Bild der Hauptzeitleiste. Öffnen Sie das Bedienfeld „Aktionen“, indem Sie „Fenster“ >„Aktionen“ wählen.

7. Geben Sie im Bedienfeld „Aktionen“ das folgende Skript ein:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello();

8. Speichern Sie die Datei.

Fahren Sie mit dem Abschnitt Veröffentlichen und Testen der ActionScript-Anwendung fort.

So erstellen Sie eine ActionScript-Anwendung mit Flash Builder:

1. Öffnen Sie die Datei „HelloWorld.mxml“ und fügen Sie Code hinzu, damit die Datei dem folgenden Beispiel entspricht:

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400"/>         
        
   </s:Application>

   Dieses Flex-Projekt beinhaltet vier MXML-Tags:

   • Ein <s:Application> -Tag, das den Anwendungscontainer definiert

   • Ein <s:layout> -Tag, das den Layoutstil (vertikales Layout) für das Application-Tag definiert

   • Ein <fx:Script> -Tag, das ActionScript-Code enthält

   • Ein <s:TextArea> -Tag, das ein Feld zur Anzeige von Textmeldungen für den Benutzer definiert

   Der Code im <fx:Script> -Tag definiert eine initApp() -Methode, die beim Laden der Anwendung aufgerufen wird. Die initApp() -Methode legt den Textwert des mainTxt -TextArea auf den String „Hello World!“ fest, der von der sayHello() -Methode der benutzerdefinierten Greeter-Klasse zurückgegeben wird, die Sie soeben geschrieben haben.

2. Wählen Sie „File“ > „Save“ (Datei > Speichern), um die Anwendung zu speichern.

Fahren Sie mit dem Abschnitt Veröffentlichen und Testen der ActionScript-Anwendung fort.

So veröffentlichen und testen Sie eine ActionScript-Anwendung mit Flash Professional:

1. Veröffentlichen Sie die Anwendung und achten Sie auf Kompilierungsfehler. Wählen Sie in Flash Professional die Optionen „Steuerung“ > „Film testen“ aus, um den ActionScript-Code zu kompilieren und die Anwendung „Hello World“ zu starten.

2. Wenn beim Testen der Anwendung Fehler oder Warnungen im Ausgabefenster angezeigt werden, beheben Sie diese Fehler in den Dateien „HelloWorld.fla“ oder „HelloWorld.as“. Testen Sie die Anwendung dann erneut.

3. Wenn keine Kompilierfehler vorliegen, wird ein Flash Player-Fenster mit der Anwendung „Hello World“ geöffnet.

Sie haben eine einfache, aber dennoch vollständige objektorientierte Anwendung erstellt, die ActionScript 3.0 verwendet. Fahren Sie mit dem Abschnitt Erweitern der Anwendung „HelloWorld“ fort.

So veröffentlichen und testen Sie eine ActionScript-Anwendung mit Flash Builder:

1. Wählen Sie „Run“ > „Run HelloWorld“ (Ausführen > HelloWorld ausführen).

2. Die HelloWorld-Anwendung wird gestartet.

   • Wenn beim Testen der Anwendung Fehler oder Warnungen im Ausgabefenster angezeigt werden, beheben Sie diese Fehler in den Dateien „HelloWorld.mxml“ oder „Greeter.as“. Testen Sie die Anwendung dann erneut.

   • Wenn keine Kompilierungsfehler vorliegen, wird ein Browserfenster mit der Anwendung „Hello World“ geöffnet. Der Text „Hello World!“ wird angezeigt.

   Sie haben eine einfache, aber dennoch vollständige objektorientierte Anwendung erstellt, die ActionScript 3.0 verwendet. Fahren Sie mit dem Abschnitt Erweitern der Anwendung „HelloWorld“ fort.

So aktualisieren Sie die Datei „Greeter.as“:

1. Öffnen Sie die Datei „Greeter.as“.

2. Ändern Sie den Inhalt der Datei wie folgt (neue und geänderte Zeilen werden in Fettschrift angezeigt):

   package 
   { 
       public class Greeter 
       { 
           /** 
            * Defines the names that receive a proper greeting. 
            */ 
           public static var validNames:Array = ["Sammy", "Frank", "Dean"]; 
    
           /** 
            * Builds a greeting string using the given name. 
            */ 
           public function sayHello(userName:String = ""):String 
           { 
               var greeting:String; 
               if (userName == "")  
               { 
                   greeting = "Hello. Please type your user name, and then press " 
                               + "the Enter key."; 
               }  
               else if (validName(userName))  
               { 
                   greeting = "Hello, " + userName + "."; 
               }  
               else  
               { 
                   greeting = "Sorry " + userName + ", you are not on the list."; 
               } 
               return greeting; 
           } 
            
           /** 
            * Checks whether a name is in the validNames list. 
            */ 
           public static function validName(inputName:String = ""):Boolean  
           { 
               if (validNames.indexOf(inputName) > -1)  
               { 
                   return true; 
               }  
               else  
               { 
                   return false; 
               } 
           } 
       } 
   }

Die Greeter-Klasse verfügt jetzt über mehrere neue Funktionen:

• Das Array validNames enthält eine Liste gültiger Benutzernamen. Beim Laden der Greeter-Klasse wird das Array mit einer drei Namen umfassenden Liste initialisiert.

• Die Methode sayHello() akzeptiert jetzt einen Benutzernamen und ändert die Begrüßung unter Berücksichtigung von verschiedenen Bedingungen. Wenn userName eine leere Zeichenfolge ist ( "" ), fordert die Eigenschaft greeting den Benutzer zur Eingabe eines Namens auf. Wenn der Benutzername gültig ist, lautet die Begrüßung „Hello, userName ." Wenn keine der beiden Bedingungen erfüllt ist, nimmt die Variable greeting den folgenden Wert an: „Sorry userName , you are not on the list." .

• Die Methode validName() gibt den Wert true zurück, wenn der inputName im Array validNames gefunden wurde, andernfalls false . Die Anweisung validNames.indexOf(inputName) vergleicht jede Zeichenfolge im Array validNames mit dem eingegebenen String inputName . Die Array.indexOf() -Methode gibt die Indexposition der ersten Instanz eines Objekts in einem Array zurück. Wenn das Objekt im Array nicht gefunden werden kann, wird der Wert -1 zurückgegeben.

Im nächsten Schritt bearbeiten Sie die Anwendungsdatei, die auf diese ActionScript-Klasse verweist.

So ändern Sie die Anwendung mithilfe von Flash Professional:

1. Öffnen Sie die Datei „HelloWorld.fla“.

2. Bearbeiten Sie das Skript in Bild 1 so, dass ein leerer String ( "" ) an die sayHello() -Methode der Greeter-Klasse übergeben wird:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello("");

3. Wählen Sie das Textwerkzeug in der Werkzeugpalette aus. Erstellen Sie auf der Bühne zwei neue Textfelder. Platzieren Sie sie nebeneinander direkt unter dem vorhandenen Textfeld mainText .

4. Geben Sie im ersten neuen Textfeld für die Bezeichnung den Text Benutzername: ein.

5. Markieren Sie das andere neue Textfeld und wählen Sie im Eigenschafteninspektor den Textfeldtyp „Eingabetext“ aus. Wählen als Zeilentyp „Einzeilig“ aus. Geben Sie als Instanzname textIn ein.

6. Klicken Sie auf das erste Bild der Hauptzeitleiste.

7. Fügen Sie im Bedienfeld „Aktionen“ am Ende des vorhandenen Skripts die folgenden Zeilen ein:

   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

   Mit dem neuen Code werden zusätzliche Funktionen hinzugefügt:

   • Die ersten beiden Zeilen definieren einfach Rahmen für zwei Textfelder.

   • Ein Eingabetextfeld wie das Feld textIn verfügt über eine Reihe von Ereignissen, die es auslösen kann. Mit der addEventListener() -Methode können Sie eine Funktion festlegen, die beim Auftreten eines bestimmten Ereignistyps ausgeführt wird. Im Beispiel handelt es sich bei dem Ereignis um das Drücken einer Taste auf der Tastatur.

   • Die benutzerdefinierte Funktion keyPressed() prüft, ob es sich bei der gedrückten Taste um die Eingabetaste handelt. Wenn dies der Fall ist, ruft die Funktion die sayHello() -Methode des myGreeter -Objekts auf und übergibt dabei als Parameter den Text aus dem Textfeld textIn . Auf der Grundlage des übergebenen Strings gibt diese Methode einen Begrüßungsstring zurück. Der zurückgegebene String wird dann der text -Eigenschaft des Textfelds mainText zugewiesen.

   Es folgt der vollständige Skriptcode für Bild 1:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello(""); 
    
   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

8. Speichern Sie die Datei.

9. Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.

   Wenn Sie die Anwendung ausführen, werden Sie zur Eingabe eines Benutzernamens aufgefordert. Wenn dieser gültig ist („Sammy“, „Frank“ oder „Dean“), wird in der Anwendung die Bestätigungsmeldung „Hello“ angezeigt.

So ändern Sie die Anwendung mithilfe von Flash Builder:

1. Öffnen Sie die Datei „HelloWorld.mxml“.

2. Ändern Sie das <mx:TextArea> -Tag, um den Benutzer darauf hinzuweisen, dass der Textbereich nur zur Anzeige vorgesehen ist. Ändern Sie die Hintergrundfarbe in Hellgrau und stellen Sie das editable -Attribut auf false ein:

       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />

3. Fügen Sie nun die folgenden Zeilen direkt nach dem schließenden <s:TextArea> -Tag ein. Mit diesen Zeilen wird eine TextInput-Komponente erstellt, die dem Benutzer die Eingabe eines Wertes für den Benutzernamen ermöglicht:

       <s:HGroup width="400"> 
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup>

   Das enter -Attribut definiert, was geschieht, wenn der Benutzer im userNameTxt -Feld die Eingabetaste drückt. In diesem Beispiel übergibt der Code den im Feld enthaltenen Text an die Greeter.sayHello() -Methode. Der Begrüßungstext im mainTxt -Feld ändert sich entsprechend.

   Die Datei „HelloWorld.mxml“ sieht nun folgendermaßen aus:

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>     
    
       <s:HGroup width="400">     
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup> 
        
   </s:Application>

4. Speichern Sie die bearbeitete Datei „HelloWorld.mxml“. Wählen Sie „Run“ > „Run HelloWorld“ (Ausführen > HelloWorld ausführen), um die Anwendung zu starten.

   Wenn Sie die Anwendung ausführen, werden Sie zur Eingabe eines Benutzernamens aufgefordert. Wenn dieser gültig ist („Sammy“, „Frank“ oder „Dean“), wird in der Anwendung die Bestätigungsmeldung „ Hello, Benutzername “ angezeigt.