Przykład:tworzenie prostej aplikacji

Aby utworzyć projekt HelloWorld i klasę Greeter w programie Flex:

1. W programie Flash Builder wybierz kolejno opcje Plik > Nowy> Projekt Flex.

2. Wpisz HelloWorld jako nazwę projektu. Upewnij się, że typ aplikacji jest ustawiony na „Web (działa w Adobe Flash Player)”, a następnie kliknij przycisk Zakończ.

   Program Flash Builder utworzy projekt i wyświetli go w eksploratorze projektu. Domyślnie projekt powinien zawierać plik o nazwie HelloWorld.mxml i plik ten powinien być otwarty w edytorze..

3. Teraz, aby utworzyć plik niestandardowej klasy ActionScript w programie Flash Builder, wybierz polecenie Plik > Nowy > Klasa ActionScript.

4. W oknie dialogowym Nowa klasa ActionScript, w polu Nazwa, wpisz słowo Greeter jako nazwę klasy, a następnie kliknij przycisk Zakończ.

   Zostanie wyświetlone nowe okno edytora ActionScript.

   Przejdź do punktu Dodawanie kodu do klasy Greeter.

W celu utworzenia klasy Greeter w programie Flash Professional:

1. W programie Flash Professional wybierz opcje Plik > Nowy.

2. W oknie dialogowym Nowy dokument wybierz typ Plik ActionScript, a następnie kliknij przycisk OK.

   Zostanie wyświetlone nowe okno edytora ActionScript.

3. Wybierz polecenie Plik > Zapisz. Wybierz folder, w którym ma być zapisana aplikacja, nadaj plikowi ActionScript nazwę Greeter.as i kliknij przycisk OK.

   Przejdź do punktu Dodawanie kodu do klasy Greeter.

Aby dodać kod do klasy Greeter:

1. Wpisz następujący kod w nowym pliku (możliwe, że część kodu zostanie wpisana automatycznie przez edytor):

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

   Klasa Greeter zawiera jedną metodę sayHello() , która zwraca ciąg znaków „Hello World!”.

2. Wybierz polecenie Plik > Zapisz, aby zapisać ten plik ActionScript.

Klasa Greeter jest teraz gotowa do użycia w aplikacji.

Aby utworzyć aplikację ActionScript za pomocą narzędzia Flash Professional:

1. Wybierz polecenie Plik > Nowy.

2. W oknie dialogowym Nowy dokument wybierz typ Plik Flash (ActionScript 3.0), a następnie kliknij przycisk OK.

   Zostanie otwarte nowe okno dokumentu.

3. Wybierz polecenie Plik > Zapisz. Wybierz folder zawierający plik klasy Greeter.as, nadaj dokumentowi Flash nazwę HelloWorld.fla i kliknij przycisk OK.

4. W palecie narzędzi Flash Professional wybierz narzędzie Tekst. Przesuń kursor po stole montażowym, aby zdefiniować nowe pole tekstowe o wymiarach: około 300 pikseli szerokości i 100 pikseli wysokości.

5. W panelu Właściwości, gdy pole tekstowe wciąż jest zaznaczone na stole montażowym, wybierz typ tekstu „Tekst dynamiczny” oraz wpisz mainText jako nazwę instancji pola tekstowego.

6. Kliknij pierwszą klatkę na głównej osi czasu. Otwórz panel Operacje, wybierając polecenie Okno > Operacje.

7. W panelu Operacje wpisz następujący skrypt:

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

8. Zapisz plik.

Przejdź do punktu Publikowanie i testowanie aplikacji w języku ActionScript.

Aby utworzyć aplikację ActionScript za pomocą narzędzia Flash Builder:

