Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Uniwersytet Przyrodniczo-Humanistyczny 1/155 ADOBE FLEX i MXML dr Grzegorz Terlikowski.

Podobne prezentacje


Prezentacja na temat: "Uniwersytet Przyrodniczo-Humanistyczny 1/155 ADOBE FLEX i MXML dr Grzegorz Terlikowski."— Zapis prezentacji:

1 Uniwersytet Przyrodniczo-Humanistyczny 1/155 ADOBE FLEX i MXML dr Grzegorz Terlikowski

2 Uniwersytet Przyrodniczo-Humanistyczny 2/155 Adobe Flex – krótka historia  Flex został stworzony w 2004 roku przez firmę Macromedia, którą w 2005 roku przejęła Adobe Systems.  W 2011 Adobe oddała tę technologię Apache Software Fundation – teraz jest to technologia open source i nazywa się Apache Flex.  W 2012 zyskała status top-level project.  16-ty lipiec 2014 upublicznienie wersji FlexJS.

3 Uniwersytet Przyrodniczo-Humanistyczny 3/155 Adobe Flex  Jest zestawem technologii umożliwiającym deweloperom i programistom budowanie aplikacji RIA bazujących na Adobe Flash.  Udostępnia wiele gotowych komponentów (jest frameworkiem) oraz możliwość ich edycji co pozwala na nieograniczone możliwości projektowania API.  Aplikacje Flex kompilowane są do.swf (tak samo jak Flash).

4 Uniwersytet Przyrodniczo-Humanistyczny 4/155 Adobe Flex – przeznaczenie Pozwala na łatwe budowanie aplikacji dla: Inteligentnych telewizorów wykorzystujących platformę Broadcom. Nie trzeba uczyć się kolejnego natywnego języka, aby tworzyć aplikacje. urządzeń mobilnych z systemem iOS, Android™, BlackBerry® Tablet OS. Komputerów stacjonarnych – tradycyjne przeglądarkowe (ponad 90% urządzeń posiada Flash Player) i desktopowe aplikacje.

5 Uniwersytet Przyrodniczo-Humanistyczny 5/155 Adobe Flex – zawartość Flex obejmuje:  Duży zbiór komponentów UI(dla których można definiować skórki) wraz z cyklem życia komponentów i zbiorem usług (HTTPService, WebService, RemoteObject)  Manadżery do obsługi:  Stylingu,  Skinningu,  Layoutów,  Lokalizacji,  Animacji,  Ładowania modułów,  Zarządzania interakcją z użytkownikiem.  Posiada wsparcie dla accessibility.  Flex posiada framework do testów automatycznych  Flex SDK dostarcza kompilator.

6 Uniwersytet Przyrodniczo-Humanistyczny 6/231 Adobe Flex – biblioteki Flash (1)  Stage3D API udostępnia architekturę z pełną akceleracją sprzętową, która oferuje wykorzystanie możliwości 2D i 3D.  Jest zbiorem niskopoziomowego API dla GPU, dzięki któremu uzyskuje się bardzo wysoką wydajność w grach.  Powstało wiele frameworków i bibliotek na bazie Stage 3D Starling – framework 2D, zaimplementowany we Flash, przeznaczony do tworzenia wspieranej sprzętowo zawartości z Stage 3D.

7 Uniwersytet Przyrodniczo-Humanistyczny 7/231 Adobe Flex – biblioteki Flash (2) Flare3D – kompleksowe rozwiązanie (narzędzia i silnik), który umożliwia wykorzystanie potencjału Flash. Alternativa3D – silnik 3D, który pozwala deweloperom pracować z grafiką 3D i fizyką w Adobe Flash. Minko – pozwala na tworzenie bogatych i interaktywnych webowych aplikacji 3D. Dostarcza wysokiej jakości i intuicyjne grafiki 3D na tych stronach.

8 Uniwersytet Przyrodniczo-Humanistyczny 8/231 Adobe Flex – biblioteki Flash (3) Away3D – silnik 3D czasu rzeczywistego dla Flash w ActionScript 3.0. EasyAGAL – open source’owa biblioteka ActionScript, która upraszcza implementowanie shaderów. Mixamo's 3D – usługa animowania postaci, która pozwala deweloperom gier 3D na tworzenie i kustomizację wysokoprofesjonalnych animacji postaci.

9 Uniwersytet Przyrodniczo-Humanistyczny 9/155 Flash/Flex/AIR - architektura Flex bazuje na:  ActionScript 3 – w pełni obiektowy język programowania.  MXML – język opisujący wygląd programu (oddzielenie warstwy logiki biznesowej od warstwy prezentacji),

10 Uniwersytet Przyrodniczo-Humanistyczny 10/155 ActionScript 3 – podstawowe cechy  ActionScript 3 powstał w 2007 roku i jest zorientowanym obiektowo językiem programowania przeznaczonym dla środowiska wykonawczego Adobe Flash Player i Adobe AIR (wcześniej też dla Adobe Flash Lite).  Kod jest wykonywany na wirtualnej maszynie ActionScript Virtual Machine(AVM) będącej częścią wspomnianych środowisk.  ActionScript 3 jest kompilowany do specjalnego kodu bajtowego zrozumiałego dla środowiska uruchomieniowego i umieszczonego w plikach formatu SWF wykonywanych przez środowiska Flash Player oraz Adobe AIR.  Środowisko uruchomieniowe jest wyposażone w specjalny mechanizm Garbage Collector zajmujący się czyszczeniem pamięci z niewykorzystywanych obiektów.

11 Uniwersytet Przyrodniczo-Humanistyczny 11/155 ActionScript 3 – przeznaczenie  ActionScript 3 jest używany w programach Flex do zaprogramowania logiki.  Dzięki zorientowaniu na obiekty pozwala na tworzenie czytelnego kodu, nadającego się do wielokrotnego wykorzystania.  ActionScript 3 (w odróżnieniu od wcześniejszych wersji) został zaprojektowany z myślą o tworzeniu dużych skomplikowanych aplikacji sieciowych jak i okienkowych operujących na złożonych zbiorach danych.

12 Uniwersytet Przyrodniczo-Humanistyczny Komponenty Flex 4 zostały zbudowane na komponentach Flex 3 Model komponentów Flex 3 (Architektura Halo) Model komponentów Flex 4 (Architektura Spark) UIComponent (Halo) Skinnable Component (Spark) Komponenty Spark są niekompatybilne z wersjami wcześniejszymi, ale mogą współistnieć w jednym projekcie. Adobe Flex – Spark vs Halo 12/155

13 Uniwersytet Przyrodniczo-Humanistyczny 13/155 Adobe Flex – Co nowego w Spark  Flex 4 został zaprojektowany w oparciu o ideę „Design in Mind” – szybka i bezproblemowa współpraca programisty i grafika.  W Spark oddzielono w przejrzysty sposób wygląd komponentów od ich logiki – w Halo granica ta była zbyt mało czytelna.  Odchudzono komponenty – aktualnie nie zawierają już wszystkich zbędnych elementów (m.in. suwaków), co przyśpieszyło w znacznym stopniu inicjalizację aplikacji, jak i zmniejszyło jej rozmiar.  Komponenty Spark oferują nowe możliwości – skórki, nowe właściwości.

14 Uniwersytet Przyrodniczo-Humanistyczny Spark daje większe możliwości wyboru zarówno przy kontenerach jak i kontrolkach. SparkHalo Group DataGroup Scroller SkinnableContainer Container Adobe Flex – Co nowego w Spark Szybsze tworzenie komponentów SparkHalo Label RichText RichEditableText StyleableTextField (od Flex 4.5) Label Text 14/155

15 Uniwersytet Przyrodniczo-Humanistyczny 15/155 Flash Builder – wybór architektury MX = Architektura Halo Flash Builder umożliwia wybór architektury, na której będzie oparty nasz projekt (3 krok kreatora nowego projektu).

16 Uniwersytet Przyrodniczo-Humanistyczny 16/155 MXML – przestrzenie nazw (1) MXML 2006 – przestrzeń nazw używana w wersji Flex 3. URI: Domyślny prefix: mxhttp://www.adobe.com/2006/mxml Flex 3 posiadał tylko jedną przestrzeń nazw, w której znajdowały się wszystkie komponenty – zarówno wizualne jak i niewizualne.

17 Uniwersytet Przyrodniczo-Humanistyczny 17/155 MXML – przestrzenie nazw (2)  Wiele klas wprowadzonych w architekturze Spark posiada takie same nazwy jak klasy w architekturze Halo.  W celu uniknięcia konfliktów nazw (w przypadku wykorzystywania w tym samym projekcie komponentów obu architektur) wprowadzono podział na 3 przestrzenie nazw.

