r29-07.doc

(141 KB) Pobierz
Action Script. Podstawy.

Rozdział 29.
Aplikacje serwerowe niezależnych producentów

W tym rozdziale:

·         Technologia ASP i Flash

·         „Generatory” dla Flasha innych producentów oprogramowania

·         Konwersja skryptów CGI

 

W tym rozdziale omówimy aplikacje serwerowe niezależnych producentów wykorzystujące filmy Flasha. Dowiesz się, jak wykorzystać technologię ASP (Active Server Pages) z filmami Flasha. Przyjrzymy się także innym aplikacjom pozwalającym na dynamiczne tworzenie zawartości filmów Flasha.

Technologia ASP i filmy Flasha

ASP jest technologią opracowaną przez Microsoft umożliwiającą twórcom witryn tworzenie dynamicznej zawartości na serwerze stron WWW. ASP jest jedną z kilku technologii łączących ogromne możliwości obróbki danych na serwerze ze składnią HTML. Struktura ASP to połączenie HTML i specjalnych znaczników zawierających skrypty VBScript i JScript (utworzona przez Microsoft wersja języka JavaScript). Gdy użytkownik wywołuje stronę ASP na serwerze WWW obsługującym technologię ASP, strona jest najpierw interpretowana przez filtr ISAPI (Internet Server Application Programming Interface). Dopiero utworzona przez filtr strona jest wysyłana do użytkownika. Ta technika różni się od techniki wykorzystującej język JavaScript (skrypty są wykonywane na komputerze użytkownika), ponieważ pozwala posłużyć się możliwościami serwera. Różni się także od skryptów CGI (Common Gateway Interface), ponieważ pozwala projektantom tworzyć to samo, co skrypty CGI, ale przeważnie dużo prościej[1].

Uwaga! Technologię ASP wykorzystuje aplikacja IIS (Internet Information Server) firmy Microsoft. IIS jest najczęściej wykorzystywany wraz z ASP, ale istnieją także interpretery ASP dla innych platform. Przykładem może być Chilisoft (www.chilisoft.com).

Z poniższego ćwiczenia autorstwa James’a Baker’a dowiesz się, jak utworzyć prosty system logowania, wykorzystując ASP i film Flasha.

Szare tło!

Ćwiczenie eksperta:
Logowanie wykorzystujące ASP
Autor: James Baker

Po wprowadzeniu Flasha 4 i 5 skończyły się czasy, kiedy to twórcy witryn mogli co najwyżej wykorzystać Flasha do utworzenia prostej animacji i interfejsu. Teraz Flash pozwala kreować praktycznie wszystko, od wspaniałych systemów poruszania się po witrynie po zaawansowane systemy sprzedaży produktów przez Internet. Chociaż film Flasha nie umożliwia połączenia z bazą danych (chyba że wykorzystywany jest Generator), jednak po połączeniu go ze skryptem lub aplikacją serwerową jak ASP, wykorzystasz jednocześnie możliwości bazodanowe serwera i graficzne Flasha.

Flash i ASP

Korzystając z zewnętrznego języka programowania, możesz wybrać taki, który Ci najlepiej odpowiada. ASP jest językiem łatwym w nauce i implementacji na platformę Windows NT (2000). Chociaż w tym ćwiczeniu używamy ASP, współpraca Flasha z innymi językami wyglądałaby bardzo podobnie.

Najprościej komunikację pomiędzy filmem Flasha i skryptem serwera wykonać, wykorzystując akcję loadVariables(). Pozwala ona opracować stronę na serwerze, a jej wynik przekazać do poziomu lub klipu filmowego filmu Flasha. Zmienne do serwera możesz przesyłać, używając metody POST lub GET. (Jeśli nie chcesz wysyłać zmiennych, nie musisz tego robić). Możesz także wysyłać zmienne ręcznie, wpisując je po adresie URL; zrobimy tak w tym ćwiczeniu. Po wykonaniu strony na serwerze film Flasha otrzyma zwrócone przez nią zmienne. Flash wymaga, aby były zwracane pary zmienna-wartość. Jeśli chcesz do filmu Flasha przekazać zmienną UserNum, strona ASP musi zwracać wartości w postaci UserNum=2.

Tworzenie logowania we Flashu