1. Otwórz plik HelloWorld.mxml i uzupełnij zawarty w nim kod, tak aby uzyskać treść przedstawioną na poniższym listingu:

   <?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>

   Ten projekt Flex zawiera cztery znaczniki MXML:

   • Znacznik <s:Application> , który definiuje kontener Application.

   • Znacznik <s:layout> , który definiuje styl układu (układ pionowy) znacznika Application.

   • Znacznik <fx:Script> , który zawiera kod ActionScript.

   • Znacznik <s:TextArea> , który definiuje pole służące do wyświetlania komunikatów tekstowych dla użytkownika.

   Kod w znaczniku <fx:Script> definiuje metodę initApp() wywoływaną po załadowaniu aplikacji. Metoda initApp() ustawia wartość tekstu w polu tekstowym TextArea mainTxt na ciąg znaków „Hello World!”, zwracany przez metodę sayHello() niestandardowej klasy Greeter (którą właśnie napisaliśmy).

2. Wybierz polecenie File > Save, aby zapisać aplikację.

Przejdź do punktu Publikowanie i testowanie aplikacji w języku ActionScript.

Aby opublikować i przetestować aplikację ActionScript za pomocą programu Flash Professional.

1. Opublikuj aplikację, zwracając uwagę na ewentualne błędy kompilacji. W programie Flash Professional, wybierz polecenie Sterowanie > Testuj film, aby skompilować kod ActionScript i uruchomić aplikację HelloWorld.

2. Jeśli podczas testowania aplikacji w oknie Wyjście zostaną wyświetlone błędy lub ostrzeżenia, należy skorygować te błędy w plikach HelloWorld.fla lub HelloWorld.as. Następnie należy ponownie przetestować aplikację.

3. Jeśli podczas kompilacji nie wystąpią błędy, pojawi się okno odtwarzacza Flash Player z aplikacją Hello World.

Stworzyliśmy prostą, ale kompletną aplikację w języku ActionScript 3.0. Przejdź teraz do punktu Udoskonalanie aplikacji HelloWorld.

Aby opublikować i przetestować aplikację ActionScript za pomocą narzędzia Flash Builder:

1. Wybierz polecenie Uruchom > Uruchom HelloWorld.

2. Aplikacja HelloWorld zostanie uruchomiona.

   • Jeśli podczas testowania aplikacji w oknie Wyjście zostaną wyświetlone błędy lub ostrzeżenia, należy skorygować te błędy w plikach HelloWorld.mxml lub Greeter.as. Następnie należy ponownie przetestować aplikację.

   • Jeśli podczas kompilacji nie wystąpią błędy, zostanie otwarte okno przeglądarki z aplikacją Hello World. Powinien zostać wyświetlony tekst „Hello World!” .

   Stworzyliśmy prostą, ale kompletną aplikację w języku ActionScript 3.0. Przejdź teraz do punktu Udoskonalanie aplikacji HelloWorld.

Aby zmodyfikować plik Greeter.as:

1. Otwórz plik Greeter.as.

2. Zmień jego treść na następującą (nowe i zmienione wiersze wyróżniono pogrubioną czcionką):

   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; 
               } 
           } 
       } 
   }

Klasa Greeter ma teraz kilka nowych możliwości i elementów:

• Tablica validNames zawiera listę poprawnych imion użytkowników. Tablica jest inicjowana trzema imionami podczas ładowania klasy Greeter.

• Metoda sayHello() ma teraz parametr w postaci imienia użytkownika i wybiera treść pozdrowienia w zależności od pewnych warunków. Jeśli parametr userName jest pustym ciągiem znaków ( "" ), do właściwości greeting wpisywana jest prośba o podanie imienia. Jeśli imię użytkownika jest poprawne, pozdrowienie przyjmuje postać "Hello, userName ." Jeśli żaden z tych dwóch warunków nie jest spełniony, zmiennej greeting przypisywany jest tekst "Sorry userName , you are not on the list." (Niestety, nie ma Cię na liście).

• Metoda validName() zwraca wartość true , jeśli imię inputName zostanie znalezione w tablicy validNames , oraz wartość false , jeśli nie zostanie znalezione. Instrukcja validNames.indexOf(inputName) porównuje każdy z ciągów znaków w tablicy validNames z ciągiem znaków inputName . Metoda Array.indexOf() zwraca położenie pierwszej instancji obiektu w tablicy. Zwraca wartość -1, jeśli obiekt nie został znaleziony w tablicy.

