Adobe Flex 3 jest środowiskiem programistycznym wykorzystywanym do tworzenia tzw. bogatych aplikacji internetowych (RIA – Rich Internet Applications). Flex umożliwia kreowanie wydajnych aplikacji sieciowych o zaawansowanych interfejsach użytkownika oraz rozbudowanej logice biznesowej. Aplikacje stworzone za pomocą Flexa można uruchamiać w większości popularnych systemów operacyjnych.

W artykule znajdują się filmy instruktażowe o łącznym czasie 65 minut demonstrujące na przykładach tworzenie projektu webowego oraz aplikacji AIR, a także metody pracy w widoku kodu (source view) oraz w widoku projektowania (design view).

Flex 3

Adobe Flex 3 został wyposażony w zupełnie nowe możliwości, takie jak tworzenie aplikacji AIR lub AJAX Bridge, zawiera też wiele ulepszeń w stosunku do wersji poprzedniej, których głównym celem jest usprawnienie, ułatwienie i przyspieszenie pracy programisty.

Flex 3, tak jak jego poprzednik (Flex 2), jest dostępny za darmo jako OpenSource (www.flex.org) lub odpłatnie razem ze środowiskiem programistycznym (Flex Builder 3) opartym na środowisku programistycznym Eclipse (www.eclipse.org).

Niniejsza prezentacja została przygotowana w oparciu o Adobe Flex 3 Builder Beta 3 (Milestone 4). Wersja ta nie powinna zawierać znaczących różnic w stosunku do wersji produkcyjnej, która ma być dostępna w pierwszym kwartale 2008 roku.

Praca z Flex Builder 3

Interfejs użytkownika Flex Builder 3 (FB3) wygląda podobnie do interfejsu Flex Builder 2 (FB2), ale nie jest identyczny. W FB3 znajdziemy nową stronę startową oraz nowe elementy menu głównego aplikacji: Search i Data. Menu Search zawiera nowe funkcje ułatwiające przeprowadzanie refaktoringu kodu, natomiast menu Data zawiera kreatory ułatwiające tworzenie aplikacji na podstawie bazy danych, a także importowanie i zarządzanie serwisami webowymi (web services).

Nowa strona startowa zawiera odnośniki do sporej liczby podzielonych tematycznie tutoriali opisujących poszczególne aspekty pracy z aplikacją od tworzenia prostych aplikacji RIA, przez pracę z danymi i elementami interfejsu uzytkownika po techniki debuggingu.

FB3 pozwala na tworzenie projektów webowych, uruchamianych tak jak w FB2 za pomocą przeglądarki interentowej i Adobe Flash Palayer’a (identycznie jak w FB2) lub samodzielnych aplikacji systemowych działających pod kontrolą AIR (Adobe Integrated Runtime).

Tworzenie projektu webowego [oglądaj, czas trwania 24 minuty] [pobierz, RAR, 43MB]

  • Tworzenie prostego projektu webowego, zmiany w strukturze zasobów
  • Wersja robocza i produkcyjna aplikacji
  • Udostępnianie kodu źródłowego
  • Praca z bibiliotekami komponentów

Adobe Flex Builder 3 umożliwia tworzenie samodzielnych aplikacji działających pod kontrolą AIR (Adobe Integrated Runtime). Aplikacje te, oprócz dostępu do zasobów sieciowych, mają dostęp do lokalnych zasobów obsługiwanych przez system operacyjny komputera, takich jak lokalny system plików, drukarki, itd.). Aplikacje AIR pozwalają przenieść aplikacje webowe zwane RIA (Rich Internet Application) bezpośrednio na pulpit komputera.

Większość projektów przygotowanych do uruchomienia w przeglądarce internetowej za pomocą Flex Builder 2 i 3 może być w prosty sposób przetworzona do aplikacji AIR za pomocą Flex Buildera 3, pozwalając na uruchamianie poza środowiskiem przeglądarki internetowej.

Tworzenie projektu AIR [oglądaj, czas trwania 8 minut] [pobierz, RAR, 16MB]

  • Tworzenie aplikacji AIR od podstaw
  • Tworzenie aplikacji AIR na bazie projektu webowego

Praca z kodem (Source view)

W FB2 istniała możliwość zakomentowania więcej niż jednej linii kodu (MXML lub ActionScript) jednak odkomentowanie go nie było już takie proste. W przypadku ActionScript, jeżeli do zakomentowania kodu wykorzystywano // (dwa znaki slash), wtedy trzeba było każdą linię odkomentować ręcznie. W przypadku korzystania z /* */ (tzw. komentarz blokowy) pracy było mniej, ale wciąż trzeba było ręcznie usunąć znaczniki początku i końca komentarza. Podobnie rzecz wyglądała w przypadku pracy z komentarzami w kodzie MXML <!– –>. W FB3 możemy w łatwy i prosty sposób komentować i odkomentować wiele linii kodu ActionScript i MXML, co znacznie zwiększa tempo i komfort pracy.

W FB2 istniał bardzo prosty sposób dotarcia do deklaracji zmiennej, metody i klasy za pomocą kliknięcia myszą na dowolnej referencji przy jednoczesnym wciśniętym klawiszu CTRL. W FB3 ulepszono tę metodę oraz umożliwiono wyszukiwanie powiązań w kierunku odwrotnym, czyli odnalezienie wszystkich referencji odpowiadających danej deklaracji.

Kolejną przydatną cechą FB3 jest wsparcie dla refaktoringu kodu. Refaktoring kodu to w najprostszym ujęciu ulepszanie aplikacji poprzez zmiany nazw (np. właściwości, metod, klas) oraz struktury aplikacji. Jest to funkcjonalność niedostępna w FB2.

FB3 pozwala też na usprawnione dodawanie wyrażeń ActionScript do wyrażeń obserwowanych w trybie debugowania aplikacji. Funkcja ta jest dostępna w FB2, ale jej ustawienie wymaga więcej pracy i jest bardziej podatna na błędy ze strony programisty.

Praca z kodem [oglądaj, czas trwania 14 minut] [pobierz, RAR, 27MB]

  • Komentowanie kodu MXML i AS
  • Powiązania deklaracja-referencje-deklaracja
  • Refaktoring kodu

Praca w widoku projektowania (Design view)

Podobnie jak w FB2, FB3 umożliwia pracę w widoku projektowania (tzw. design view). Widok projektowania w FB2 był bardzo przydatny. Pozwalał na bardzo szybkie prototypowanie interfejsu użytkownika. W FB3 widok projektowania został znacznie ulepszony dając projektantom znacznie większe możliwości. W FB3 widok projektowania wyposażono w narzędzia pozwalające na:

  1. zmianę rozmiarów elementów w oknie projektowania (zoom),
  2. wizualne generowane plików CSS,
  3. import z innych aplikacji wizualizacji graficznych dla komponentów (tzw. skórek).

Praca w widoku projektowania [oglądaj, czas trwania 19 minut] [pobierz, RAR, 37MB]

  • Nowe narzędzia (zoom)
  • Większa wygoda w stosowaniu zewnętrznych plików CSS
  • Tworzenie skórek i ich import do Flexa (Flash/Flex)