Flex jest jedną z najbardziej zaawansowanych technologii do budowania aplikacji typu RIA w bezpośrednim tłumaczeniu bogatych aplikacji internetowych. Silnikiem wyświetlającym aplikacje Flex’owejest technologia Adobe Flash, która pozwala na osiągnięcie jednolitego wyglądu uruchamianej aplikacji, niezależnie od wykorzystywanej przeglądarki czy systemu operacyjnego.

Autor: Rafał Nagrodzki
Źródło: Software Developer’s Journal 02/2010 (182) http://sdjournal.org

W niniejszym artykule postaram się wyjaśnić najważniejsze zmiany, jakie zaszły w najnowszej wersji Flex’a. Przesiadając się z Flex’a 3 na Flex’a 4 , musimy pamiętać przede wszystkim, że nowa biblioteka wymaga wsparcia FlashPlayer’a 10, tudzież wszystkie aplikacje powinny być kompilowane pod najnowszą wersję FlashPlayer’a. Osobom , które znają poprzednią wersję Flex’a, nie powinna sprawić trudności migracja na 4-tą wersję biblioteki. Doświadczymy co prawda mnogości zmian architektonicznych, pojawiają się nowe przestrzenie nazw i odmłodzono dużą część komponentów, jednak w większości przypadków ich interfejs udostępniony programiście nie odbiega znacznie od interfejsu znanego z architektury Halo.

Przestrzenie nazw i pakiety
Flex 3 wszystkie klasy biblioteki trzymał w jednym pakiecie mx.*, natomiast we Flex 4 wprowadzono nowy pakiet spark.* zawierający komponenty, klasy bazowe, efekty, filtry, układy widoku, podstawowe kształty geometryczne, skórki i narzędzia.

Wiele klas zawartych w pakiecie spark.* współdzieli swoje nazwy z klasami zawartymi w pakiecie mx.*. Aby uniknąć konfliktów pomiędzy tymi klasami, rozszerzono przestrzenie nazw do: MXML 2006, MXML 2009, Spark, Halo.

• MXML 2006: Przestrzeń nazw używana w poprzedniej wersji.
• URI: http://www.adobe.com/2006/mxml
• Domyślny prefix: mx
• MXML 2009: Nowa przestrzeń nazw MXML-a. Nie zawiera tagów komponentów.
• URI: http://ns.adobe.com/mxml/2009
• Domyślny prefix: fx
• Spark:
• URI: library://ns.adobe.com/flex/spark
• Domyślny prefix: s
• Halo:
• URI: library://ns.adobe.com/flex/halo
• Domyślny prefix: mx

Dodano również wsparcie przestrzeni nazw dla selektorów CSS (przykład na Listingu 2).

Spark
Flex 4 został zaprojektowany w oparciu o ideę „Design in Mind”, której celem jest zapewnienie szybkiej i bezproblemowej współpracy programisty i grafika. Aby umożliwić realizację tego pomysłu, wprowadzono całkiem nową architekturę komponentów Spark, bazującą na dobrze nam znanej z Flex’a 3 architekturze Halo. Oddzielono w przejrzysty sposób wygląd komponentów od ich logiki, gdzie w starej architekturze granica ta była często mało czytelna. Zadbano również o lekkość komponentów, które aktualnie nie zawierają już wszystkich zbędnych elementów jak suwaki czy wirtualizację. Przyśpieszyło to w dużym stopniu inicjalizację aplikacji, jak i zmniejszyło jej rozmiar.

Layout
Dużym usprawnieniem w stosunku do Halo jest nowy sposób definiowania układu rozmieszczenia komponentów. Dla programistów piszących w MXML-u niewiele uległo zmianie. Podstawowe właściwości takie jak width, height, minWidth, explicitWidth, percentWidth dalej mają to samo znaczenie. Działanie LayoutManagera, jak i podstawowy cykl życia komponentu także nie uległ zmianie. Metody commitProperties(), measure() i updateDisplayList() są wywoływane przez LayoutManagera w tej samej kolejności i reguły unieważniania pozostały te same.

