r11_t.pdf

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

Nazwa kolumny

Typ danych

Opis

eventID

Integer

Będzie to podstawowy klucz tablicy. Posłuży nam do

identyfikowania poszczególnych wydarzeń.

year

Integer

Rok, w którym zaplanowano wydarzenie.

month

Integer

Miesiąc, w którym zaplanowano wydarzenie.

day

Łańcuch

Dzień, w którym zaplanowano wydarzenie.

title

Łańcuch

Nagłówek wydarzenia.

event

Łańcuch

Główna treść opisująca wydarzenie.

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 nazwane zostały kolejno od 0, a powodem ku temu jest fakt, że

pierwszy element w tablicy musi mieć indeks 0 — związek jest więc bezpośredni.

Następnie, za pomocą pętli for, ustawimy zmienne month oraz monthName w kolejnych klonach

Month Box , nadając im odpowiednie wartości.

Zwróć uwagę, że do odwoływania się do klonów w kolejnych przebiegach korzystamy z

this["month" add month] .

17. Podobnej techniki użyjemy także do odczytywania liczby wydarzeń w bieżącym miesiącu, ustawiając

zmienną eventCount , odpowiednio dla każdego klonu Month Box . Zmienne te, wczytywane ze

skryptu PHP, będą miały nazwy:

eventCount0

eventCount1

...

eventCount11

A zatem, za pomocą this["eventCount" add count] odczytujemy poprawną wartość z

bieżącej listwy czasowej. Wreszcie, następuje zatrzymanie klipu filmowego.

Gdy tworzyliśmy niewidoczny przycisk dla klipu filmowego Month Box , odwoływaliśmy się w

ActionScript do ujęcia o nazwie Load Month . Ujęcie to będzie wysyłało do skryptu PHP żądanie

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: