Rozgość się w Sieci

Zaprezentujemy tu metody, które przydadzą się każdemu, kto będzie chciał utworzyć formularz za pomocą programu Flash. Pokażemy przy tym, jak projektować mechanizmy przetwarzające uzyskane dzięki niemu informacje. Przypomnimy, w jaki sposób odczytywać i manipulować danymi zapisanymi w formacie XML, a także w jaki sposób wysyłać je na serwer.

Podczas tworzenia całej aplikacji napiszemy dwa proste skrypty w języku PHP (Hypertext Preprocessor). Pomogą nam one w obsłudze danych, które będziemy przechowywali w bazie (w naszym wypadku jest to MySQL). Taki zestaw narzędzi jest obecnie jednym z najpopularnieszych. Pozwala on na tworzenie aplikacji sieciowych, które interpretuje i wykonuje serwer. Również dane, które programy te przetwarzają, przechowywane są w bazie umieszczonej na serwerze.

Przydatne klocki

Zacznijmy od czegoś prostego – będzie to w zasadzie powtórzenie czynności z poprzedniego odcinka (wczytanie i przetworzenie danych w formacie XML). Tym razem jednak przetworzony tekst zostanie umieszczony wewnątrz komponentu.

Komponenty (components) są obiektami standardowej biblioteki Flasha. Wyobraźmy je sobie jako klocki, z których tworzymy skomplikowane i ciekawe budowle. Mają one określone przeznaczenie i pełnią konkretne funkcje. Dzięki nim generujemy struktury (aplikacje). Oprócz komponentów odpowiedzialnych za wygląd programów (

UI Components

– skorzystamy z nich w tej części) występują tu także bardzo rozbudowane obiekty z grupy

MediaComponents

(MediaDisplay, MediaPlayback, MediaController) – to w zasadzie gotowe odtwarzacze plików audio i wideo. Trzecim standardowo zainstalowanym zestawem są Data Components. Służą one do pracy z danymi, ale na razie nie będą nam potrzebne.

Dostępne we Flashu komponenty, o czym się przekonamy, są bardzo funkcjonalne. Dodatkową zaletą jest ich liczba (kategoryzuje się je w biblioteki). Inne obiekty pobieramy zazwyczaj z Internetu. Istnieje też opcja utworzenia własnego komponentu i udostępnienia go na stronie WWW użytkownikom Sieci.

Plan działania

Rozpoczynamy od utworzenia nowej aplikacji Flasha. Zmieniamy jej wymiary na 770×670 pikseli. Tym razem film będzie się składał tylko z czterech klatek. W pierwszej z nich umieścimy skrypt odpowiedzialny za ładowanie danych z serwera. Znajdą się tam również graficzne komponenty typu ProgressBar, które będą informowały o postępie wykonywanych czynności – stopniu załadowania danych oraz ich przetworzenia. W klatkach drugiej i czwartej umieszczamy natomiast akcję stop();. W drugiej osadzimy dodatkowo komponent TextArea, w którym wyświetlimy wpisy z księgi gości. W tym samym miejscu umieścimy też przycisk pozwalający na przejście do klatki o numerze 4. Tam wstawimy formularz, dzięki któremu dodamy nowy wpis.

Ciekawy interfejs

Zaczniemy od wykorzystania komponentów dostępnych w produkcie Macromedii. Przechodzimy do drugiej klatki i przeciągamy na scenę komponent TextArea. Jeśli nie mamy rozwiniętego panelu z komponentami, to wydajemy polecenie Window | Design Panels | Components. Nadajemy obiektowi nazwę tekst oraz w panelu Properties określamy wymiary na 700×600 pikseli. Umieszczamy go w punkcie o współrzędnych X=30 ,

Y=20

. Wykorzystamy też bardzo ważną właściwość komponentów – mechanizm zmiany ich wyglądu. Aby go uaktywnić, użyjemy ActionScriptu. Umieszczamy w drugiej klatce kod:

tekst.setStyle(“backgroundColor”, 0xe7e7e7);
tekst.setStyle(“color”, 0x0000ff);
tekst.text = tekscik;

Pierwsze dwie linie spowodują ustawienie koloru tła i suwaka. Po przecinku znajdują się przypisane komponentowi wartości heksadecymalne koloru w formacie RGB. Ostatnia linia powoduje, że wartość zmiennej tekscik zostanie podstawiona za tekst, który wypełni komponent. Kolejną czynnością będzie wyświetlenie sformatowanego tekstu w tym komponencie. Aby to uczynić, przechodzimy do panelu Properties i zmieniamy wartość pola htmlText na true. Tę samą czynność wykonamy też w panelu Component Inspector, jak również za pomocą ActionScriptu, dodając linię kodu:

tekst.htmlText = true;

Poniżej obiektu TextArea umieszczamy przycisk, który pozwoli na przejście do formularza. W tym celu przeciągamy na scenę komponent Button. W panelu Properties bądź Component Inspector zmieniamy napis, który się pojawia na przycisku Dodaj wpis. W tym celu modyfikujemy wartość pola label. Kolejną czynnością jest oprogramowanie przycisku. Klikamy go i w panelu ActionScript przypisujemy mu następującą akcję:

on (click) {
_root.nextFrame();
}

Zaplanuj formularz

Przejdźmy teraz do klatki numer 4 i zbudujmy w niej formularz, który będzie wysyłał na serwer nowe wpisy do księgi gości. Rozmieśćmy elementy w podobny sposób jak na zdjęciu obok. Pole do wpisywania wiadomości tworzymy jako tekstowe typu InputText i nadajemy mu nazwę (InstanceName)

wpis

. Kolejnym polem tego typu jest nick. Wykorzystamy też komponent Label, który będzie pokazywał napis Nick. Pod formularzem umieścimy dwa przyciski, czyli komponenty typu Button. Zmieńmy wartości ich pól label na Rezygnuj i

Dodaj wpis

. Nadajmy instancjom przycisków nazwy, które wykorzystamy w dalszej części artykułu. Będą to odpowiednio:

rezygnuj_btn

oraz wyslij_btn. Zaprogramujmy drugi z nich, tak aby wysyłał dane z formularza. Umieśćmy więc w akcji następujący kod:


on (click) {
var zm:LoadVars = new LoadVars();
var zmi:LoadVars = new LoadVars();
zm.wpis = _root.wpis.text;
zm.nick = _root.nick.text;
zmi.onLoad = function() {
   _root.gotoAndPlay(1);}
zm.sendAndLoad(“http://localhost/
   dodajWpis.php”,zmi, “POST”);
}

Wytłumaczymy teraz, co spowoduje wykonanie powyższego kodu. W momencie kliknięcia przycisku

Dodaj wpis

(zdarzenie

on(click)

) tworzone są dwa obiekty typu LoadVars. Pierwszym z nich jest zm, a drugim zmi. Obiektowi zm przypisujemy dwa nowe pola (

wpis

i

nick

), a jako ich wartości podstawiamy zawartość pól tekstowych o tych samych nazwach. Tak przygotowany obiekt wyślemy na serwer.

Więcej:bezcatnews