Wszystko o czym pisze znajduje sie pod adresem http://www.pawelkowalczyk.com/flex/ i odnosi sie do stanu na dzien 27.12.2007.

Startujac od zera: kazda aplikacja zaczyna sie i konczy naglowkiem, ale FlexBuilder tworzy go automatycznie. W zakladce ‘design’ mozna w zasadzie zdefiniowac wszystkie parametry startowe aplikacji, a w ’source’ - zobaczymy czysty kod.

W naglowku aplikacji najwazniejszym parametrem (na poczatek) jest to, jak beda sie zachowywac nowe elementy dodawane do projektu. Parametrem glownego komponentu mx:Application jest ‘layout‘ ktory moze przyjmowac 3 wartosci:

- absolute - kolejne elementy dodawane do aplikacji beda umieszczane tam gdzie je ustawimy w ‘designie’ w odniesieniu do osi XY
- horizontal - poziomo
- vertical - pionowo

Dobrze to zdefiniowac na poczatku.

Aby w poziomym/pionowym ukladzie dodac elementy w innym ukladzie, trzeba je zgrupowac na jednym z komponentow grupujacych, ale o tym pozniej. Profil ‘absolute’ uwazam za bezpieczniejszy, jesli elementy aplikacji nie maja okreslonego porzadku lub trzeba precyzyjnie umiescic komponenty w roznych miejscach projektu.

Kazdemu z komponentow mozna (nalezy) nadac ‘id’, by byl do niego bezposredni dostep z dowolnego miejsca aplikacji. Dla statycznych pol tekstowych - szkoda na to czasu.

Wracajac do kodu: W pierwszej kolejnosci aplikacja czyta plik - mx:XML, gdzie znajduja sie opisy i sciezki do zdjec i przypisuje strukture pliku do listy. Struktura pliku XML jest nastepujaca:

mx:XMLListCollection tworzy liste opierajac sie na tagu ‘photo’. Tak wiec kazdy element listy bedzie miec 5 pol. Korzystam przy okazji z pola ‘ind’ gdzie zapisany mam biezacy index kazdego ze zdjec (od 0 z gore). Jest to moze i nieeleganckie, ale korzystam z tych samych plikow gdzie indziej. Oczywiscie pol (moze, a raczej to pewne) bedzie wiecej ale na razie potrzebne beda tylko te.W kolejnym kroku definiuje tablice z efektami (filters), ktore bede wykorzystywal pod ladowanymi zdjeciami. Stosuje to tylko 1 efekt - czarny cien w strone prawego dolnego rogu. Wszystkie efekty opisane sa tu jako klasy biblioteki ‘flash.filters’ . Biblioteka ta jest ladowana w naglowku aplikacji.

Zwykle biblioteki laduje sie tak:

<mx:Script>
<![CDATA[
import mx.controls.Alert; <-- tu ladowana klasa Alert z biblioteki mx.controls
import mx.controls.TextInput;
import mx.utils.StringUtil;
import mx.validators.Validator;
]]>
</mx:Script>

W tym przypadku proba ladowania biblioteki w bloku skryptu za pomoca komendy ‘import’ zawsze wywoluje blad… :-(. A powinno dzialac.

Po definicji kilku pol tekstowych pojawia sie komponent grupujacy mx:ApplicationControlBar, a na nim w kolejnosci: - pole na powiekszone zdjecie z galerii (mx:Image) - pole grupujace HBox, ktore pozwala na wyswietlanie wielu elementow w poziomie z paskiem przewijania (pasek przewijania pionowego z powodow estetycznych zostal wylaczony) - w polu HBox za wyswietlanie podgladow obrazkow odpowiedzialny jest komponent mx:Repeater; o nim wiecej:

Komponent mx:Repeater przeglada liste/tablice od pierwszego do ostatniego elementu - w petli; do dowolnego komponentu przypisuje elementy tabeli/listy. Za kolejnosc jest odpowiedzialny parametr ‘dataProvider‘, ktory {wskazuje} na zrodlo danych. W przypadku tej galerii Repeater wyswietla liste miniaturek (ale moga to byc rownie dobrze przyciski, pola tekstowe, lub zestaw elementow - np. graficzny przycisk a na nim napis, itp.). Miniaturki do galerii sa przechowywane w katalogu ‘thumbs’, wieksze obrazki w ‘images’.
- Tag ’src’ zawiera sama nazwe pliku, wiec trzeba do tej nazwy dodac sciezke.
- Z biezacego pola (currentItem) pobierane sa niektore dane do wyswietlenia miniaturek: w polu ’source’ obrazka laczona jest sciezka do miniaturek i watrosc z pola ’src’.
- Pole ‘toolTip’ wyswietla dodatkowo biezacy index i opis pobrany z pola ‘description’. rep.currentIndex mozna zamienic na rep.currentItem.ind, bo powielam tam index.
- Chwilowo puste pole ‘click’ czeka na funkcje, ktora po kliknieciu w miniaturke wyswietli wiekszy obrazek.

W nastepnych krokach postaram sie (chyba tak moge to ujac):
- po kliknieciu w miniaturke wyswietlic pelny obrazek, pokazac gdzies tytul zdjecia
- oprogramowac dwa przyciski do przechodzenia do kolennego/poprzedniego obrazka i wyjatki dla pierwszego i ostatniego zdjecia
- Przy przechodzeniu do innego obrazka zrobic cos na ksztalt ‘fade out’ starego i ‘fade in’ nowego
- taki gadget, ale powinien cieszyc oko - po najechaniu lub kliknieciu na ‘cos’ pokazac efektownie pole z opisem zdjecia (jakis gustowny efekcik)
- wygenerowac link do tego samego zdjecia na www.alamy.com (tam mozna je kupic)
- przygotowac podstrony zalezne od klikniecia w menu (na razie jest puste) i oczywiscie samego menu
- zbudowac formatke do wysylania maili i zapytan w polaczeniu z kodem PHP
- to na razie tyle… chyba mi wystarczy czasu do Sylwestra :-)
- a w Sylwestra wycieczka z deszczawadziewczynka.wordpress.com, aparatem, statywem i butelka szampana na dach i…

Nie zapomnijcie zajrzec do mojego miasteczka >>>TU<<<