Utworzymy prostą stronę z logowaniem do flashowej witryny. Logowania na swojej witrynie możesz potrzebować z kilku powodów, na przykład dla:

·         personalizacji ustawień witryny,

·         uczestnictwa w pokojach rozmów,

·         uczestnictwa w listach dyskusyjnych,

·         zamawiania produktów przez Internet.

Na witrynie FlashChallenge (www.flashchallenge.com) wykorzystujemy logowanie, aby uniemożliwić użytkownikom wielokrotne oddawanie głosu, a co za tym idzie oszukiwanie. Jeśli użytkownik chce zagłosować lub dodać komentarz na temat innej witryny, musi się zalogować. W ten sposób uniemożliwiamy anonimowe głosowanie setki razy na własną witrynę lub wypisywanie niewybrednych komentarzy na temat innych witryn.

Tworzenie filmu Flasha

Klip filmowy zawiera cztery warstwy i 20 ujęć. Najwyższa warstwa nosi nazwę Actions (skrypty). Umieścimy na niej etykiety oraz skrypty ujęć. Poprawimy w ten sposób czytelność listwy czasowej. Powód jest jeszcze jeden, Flash domyślnie wczytuje warstwy od dolnej do górnej. Jeśli skrypty znajdą się na najwyższej warstwie, możemy być pewni, że przed wykonaniem skryptu zostały załadowane wszystkie warstwy poniżej. Czasami używam kilku warstw zawierających skrypty, ale zawsze umieszczam je na samym szczycie stosu.

Dwadzieścia ujęć podzieliłem na cztery części. Ten klip filmowy mógłby mieć tylko cztery ujęcia, ponieważ jednak te, w których nic się nie znajduje, nie zwiększają rozmiaru wynikowego pliku, dodaję ich więcej, aby zwiększyć czytelność etykiet.

Oto cztery części (poniższy rysunek):

·         klatki od 1. do 4. — część Ready (wpisywanie danych),

·         klatki od 5. do 9. — część Logging (logowanie),

·         klatki od 10. do 14. — część Error (błąd),

·         klatki od 15. do 19. — część Success (logowanie poprawne).

Schemat działania klipu filmowego z logowaniem

Pierwsze ujęcie — część Ready

Jest to pierwsze ujęcie klipu filmowego. Pozwolimy w nim użytkownikowi wpisać nazwę użytkownika oraz hasło dostępu wymagane do zalogowania. W pierwszym ujęciu warstwy Actions znajduje się skrypt, w którym deklarujemy zmienną sError równą pustemu ciągowi znaków i zatrzymujemy wskaźnik czasu.

sError = "";

stop();

Mamy dwa wejściowe pola tekstowe — jedno dla nazwy użytkownika (przypisana jest mu zmienna sUserName) i jedno dla hasła (zmienna sPassword). Na poniższym rysunku znajdziesz właściwości pól tekstowych nazwy użytkownika (po lewej) i hasła (po prawej).

W wejściowych polach tekstowych umożliwiamy wpisanie praktycznie każdego znaku ze standardowego zestawu znaków angielskich. Aby to zrobić, kliknij przyciski od 2. do 5. z dolnego szeregu przycisków panelu Text Options. W pole obok przycisków wpisz następujące znaki:

