Kurs Flex 3 - Drag and Drop

Technika Drag and Drop, czyli "przeciągnij i upuść" jest powszechnie stosowana w interfejsach graficznych w aplikacjach komputerowych. Nastomiast nie dotyczyło to aplikacji sieciowych, aż do momentu wprowadzenia przez Adobe bogatych aplikacji internetowych. Obecnie tę technikę możemy zastosować w wielu językach programowania, np. w Javie. Technika ta polega na zaznaczeniu obiektu, przeciągając go na inny obiekt i upuszczając na niego. Wszystkie komponenty Flex'a obsługują tę operację. Warto wspomnieć, że komponenty oparte na listach, posiadają odpowiednie atrybuty do obsługi Drag and Drop:

• DataGrid,
• HorizontalList,
• List,
• PrintDataGrid,
• TileList,
• Tree.

Kurs Flex 3 - wygląd aplikacji

W utworzonym projekcie możemy zmieniać wygląd całej aplikacji, jak i poszczególnych komponentów za pomocą stylów lub skórek.

Pierwszym sposobem jest użycie właściwości stylów pozwalającym, np. na ustawienie rozmiaru czcionki, koloru tła i wielu innych. Drugim sposobem na zmianę szaty graficznej jest wykorzystanie skórek, będących elementami graficznymi. Może to być plik graficzny z rozszerzeniem, np. *.jpg, *.png, *.swf lub narysowana grafika w języku ActionScript. Na przykład, każdy komponent wyświetlający tekst ma następujące style:

Kurs Flex 3 - praktyczne komponenty

W tej części kursu poznamy najczęściej używane komponenty, które możemy podzielić na kontenery i proste kontrolki. Są one dostępne zarówno w języku MXML, jak i ActionScript. Kontenery pozwalają na tworzenie układu elementów aplikacji, a wewnątrz nich są umieszczane kontrolki. Wszystkie komponenty posiadają zdarzenia pozwalające reagować na działania użytkownika, np. kliknięcie przycisku.

Jeżeli chcemy aby komponenty mogły być modyfikowane w trakcie działania aplikacji, należy przypisać im identyfikator id. W ten sposób możemy uzyskać dostęp do ich właściwości. Modyfikacje możemy zastosować za pomocą utworzonej funkcji w języku ActionScript lub powiązania danych, które jest oznaczone w języku MXML nawiasami klamrowymi. Wiązanie danych możemy użyć do powiązania prostej kontrolki  ze strukturą danych (np. XML). Kiedy dane ulegną zmianie, kontrolka zostanie zaktualizowana automatycznie, odzwierciedlając modyfikacje.

Kurs Flex 3 - tworzenie projektu cz.2

Podczas tworzenia projektu został wygenerowany domyślny plik, o którym była mowa w tworzenie projektu cz.1. Jest on widoczny w trybie edycji źródła.

[kliknij na obrazek aby powiększyć]

Pierwsza linia kodu <?xml version="1.0" encoding="utf-8"?> stanowi deklarację typu dokumentu XML. MXML jest językiem standardu XML, więc taka deklaracja musi zostać w nim zawarta. Druga linia kodu

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute">

definiuje stronę główną aplikacji. Znacznik <mx:Application> stanowi uchwyt całej zawartości aplikacji i może występować tylko raz. Wewnątrz tego znacznika znajdują się dwa atrybuty (w przyszłości można dodawać też inne).

Pierwszy xmlns:mx="http://www.adobe.com/2006/mxml" określa przestrzeń nazw dla znaczników Flex'a 3. Kod ten definiuje przedrostek mx, który jest powiązany ze biorem znaczników. Wartość atrybutu jest uniwersalnym identyfikatorem zasobów (URI).

Kurs Flex 3 - tworzenie projektu cz.1

Nowy projekt tworzymy wybierając File ---> New ---> Flex Project,

[kliknij na obrazek aby powiększyć]