Architektura Spark – wprowadzenie

Mam hopla na punkcie “ubierania” i zmiany wyglądu aplikacji. Moje skrzywienie zapewne wynika z tego, że przez dość długi czas zajmowałam się tradycyjnym front-endem, czyli cięciem i kodowaniem layoutu (HTML, XHTML, CSS, JavaScript itp.). Zresztą co tu dużo mówić, nadal się tym zajmuje i zajmować będę, bo to lubię Flex, aż do swojej trzeciej odsłony miał jedną poważną wadę – znaczna zmiana wyglądu komponentów była zdecydowanie zbyt czaso – i pracochłonna. Pamiętam dobrze, że mój “pierwszy raz” ze zmianą wyglądu komponentu zajął mi chyba z 1,5 godziny i to w dodatku z książką na kolanach, która mnie prowadziła krok po kroku przez terra incognita. Jak już skończyłam wklepywać to, co było w książce, efekt był raczej mizerny, a mnie naszła tylko jedna myśl: “Jak do cholery zrobić we Flex jakąś seksowną aplikację, skoro zrobienie własnego przycisku zajmuje tyle czasu ?”. Na szczęście, zanim zdążyłam porzucić Flex’a na rzecz cięcia wymuskanych w Photoshopie layoutów, nastała era Flex’a 4 i weszły duże zmiany, które wzrokowcom (do których niewątpliwie należę) obiecywały łatwą, szybką i efektowną zmianę wyglądu aplikacji.

Architektura Spark, czyli iskierka nadziei *

* – spark po angielsku oznacza m.in. iskrę

