Rozdział 11

Przykład 2 — terminarz

W niniejszym rozdziale utworzymy:

·         Rozszerzalny interfejs Flasha dla aplikacji kalendarza..

·         Skrypty wielokrotnego użytku, otwierające połączenia z bazą danych oraz definiujące funkcje.

·         Skrypt odczytujący z bazy danych zaplanowane wydarzenia i przekazujący informacje do filmu Flasha.

·         Osadzony w HTML moduł administratorski, pozwalający na wprowadzanie nowych wydarzeń do bazy danych.

Kto jest człowiekiem mego pokroju, ten zgodzi się ze mną, że pojemność pamięci (w ludzkim wydaniu) jest odwrotnie proporcjonalna do ilości czasu spędzonego przed komputerem — w moim przypadku pojemność ta zmniejsza się do objętości pamięci, jaką dysponuje złota rybka!

Czytelnikowi, dobrze znającemu to zagadnienie, z pewnością przyda się aplikacja, którą zbudujemy jako następną — terminarz elektroniczny.

Choć projekt ten powstał z konieczności, warto rozejrzeć się i zobaczyć, czy niektórych pomysłów zastosowanych w innych kalendarzach sieciowych, nie można by powielić. Dla mnie inspiracją był stary, osobisty organizator, którego używałem na komputerze Commodore Amiga.

Omówmy teraz podstawowe kroki jakie należy wykonać podczas budowy tej aplikacji. Zauważmy, że będziemy je rozważać, nie zastanawiając się nad sposobem ich implementacji. Oznacza to, że nie określimy tu skąd będą pobierane dane, w jaki sposób, ani nawet co będzie pobierane. Mówiąc ogólnie, jest to bardzo dobra metoda pracy na etapie projektowania aplikacji, gdyż umożliwia wykorzystanie innego, ogólnego projektu i zaimplementowania go przy użyciu odmiennych technologii.

Tak więc, dość gadania, przejdźmy do rzeczy. Aplikacji kalendarza zamierzamy nadać następujące działanie...

·         Ustawiamy rok, wyświetlany jako rok bieżący.

·         Wczytujemy liczbę wydarzeń w każdym miesiącu roku.

·         Wyświetlamy kalendarz użytkownikowi.

·         Gdy użytkownik wybierze miesiąc, wczytujemy szczegóły zaplanowanych w nim wydarzeń.

·         Wyświetlamy listę wydarzeń w danym miesiącu.

·         Naciśnięciem przycisku użytkownik powraca do punktu 2.

Ponadto, zamierzamy również umożliwić użytkownikowi przeglądanie wydarzeń z lat przeszłych, jak i zaplanowanych na lata przyszłe — co będzie szczególnie przydatne dla osób snujących plany długoterminowe.

Oprócz tego, warto byłoby umożliwić użytkownikowi, w kroku 5, przechodzenie pomiędzy kolejnymi miesiącami, aby nie musiał wracać do głównego widoku kalendarza. Kalendarz pozbawiony tej funkcji byłby nieco niewygodny w obsłudze. Przecież chcemy uczynić go przyjaznym użytkownikowi, a nie zaledwie używalnym!

Planujmy

Weźmy teraz do ręki pióro i kartkę papieru, przystępując do projektowania wizualnej strony interfejsu. Musimy przy tym wziąć pod uwagę wszystkie etapy pracy aplikacji i poświęcić ima należytą uwagę.

Przyglądając się liście kroków wykonywanych przez aplikację, opisanych w poprzednim punkcie, widzimy, że konstrukcja interfejsu użytkownika wymaga utworzenia dwóch głównych sekcji.

Pierwsza, wyświetlająca cały rok, występująca pod nazwą Year View, będzie wyświetlała liczby wydarzeń zaplanowanych na poszczególne miesiące wybranego roku. Musimy tu zastosować jakąś metodę, która umożliwi użytkownikowi wybór roku oraz znaleźć sposób, w jaki użytkownik będzie informował film Flasha o chęci przejrzenia szczegółowej listy wydarzeń w wybranym miesiącu.

Mając powyższe na uwadze, możemy narysować następujący szkic...

Rys. 1. str. 353

Liczba wydarzeń w miesiącu

Selektory roku