~`!@#$%^&*()_+-={|[]\:";'<>?,./

Dlaczego po prostu nie naciśniemy pierwszego przycisku, aby dodać wszystkie znaki czcionki? Jeśli tak zrobimy, wszystkie niepotrzebne nam znaki z wybranej czcionki zostaną umieszczone w publikowanym pliku .SWF, niepotrzebnie zwiększając jego rozmiar. Większość czcionek zawiera znaki diakrytyczne innych języków[2], więc ich umieszczanie w pliku .SWF jest zbędne.

Mamy także przycisk Submit powodujący zatwierdzenie wpisanych danych i przycisk Clear kasujący zawartość pól tekstowych (rysunek poniżej).

Gdy użytkownik kliknie przycisk Submit, zmienne sUserName i sPassword zostaną przesłane do strony ASP. Strona ASP zweryfikuje poprawność nazwy użytkownika i hasła. Aby jednak odciążyć serwer, przeprowadzimy wstępne sprawdzanie poprawności danych w filmie Flasha. Na przykład sprawdzimy, czy użytkownik rzeczywiście wpisał w pola tekstowe nazwę użytkownika i hasło.

Klonowi przycisku przypisaliśmy poniższy skrypt (znak ¬ oznacza kontynuację tej samej linii kodu; nie umieszczaj go w rzeczywistym skrypcie):

on (release, keyPress "<Enter>") {

  sError = "";

  // sprawdzanie poprawności UserName

  sUserName = _root.Trim(sUserName);

  if (sUserName eq "") {

    sError = sError+"Please enter your UserName."+newline;

  }

  // sprawdzanie poprawności password

  if ((substring(sPassword, 1, 1) eq " ") or (substring(sPassword,¬

    length(sPassword), 1) eq " ")) {

    sError = sError+"Your Password does not begin or end with a¬

    space"+newline;

  }

  if (sPassword eq "") {

    sError = sError+"Please enter your Password."+newline;

  }

  // wczytanie zmiennych lub wyświetlenie błędu

  if (sError == "") {

    gotoAndStop ("Logging");

    loadVariables("Login.asp?UserName="+sUserName+"&Password="¬

    +sPassword, "VariablesMC");

  } else {

    gotoAndStop ("Error");

  }

}

Uwaga autora. Funkcja Trim() jest funkcją napisaną przez Jamesa do sprawdzania „białych” spacji w zmiennej sUserName. Definicję tej funkcji znajdziesz w pierwszym ujęciu filmu Login.fla znajdującego się na CD-ROM-ie w katalogu ch29/james_baker.

Jeśli w danych wpisanych przez użytkownika jest błąd, przechodzimy do 10. ujęcia (etykieta Error), w którym wyświetlamy wartość zmiennej sError. Jeśli nie ma błędu, tworzymy odpowiednie wywołanie strony ASP. W tym przypadku do adresu URL dołączamy zmienne sUserName i sPassword. Korzystam z tej metody tylko wtedy, gdy do strony ASP wysyłam kilka zmiennych. Ponieważ moduł odtwarzacza dla aplikacji Internet Explorer (wersja MacOS) ma problemy z wysyłaniem zmiennych metodą POST, lepiej krótkie zmienne wysyłać wraz z adresem URL.

Moglibyśmy użyć metody GET, ale nie chcemy wysyłać wszystkich zmiennych klipu filmowego do strony ASP a tylko zmienne sUserName i sPassword.

Dane uzyskiwane ze strony ASP wczytujemy do klipu filmowego o nazwie VariablesMC. Następnie przechodzimy do ujęcia opatrzonego etykietą Logging. W tym ujęciu poczekamy na przesłanie wszystkich danych ze strony ASP do klipu filmowego.

Sami musimy zatroszczyć się o to, aby film zaczekał na dane ze strony ASP. Flash po wywołaniu akcji loadVariables() nie czeka na zmienne, które powinna zwrócić, ale od razu przechodzi do wykonywania następnych linii skryptu. We Flashu 4 na końcu zwracanych zmiennych należało umieścić dodatkową, której wczytanie oznaczało koniec pobierania danych.

We Flashu 5 do sprawdzenia otrzymania zmiennych ze strony ASP możemy skorzystać z detektora zdarzeń klipu filmowego. W klipie filmowym VariablesMC użyjemy detektora zdarzeń onClipEvent(data) do określenia akcji, które chcemy wykonać po otrzymaniu zmiennych od strony ASP. Detektor zdarzeń onClipEvent(data) jest wykonywany, gdy wczytano wszystkie pobierane dane do klipu filmowego.

Klip filmowy VariablesMC

Jest to pusty klip filmowy, do którego będziemy wczytywali zmienne. Nie zawiera żadnych elementów graficznych. Wykorzystujemy go tylko od sprawdzenia, czy zostały dostarczone wszystkie dane ze strony ASP i wykonania skryptu, gdy to nastąpi.

Skrypt jest automatycznie wykonywany, gdy odebrane zostaną dane z akcji loadVariables(). Następnie skrypt sprawdza, czy strona ASP zwróciła zmienną o nazwie sError. Jeśli strona ASP wykryje błąd, na przykład nie znajdzie podanej nazwy użytkownika lub ją znajdzie, ale hasło nie będzie prawidłowe, strona ASP wpisze coś do zmiennej sError. Ponieważ w pierwszym ujęciu listwy czasowej wartość zmiennej sError ustawiliśmy na pusty ciąg znaków, wskaźnik czasu przeniesiemy do ujęcia opatrzonego etykietą Success, tylko gdy zmienna sError będzie pusta:

onClipEvent (data) {

  if (sError != "") {

    _parent.gotoAndPlay ("Error");

    _parent.sError = sError;

  } else {

    _parent.gotoAndPlay ("Success");

  }

}

Piąte ujęcie — część Logging

Jest to proste ujęcie kluczowe informujące użytkownika, że trwa proces logowania (poniższy rysunek). W ten sposób użytkownik wie, że dzieje się coś, czego nie widzi. Skrypt w tym ujęciu zawiera tylko akcję stop(). Mamy nadzieję, że zmienne zostaną szybko wczytane i użytkownik nie będzie musiał długo patrzeć na to ujecie.

Dziesiąte ujęcie — część Error

To także jest proste ujęcie, w którym użytkownik dowiaduje się, co się dzieje. W tym przypadku poinformujemy go o wystąpieniu błędu. Ujęcie zawiera jedno pole tekstowe, w którym zostanie wyświetlona wartość zmiennej sError. Właściwości tego pola tekstowego możesz zobaczyć na poniższym polu tekstowym.

W tym ujęciu znajduje się także przycisk Retry (następny rysunek), który ponownie ustawi wartość zmiennej sError na pusty ciąg znaków i przeniesie wskaźnik czasu do pierwszego ujęcia.

Skrypt przypisany do klonu przycisku Retry:

on (release) {

  sError = "";

  gotoAndStop ("Ready");

}

Piętnaste ujęcie — część Success

Kolejne proste ujęcie kluczowe (następny rysunek). Poinformuje ono, że logowanie się powiodło. To ujęcie pokażemy tylko wtedy, gdy strona ASP nie zwróci żadnego błędu.

W przykładzie nie musieliśmy w zasadzie obrabiać danych otrzymanych ze strony ASP. Jeśli jednak musisz taką obróbkę przeprowadzić, najlepiej umieść wykonujący ją skrypt w tym właśnie ujęciu kluczowym. W tym miejscu na witrynie FlashChallenge ustawiamy globalną zmienną oznaczającą prawidłowe zalogowanie użytkownika i wyświetlamy bardziej złożoną wersję menu.

Wprowadzenie do ASP

Strona ASP jest prostym skryptem logowania. Przy bardziej złożonej witrynie nie polecałbym umieszczania nazw użytkowników i haseł w pliku tekstowym, ale głównym tematem tej książki nie jest ASP, więc korzystamy z prostego skryptu, który nie łączy się z bazą danych w celu weryfikacji danych podanych przez użytkownika. Na witrynie FlashChallenge do przechowywania wszystkich danych wykorzystujemy serwer SQL, który zapewnia znacznie wyższą niezawodność, bezpieczeństwo i szybkość niż plik tekstowy.

Strona ASP przechwytuje wysłaną do niej nazwę użytkownika oraz hasło i sprawdza, czy znajduje się ono w pliku tekstowym (users.txt). Jeśli w pliku znajdzie odpowiednią parę użytkownik-wartość, do filmu Flasha wysyła zmienną usernum. W przeciwnym wypadku lub po wystąpieniu innych błędów zwraca zmienną sError.

Ponieważ Flash wysyła zmienne za pomocą akcji loadVariables(), która korzysta z metody POST lub GET, możemy napisać skrypt ASP tak, jakby dane pochodziły ze zwykłego formularza HTML. Więc uzyskanie zmiennych przesłanych do ASP przez film nie jest niczym szczególnie trudnym. Jednak wysłanie zmiennych do Flasha wymaga odpowiedniego formatowania zmiennych. Musimy do Flasha przesłać pary zmienna-wartość rozdzielone znakiem &. Flash potrzebuje tylko tych zmiennych, więc nie musimy dodawać żadnego formatowania HTML do wysyłanych danych. Wysyłamy tylko dane.

Zmienne muszą być parami zmienna-wartość, aby Flash mógł ich użyć. Oto przykład poprawnego formatowania:

Zmienna=wartosc&Zmienna2=wartosc

Przeważnie na początku i na końcu wysyłanego ciągu umieszczamy znak &, aby Flash przypadkowo nie wstawił spacji lub przejścia do następnej linii:

&Zmienna=wartosc&Zmienna2=wartosc&

Jak możesz zobaczyć, każda para jest rozdzielona znakiem &, a żadna nazwa zmiennej nie powtarza się. Możesz kilka razy użyć tej samej nazwy zmiennej, ale Flash zapamięta tylko ostatnią przypisaną do tej zmiennej wartość. Jeśli wartość przekazywanej zmiennej zawiera znak &, zostanie ona podzielona. Pamiętaj, aby każdy znak &, niewykorzystywany do rozdzielenia par zmienna-wartość, zastąpić kodem szesnastkowym %26.

Jeśli chcesz Flashowi przekazać zmienną names o wartości

"Leonard & Nathan"

powinieneś napisać

&names=Leonard %26 Nathan&

Strona Login.asp

Strona ASP przechwytuje wysłaną do niej nazwę użytkownika oraz hasło i sprawdza, czy znajduje się ono w pliku tekstowym (users.txt). Jeśli w pliku znajdzie odpowiednią parę użytkownik-wartość, do filmu Flasha wysyła zmienną usernum. W przeciwnym wypadku lub po wystąpieniu innych błędów, zwraca zmienną sError.

Uwaga autora. Stronę ASP Login.asp znajdziesz na CD-ROM-ie w katalogu ch29/james_baker.

' *****************************************
'     Przetwarzanie danych i logowanie
' *****************************************

If (Request.Querystring.Count > 0) Then

  Dim strUsername 'Nazwa użytkownika
  Dim strPassword 'Hasło
  Dim strFile 'Ścieżka do i nazwa pliku tekstowego
  Dim strTextLine 'Jedna linia pliku tekstowego
  Dim strError 'Przechowuje komunikat o błędzie, jeśli wystąpi
  Dim bolUsernameMatch 'Wartość logiczna określająca, czy nazwa użytkownika była prawidłowa
  Dim bolPasswordMatch 'Wartość logiczna określająca, czy hasło było prawidłowe
  Dim objFSO 'Obiekt File System Object
  Dim objUserFile 'Plik zawierający wszystkie nazwy użytkowników i hasła
  Dim nUserNum 'Numer użytkownika zwracany do filmu Flasha w razie udanego logowania

  ' Inicjalizacja zmiennych
  strFile = Server.MapPath("users.txt")
  strUsername = Request.Querystring("Username")
  strPassword = Request.Querystring("Password")
  bolUsernameMatch = False
  bolPasswordMatch = False
  nUserNum = ""
 
  ' Stworzenie klonu obiektu File System Object
  Set objFSO = CreateObject("Scripting.FileSystemObject")

  If (fxValidateForm) Then
    ' Stworzenie klonu pliku tekstowego
    Set objUserFile = objFSO.OpenTextFile(strFile)
   
    Do While Not (objUserFile.AtEndOfStream Or (bolUsernameMatch And bolPasswordMatch))
    ' Przeczytanie jednej linii
    strTextLine = objUserFile.ReadLine
      If (strTextLine <> "***") Then
      ' Porównanie nazwy użytkownika bez zwracania uwagi na wielkość liter
        If (StrComp(strUsername, strTextLine, 1) = 0) Then
          bolUsernameMatch = True
        End If
    'Przeczytanie jednej linii
        strTextLine = objUserFile.ReadLine
        ' Sprawdzanie hasła ze zwracaniem uwagi na wielkość liter

        If (StrComp(strPassword, strTextLine, 0) = 0) Then
          bolPasswordMatch = True
        End If
          ' Przeczytanie jednej linii
          strTextLine = objUserFile.ReadLine 
          if bolUsernameMatch And bolPasswordMatch Then
            nUserNum = strTextLine
          end if
     else
        ' zresetowanie obydwu zmiennych logicznych i przejście do następnego użytkownika i hasła
     bolUsernameMatch = False
     bolPasswordMatch = False
      End If
    Loop

    ' Ustawienie obiektu na nothing (nic)
    If IsObject(objFSO) Then
      Set objFSO = Nothing
    End If
...

Zgłoś jeśli naruszono regulamin