18 Uniwersytet Przyrodniczo-Humanistyczny 18/155 MXML – przestrzenie nazw (3) MXML 2009 – przestrzeń nazw MXML-a dla Flex 4. URI: Domyślny prefix: fx.http://ns.adobe.com/mxml/2009 Zawiera elementy najniższego poziomu, takie jak Object czy Array oraz znaczniki wbudowane w kompilator MXML, takich jak. Nie zawiera tagów komponentów.

19 Uniwersytet Przyrodniczo-Humanistyczny 19/155 MXML – przestrzenie nazw (4) Spark: URI: library://ns.adobe.com/flex/spark Domyślny prefix: slibrary://ns.adobe.com/flex/spark Halo: URI: library://ns.adobe.com/flex/halo Domyślny prefix: mxlibrary://ns.adobe.com/flex/halo Zawierają komponenty interfejsu graficznego (łącznie z efektami, filtrami, stanami itd.).

20 Uniwersytet Przyrodniczo-Humanistyczny 20/155 MXML – charakterystyka  MXML jest językiem znacznikowym (tagowym) opartym na XML.  Opisuje układ elementów interfejsu użytkownika oraz elementy niewizualne (tablice, zmienne, efekty, itd.).  Oferuje (podobnie jak HTML) atrybuty, które służą do bezpośredniego dostępu do właściwości obiektów reprezentowanych przez znaczniki.

21 Uniwersytet Przyrodniczo-Humanistyczny 21/155 ActionScript 3 vs MXML  MXML jest elementem frameworka FLEX i umożliwia oddzielenie prezentacji (MXML) od logiki programu (ActionScript).  Nazwy tagów MXML odpowiadają bezpośrednio nazwom (konwencjom nazw) klas i ich właściwości języka ActionScript 3.  Podczas procesu kompilacji tagi MXML są przetwarzane do bajtokodu, który jest następnie zapisywany do pliku SWT. MXML ActionScript

22 Uniwersytet Przyrodniczo-Humanistyczny MXML – Właściwości (1) Istnieją dwa podstawowe sposoby deklarowania właściwości w MXML-u. Składnia atrybutowa (ang. attribute syntax) – wszystkie właściwości obiektu są podawane wewnątrz głównego tagu i są nazywane atrybutami. Składnia elementów własności (ang. property element syntax) – właściwości obiektu są opisywane(ustawiane) przez tagi wewnętrzne 22/ to jest etykieta red

23 Uniwersytet Przyrodniczo-Humanistyczny MXML – Właściwości (2) Składnia elementów własności kosztuje programistę więcej wysiłku, ale w wielu sytuacjach (w przypadku zagnieżdżania obiektów) jest koniecznością. Składnia mieszana – nic nie stoi na przeszkodzie, aby mieszać obydwa sposoby definiowania własności obiektów. 23/169 Element 1 Element 2 Element 3 Element 1 Element 2 Element 3

24 Uniwersytet Przyrodniczo-Humanistyczny MXML – Właściwości domyślne Komponenty MXML posiadają domyślne właściwości, dzięki czemu w przypadku ustawiania tej wewnętrznej wartości skraca się zapis. 24/169 Element 1 Element 2 Element 3 to jest etykieta dataProvider text

25 Uniwersytet Przyrodniczo-Humanistyczny MXML – komunikacja pomiędzy komponentami Komponenty MXML posiadają właściwość id, która jest odpowiednikiem nazwy zmiennej w ActionScript. 25/169 public var comboBoxWidth:int = 200;... Element 1 Element 2 Element 3 Komponenty MXML i AS „widzą się wzajemnie”. Aby użyć komponentu (MXML lub AS) w MXML, należy jego identyfikator lub nazwę podać pomiędzy {} W AS do komponentu MXML odwołujemy się po jego id. comboBoxData.addItem("Element 4");

26 Uniwersytet Przyrodniczo-Humanistyczny Flash Builder – typy aplikacji Flash Builder umożliwia tworzenie dwóch typów aplikacji flex-owych. 26/169 1.Web – aplikacje przeglądarkowe działające pod kontrolą Adobe Flash Player 2.Desktop – aplikacje „pulpitowe”, działające pod kontrolą Adobe AIR.

27 Uniwersytet Przyrodniczo-Humanistyczny Flash Builder – Struktura kodu 27/169 Kod Action Script – zachowania ( logika aplikacji) Typ aplikacji i przestrzenie nazw Elementy niewizulane (dane, usługi) Elementy wizualne (graficzny interfejs użytkownika)

28 Uniwersytet Przyrodniczo-Humanistyczny 28/155 Flex vs Adobe AIR API

29 Uniwersytet Przyrodniczo-Humanistyczny 29/155 Obsługa zdarzeń Każdy komponent posiada wiele zdarzeń obsługę, których można oprogramować.

30 Uniwersytet Przyrodniczo-Humanistyczny 30/155 Zestaw wizualnych komponentów Główna część frameworka Flex składa się z bogatego zestawu wizualnych komponentów, dzięki którym możliwe jest szybkie budowanie i dostarczanie bogatych aplikacji internetowych. Kontrolki Rozkłady Elementy nawigacyjne Wsparcie dla Adobe AIR Wykresy

31 Uniwersytet Przyrodniczo-Humanistyczny 31/155 Dynamiczny układ graficzny We Fleksie do tworzenia dynamicznego układu wykorzystywany jest system kontenerów i kontrolek lub jednocześnie i jednym i drugim (np., listy, tabele).  Kontenery, czyli komponenty takie jak HGroup, VGroup, czy Panel, pozwalają na umieszczanie w nich kolejnych komponentów i wymuszają ustawianie ich rozmiaru i położenia.  Kontrolki takie jak Button lub ComboBox, są komponentami do których nie można już nic dodać – służą one do zapewnienia interakcji z użytkownikiem. Każdy wizualny komponent jest albo kontenerem albo kontrolką. Uwaga: Wiele zagnieżdżeń może powodować spadek wydajności aplikacji,

32 Uniwersytet Przyrodniczo-Humanistyczny 32/155 Rozmieszczenie bezwzględne  Kontenery takie jak: Panel, TitleWindow, Application (po ustawieniu właściwości layout na absolute ), obsługują rozmieszczanie bezwzględne.  Umożliwiają one bezpośrednie zdefiniowanie położenia komponentów, które się w nich znajdują.  Oznacza to, że wewnętrzne komponenty mogą nachodzić na siebie, a żaden z nich nie wpływa na położenie pozostałych.

33 Uniwersytet Przyrodniczo-Humanistyczny 33/155 Rozmieszczenie bezwzględne – BorderContainer W komponencie BorderContainer (Odpowiednik Canvas z Flex 3) położenie elementów potomnych jest wyznaczone współrzędnymi x, y. Jeżeli współrzędne nie zostaną określone, będą miały domyślne wartości 0,0 - lewy górny róg.

34 Uniwersytet Przyrodniczo-Humanistyczny 34/155 Rozmieszczanie automatyczne – układ liniowy – VGroup i HGroup  W wielu kontenerach stosowany jest układ liniowy. Elementy potomne układane są w jednym wierszu albo kolumnie. Kontenerami tego typu są VGroup i HGroup.  Komponenty takie jak Panel, czy Application, obsługują układ liniowy, gdy właściwość layout jest ustawiona na vertical lub horizontal.

35 Uniwersytet Przyrodniczo-Humanistyczny 35/155 Rozmieszczanie automatyczne – układ wielowymiarowy  Kontener TileGroup wykorzystuje wielowymiarowy wzorzec rozmieszczenia elementów potomnych w kolumnach i wierszach.  Kontener TileGroup układa elementy w jednakowych komórkach, dopasowując automatycznie liczbę kolumn i wierszy.

36 Uniwersytet Przyrodniczo-Humanistyczny 36/155 Komponenty list – przykład DataGrid

37 Uniwersytet Przyrodniczo-Humanistyczny Wiązanie danych 37/169

38 Uniwersytet Przyrodniczo-Humanistyczny 38/155 Wiązanie danych - sposoby Wiązanie danych (ang. data binding) jest to proces polegający na powiązaniu właściwości (źródłowej) pewnego obiektu z właściwością (docelową) innego. Adobe Flex dostarcza następujące sposoby wiązania danych: 1.Nawiasy klamrowe ( {} ) w składni MXML, 2. MXML-owy tag 3. Metody narzędziowe klasy BindingUtils w Action Script. BindingUtils.bindProperty(myText, " text ", myTI, " text ");

39 Uniwersytet Przyrodniczo-Humanistyczny 39/155 Wiązanie danych – zdarzenie wiązania Zdarzenie wiązania danych jest wyzwalane: 1.W momencie modyfikacji właściwości źródłowej –nowa wartość jest kopiowana do właściwości docelowej. 2.W momencie inicjalizacji komponentu aplikacji – wówczas są inicjalizowane właściwości docelowe na podstawie wartości właściwości źródłowych.

40 Uniwersytet Przyrodniczo-Humanistyczny 40/155 Wiązanie danych – metatag Bindable W celu związania własnej właściwości (jako źródła) z właściwością docelową kontrolki, można użyć metatagu [Bindable] Flex zajmie się automatycznym przekopiowaniem danych, w przypadku, gdy nasza właściwość się zmieni. [Bindable] public var maxFontSize:Number = 15; [Bindable] public var minFontSize:Number = 5;

41 Uniwersytet Przyrodniczo-Humanistyczny 41/155 Wiązanie danych – Bindable i kolekcje Wiązanie danych nie ogranicza się do prostych właściwości: [Bindable] public var dir:Array = File.applicationDirectory.resolvePath('food').getDirectoryListing();

42 Uniwersytet Przyrodniczo-Humanistyczny 42/155 Wiązanie danych – model danych Kontrolki można powiązać z modelem danych

43 Uniwersytet Przyrodniczo-Humanistyczny 43/155 Elementy Renderujące i Edycyjne

44 Uniwersytet Przyrodniczo-Humanistyczny 44/155 Adobe Flex – Elementy renderujące i edycyjne  Elementy renderujące i edycyjne umożliwiają przejęcie kontroli nad sposobem wyświetlania danych i interakcji z komórkami komponentów bazujących na listach,  Na komórki mogą składać się grafiki, tekst oraz komponenty graficzne, a także dodatkowy kod dostosowujący sposób wyświetlania danych,  Elementy te określa się dla komponentów bazujących na listach przez ustawienie ich właściwości itemRenderer lub itemEditor,

45 Uniwersytet Przyrodniczo-Humanistyczny 45/155 Adobe Flex – Elementy renderujące i edycyjne  Elementy renderujące zwykle jedynie wyświetlają dane bez możliwości ich modyfikowania, przeważnie w formie tekstu lub obrazu,  Elementy edycyjne są stosowane do modyfikowania danych i udostępniają w tym celu użytkownikom interaktywne kontrolki takie jak CheckBox, czy TextInput,  Tego samego komponentu można użyć jako elementu renderującego i edytora poprzez ustawienie flagi rendererIsEditor,

46 Uniwersytet Przyrodniczo-Humanistyczny 46/155 Adobe Flex – Elementy renderujące typu drop-in  W architekturze Halo elementy renderujące i edycyjne typu drop-in wykorzystują istniejące kontrolki.  Wiele komponentów dostępnych we Flex 3 może bezpośrednio odgrywać rolę tych elementów.

47 Uniwersytet Przyrodniczo-Humanistyczny 47/155 Adobe Flex – Niestandardowe elementy renderujące - Halo Większą kontrolę nad sposobem wyświetlania pozycji danych można uzyskać poprzez wplecenie utworzonych elementów renderujących lub edycyjnych. data – uchwyt do pojedynczego elementu dataProvider -a

48 Uniwersytet Przyrodniczo-Humanistyczny 48/155 Adobe Flex – Niestandardowe elementy renderujące - Spark Należy zwrócić uwagę na dodatkowy element GridItemRenderer.

49 Uniwersytet Przyrodniczo-Humanistyczny 49/155 Adobe Flex – Elementy edycyjne editorDataField – określa właściwość edytora, która zawiera nowe dane. Flex konwertuje tę wartość na właściwy typ wymagany przez komórkę.

50 Uniwersytet Przyrodniczo-Humanistyczny 50/155 Adobe Flex – zewnętrzne elementy renderujące  Elementy renderujące i edycyjne można tworzyć jako osobne komponenty zapisane w zewnętrznych plikach.  Dzięki takiemu podejściu zarządzanie nimi jest dużo prostsze.  Ponadto można ich powtórnie użyć w innych aplikacjach.  Aby osiągnąć ten sam efekt za pomocą oddzielnego komponentu, należy przenieść kod otoczony znacznikiem (lub DataGridRenderer w Spark) do osobnego pliku MXML.

51 Uniwersytet Przyrodniczo-Humanistyczny 51/155 Adobe Flex – zewnętrzne elementy renderujące Do zewnętrznego komponentu odwołujemy się za pomocą nazwy pliku (i ewentualnie pakietu). W powyższym przypadku będzie to.

52 Uniwersytet Przyrodniczo-Humanistyczny 52/155 Walidacja danych

53 Uniwersytet Przyrodniczo-Humanistyczny 53/155 Walidacja danych  We Flex walidacja danych odbywa się po stronie klienta, przed wysłaniem danych na serwer.  Dzięki takiemu podejściu unika się (niepotrzebnej) transmisji danych pomiędzy serwerem a klientem – zwiększenie wydajności serwera.  Flex definiuje zbiór Spark-owych i MX-owych walidatorów danych.

54 Uniwersytet Przyrodniczo-Humanistyczny 54/155 Walidacja danych – Spark  Spark-owe walidatory bazują na klasach zawartych w pakiecie flash.globalization,  Klasy te używają danych lokalizacyjnych (narodowych) dostarczonych przez system operacyjny.  Posiadają więc, dostęp do wszystkich ustawień narodowych obsługiwanych przez system operacyjny.

55 Uniwersytet Przyrodniczo-Humanistyczny 55/155 Walidacja danych – Halo  Walidatory MX(Halo) używają komponentu ResourceManager, w celu uzyskania dostępów do plików lokalizacyjnych dostarczonych wraz z Flex SDK.  Walidatory MX zapewniają takie same zachowanie aplikacji na różnych systemach operacyjnych  Są za to ograniczone tylko do danych dołączonych do Flex SDK.

56 Uniwersytet Przyrodniczo-Humanistyczny 56/155 Walidacja danych – typy walidatorów Walidator SparkWalidator MXDescription CreditCardValidator Sprawdza poprawność numeru karty kredytowej CurrencyValidator Sprawdza poprawność waluty. DateValidator Sprawdza poprawność daty i czasu. Validator Sprawdza poprawność adresu . NumberValidator Sprawdza poprawność wartości numerycznej. Flex udostępnia następujący zbiór klas walidatorów:

57 Uniwersytet Przyrodniczo-Humanistyczny 57/155 Walidacja danych – typy walidatorów Walidator Spark Walidator MXDescription PhoneNumberValidator Sprawdza poprawność numeru telefonu. RegExpValidator Sprawdza poprawność wg. zadanego wzorca SocialSecurityValidator Sprawdza poprawność numeru ubezpieczenia społecznego. StringValidator Sprawdza poprawność łańcucha znaków. ZipCodeValidator Sprawdza poprawność kodu pocztowego (U.S. Lub Kanady). O ile to możliwe należy stosować walidatory Spark

58 Uniwersytet Przyrodniczo-Humanistyczny 58/155 Walidacja danych – element i właściwość docelowa  Walidatory danych są elementami niewizualnymi, więc są definiowane w tagu fx:Declarations,  Używają następujących właściwości, aby określić element do sprawdzenia: 1.source – określa obiekt źródłowy zawierający właściwość do sprawdzenia (może to być zarówno kontrolka jak i obiekt reprezentujący model). 2.property – łańcuch znaków, określający nazwę właściwości źródła do sprawdzenia.

59 Uniwersytet Przyrodniczo-Humanistyczny 59/155 Walidacja danych – uruchamianie  Walidator zostanie uruchomiony automatycznie po opuszczeniu kontrolki przez kursor.  Można też uruchomić go programowo wywołując metodę validate() lub dla zbioru walidatorów validateAll

60 Uniwersytet Przyrodniczo-Humanistyczny 60/155 Walidacja danych – zalety programowego uruchomienia Programowe uruchomienia walidatora jest przydatne przy sprawdzaniu zależności pomiędzy różnymi polami (np. sprawdzić pole tekstowe tylko, gdy chexbox jest zaznaczony).

61 Uniwersytet Przyrodniczo-Humanistyczny 61/155 Walidacja danych – wynik walidacji Można przechwycić wynik walidacji danych, a następnie dokonać odpowiednich działań Przy programowym uruchamianiu walidatora, nie trzeba ustawiać właściwości source i property.

62 Uniwersytet Przyrodniczo-Humanistyczny 62/155 Walidacja danych – konfigurowanie walidatora  Walidatory posiadają parametry, dzięki którym można je skonfigurować.  Parametrami wykorzystywanymi przez wszystkie walidatory są:  required – czy pole musi zostać wypełnione,  enabled – czy walidator ma być włączony.

63 Uniwersytet Przyrodniczo-Humanistyczny 63/155 Walidacja danych – własne informacje o błędach Walidatory posiadają również właściwości, które umożliwiają ustawienie własnych wiadomości informujących użytkownika o poszczególnych błędach.

64 Uniwersytet Przyrodniczo-Humanistyczny 64/155 Walidacja danych – obsługa zdarzeń W celu dokonania dodatkowych działań w przypadku powodzenia i/lub niepowodzenia walidacji, należy obsłużyć zdarzenia invalid i/lub valid.

65 Uniwersytet Przyrodniczo-Humanistyczny 65/155 Filtry

66 Uniwersytet Przyrodniczo-Humanistyczny 66/155 Adobe Flex – Filtry  Filtry mogą służyć do nadawania aplikacji wizualnej „głębi” i przestrzenności.  Przeważnie tego typu efekty importuje się do Flexa z Photoshopa lub Flash-a.  Część tych filtrów można też stosować do obiektów bezpośrednio z poziomu Flexa.  Przykładowymi odmianami filtrów są:  Cienie,  Poświaty,  Wypukłości,  Rozmycia,  Przezroczystość.

67 Uniwersytet Przyrodniczo-Humanistyczny 67/155 Adobe Flex – Filtry – znacznik s:filters  Filtry można stosować do komponentów na kilka różnych sposobów z poziomu MXML i ActionScript.  Zastosowanie filtra do komponentu następuje poprzez ustalenie właściwości filters, do której można przypisać tablicę obiektów reprezentujących filtry.  Najprostszym sposobem zastosowania filtru w MXML jest użycie znacznika lub ), wewnątrz komponentu, do którego dany filtr (lub filtry) ma się odnosić.

68 Uniwersytet Przyrodniczo-Humanistyczny 68/155 Adobe Flex – Filtry – BlurFilter BlurFilter rozmywa obiekt wzdłuż osi X i Y, co powoduje zmiękczenie szczegółów obrazu. Efekt przypomina obraz oglądany przez szkło półprzezroczyste. Właściwościami tego filtru są:  blurX, blurY – intensywność rozmycia poziomego i pionowego (w pikselach),  quality – jakość – liczba operacji zastosowania filtra. Jest nią stała klasy BitmapFilterQualit - LOW (domyślnie), MEDIUM, lub HIGHT.

69 Uniwersytet Przyrodniczo-Humanistyczny 69/155 Adobe Flex – Filtry – Kolejne filtry wewnętrzny poblaskzewnętrzny poblask Poświata wewnętrzna Poświata zewnętrzna

70 Uniwersytet Przyrodniczo-Humanistyczny 70/155 Adobe Flex – Filtry – Inne filtry Flex udostępnia jeszcze wiele innych filtrów. M.in.:  DisplacementMapFilter (przemieszczenie) – za pomocą tego filtru można zastosować efekt wypaczenia lub cętkowania dowolnego obiektu,  ConvolutionFilter (konwolucja) - pozwala zastosować macierzowy filtr splotu pikseli. Splot łączy piksele w obrazie wejściowym z pikselami sąsiednimi w celu wygenerowania obrazu. Dzięki splotowi można uzyskać wiele operacji na obrazkach, takich jak rozmycie, wyznaczanie krawędzi, wyostrzanie, efekt płaskorzeźby, efekt fazy.  ColorMatrixFilter (matryca kolorów) - Matryca barw to filtr pozwalający na mipulację kolorystyką obrazu – zmiana na obraz monochromatyczny, odcienie sepii, zmiana nasycenia, obracanie zabarwienia, luminacji itp..

71 Uniwersytet Przyrodniczo-Humanistyczny 71/155 Efekty i przejścia

72 Uniwersytet Przyrodniczo-Humanistyczny 72/155 Adobe Flex – efekty przejścia  Flex oferuje wiele animowanych efektów, które mogą zostać zastosowane do dowolnego komponentu lub grupy komponentów.  Przykładowo obiekty mogą rozbłyskiwać, rosnąć lub przesuwać się po najechaniu na nie wskaźnikiem myszy.  Predefiniowane style wyglądu aplikacji nazywane są stanami widoku i tylko we współpracy z nimi mogą być stosowane przejścia.

73 Uniwersytet Przyrodniczo-Humanistyczny 73/155 Adobe Flex – efekty przejścia – zastosowanie Przykładowymi efektami są: 1.Rozjaśnianie lub ściemnianie, 2.Przemieszczanie lub skalowanie komponentu, 3.Obracanie komponentu, 4.Powiększanie, 5.Zamazywanie z lewej, z prawej, z góry lub z dołu, 6.Inne efekty, takie jak poświata, czy przysłona irysowa, 7.Efekty dźwiękowe Typowymi zastosowaniami animacji są: 1.Wygładzanie zmian wyglądu interfejsu aplikacji, 2.Dodawanie obiektu do widoku, 3.Usuwanie obiektu z widoku, 4.Zmiana wyglądu danego obiektu.

74 Uniwersytet Przyrodniczo-Humanistyczny 74/155 Adobe Flex – efekty przejścia – określanie docelowych komponentów Aby zastosować efekt do komponentu, korzysta się z właściwości... target – dla pojedynczego komponentu lub targets – dla wielu komponentów... tego efektu poprzez dodanie nazwy( id ) komponentu, do którego ma zostać zastosowany.

75 Uniwersytet Przyrodniczo-Humanistyczny 75/155 Adobe Flex – efekty przejścia – Move Efekt Move (we Flex 4 występuje też trójwymiarowy odpowiednik Move3D ) służy do zmiany położenia komponentu po najkrótszej ścieżce. Efekt ten posiada następujące właściwości:  xFrom i yFrom określają początkową pozycję komponentu. W przypadku nieokreślenia tych parametrów Flex używa bieżącej pozycji.  xTo i yTo określają docelową pozycję komponentu.  xBy i yBy określają odległość (w pikselach) o jaką ma przesunąć się komponent. Wartości tych właściwości mogą być dodatnie lub ujemne. Wyzwalanie efektów wizualnych w sposób jawny odbywa się poprzez wywołanie metody play(), oś czasu

76 Uniwersytet Przyrodniczo-Humanistyczny 76/155 Adobe Flex – efekty przejścia – Fade, Dissolve, Blur, Glow oś czasu

77 Uniwersytet Przyrodniczo-Humanistyczny 77/155 Adobe Flex – efekty przejścia – Resize, Zoom, Iris oś czasu

78 Uniwersytet Przyrodniczo-Humanistyczny 78/155 Adobe Flex – efekty przejścia – Wipe, Rotate, AnimateProperty oś czasu

79 Uniwersytet Przyrodniczo-Humanistyczny 79/155 Adobe Flex – efekty przejścia – Wyzwalacze efektów (1) Oprócz uruchomienia efektu za pomocą metody play(), możliwe jest (dzięki wyzwalaczom) skojarzenie go z jakimś zdarzeniem związanym z „życiem” danego komponentu. Nazwa wyzwalaczaZdarzenie wyzwalające addedEffect/ removedEffect Komponent jest dodawany/usuwany do/z kontenera. creationCompleteEffect Komponent jest tworzony. focusInEffect/ focusOutEffect Ustawienie/Zdjęcie kursora na/z komponentu. hideEffect/showEffect Komponent staje się niewidzialny/widzialny – zmiana właściwości visible na false/true.

80 Uniwersytet Przyrodniczo-Humanistyczny 80/155 Adobe Flex – efekty przejścia – Wyzwalacze efektów (2) Nazwa wyzwalaczaZdarzenie wyzwalające mouseDownEffect/ mouseUpEffect Naciśnięcie/Zwolnienie przycisku myszy w momencie, gdy kursor znajdował się nad komponentem. moveEffect Komponent się porusza resizeEffect Komponent zmienia rozmiar rollOverEffect/ rollOutEffect Najechanie/zjechanie kursora myszy na/z komponentu. Najechanie wskaźnika myszy Zjechanie wskaźnika myszy

81 Uniwersytet Przyrodniczo-Humanistyczny 81/155 Adobe Flex – efekty przejścia – Zdarzenia rozpoczynające i kończące  Czasami istnieje potrzeba zainicjowania pewnych akcji w momencie rozpoczęcia lub zakończenia działania efektu.  Każdy efekt posiada zdarzenia za pomocą, których można zainicjować inne funkcje aplikacji.  Zdarzenia te to: effectStart, effectEnd, tweenStart i tweenEnd. powtarzanie efektu