Zasadniczymi zmianami w stosunku do Flex 3 są:
• Odseparowanie układu od kontenera pozwoliło na zmianę rozmieszczenia komponentów w trakcie działania aplikacji. Zminimalizowano tym samym liczbę kontenerów wymaganych do stworzenia zaawansowanego układu rozmieszczenia i pozwoliło na wielokrotne użycie tego samego kodu.
• Znacznie przyśpieszono i uproszczono tworzenie własnych układów rozmieszczenia, odseparowując je od logiki kontenerów.
• Definiowania arbitralnych transformacji 2D.
• Przewijanie zawartości kontenera w dowolnym kierunku piksel po pikselu.
• Transformacje 3D udostępnione przez Flash Playera.
• Definiowanie głębokości każdego potomka kontenera, do którego przypisano układ.
• Przypisywanie transformacji bez wpływu na układ komponentów. Możemy dzięki temu animować dowolny obiekt, nie wywołując zmiany układu komponentów.
• Wszystkie właściwości określające wymiary nie zmieniają się w trakcie cyklu życia komponentu. Wyeliminowano tym samym wprawiające w zakłopotanie reprezentowanie wymiarów nieprzeskalowanych w trakcie measure(), natomiast już przeskalowanych w trakcie etapu updateDisplayList();

Ponieważ układ rozmieszczenia odseparowano od kontenera, został zmieniony sposób pracy z tym elementem. Przykładowo możemy użyć HorizontalLayout w połączeniu z komponentem List. Ustawimy również odstępy pomiędzy elementami na 0px i wyjustujemy. Przykładowy kod przedstawiono na Listingu 3.

Tworząc kombinację grup i układów, w łatwy sposób możemy uzyskać zachowania kontenerów znanych z architektury Halo. Przykładowe kombinacje umieszczono w Tabeli 1.

Tabela 1. Kombinacje komponentów Spark i odpowiadające im klasy z Halo

Scrollbars
Jak już wspomniałem, architektura Spark została mocno odchudzona. Oznacza to, że suwaki nie są domyślnie dołączone do kontenerów, jak to miało miejsce w Halo. Programista musi sam zadecydować, czy będą one wymagane dla danej grupy obiektów, czy też kontenera. Aby zapewnić wyświetlenie suwaków dla kontenera, gdy będą potrzebne, należy opakować daną grupę komponentów tagiem Scroller, co przedstawiono na Listingu 4.

States
Flex 4 oferuje całkiem nowe zarządzanie stanami aplikacji. Dzięki nowej składni zapisu wszystkie stany w odróżnieniu od poprzedniej wersji są umieszczone w tablicy. Każdy komponent definiuje własne zachowanie na zmianę stanu przy pomocy metod includeIn oraz excludeFrom. Dla przypomnienia sposób deklaracji stanu we Flex 3 został przestawiony na Listingu 5, natomiast nowy zapis przedstawiony na Listingu 6.

Component skinning

We Flex 4 zostało mocno uproszczone tworzenie własnych skórek komponentów. Na Listingu 7 przedstawiono sposób tworzenia przykładowej skórki dla przycisku. Przede wszystkim musimy zwrócić uwagę na deklarację czterech stanów przycisku: up, over, down, disabled. Przykładowo zapis alpha.disabled=”.5″ oznacza, że gdy przycisk będzie w stanie disabled, jego przezroczystość zostanie ustawiona na 50%. Natomiast color.over=”0x33CC22” definiuje zmianę koloru wypełnienia tła po przejściu w stan over. Zapis jest intuicyjny. Analogicznie możemy zdefiniować odrębne właściwości dla każdego z atrybutów w zależności od wybranego stanu. Tak przygotowaną skórkę podpinamy pod komponent Button, używając atrybut skinClass, co zaprezentowano na Listningu 8.

Flash XML Graphics (FXG)
Ponieważ było duże zapotrzebowanie na przyjazny i wydajny system zapisu obiektów graficznych, postanowiono wykorzystać format SVG. Istnieją jednak pewne różnice pomiędzy możliwościami graficznymi Flash Playera a formatem SVG, co nie pozwoliło na bezpośrednią implementację we Flash Playerze. Starano się utrzymać jak najwięcej zgodności ze specyfikacją SVG, czego wynikiem jest jego niestandardowa implementacja w postaci formatu FXG.