Umieściliśmy tu wszystkie elementy niezbędne w sekcji Year View. Każde z dwunastu pól wyświetla nazwę miesiąca oraz liczbę zaplanowanych w nim wydarzeń. Użyjemy także pokrywających je przycisków, umożliwiających użytkownikowi wybór miesiąca do wyświetlenia. Za ich pomocą będzie uruchamiane wczytywanie szczegółowej listy wydarzeń w wybranym miesiącu. Ponadto, znajdują się tu przyciski pozwalające użytkownikowi przeglądać kolejne lata.

Gdy użytkownik wybierze miesiąc do wyświetlenia wydarzeń, film się zatrzyma i wczyta ich listę. Potrzebny będzie mechanizm wyświetlający tę listę, po wczytaniu wszystkich danych.

Zajmijmy się widokiem miesiąca Month View...

Rys. 2. str. 353

Przycisk

Pole tekstowe

Przyciski przewijania

Selektory roku

Widzimy tu wieloliniowe pole tekstowe, wyświetlające wszystkie wydarzenia w wybranym miesiącu, a także nowe przyciski, Back i Forward, umożliwiające przełączanie miesięcy bez konieczności powracania do widoku Year View. Oprócz tych elementów, znajdziemy tu przycisk pozwalający użytkownikowi na powrót do widoku całego roku oraz przyciski przewijania, współdziałające z głównym polem tekstowym.

Dwie główne sekcje należy uzupełnić jednym lub dwoma ekranami ładowania oraz sekcją odpowiedzialną za wyświetlanie komunikatów o błędach. Ponieważ będą to pasywne części interfejsu, nie będzie miało większego znaczenia to, że zaprojektujemy je zanim przystąpimy do ich tworzenia. Jednakże, jak zawsze jest to kwestia osobistego poczucia estetyki, a zatem, jeśli ktoś zechce przygotować ich własny projekt, może tego dokonać zgodnie z własnym smakiem i własnymi metodami!

Po zaprojektowaniu interfejsu powinniśmy mieć jasny obraz tego, jakiego rodzaju informacje trzeba będzie przechowywać. Bazując na umiejętnościach obsługi baz danych, nabytych w kilku poprzednich rozdziałach, wykorzystamy MySQL jako mechanizm przechowywania informacji.

A zatem, jakiego typu dane będziemy archiwizować? Oto ich krótka lista dla początkujących...

·         Data wydarzenia

·         Tytuł wydarzenia

·         Główny opis wydarzenia

Warto byłoby opracować także mechanizm identyfikujący poszczególne wydarzenia.  Na pierwszy rzut oka może się wydawać, że wystarczy do tego data, ale takie rozwiązanie powodowałoby przypisanie wielu wydarzeń do tej samej daty. To czyni datę nieodpowiednim identyfikatorem wydarzeń, w związku z czym, jako identyfikatora, należy użyć dodatkowej informacji.

Wziąwszy pod uwagę powyższe rozważania, powinniśmy przygotować tablicę składającą się z następujących elementów:

Tablica: events

Przechowywanie poszczególnych składników dat wydarzeń osobno pozwala nam selekcjonować z tabeli tylko te elementy, które nas interesują, zamiast selekcjonowania wszystkich i odfiltrowywania właściwych.

Skoro proces projektowania mamy już za sobą, czas przystąpić do właściwej pracy.

Jak zwykle, zaczniemy od przygotowania we Flashu graficznego interfejsu, a później przejdziemy do tworzenia skryptów, stanowiących siłę napędową aplikacji, uprzednio jednak określając oczekiwania wobec nich, kierowanych pod ich adresem przez film Flasha.

Planując dni we Flashu...

Ponieważ już wcześniej naszkicowaliśmy główne sekcje filmu Flasha, dopracowanie interfejsu we Flashu nie powinno nam zająć zbyt wiele czasu. Musimy więc wykonać kilka operacji, niezbędnych do uruchomienia całości, a które mogą nieco poszerzyć naszą wiedzę na temat Flasha.

Przede wszystkim, w aplikacji tej skorzystamy z pomocy starego przyjaciela, detektora onClipEvent, w związku z czym cały interfejs użytkownika umieścimy w klipie filmowym.