82 Uniwersytet Przyrodniczo-Humanistyczny 82/155 Adobe Flex – efekty przejścia – dostosowywanie efektu (1)  Każdy efekt posiada zestaw właściwości, dzięki którym możliwe jest jego dostosowanie do własnych potrzeb.  Przykładowo efekt Glow posiada właściwości określające przezroczystość, stopień rozmycia, kolor i inne parametry poświaty.  Dla każdego efektu najlepiej jest samemu przetestować jego działanie z różnymi parametrami, aby stwierdzić jego akuratność dla danego komponentu (w danej sytuacji).

83 Uniwersytet Przyrodniczo-Humanistyczny 83/155 Adobe Flex – efekty przejścia – dostosowywanie efektu (2) 1.Efekty są dynamicznymi składnikami aplikacji, istotne jest więc sprecyzowanie, jak długo mają trwać oraz ile razy dany efekt powinien zostać odtworzony. 2.Do kontroli tych parametrów służą właściwości:  duration – czas trwania efektu w milisekundach,  repeatCount – liczba powtórzeń efektu,  repeatDelay – określa opóźnienie pomiędzy powtórzeniami.

84 Uniwersytet Przyrodniczo-Humanistyczny 84/155 Adobe Flex – efekty przejścia – funkcje dynamiki (1)  Efekty przejścia zmieniają się w czasie.  Kroki pośrednie między stanem początkowym, a końcowym wyznaczane są za pomocą funkcji dynamiki.  Domyślną funkcją dynamiki jest funkcja liniowa.  Różne typy funkcji dają odmienny typ dynamiki np.: odbijanie, sprężystość, przyspieszenie, zwolnienie.  Funkcje dynamiki przenoszą animację na kolejny poziom.

85 Uniwersytet Przyrodniczo-Humanistyczny 85/155 Adobe Flex – Efekty przejścia – funkcje dynamiki (2)  Aby skorzystać z funkcji dynamiki, należy m.in. podać nazwę ogólnego wariantu funkcji.  Warianty te wskazują, czy efekt będzie przyspieszać czy zwalniać w trakcie jego trwania.  Do dyspozycji mamy następujące warianty: Nazwa wariantuOpis easeIn Efekt rozpoczyna powoli, a potem przyspiesza easeOut Rozpoczyna się szybko i stopniowo zwalnia easeInOut Rozpoczyna powoli, potem przyspiesza i na koniec znów zwalnia

86 Uniwersytet Przyrodniczo-Humanistyczny 86/155 Adobe Flex – Efekty przejścia – funkcje dynamiki (3)  W architekturze Halo wszystkie funkcje dynamiki są dostępne w bibliotece mx.effets.easing.  Biblioteka ta zawiera typowe funkcje efektów takie jak: Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, Sine. Ponadto można tworzyć własne funkcje dynamiki

87 Uniwersytet Przyrodniczo-Humanistyczny 87/155 Adobe Flex – Efekty przejścia – funkcje dynamiki (4) Architektura Spark dostarcza nową bibliotekę spark.effects.easing, umożliwiającą dynamizację efektów wizualnych. W jej skład wchodzą klasy takie jak: Bounce, Elastic, Linear, Power, Sine. Przypisywane są do właściwości easer. Parametrami, na które należy zwrócić uwagę są:  easeInFraction (brak w Bounce i Elastic )– dynamika wejściowa (zakres 0-1)  easeOutFraction (tylko w Linear )– dynamika końcowa (0-1)  exponent ( tylko w Power)– wykładnik przy obliczaniu dynamiki. Im wyższy tym większe przyspieszenie i hamowanie. UWAGA: easeOutFraction + easeInFraction <= 1

88 Uniwersytet Przyrodniczo-Humanistyczny 88/155 Adobe Flex – efekty przejścia – efekty złożone (1) Pojedyncze efekty można łączyć w grupy za pomocą efektów Parallel i Sequence. Efekty podane jako składniki efektu złożonego Parallel będą uruchomione w tym samym czasie,

89 Uniwersytet Przyrodniczo-Humanistyczny 89/155 Adobe Flex – efekty przejścia – efekty złożone (2) Efekty podane jako składniki efektu złożonego Sequence będą wykonywane po kolei (jeden po drugim).

90 Uniwersytet Przyrodniczo-Humanistyczny 90/155 Adobe Flex – efekty przejścia – efekty złożone (3)  Możliwe jest również tworzenie bardziej wyrafinowanych efektów wizualnych poprzez zagnieżdżanie efektów równoległych ( Parallel ) i sekwencyjnych ( Sequence ).  Należy pamiętać, że każdy efekt obciąża procesor, a ich długotrwałe działanie może zniechęcić użytkownika do pracy z tworzoną przez nas aplikacji.  Dzięki efektom złożonym możliwe jest osiągnięcie ciekawych i nieszablonowych efektów wizualnych.  W przypadku efektów złożonych wartość parametru duration będzie określała czas jaki zajmie odtworzenie wszystkich efektów składowych.

91 Uniwersytet Przyrodniczo-Humanistyczny 91/155 Adobe Flex – efekty przejścia – efekty złożone (4)

92 Uniwersytet Przyrodniczo-Humanistyczny 92/155 Adobe Flex – Efekty przejścia – Klatki kluczowe (1)  Wprowadzony w Spark mechanizm klatek kluczowych pozwala na całkowitą kontrolę animacji.  Programista zajmuje się określaniem stanu animacji w konkretnym punkcie czasu.

93 Uniwersytet Przyrodniczo-Humanistyczny 93/155 Adobe Flex – Efekty przejścia – Klatki kluczowe (2) Animacje z klatkami kluczowymi, nie posiadają własności From/To/By. Zamiast tego wykorzystywane są klasy: 1.MotionPath – ścieżka animacji  property określa animowaną właściwość obiektu. 2.Keyframe – klatka animacji  time - określa czas(w milisekundach) wystąpienia animacji  value - wartość własności animowanej w danej klatce kluczowej. 3.Animate – klasa animacji  motionPath – wskazuje na kolekcję (obiektów klasy MotionPath ) animacji.  target – wskazuje na docelowy obiekt animacji.

94 Uniwersytet Przyrodniczo-Humanistyczny 94/155 Adobe Flex – Efekty przejścia – Klatki kluczowe – przykład

95 Uniwersytet Przyrodniczo-Humanistyczny 95/155 Adobe Flex – Efekty przejścia – Wielokrotne wykorzystywanie efektów  Funkcja play() uruchamiająca dany efekt, może przyjąć jako argument tablicę docelowych komponentów.  W takim przypadku nie trzeba określać docelowego komponentu (przy użyciu argumentu target ) w definicji efektu.  Takie podejście pozwala na zmniejszenie ilości kodu implementującego w gruncie rzeczy takie same efekty.  Można również rozważyć utworzenie zewnętrznego pliku MXML zawierającego tylko definicję efektów i odwoływać się do nich z różnych aplikacji.

96 Uniwersytet Przyrodniczo-Humanistyczny 96/155 Adobe Flex – Stany widoku (1)  Fleksowe aplikacje przeważnie są zbudowane z kilku widoków.  Domyślnie widoki są przełączane statycznie, podobnie do stron HTML.  Przejścia we Fleksie służą do tworzenia płynnej transformacji widoków.  Przejścia konstruuje się na bazie stanów widoków.  Stany to różniące się od siebie widoki aplikacji lub komponentów.  Dzięki widokom możliwe jest ujawnienie dodatkowej zawartości,

97 Uniwersytet Przyrodniczo-Humanistyczny 97/155 Adobe Flex – Stany widoku (2)  Stany widoku definiuje się poprzez podanie listy zmian, które muszą zostać zastosowane do stanu podstawowego – w ten sposób powstaje nowy widok,  Mogą być to zmiany dotyczące właściwości lub stylów albo polecenia dodające lub usuwające komponenty,  Pojedynczy stan jest definiowany w znaczniku s:State – każdemu z nich należy podać nazwę ( name ).  Wszystkie definicje stanów są umieszczane wewnątrz znacznika,

98 Uniwersytet Przyrodniczo-Humanistyczny 98/155 Adobe Flex – Stany widoku – przełączanie pomiędzy stanami Przełączanie pomiędzy stanami następuje poprzez zainicjowanie zdarzenia z właściwością currentState i nazwą pożądanego stanu docelowego. UWAGA: Podanie pustej nazwy stanu, powoduje przeniesienie do pierwszego z nich.