FXG jest mocno zoptymalizowany pod kątem Flash Playera. Umożliwia z poziomu xml-a za pomocą następujących tagów tworzyć złożone obiekty graficzne:
• BitmapFill;
• BitmapGraphic;
• Ellipse;
• GradientEntry;
• Graphic;
• Group;
• Library;
• Line;
• LinearGradient;
• LinearGradientStroke;
• Matrix;
• Path;
• RadialGradient;
• RadialGradientStroke;
• Rect;
• SolidColor;
• SolidColorStroke;
• TextGraphic;
• Transform.

Wiązanie obustronne
Wiązanie obustronne (ang. Two Way Binding) pozwala na stworzenie wiązania znanego z Flex 3, jednak działającego w obie strony. Na Listingu 9 przedstawiono implementację wiązania obustronnego we Flex 3, natomiast na Listingu 10 jego nową, skróconą wersję udostępnioną we Flex 4. W obu wersjach aplikacji wprowadzając zmiany do jednego z pól tekstowych, zmiany będą widoczne również w 2 z pól tekstowych.

W Sieci
• http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html;
• http://www.adobe.com/devnet/flex/videotraining/flex4beta/.

RAFAŁ NAGRODZKI
Freelancer i student Katolickiego Uniwersytetu Lubelskiego. Z technologią Flash/Flex zaprzyjaźniony od 2004r.
Kontakt z autorem: kontakt@burzaone.net

Listing 1. Przykład użycia przestrzeni nazw w aplikacji
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<mx:DateChooser id="main_calendar" x="20" y="20"/>
<s:Button label="wyślij" x="220" y="20"/>
</s:Application>

Listing 2. Przykład użycia przestrzeni nazw z selektorami CSS
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|Button {
color: #FF0000;
}
mx|DateChooser {
color: #FF0000;
}
</fx:Style>

Listing 3. Przykład użycia HorizontalLayout
<s:List id="list">
<s:layout>
<s:HorizontalLayout gap="0" verticalAlign="justify" />
</s:layout>
...
</s:List>

Listing 4. Dodanie suwaków do grupy komponentów
<s:Scroller width="200">
<s:Group>
<s:layout>
<s:HorizontalLayout gap="0" verticalAlign="justify" />
</s:layout>
<s:Button label="jeden" />
<s:Button label="dwa" />
<s:Button label="trzy" />
<s:Button label="cztery" />
</s:Group>
</s:Scroller>

Listing 5. Stany we Flex 3
<mx:states>
<mx:State name="submitState" basedOn="">
<mx:AddChild relativeTo="{loginForm}" >
<mx:Button label="Wyślij" bottom="10" right="10"/>
</mx:AddChild>
<mx:RemoveChild target="{firstTextInput}"/>
</mx:State>
</mx:states>
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

Listing 6. Stany we Flex 4
<s:states>
<s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
<s:Button label="Wyślij" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

Listing 7. Skórka przycisku zadeklarowana w pliku MySkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/
flex/spark" alpha.disabled=".5">
<!-- stany -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- obramowanie i wypełnienie -->
<s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x77CC22" color.over="0x33CC22" color.down="0xBB9911" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x131313" weight="2"/>
</s:stroke>
</s:Rect>
<!-- tekst -->
<s:Label text="Button!" color="0x131313"
textAlign="center" verticalAlign="middle"
horizontalCenter="0" verticalCenter="1"
left="12" right="12" top="6" bottom="6"
/>
</s:Skin>

Listing 8. Wiązanie obustronne w Flex 3
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://
ns.adobe.com/flex/spark">
<s:Button verticalCenter="0" horizontalCenter="0" skinClass="MySkin" />
</s:Application>

Listing 9. Wiązanie obustronne we Flex 3
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="t1" text="{t2.text}"/>
<mx:TextInput id="t2" text="{t1.text}"/>
</mx:Application>

Listing 10. Wiązanie obustronne we Flex 4
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="t1" text="@{t2.text}"/>
<mx:TextInput id="t2"/>
</mx:Application>