1.       Utwórz klip filmowy, wybierając polecenie New Symbol (Nowy symbol) z menu Insert (Wstaw) lub naciskając klawisze Ctrl+F8. Nadaj klipowi nazwę Events Calendar i kliknij przycisk OK.

2.       Po wykonaniu tej czynności, następną będzie utworzenie struktury warstw i ujęć klipu.

Zadanie to nie powinno być Ci obce — użyj poniższej ilustracji jako wzorca.

Prawdopodobnie rozpoznasz tu animacje ruchu obecne w poprzednich aplikacjach, ale do tego zagadnienia dojdziemy za chwilę. Wrócimy także do kodu ActionScript, opisując fragmenty przypisane do ujęć, w miarę omawiania kolejnych sekcji klipu.

Jak zwykle, warstwa Window BG zawiera tło okna. Koncepcja graficzna jest zapożyczona z poprzednich przykładów, co nie powinno Cię zaskoczyć.

Jak widzisz, interfejs zawiera stosunkowo duży obszar programu klienta, a pasek przycisków pozostawiłem u dołu, podobnie jak w poprzednich projektach.

3.       Jeśli chodzi o pierwsze ujęcie, Load Year, to animacja zawarta na warstwie Section Items jest ... hmm, dobrze się domyślasz ... zanikającą animacją zegara, którą wykorzystujemy od pierwszego rozdziału.

4.       Kod ActionScript jest przypisany również do pierwszego ujęcia na warstwie Actions. Służy on do wywoływania skryptu PHP, przekazującego liczbę wydarzeń w poszczególnych miesiącach bieżącego roku.

Przyjrzyj się najpierw temu kodowi, a o jego działaniu pomówimy później.

// If no year selected

if (!year) {

    // Set year to current

    now = new Date();

    year = now.getFullYear();

}

// Setup action and call script…

action = "geteventcounts";

loadVariables("fetchevents.php", this, "POST");

// Halt movie clip

stop ();

Podczas pierwszego wczytania klipu, żaden rok nie obędzie wyselekcjonowany. W takim przypadku należy użyć obiektu new Date od odczytania bieżącego roku, na podstawie systemowych ustawień czasu.

W dalszej kolejności wskazana zostaje akcja, którą ma wykonać skrypt, po czym skrypt zostaje uruchomiony za pomocą wywołania loadVariables. Na koniec, film ulega wstrzymaniu do momentu odebrania danych — tym jednak będzie się zajmował detektor onCLipEvent, który dopiero należy utworzyć.

5.       Przechodząc do ujęcia Show Year, po raz pierwszy napotykamy elementy na warstwie Button Bar.

Jak widzisz, pośrodku paska przycisków widnieje niewielkie pole tekstowe, a poprzez nadanie mu nazwy year, spowodujesz, zostanie ono sprzężone ze zmienną utworzoną w poprzednim punkcie, i będzie wyświetlało aktualnie wybrany rok.

6.       Na pasku znajdują się również przyciski Back (W tył) i Forward (W przód), a więc zredaguj i przypisz do nich następujący kod:

//Back

on (release) {

    // Load previous year

    year--;

    gotoAndPlay "Load Year");

}

oraz

//Forward