99 Uniwersytet Przyrodniczo-Humanistyczny 99/155 Adobe Flex – Stany widoku – wiązanie właściwości komponentów  Każdemu komponentowi można przypisać listę wartości dla właściwości, które będą uzyskane po przejściu do określonego stanu.  Aby powiązać wartość właściwości z konkretnym stanem należy nazwę tej właściwości rozszerzyć do postaci: nazwa_wlaściwości.nazwa_stanu=„wartość_w_stanie”

100 Uniwersytet Przyrodniczo-Humanistyczny 100/155 Adobe Flex – Stany widoku – dodawanie i wykluczanie komponentów  Komponenty posiadają następujące właściwości, które umożliwiają zarządzanie ich dostępnością w poszczególnych widokach. 1.includeIn – umożliwia podłączenie komponentu do widoku. 2.excludeFrom – umożliwia wykluczenie komponentu z widoku,  Tylko jedna właściwość może być ustawiona w danym komponencie.  Jeśli komponent ma być podłączony/odłączony do/z kilku widoków ich nazwy należy rozdzielić przecinkiem  Jeśli komponent nie posiada ustawionej żadnej z powyższych właściwości, będzie widoczny w każdym ze stanów.

101 Uniwersytet Przyrodniczo-Humanistyczny 101/155 Stany widoku – dodawanie i usuwanie komponentów - przykład

102 Uniwersytet Przyrodniczo-Humanistyczny 102/155 Adobe Flex – Efekty przejścia stanu widoku  Przejścia definiuje się poza definicjami stanów, w osobnym bloku kodu, wewnątrz znacznika.  Aby ustalić, kiedy przejście ma zostać odtworzone, określa się nazwę ( name ) stanu początkowego( fromState ) oraz stanu docelowego( toState ).  Jeśli zamiast nazwy stanu wpisze się gwiazdkę ( * ), przejście będzie dotyczyło wszystkich możliwych kombinacji stanów.

103 Uniwersytet Przyrodniczo-Humanistyczny 103/155 Adobe Flex – Efekty przejścia stanu widoku – przykład Niestety przy kliknięciu przycisku „Return To Default State” efekt nie jest odtwarzany

104 Uniwersytet Przyrodniczo-Humanistyczny 104/155 Adobe Flex – Stany widoku – Akcje (1)  Istnieje specjalna klasa akcji, służących do kontroli kolejności, w jakiej zachodzą zmiany między stanami widoku.  Akcje wpływają na moment, w którym określona zmiana umieszczona w definicji stanu jest faktycznie inicjowana.  Akcje odgrywają dużą rolę we właściwej koordynacji efektów zachodzących przy przejściach między stanami.  Akcje stanowią punkty kontrolne, dzięki którym komponenty będą zmieniać się dokładnie wtedy, kiedy jest to wymagane.

105 Uniwersytet Przyrodniczo-Humanistyczny 105/155 Adobe Flex – Stany widoku – Akcje (2) Nazwa akcjiZnaczenie AddAction Definiuje moment, w którym obiekt ma zostać dodany do nowego widoku, RemoveAction Definiuje moment, w którym obiekt ma zostać usunięty z nowego widoku SetAction Definiuje moment, w którym ma nastąpić zmiana, dodanie lub usunięcie właściwości|stylu określonego obiektu lub obiektów wymaga podania obiektu docelowego, nazwy właściwości, wartości itd.

106 Uniwersytet Przyrodniczo-Humanistyczny 106/155 Adobe Flex – Stany widoku – Akcje – przykład Teraz efekt działa w obie strony

107 Uniwersytet Przyrodniczo-Humanistyczny 107/155 Adobe Flex – Stany widoku – Filtry  Domyślnie wszystkie efekty tranzycji, stosowane są do wszystkich elementów docelowych.  Jeśli chcemy stosować te efekty tylko do podzbioru elementów należy użyć filtry. Nazwa filtruEfekt będzie stosowany dla add komponenty dodawane w czasie zmiany stanu. hide komponenty ukrywane ( visible=‘false’ )w czasie zmiany stanu move komponenty zmieniające swoje położenie ( x, y ) remove komponenty usuwane w czasie zmiany stanu rezize komponenty zmieniające właściwość width i/lub heigth show komponenty pojawiające się w czasie zmiany stanu ( visible=‘true’ )

108 Uniwersytet Przyrodniczo-Humanistyczny 108/155 Adobe Flex – Stany widoku – Filtry – przykład (1)

109 Uniwersytet Przyrodniczo-Humanistyczny 109/155 Adobe Flex – Stany widoku – Filtry – przykład (2)

110 Uniwersytet Przyrodniczo-Humanistyczny 110/155 Poprawianie wyglądu – skórki

111 Uniwersytet Przyrodniczo-Humanistyczny 111/155 Adobe Flex – Stylizacja w Halo Flex 3(Halo) umożliwiał zarządzanie wyglądem komponentów poprzez:  css – kaskadowe arkusze stylów,  właściwości kontrolek pozwalające na ustawianie poszczególnych styli np. : backgroundColor,  zaimportowane obrazki – używane np. do wypełniania tła,  flashowe pliki.swf, które mogły dynamicznie modyfikować wygląd aplikacji. Wady:  css i style pozwalały jedynie na prostą stylizację,  obrazki i pliki.swf mogły spowodować znaczne zwiększenie rozmiarów aplikacji.

112 Uniwersytet Przyrodniczo-Humanistyczny 112/155 Adobe Flex – Stylizacja w Spark i Halo – porównanie (1) M V C Komponent V Wygląd i zachowanie (ang. look & feel) komponentu Halo jest bezpośrednio związany z logiką i metodami tego komponentu, Skórka (tylko tło)

113 Uniwersytet Przyrodniczo-Humanistyczny 113/155 Adobe Flex – Stylizacja w Spark i Halo – porównanie (2) Wygląd Spark-owego komponentów nie jest związany z jego logiką i metodami. M C Skórka (cały widok) V Komponent label:String, selected:Boolean pole tekstowe, ikona,tło obsługa myszy, algorytmy filtrowania

114 Uniwersytet Przyrodniczo-Humanistyczny 114/155 Adobe Flex – Stylizacja w Spark i Halo – porównanie (3)  Komponenty Halo są ze sobą zawsze podobne jak ”brat z siostrą”  Dwa Spark-owe komponenty mogą posiadać kompletnie różny wygląd, mimo że posiadajątę samą bazową logikę, właściwości i metody.

115 Uniwersytet Przyrodniczo-Humanistyczny Sparkowe komponenty rozszerzają klasę SkinableComponent. UIComponent (Halo) Skinnable Component (Spark) Adobe Flex – Stylizacja w Spark – dziedziczenie Skórki natomiast wywodzą się z klasy SparkSkin Button ButtonSkin SparkSkin

116 Uniwersytet Przyrodniczo-Humanistyczny 116/155 Adobe Flex – Stylizacja w Spark – stany skórek  Flex 4 (Spark) dodaje obsługę skórek tzw. „skinów”, które są bardziej złożone niż CSS, ale dają większe możliwości.  Skiny posiadają swoje stany (podobnie jak komponenty), dzięki czemu możemy definiować wygląd komponentów indywidualnie dla każdego stanu. Przykładowo stanami komponentu Button są: „up”, „down”, „over”, i „disabled”.

117 Uniwersytet Przyrodniczo-Humanistyczny 117/155 Adobe Flex – Stylizacja w Spark – elementy definicji skórek Typowo definicja każdej skórki składa się z następujących elementów:  fx:Metadata – określa klasy komponentów, dla których przeznaczona jest skórka,  fx:Script – dodatkowa logika nałożona na wizualizację komponentów. Np. kolor przycisku powinien się zmienić po najechaniu myszą, ale etykieta już nie,  s:states – zbiór stanów w które może przechodzić komponent,  s:Rect, s:Ellipse, s:Button, s:Label itd. – komponenty, które (uwzględniając stany) budują skórkę dla komponentu docelowego.

118 Uniwersytet Przyrodniczo-Humanistyczny  MXML-owa biblioteka graficzna dostarcza bogatego wsparcia dla grafiki niskopoziomowej  Biblioteka ta jest wykorzystywana m.in. do tworzenia skórek. –Proste podstawowe kształty ( Ellipse, Rect ), –Złożone ścieżki ( Path ), –Zbiór różnorodnych wypełnień i linii ( Stroke ), –Maski, filtry, tryby mieszania, itd. –Transformacje 2D –Zintegrowane teksty, bitmapy Adobe Flex – Stylizacja w Spark – wykorzystanie FXG

