Przykład:tworzenie prostej aplikacji

Język ActionScript 3.0 może być wykorzystywany w wielu środowiskach programistycznych, łącznie z programami Flash Professional i Flash Builder oraz w edytorach tekstu.

W niniejszym przykładzie krok po kroku przedstawiono proces tworzenia i udoskonalania prostej aplikacji w języku ActionScript 3.0 przy użyciu programu Flash Professional lub Flash Builder. Przykładowa aplikacja ilustruje prosty schemat użycia zewnętrznych plików klas ActionScript 3.0 we Flash Professional i Flex.

Projektowanie aplikacji w języku ActionScript

Przykładową aplikacją ActionScript jest standardowa aplikacja „Hello World”, dlatego jej projekt jest bardzo prosty:

  • Aplikacja ma nazwę HelloWorld.

  • Wyświetla jedno pole tekstowe zawierające tekst „Hello World!”.

  • Wykorzystuje jedną klasę zorientowaną obiektowo o nazwie Greeter. Taki projekt umożliwia użycie klasy z projektu Flash Professional lub Flex.

  • W przykładzie najpierw tworzona jest podstawowa wersja aplikacji. Następnie należy dodać funkcję, która spowoduje wprowadzenie nazwy użytkownika przez użytkownika. Wówczas aplikacja sprawdzi, czy nazwa znajduje się na liście znanych użytkowników.

Po określeniu tej zwięzłej definicji można rozpocząć tworzenie aplikacji.

Tworzenie projektu HelloWorld i klasy Greeter

W opisie projektu aplikacji Hello World zawarty jest wymóg, aby kod aplikacji dało się łatwo wykorzystać w innych projektach. W celu osiągnięcia tego celu aplikacja wykorzystuje jedną klasę zorientowaną obiektowo, o nazwie Greeter. Ta klasa jest wykorzystywana z aplikacji utworzonej w programie Flash Builder lub Flash Professional.

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 .

Dodawanie kodu do klasy Greeter

Klasa Greeter definiuje obiekt Greeter , który jest używany w aplikacji HelloWorld.

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.

Tworzenie aplikacji korzystającej z kodu w języku ActionScript

Zbudowana właśnie klasa Greeter zawiera autonomiczny zestaw funkcji programowych, ale nie stanowi kompletnej aplikacji. Aby możliwe było korzystanie z tej klasy, utwórz dokument Flash Professional lub projekt Flex.

W kodzie wymagana jest instancja klasy Greeter. Oto sposób dołączenia klasy Greeter do naszej 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 .

Publikowanie i testowanie aplikacji w języku ActionScript

Tworzenie oprogramowania jest procesem iteracyjnym. Piszemy kod, próbujemy go skompilować i edytujemy, dopóki nie zostanie skompilowany bez błędów. Należy uruchomić skompilowaną aplikację i sprawdzić, czy jest zgodna z założeniami projektowymi. Jeśli nie, należy ponownie poddać kod edycji, aż aplikacja będzie działać zgodnie z oczekiwaniami. Środowiska programistyczne Flash Professional i Flash Builder oferują szereg metod publikowania, testowania i debugowania aplikacji.

Poniżej przedstawiono podstawowe etapy testowania aplikacji HelloWorld w każdym z tych środowisk.

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 .

Udoskonalanie aplikacji HelloWorld

Aby aplikacja była nieco bardziej interesująca, uzupełnimy ją o funkcję pytania o imię użytkownika i sprawdzania, czy imię to występuje na zdefiniowanej z góry liście imion.

Zaczniemy od uzupełnienia klasy Greeter o nową funkcjonalność. Następnie zmodyfikujemy aplikację tak, aby korzystała z tej nowej funkcjonalności.

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 ."