Następnie należy poddać edycji plik, który odnosi się do klasy ActionScript.

Aby zmodyfikować aplikację za pomocą programu Flash Professional:

1. Otwórz plik HelloWorld.fla.

2. Zmodyfikuj skrypt w klatce nr 1, aby do metody sayHello() klasy Greeter był przekazywany pusty ciąg ( "" ):

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

3. Wybierz narzędzie Tekst w palecie narzędzi. Utwórz dwa nowe pola tekstowe na stole montażowym. Umieść je obok siebie bezpośrednio pod istniejącym polem tekstowym mainText .

4. Do pierwszego nowego pola tekstowego, które będzie etykietą, wpisz tekst User Name: .

5. Zaznacz drugie z nowych pól tekstowych i w Inspektorze właściwości jako typ pola tekstowego wybierz Tekst wejściowy. Jako typ wiersza wybierz Pojedynczy. Jako nazwę instancji wpisz textIn .

6. Kliknij pierwszą klatkę na głównej osi czasu.

7. W panelu Operacje dodaj następujące wiersze do istniejącego skryptu:

   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); 
       } 
   }

   Nowy kod wprowadza następującą funkcjonalność:

   • Pierwsze dwa wiersze po prostu definiują granice dwóch pól tekstowych.

   • Wejściowe pole tekstowe, takie jak textIn może wywoływać szereg różnych zdarzeń. Metoda addEventListener() pozwala na wskazanie funkcji wywoływanej po zajściu zdarzenia określonego typu. W tym przypadku zdarzeniem jest naciśnięcie klawisza na klawiaturze.

   • Funkcja niestandardowa keyPressed() sprawdza, czy naciśniętym klawiszem jest Enter. Jeśli tak, wywołuje metodę sayHello() obiektu myGreeter , przekazując jako parametr tekst z pola textIn . Metoda ta zwraca tekst pozdrowienia właściwy dla przekazanej wartości. Następnie zwrócony ciąg znaków jest przypisywany do właściwości text pola tekstowego mainText .

   Oto kompletny skrypt dla klatki nr 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. Zapisz plik.

9. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.

   Po uruchomieniu aplikacja wyświetli monit informujący o konieczności wprowadzenia nazwy użytkownika. Jeśli imię będzie poprawne (Sammy, Frank albo Dean), aplikacja wyświetli komunikat potwierdzający „Hello...”.

Aby zmodyfikować aplikację za pomocą narzędzia Flash Builder:

1. Otwórz plik HelloWorld.mxml.

2. Następnie zmodyfikuj znacznik <mx:TextArea> w taki sposób, aby wskazywał, że jest to pole tekstowe tylko do odczytu. Zmień kolor tła na jasnoszary i ustaw dla atrybutu editable wartość false :

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

3. Teraz dodaj następujące wiersze bezpośrednio po zamykającym znaczniku <s:TextArea> . Te wiersze tworzą składnik TextInput, w którym użytkownik może wprowadzić imię:

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

   Atrybut enter definiuje operacje wykonywane, gdy użytkownik naciśnie klawisz Enter w polu userNameTxt . W tym przykładzie kod przekazuje tekst z pola do metody Greeter.sayHello() . Powoduje to zmianę powitania w polu mainTxt .

   Plik HelloWorld.mxml wygląda w następujący sposób:

   <?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. Zapisz zmodyfikowany plik HelloWorld.mxml. Wybierz polecenie Uruchom > Uruchom HelloWorld, aby uruchomić aplikację.

   Po uruchomieniu aplikacja wyświetli monit informujący o konieczności wprowadzenia nazwy użytkownika. Jeśli imię będzie poprawne (Sammy, Frank albo Dean), aplikacja wyświetli komunikat potwierdzający „Hello, userName ."