119 Uniwersytet Przyrodniczo-Humanistyczny 119/155 Stylizacja w Spark – jak zacząć – modyfikacja istniejącej skórki (1) Flash Builder umożliwia łatwe rozpoczęcie pracy ze skórkami. 1.W zakładce Design wybieramy komponent dla którego ma powstać nowa skórka, 2.Następnie w panelu właściwości (style) wybieramy przycisk Create Skin... 3.Pojawi się okno dialogowe umożliwiające wskazanie pakietu i nazwy skórki. 4.Domyślnie Flash Builder kopiuje istniejącą definicję skórki do nowego pliku, dzięki czemu łatwo będzie ją zmodyfikować. Opcja zaznaczona domyślnie

120 Uniwersytet Przyrodniczo-Humanistyczny 120/155 Stylizacja w Spark – przypisanie skórki do komponentu Aby zastosować skórkę na komponencie należy ustawić mu właściwość skinClass. /* CSS file s mx "library://ns.adobe.com/flex/mx"; s|Button.myButtonStyle { skinClass: ClassReference("my.skins.CustomButton"); } Można również umieścić informację o skórce w pliku css......,który następnie trzeba zaimportować a referencję do zawartego w nim stylu ustawić za pomocą właściwości styleName komponentu.

121 Uniwersytet Przyrodniczo-Humanistyczny 121/155 Stylizacja w Spark – jak zacząć – modyfikacja istniejącej skórki (2) Przycisk oryginalną skórką Przycisk ze zmodyfikowaną skórką

122 Uniwersytet Przyrodniczo-Humanistyczny 122/155 Stylizacja w Spark – nowa skórka (1) Za pomocą metatagu HostComponent (umieszczanego w implementacji skórki) można powiązać daną skórkę z klasą komponentu. Skojarzenie skórki z klasą komponentu Stany komponentu

123 Uniwersytet Przyrodniczo-Humanistyczny 123/155 Stylizacja w Spark – nowa skórka (2)  Podstawowym elementem komponentu jakim jest przycisk jest jego etykieta – Label.  Ponadto przycisk powinien posiadać kształt – np. Ellipse, wypełniony jednolitym kolorem – SolidColor,

124 Uniwersytet Przyrodniczo-Humanistyczny 124/155 Stylizacja w Spark – nowa skórka (3)  Wypełnienie może być ciekawsze np., radialno- gradientowe – RadialGradient.

125 Uniwersytet Przyrodniczo-Humanistyczny 125/155 Korzystanie ze zdalnych serwisów

126 Uniwersytet Przyrodniczo-Humanistyczny 126/155 Aplikacja Flex jako warstwa prezentacji  Aplikacja Flex może implementować warstwę prezentacji dla aplikacji webowej.  Niższe warstwy aplikacji mogą być zaimplementowane w dowolnej technologii: PHP, J2EE,.NET, Ruby on Rails, ColdFusion,  Implementując w ten sposób warstwę prezentacji unikamy przeładowywania stron i zmniejszamy liczbę przesyłanych danych.

127 Uniwersytet Przyrodniczo-Humanistyczny 127/155 Aplikacja Flex jako warstwa prezentacji  Aplikacje Flex mogą komunikować się z warstwą logiki biznesowej przy użyciu gniazd lub (częściej) protokołu HTTP.  Flex udostępnia trzy rodzaje zdalnych wywołań procedur (RPC): 1.HTTPService – umożliwia wysyłanie żądań HTTP do usług na serwerze. 2.WebService – wyspecjalizowany interfejs, który automatycznie dokonuje serializacji i deserializacji pomiędzy tekstowym komunikatem protokołu SOAP a obiektami ActionScript. 3.Flash Remoting – umożliwia zdalne wywoływanie metod obiektów znajdujących się po stronie serwera.

128 Uniwersytet Przyrodniczo-Humanistyczny 128/155 Aplikacja Flex jako warstwa prezentacji  Adobe Flash – wiodące rozwiązanie wśród technologii RIA (Rich Internet Application).  Platforma Java EE – wiodące rozwiązanie dla technologii webowych. Adobe Flash + J2EE = atrakcyjne wizualnie i intuicyjne interfejsy użytkownika + stabilna i wydajna część serwerowa

129 Uniwersytet Przyrodniczo-Humanistyczny 129/155 Aplikacja Flex jako warstwa prezentacji Korzystając z komponentu HTTPService należy określić: adres URL zasobu z którym chcemy się połączyć, typ zwracanych danych – umożliwi automatyczne przetłumaczenie odpowiedzi na obiekt (np., XML). funkcje nasłuchujące (ang. listener functions) – przeznaczone do asynchronicznego przetwarzania rezultatów wywołań HTTPService.

130 Uniwersytet Przyrodniczo-Humanistyczny 130/155 Aplikacja Flex jako warstwa prezentacji  Odpowiedź (w postaci tekstowej), może zostać przypisana do zmiennej typu String, skonwertowana do XML, E4X (ECMAScript for XML) lub zwyczajnego obiektu ActionScript.  Odpowiedź w formacie JSON można zdeserializować wykorzystując zewnętrzną bibliotekę as3corelibas3corelib (https://github.com/mikechambers/as3corelib)https://github.com/mikechambers/as3corelib,która zapewni przekształcanie obiektów JSON w obiekty ActionScriptowe.

131 Uniwersytet Przyrodniczo-Humanistyczny 131/155 Aplikacja Flex jako warstwa protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml"); if("vehicleList".equals(request.getParameter("operation"))){ response.getWriter().write(" " + " "+ " Polonez "+ " 75 "+ " Polska "+ " " + " LEXUS LS 460 Elite AWD "+ " 370 "+ " USA "+ " " + " "); }else... response.getWriter().close(); } Serwis HTTP po stronie serwera może być zaimplementowany w postaci serwletu.

132 Uniwersytet Przyrodniczo-Humanistyczny 132/155 Aplikacja Flex jako warstwa prezentacji  Komponent HTTPService można utworzyć w AS, lub potraktować go jako niewizualny zasób w MXML.... vehicleList...  Wywołanie zdalnego serwisu może wymagać podania parametrów żądania.

133 Uniwersytet Przyrodniczo-Humanistyczny 133/155 Aplikacja Flex jako warstwa prezentacji  Zapytanie do zdalnego serwisu realizujemy wywołując metodę send(), na komponencie HTTPService. private function sendHttpRequest():void { try{ httpService.send(); httpService.addEventListener( ResultEvent.RESULT, handleResult); httpService.addEventListener( FaultEvent.FAULT, handleFault); }catch(e:Error){ Alert.show("Błąd "+e.message); }  Aby obsłużyć odpowiedź serwisu należy do komponentu HTTPService dodać obsługę zdarzeń: ResultEvent.RESULT – otrzymanie wyników, FaultEvent.FAULT – wykrycie niepowodzenia.

134 Uniwersytet Przyrodniczo-Humanistyczny 134/155 Aplikacja Flex jako warstwa prezentacji

135 Uniwersytet Przyrodniczo-Humanistyczny 135/155 Aplikacja Flex jako warstwa prezentacji public function handleResult(event:ResultEvent):void{ try{ var xml:Object = event.result; var vehicles:Object = xml.vehicles.vehicle; if(vehicles.length){ for(var i:int = 0; i

136 Uniwersytet Przyrodniczo-Humanistyczny 136/155 Aplikacja Flex jako warstwa prezentacji Mechanizm Flash Remoting daje możliwość pracy na obiektach zlokalizowanych po stronie serwera, w taki sposób, jakby były one obiektami lokalnymi aplikacji Flash lub Flex. Mechanizm ten wykorzystuje Action Message Format (AMF), który jest binarnym formatem danych służącym do serializacji i deserializacji obiektów ActionScript i przesyłania ich za pośrednictwem Internetu między aplikacją Flash a zdalnym serwisem (i odwrotnie). Twórcą protokołu jest firma Adobe. Ostatnia specyfikacja – AMF 3 dla ActionScript 3.

137 Uniwersytet Przyrodniczo-Humanistyczny 137/155 Aplikacja Flex jako warstwa prezentacji  Flash Remoting wykorzystuje mechanizmy wbudowane w Flash Player oraz odpowiednie mechanizmy po stronie serwera.  Niektóre serwery (takie jak ColdFusion i Zend), posiadają wbudowaną obsługę AMF.  Do innych trzeba doinstalować odpowiednie moduły – są one dostępne dla większości popularnych serwerów: Java EE – BlazeDS, LiveCycle Data Services,.NET – WebORB for.NET, FluorineFX, PHP – Zend framework, amfphp.

138 Uniwersytet Przyrodniczo-Humanistyczny 138/155 Aplikacja Flex jako warstwa prezentacji  Aby używać Flash Remotingu w J2EE należy do aplikacji webowej doinstalować moduł BlazeDS lub LiveCycle Data Services.  Najnowsza wersja modułu BlazeDS dostępna jest pod adresem:  Spakowane archiwum modułu zawiera: 1.biblioteki JAR, 2.pliki konfiguracyjne - potrzebne do uruchomienia BlazeDS, 3.blazeds-bin-readme.htm – zawiera warunki, postanowienia i szczegóły licencyjne. Opis integracji spring framework z BlazeDS.

139 Uniwersytet Przyrodniczo-Humanistyczny 139/155 Aplikacja Flex jako warstwa prezentacji Po rozpakowaniu archiwum modułu, należy odpowiednie foldery przekopiować do swojego projektu J2EE: zawartość folderu blazeds/WEB-INF/lib do folderu WebContent/WEB-INF/lib. folder blazeds/WEB-INF/flex do folderu WebContent/WEB-INF Folder flex zawiera pliki konfiguracyjne BlazeDS, które służą do skonfigurowania usług zdalnych (Remoting), komunikacyjnych i proxy.

140 Uniwersytet Przyrodniczo-Humanistyczny 140/155 Aplikacja Flex jako warstwa prezentacji Deskryptor wdrożeniowy (plik web.xml ) aplikacji J2EE powinien posiadać konfiguracje dwóch serwletów z modułu BlazeDS: 1.MessageBrokerServlet – moduł BlazeDS będzie uruchomiony przy każdym wywołaniu usług zdalnych, komunikacyjnych albo proxy poprzez każdy obsługiwany kanał. 2.RDSDispatchServlet – umożliwia pozyskiwanie informacji o wystawionych usługach w aplikacji internetowej. Informacje te są wykorzystywane przez Flash Builder do automatycznego generowania kodu AS.

141 Uniwersytet Przyrodniczo-Humanistyczny 141/155 Aplikacja Flex jako warstwa prezentacji flex.messaging.HttpFlexSession MessageBrokerServlet flex.messaging.MessageBrokerServlet services.configuration.file /WEB-INF/flex/services-config.xml 1 MessageBrokerServlet /messagebroker/*

142 Uniwersytet Przyrodniczo-Humanistyczny 142/155 Aplikacja Flex jako warstwa prezentacji RDSDispatchServlet flex.rds.server.servlet.FrontEndServlet useAppserverSecurity false 10 RDSDispatchServlet /CFIDE/main/ide.cfm Należy zwrócić uwagę na wartość parametru useAppserverSecurity. Archiwum modułu BlazeDS posiada już odpowiednio skonfigurowany plik web.xml - można go wykorzystać przy tworzeniu własnej aplikacji.

143 Uniwersytet Przyrodniczo-Humanistyczny 143/155 Aplikacja Flex jako warstwa prezentacji package flex.domain; public class Vehicle { private String name; private double power; private String country; Vehicle(String name, double power, String cuntry){ this.name = name; this.power = power; this.country = country; } /*getters & setters*/... } package flex.services; public class VehicleRemoteService { public ArrayList getAllVehicles() { List vehicles = new ArrayList (); vehicles.add(new Vehicle("Polonez", 75.0, "Polska"));... return vehicles; } Implementacja przykładowej zdalnej usługi może wyglądać następująco

144 Uniwersytet Przyrodniczo-Humanistyczny 144/155 Aplikacja Flex jako warstwa prezentacji Aby komponent Java stał się zdalnym miejscem docelowym (usługą) należy w pliku WebContent/WEB-INF/flex/remoting- config.xml dodać węzeł Po uruchomieniu serwera (np.Tomcat), BlazeDS wystawi klasę Java jako zdalne miejsce docelowe o identyfikatorze VehicleServiceDestination.... flex.services.VehicleRemoteService

145 Uniwersytet Przyrodniczo-Humanistyczny 145/155 Aplikacja Flex jako warstwa prezentacji Po aplikacji działającej po stronie serwera czas na aplikację kliencką. Żeby w aplikacji Flex wygenerować kod ActionScript, który skorzysta z miejsca docelowego po stronie serwera należy skonfigurować odpowiednio projekt Flex-owy Kod AS będzie generowany na podstawie informacji dostarczonej przez serwer J2EE, dotyczących szczegółów wystawionej usługi.

146 Uniwersytet Przyrodniczo-Humanistyczny 146/155 Aplikacja Flex jako warstwa prezentacji Typ serwera aplikacyjnego Moduł Flash Remoting wykorzystywany przez zdalny serwer Katalog treści webowej projektu J2EE Adres URL aplikacji J2EE Katalog aplikacji Katalog, do którego będzie zapisywany skompilowany projekt Flex. Najlepiej wskazać katalog treści webowej projektu J2EE

147 Uniwersytet Przyrodniczo-Humanistyczny 147/155 Aplikacja Flex jako warstwa prezentacji Po skonfigurowaniu projektu należy (w Flash Builder) połączyć się z modułem BlazeDS (poprzez RDSDispatchServlet) useAppserverSecurity – był ustawiony na false

148 Uniwersytet Przyrodniczo-Humanistyczny 148/155 Aplikacja Flex jako warstwa prezentacji  Automatycznie wygenerowany kod m.in. zawiera klasy ActionScript, będące odpowiednikami klas po stronie aplikacji J2EE.  Aby wywołać zdalną usługę należy utworzyć po stronie aplikacji Flex obiekt AS (tutaj VehicleDestinationService ) i wywołać na nim jego metodę (tutaj getVehicle() ).  Jest na to kilka sposobów.

149 Uniwersytet Przyrodniczo-Humanistyczny 149/155 Programowe utworzenie obiektu usługi i wywołanie jej metody import mx.controls.Alert; import mx.rpc.AsyncToken; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import services.VehicleServiceDestination; import valueObjects.Vehicle; public function doResult(event:ResultEvent):void{ var vehicles:ArrayCollection = event.result as ArrayCollection; for(var i:int = 0; i

150 Uniwersytet Przyrodniczo-Humanistyczny 150/155 Zastosowanie RemoteObject (1) import mx.controls.Alert; import mx.rpc.AsyncToken; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import services.VehicleServiceDestination; import valueObjects.Vehicle; public function doResult(event:ResultEvent):void{ var vehicles:ArrayCollection = event.result as ArrayCollection; for(var i:int = 0; i

151 Uniwersytet Przyrodniczo-Humanistyczny 151/155 Zastosowanie RemoteObject (2) import mx.controls.Alert; import mx.rpc.AsyncToken; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import services.VehicleServiceDestination; import valueObjects.Vehicle; public function doResult2(event:ResultEvent):void{ var vehicle:Object = event.result; var desc:String = ""; for(var k:String in vehicle){ desc+=k+":"+vehicle[k]+"\n"; }... Definiowanie procedur obsługi zdarzeń result i fault na poziomie metod vds.getVehicle(1);

152 Uniwersytet Przyrodniczo-Humanistyczny 152/155 Automatyczne wiązanie danych z kontrolkami (1)  Flash Builder 4 potrafi generować kod, wywołujący usługę i wiążący odebrane wyniki z kontrolkami.  Przykładowo, aby powiązać wyniki z kontrolką DataGrid, należy: 1.Dodać kontrolkę DataGrid do aplikacji. 2.W widoku Design, kliknąć na niej prawym klawiszem myszy, a następnie wybrać z menu przycisk Bind To Data.

153 Uniwersytet Przyrodniczo-Humanistyczny 153/155 Automatyczne wiązanie danych z kontrolkami (2) 3.W oknie dialogowym należy wybrać New Service Call (chyba, że w projekcie istnieje już zdefiniowany obiekt usługi). 4.Wybrać usługę z listy usług (tutaj. VehicleServiceDestination ) oraz operację do wywołania (tutaj. getAllVehicles():Vehicle[] ) z listy operacji. 5.Kliknij OK.

154 Uniwersytet Przyrodniczo-Humanistyczny 154/155 Automatyczne wiązanie danych z kontrolkami (3) protected function dataGrid_creationCompleteHandler(event:FlexEvent):void{ getAllVehiclesResult.token = vehicleServiceDestination.getAllVehicles(); } fx:Declarations fx:Script

155 Uniwersytet Przyrodniczo-Humanistyczny 155/155 Zastosowanie bindingu i stanów widoku... [Bindable]private var vehicles:ArrayCollection;... public function doResult(event:ResultEvent):void{ vehicles:ArrayCollection = event.result as ArrayCollection; }


Pobierz ppt "Uniwersytet Przyrodniczo-Humanistyczny 1/155 ADOBE FLEX i MXML dr Grzegorz Terlikowski."

Podobne prezentacje


Reklamy Google