Wraz z czwartą odsłoną Flex’a, Adobe przebudowało architekturę komponentów i sposób w jaki nadaje się im wygląd. Nowa architektura pozwalająca na wygodniejszą i szybszą zmianę wyglądu otrzymała nazwę Spark. Spark to również zbiór komponentów, które korzystają z tej architektury i które zostały dodane w Flex 4. Na czym polega cała magia? Cóż, tak naprawdę, to Adobe nie odkryło tutaj Ameryki, bo i nie było potrzeby. Przede wszystkim nowa architektura zapewnia oddzielenie wyglądu komponentu od jego logiki. Dzięki temu możesz tworzyć wygląd komponentu, niezależnie od jego zachowania. To zdecydowanie ułatwia i przyspiesza pracę, nie mówiąc już o tym, że taki kod jest o niebo łatwiejszy w utrzymaniu, co szczególnie w dużych projektach ma niebagatelne znaczenie. Poza tym, nowa architektura pozawala na włączenie w workflow naszego projektu takich narzędzi jak chociażby Flash Catalyst, a to już daje duże pole do manewru i bardzo zbliża nas do momentu, gdy layout naszej aplikacji będzie mógł mieć wygląd tworzony w profesjonalnym narzędziu np. Photoshopie lub Illustaratorze (Adobe zresztą otwarcie przyznaje, że to właśnie Flash Catalyst było głównym impulsem dla przebudowy architektury, a nie narzekania developerów

Do wyboru do koloru, czyli komponenty MX i Spark

Wprowadzenie nowej architektury spowodowało, że wśród komponentów zrobiło się dość tłoczno. Adobe oczywiście nie mogło się całkowicie odciąć od poprzedniej architektury, tak więc pisząc w Flex 4 możesz korzystać zarówno ze “starych” komponentów tzw. MX-owych, zwanych też Halo, jak i Sparkowych. Wszystko dzięki temu, że “stare” i “nowe” komponenty mają wspólną klasę nadrzędną – UIComponent. Generalnie jednak Adobe zaleca wszędzie gdzie tylko jest to możliwe, korzystanie z komponentów Sparkowych (większość komponentów MX-owych ma już swoje odpowiedniki w Spark-u, ale nie wszystkie np. DataGrid).

Komponenty Spark – oddzielenie logiki od wyglądu

Każda komponent z architektury Spark zawiera dwie klasy: tzw. “skin class” – klasę deklaratywną, napisaną w MXML-u oraz klasę komponentu napisaną w ActionScript. Klasa MXML-owa zawiera wszystko to, co wiąże się z wizualizacją komponentu. Natomiast klasa ActionScript odpowiada za logikę działania komponentu. dzięki takiemu podziałowi zyskujemy właśnie czytelne oddzielenie logiki od wyglądu komponentu. Oczywiście każdy komponent ma zdefiniowany mechanizm (taki kontrakt), który łączy te dwie klasy i pozwala na ich wzajemną komunikację.

Przyjrzyjmy się dokładnie, co takiego możemy znaleźć w tych dwóch klasach:

otóż zarówno w klasie komponentu (tej napisanej w ActionScript), jak i w klasie skórkowej (tej napisanej w MXML-u) znajdziemy definicję trzech kluczowych elementów komponentu:

1. dane
2. części składowe komponentu
3. stany komponentu

Klasa komponentu (ActionScript) zawiera definicję tego, jakich danych oczekuje komponent, z czego składa się komponent (jakie elementy go tworzą) oraz w jakich stanach może znajdować się komponent.

Tymczasem klasa skórkowa (MXML) definiuje jak wizualizować dane w komponencie, jak części składowe są poukładane w komponencie i jak wyglądają oraz jak wygląda sam komponent w różnych stanach.

Zatem jak widać obie klasy definiują te same elementy, ale zupełnie różne ich aspekty. Teraz już wiesz w jaki sposób Adobe oddzieliło logikę od wizualizacji komponentu. Myślę również, że dość łatwo zauważyć drzemiący w tym potencjał: chcąc np. zmienić kolor komponentu Button musisz dokonać zmian tylko w jednej klasie – tej odpowiedzialnej za wygląd komponentu. Natomiast klasa odpowiedzialna za logikę w ogóle Cię nie interesuje, nie musisz nawet dokładnie wiedzieć jak ona wygląda. Wygodne, prawda?

Inne Spark-owe dobrodziejstwa

Architektura Spark przyniosła również inne fajne bajery, o których warto wspomnieć.

Efekty

Flex 4 zawiera ulepszony silnik animacji, dzięki czemu o wiele łatwiej możemy dodawać efekty do i animacje. Generalnie sprawa jest dość prosta, efekty np. na tranzycjach ze stanu do stanu są definiowane w MXML-u. Ponieważ ostatnio dość dużo eksperymentowałam w tym temacie, możecie się w niedługim czasie spodziewać jakiegoś postu na ten temat.

Definiowanie layoutu

Flex 4 w zakresie wzajemnego położenia komponentu jest znacznie elastyczniejszy niż jego starszy brat. Mam tutaj choćby na myśli właściwość layout, dzięki której kontener nie musi mieć z góry zdefiniowanego layoutu. Możemy go nadawać właśnie za pomocą tej jednej właściwości i dodatkowo możemy go dynamicznie zmieniać. Nowa architektura zapewniła nam również dość łatwą możliwość definiowania własnych layoutów oraz takie rarytasy jak layouty 3D. Zatem zapomnij o standardowo wyglądających aplikacjach, bo teraz jest wiele ciekawych możliwości.

Wsparcie grafiki MXML

Flex 4 zawiera bibliotekę graficzną MXML. W praktyce oznacza to, że m.in. możesz rysować za pomocą specjalnych klas proste kształty takie jak prostokąt, koło, elipsa. Takie kształty możesz wypełniać kolorem, nadawać im gradient i przeźroczystość. Taka biblioteka daje całkiem spore możliwości, więc często wykorzystuje się ją przy tworzeniu własnych klas skórkowych.

Rysowanie jest fajne, ale zapewnienie wsparcia dla tej biblioteki w Flex 4 otworzyło nam znacznie większe możliwości. Otóż teraz we Flex możesz korzystać z grafiki zapisanej w formacie FXG. Powiem tyle: grafiki przygotowane np. w Ilustratorze albo w Flash Catalyst możesz eksportować właśnie do tego formatu. Zatem stąd prosty wniosek: bardzo łatwo możesz zatem skorzystać we Flex z tego co przygotował Ci grafik w profesjonalnym programie. Bajka, prawda?