on (release) {

    // Load next year

    year++;

    gotoAndPlay ("Load Year);

}

Ponieważ zadanie wczytywania aktualnie wybranego roku wykonywane jest w ujęciu Load Year, wszystko, czego należy oczekiwać od opisanych przycisków, to zmiana bieżącego wyboru roku i odtworzenie tego ujęcia.

7.       Teraz można zająć się najbardziej złożonym aspektem całego klipu. Mówiąc ogólnie, należy utworzyć pola reprezentujące wszystkie miesiące wybranego roku, wyświetlające liczby zaplanowanych wydarzeń.

Można byłoby to rozwiązać w podobny sposób, jak w przypadku interfejsu ankiety, opisywanej w poprzednim przykładzie; tworząc 12 pól wyświetlających nazwy miesięcy, 12 pól tekstowych prezentujących liczby wydarzeń przypadających na poszczególne miesiące oraz 12 przycisków ustawiających wartość zmiennej month i wywołujących loadVariables.

Jednakże, wziąwszy pod uwagę, że jest to nieco inna sytuacja, zdecydowałem się na poszerzenie naszej wiedzy o Flashu. Mówiąc ogólnie, użyjemy oddzielnych klipów filmowych dla wszystkich pól reprezentujących miesiące, a za pomocą kodu ActionScript przypiszemy im odpowiednie wartości. Tu ujawni się prawdziwa moc Flasha!

8.       Zacznij od narysowania prostokąta, nieco ciemniejszego od tła okna, co uczyni go bardziej widocznym. Musisz także dodać dwa proste dynamiczne pola tekstowe, których zadaniem będzie wyświetlanie odpowiednich informacji o reprezentowanym miesiącu.

9.       Następnie, należy utworzyć przycisk, za pomocą którego użytkownik będzie mógł dokonać wyboru bieżącego miesiąca. Jak dla mnie, jest to idealne miejsce do ponownego użycia niewidocznego przycisku, który opracowany został na potrzeby poprzedniej aplikacji przykładowej. Dokonałem jedynie niewielkiej modyfikacji stanu Over, polegającej na zmianie półprzezroczystego koloru niebieskiego na półprzezroczysty biały.

10.    Kod, który należy przypisać przyciskowi, może się na chwilę obecną wydać nieco bezsensowny, ale tylko do kolejnego punktu, obiecuję! Kod ten wygląda następująco:

on (release) {

    // Set month to load to current

    _parent.month = this.month;

    // Load month details

    _parent.gotoAndPlay("Load Month");

}

11.    Teraz należy skonwertować całego pola reprezentującego miesiąc do postaci klipu filmowego. Wyselekcjonuj więc całe pole zewnętrzne, pola tekstowe oraz niewidoczny przycisk, a następnie wydaj polecenie Convert to Symbol (Konwertuj w symbol) z menu Insert lub naciśnij klawisz F8, konwertując całość w klip filmowy. Nadaj mu odpowiednią nazwę (na przykład Month Box) i kliknij przycisk OK.

12.    Na koniec utwórz kopie klipu Month Bar, układając je w rzędach po cztery, reprezentujące dwanaście miesięcy roku.

Trzeba ponadto nadać wszystkim klonom opisowe nazwy, poprzez którą będzie można się do nich odwoływać.

13.    Rozpoczynając od lewego górnego narożnika oraz posuwając się w prawo i w dół, nazwij klony kolejno od month0 (lewy górny) do month11 (prawy dolny). Może wydać Ci się to nieco dziwne, ale istnieje uzasadnienie takiego rozwiązania, o czym pomówimy za chwilę.

14.    Po umieszczeniu wszystkich klonów wewnątrz klipu Events Calendar, kod ActionScript związany z niewidocznym przyciskiem zacznie nabierać sensu.

on (release) {

    // Set month to loas to current

    _parent.month = this.month;

    // Load month details

    _parent.gotoAndPlay("Load Month");

}

Mówiąc najprościej, _parent to odwołanie do klipu nadrzędnego, w tym przypadku Events Calendar, wobec bieżącego klonu klipu. Jak więc widzisz, wartość w zmiennej month w klipie nadrzędnym jest wyrównywana z wartością tej samej zmiennej w klipie bieżącym. Umożliwia to nakazanie filmowi przejście do ujęcia Load Month, które będzie służyło do wczytywania wybranego miesiąca, i uruchomienie odtwarzania.

Skąd klony klipu Month Box wiedzą, jakie miesiące reprezentują? Pomyśl razem ze mną, a wszystko stanie się jasne...

Musisz zdefiniować kod ActionScript dla ujęcia Show Year. Wiesz, że dotychczas załadowana została ze skryptu PHP liczba wydarzeń w wybranym roku, gdyż film został zatrzymany w ujęciu Load Year. To dlatego, że do ponownego uruchomienia używamy detektora onClipEvent(data).

15.    Czas zatem wypełnić nowo powstałe klipy danymi. Spójrz na następujący kod ActionScript.

// Define month names

months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

// For each month movie clip…

for (count = 0; count < 12; count++) {

    // Set month number

    this["month" add count].month = count;

    // Set month name

    this["month" add count].eventCount = this["eventCount" add count];

}

// Halt the movie

stop ();

16.    Pierwszą operacją, jaką należy tu wykonać, jest utworzenie tablicy nazw miesięcy, o nazwie months. Jeśli pamiętasz, klony klipu Month Box...