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.

1. ApplicationControlBar

Kontener ApplicationControlBar jest stosowany do przechowywania składników dających dostęp do elementów używanych podczas użytkowania aplikacji. Jeżeli jest określony jako pierwszy element potomny znacznika <mx:Application> oraz jeżeli atrybut dock ma wartość true. to kontener ten jest dokowany u góry aplikacji, który zajmuje całą jej szerokość i nie jest przewijany wraz z aplikacją.

Doskonale nadaje się do umieszczenia w nim menu głównego. W tym celu skorzystamy z komponentu <mx:MenuBar>. Aby stworzyć MenuBar musimy utworzyć strukturę XML'ową odzwierciedlającą menu i użyć atrybutu labelField, a jako wartość nadać nazwę atrybutu utworzonej struktury w formacie E4X.

    <mx:ApplicationControlBar id="appConBar1" dock="true"
      width="100%" height="100%">

        <mx:MenuBar labelField="@label">
            <mx:XMLList>
                <menuitem label="MenuItem1">
                    <item label="SubMenuItem1" >
                    <item label="SubMenuItem2" />
                    <item label="SubMenuItem3" />
                </menuitem>
                <menuitem label="MenuItem2" />
                <menuitem label="MenuItem3" />
            </mx:XMLList>
        </mx:MenuBar>

    </mx:ApplicationControlBar>

Poniżej widzimy kontener wewnątrz, którego zostało umieszczone menu główne.

[kliknij na obrazek aby powiększyć]

2. Button

Prosta kontrolka Button jest prostokątnym przyciskiem, przy pomocy którego możemy inicjować zdarzenie w momencie naciśnięcia myszką lub spacją. Rozmiar przycisku możemy zmieniać przy pomocy właściwości height i width. Możemy także zmienić zachowanie kontrolki z normalnego naciskania na przełączanie. Podczas normalnego naciskania kontorlka wraca do pierwotnego stanu po zwolnieniu przycisku myszki. Natomiast Button typu przełącznik (właściwość toogle ustawiamy na true) pozostaje wciśnięty po kliknięciu i powraca do pierwotnego stanu po ponownym kliknięciu. Przyciski zazwyczaj korzystają ze słuchaczy zdarzeń aby wykonać działanie. Gdy użytkownik kliknie kontrolkę, wtedy wywoływane są dwa zdarzenia click i buttonDown. Poniżej znajdują sie najczęściej wysyłane zdarzenia:

• mouseDown - kontrolka zmienia stan po kliknięciu przycisku myszki,
• mouseMove - zmienia stan, gdy wskaźnik myszki poruszany jest nad kontrolką,
• mouseOver - zmienia stan, gdy wskaźnik myszki znajduje się nad kontrolką,
• mouseOut - zmienia stan, gdy wskaźnik myszki znajduje się poza kontrolką,
• mouseUp - kontrolka zmienia stan po zwolnieniu przycisku myszki.

Wszystkie zdarzenia zostaną wykonane, gdy właściwość enabled przycisku ma przypisaną wartość true. Przypisanie wartości false spowoduje jego zablokowanie.

Button jest podstawową częścią wielu formularzy i aplikacji internetowych. W formularzach bardzo przydatny jest przycisk Wyślij dzięki, któremu możemy wysłać informacje z formularza. Przyciski następny i poprzedni są dość użyteczne w aplikacjach, które posiadają prezentację. Aby utworzyć przycisk musimy użyć znacznika <mx:Button>, a do wyświetlenia etykiety - atrybutu label.

    <mx:Button id="btn1" label="Click me." />

Poniżej widzimy wykonanie kodu:

2.1. Obsługa zdarzenia

Programowanie we Flex’ie opiera sie na zdarzeniach. Oznacza to, że zdarzenia decydują o przebiegu działania aplikacji. Korzystanie z opartej na zdarzeniach architektury po stronie klienta powoduje, że aplikacja lepiej działa i w mniejszym stopniu obciąża sieć, gdyż nie jest konieczne ciągłe odświeżanie strony. Na przykład kliknięcie w przycisk przez użytkownika powoduje wyświetlenie tekstu w etykiecie:

    <mx:Label id="label1" />
 
    <mx:Button id="btn1" label="Click me."
        click="label1.text=’Button clicked’"/>

Po kliknięciu przycisku przez użytkownika zostaje wysłane zdarzenie click. W tym przypadku wykonuje się kod języka ActionScript label1.text=’Button clicked’, czyli do właściwości text etykiety zostaje przypisany łańcuch znakowy Button clicked. Jeżeli właściwość zostaje przypisana do zdarzenia nawiasy klamrowe pomijamy, ponieważ kompilator Flex'a rozumie, że jest to kod ActionScript.
Zwróćmy uwagę, że zostały zastosowane zagnieżdżone cudzysłowia. Cudzysłów podwójny otacza cały wiersz kodu, a pojedynczy wyodrębnia łańcuch.

2.2. Obsługa zdarzenia przez funkcję

W powyższym zdarzeniu został wykonany jeden kod. Problem pojawia się, gdy mamy do wykonania więcej, niż dwa wiersze kodu ActionScript. W zdarzeniu click należałoby użyć średnika do oddzielenia wierszy kodu. Taki zapis jest jak najbardziej prawidłowy, ale powoduje nieporządek.

Lepszą metodą obsługiwania zdarzeń jest tworzenie funkcji w języku ActionScript. Funkcję umieszcza się w bloku <mx:Script>, który informuje kompilator Flex'a, że kod wewnątrz niego jest kodem ActionScript. Poniżej znajduje się kod wykonujący dokładnie to samo co kod kilka linijek wyżej, z taką różnicą, że kod ActionScript zostanie umieszczony w funkcji.

    <mx:Script>
    <![CDATA[
 
        private function clickHandler():void {
   
            label1.text= "Button clicked";
        }
  
    ]]>
    </mx:Script>
 
 
    <mx:Label id="label1" />
    <mx:Button id="btn1" label="Click me." 
        click="clickHandler()"/>

Kliknięcie przycisku spowoduje wywołanie funkcji clickHandler(), która spowoduje przypisanie do etykiety łańcuchu znakowego Button clicked.

Ponieważ nie ma w kodzie zagnieżdżonych cudzysłowów, do otoczenia tekstu mogliśmy użyć cudzysłowy podwójne.

Zauważmy, że w bloku <mx:script> został umieszczony blok <![CDATA[]]> i dopiero wewnątrz niego znajduje się funkcja. CDATA informuje kompilator, że zamiast kodu XML, w bloku są zawarte dane znakowe, co zabezpiecza przed wygenerowaniem błędów XML dla tego bloku.

3. DataGrid

Kontrolka DataGrid umożliwia wyświetlanie danych w siatce wierszy i kolumn. Dane pobierane są z tablicy lub zewnętrznego pliku XML, który możemy przetworzyć na tablicę dla obiektu DataProvider. Typowe właściwości dla DataGrid to:

• sortableColumns i sortable kolumny. Jeżeli sortableColumns ma wartość true, to gdy  klikniemy w nagłówek kolumny spowoduje sortowanie danych rosnąco, bądź malejąco. Sortowanie dla pojedynczej kolumny możemy zablokować przypisując właściwości sortable wartość false.
• resizableColumns i resizable kolumny. Jeżeli resizableColumns ma wartość true, to mamy możliwość zmiany rozmiaru kolumn przeciągając suwak podziału w wierszu nagłówka. Zmianę rozmiaru pojedynczej kolumny możemy zablokować przypisując właściwości resizable wartość false.
• draggableColumns i draggable kolumny. Jeżeli draggableColumns jest ustawiona na true, możemy zmieniać pozycję kolumny chwytając nagłówek wiersza i przeciągając na inną pozycję. Ustawienie właściwości draggable pojedynczej kolumny na false spowoduje zablokowanie zmiany pozycji kolumny.

Najczęściej DataGrid używany jest w aplikacjach z arkuszami danych, np. formularze podatkowe.

Aby utworzyć tabelkę musimy użyc trzech znaczników: <mx:datagrid>, <mx:columns> i <mx:datagridcolumn>. Dla przykładu, pierwsza kolumna będzie miała możliwość sortowania, pierwsza i druga zmiany rozmiaru, a trzecia kolumna nie będzie mogła zmieniać pozycji.

    <mx:DataGrid sortableColumns="true" resizableColumns="true" 
        draggableColumns="true">
        <mx:columns>
            <mx:DataGridColumn headerText="Column1" />
            <mx:DataGridColumn headerText="Column2" 
                sortable="false" draggable="false" />
            <mx:DataGridColumn headerText="Column3" 
                sortable="false" resizable="false" />
        </mx:columns>
    </mx:DataGrid>

Korzystając z atrybutu headerText określamy nazwę nagłówka kolumny poprzez przypisanie wartości ciągu znakowego. Jednak nie jest on obowiązkowy, gdyż najczęściej używany jest atrybut dataField dzięki, któremu nazwa nagłówka kolumny jest taka sama jak nazwa atrybutu obiektu.

Do wypełnienia tabelki danymi posłużymy się znacznikiem <mx:ArrayCollection> i <mx:Object>. ArrayCollection jest tablicą o specjalnych właściwościach. Najczęściej używana jest do wypełniania kontrolek danymi, a także manipulowania danymi, filtorwania lub sortowania. Jest po prostu zbiorem obiektów - Object.

    <mx:DataGrid sortableColumns="true" resizableColumns="true"
        draggableColumns="true">
 
        <mx:ArrayCollection id="dane">
            <mx:Object Imie="Jan" Nazwisko="Kowalski"
                Telefon="609145623" />
            <mx:Object Imie="Marian" Nazwisko="Nowak" 
                Telefon="780312834" />
            <mx:Object Imie="Krystyna" Nazwisko="Jasinska" 
                Telefon="512654190" />
        </mx:ArrayCollection>
 
        <mx:columns>
            <mx:DataGridColumn headerText="Imię" 
                dataField="Imie" />
            <mx:DataGridColumn dataField="Nazwisko"
                sortable="false" draggable="false" />
            <mx:DataGridColumn dataField="Telefon"
                sortable="false" resizable="false"/>
        </mx:columns>
    </mx:DataGrid>

Poniżej widzimy tabelkę wypełnioną danymi, które są posortowane malejąco według imienia. Kolumna Imię ma zmieniony rozmiar, a kolumny Nazwisko i Telefon zostały zamienione miejscami.

[kliknij na obrazek aby powiększyć]

4. Form

Formularze są istotną częścią każdej aplikacji (strony www) zbierającej dane od użytkowników, bądź o użytkownikach. Doskonale nadają się do komunikacji użytkownika z administratorem strony, najczęściej zwany "kontakt". Kontener Form spełnia zadanie ułożenia kontrolek w formularzu, automatyzując znaczną część rutynowej pracy. W kontenerze możemy decydować, czy dane kontrolki są wymagane, czy opcjonalne, obsługiwać komunikaty błędów oraz przeprowadzać weryfikację danych.
Aby utworzyć kontener Form posłużymy się trzema znacznikami: <mx:Form>, <mx:FormHeading> i <mx:FormItem>. Do zdefiniowania najbardziej zewnętrznego kontenera formularza użyjemy bloku znacznika <mx:Form>:

    <mx:Form>
    </mx:Form>

Form układa swoje elementy potomne w porządku pionowym, wyrównując je do lewej strony. Następnie wewnątrz kontenera użyjemy znacznika <mx:FormHeading> do zdefiniowania nagłówka formularza.

    <mx:Form>

        <mx:FormHeading label="Dane użytkownika" />

    </mx:Form>

Znacznik <mx:FormHeading> umożliwia ustawienie etykiety dla grupy kontenerów FormItem. Lewe krawędzie etykiet są wyrównywane do lewej krawędzi formularza. Możemy użyć wiele znaczników <mx:FormHeading>. Za kontenerem FormHeading wstawmy trzy znaczniki <mx:formitem>, które będą zawierać kolejno nazwy: Imiona, Nazwisko, Telefon. Wewnątrz tego znacznika użyjemy kontrolki <mx:TextInput>, do której będziemy wpisywać dane o użytkowniku. Kontrolka ta może zawierać tylko jedną linię tekstu.

    <mx:Form>
        <mx:FormHeading label="Dane użytkownika" />
  
        <mx:FormItem label="Imiona" >
            <mx:TextInput id="name1" />
            <mx:TextInput id="name2" />
        </mx:FormItem>
  
        <mx:FormItem label="Nazwisko">
            <mx:TextInput id="lastname1" />
        </mx:FormItem>
  
        <mx:FormItem label="Telefon">
            <mx:TextInput id="tel1" />
        </mx:FormItem>
    </mx:Form>

Za ostatnim znacznikiem <mx:FormItem> wstawmy kolejny, a wewnątrz niego umieśćmy dwie kontrolki Button o nazwie Wyślij i Anuluj.

        <mx:FormItem direction="horizontal">
            <mx:Button id="btn1" label="Wyslij" />
            <mx:Button id="btn2" label="Anuluj" />
        </mx:FormItem>

Domyślnie wszystkie kontrolki w kontenerze FormItem są układane pionowo z prawej strony kontrolki Label. Korzystając z atrybutu direction możemy zdecydować, że kontrolki będą układane poziomo zamiast pionowo. Aby układać kontrolki poziomo do atrybutu direction musimy przypisać wartość horizontal, w przeciwnym wypadku vertical. Jeżeli elementy potomne są układane poziomo i nie mieszczą się w jednym rzędzie, to zostają podzielone na kilka rzędów w równych kolumnach.
Poniżej widzimy wykonanie naszego kodu (z przykładowo wpisanymi danymi).

[kliknij na obrazek aby powiększyć]

Dodatkowo formularz możemy umieścić w bloku znacznika <mx:Panel>.

    <mx:Panel title="Informacje o użytkowniku">
  
    </mx:Panel>

Kontener Panel zawiera swoje elementy potomne, udostępnia pasek tytułowy title, który może zawierać nazwę kontenera oraz komunikaty o aktualnym statusie. Korzystając z atrybutu layout mamy możliwość układania elementów potomnych w następujący sposób:

• absolute - układ wyznaczony za pomocą współrzędnych x i y. Domyślnie wynosi 0, 0. Atrybut ten jest domyślną wartością kontenera Panel,
• horizontal - układ poziomy,
• vertical - układ pionowy.

Na rysunku poniżej widzimy kontener Panel wewnątrz, którego został umieszczony kontener Form.

[kliknij na obrazek aby powiększyć]

5. Image

Do wyświetlania obrazków należy skorzystać z kontrolki Image. Formaty plików jakie może pobierać kontrolka, to *.jpg, *.png, *.gif, *.svg, *.swf. Do plików *.jpg i *.png możemy zastosować atrybut alpha, który pozwala na tworzenie w obrazach efektu przezroczystości. Atrybut przyjmuje wartość od 0 do 1, gdzie 0 oznacza całkowitą przezroczystość, a 1 brak przezroczystości. Aby dołączyć obraz do kontrolki musimy użyć znacznika <mx:Image> i określić ścieżkę do pliku za pomocą atrybutu source.

    <mx:Image id="img1" source="@Embed(source=’obraz1.jpg’)" />

Zauważmy, że została użyta dyrektywa @Embed, która nakazuje kompilatorowi dołączyć obraz do pliku SWF w czasie kompilacji. Ta metoda ma kilka przewag nad domyślnym ładowaniem obrazu (source="obraz1.jpg"). Po pierwsze, obraz jest wgrywany w trakcie uruchamiania aplikacji, więc użytkownik nie musi czekać na wyświetlenie go. Po drugie, jest ona przydatna przy tworzeniu aplikacji pracujących bez internetu, ponieważ potrzebne obrazy są zawarte w pliku SWF i zostaną poprawnie wyświetlone. Należy jednak mieć na uwadze to, że użycie tej metody znacznie zwiększa rozmiar pliku wynikowego SWF.

Zwróćmy jeszcze uwagę na to, że nie ma określonych wymiarów obrazu. Możemy użyc atrybutów width i height do ustawienia szerokości i wysokości odczytując dane z obrazka, ale nie ma takiej potrzeby, bo Flex zrobi to za nas automatycznie. Natomiast warto skorzystać z atrybutu scaleContent (skalowanie) nadając wartość true, w celu dopasowania go do kontrolki Image.

    <mx:Image id="img1" source="@Embed(source=’obraz1.jpg’)"
        scaleContent="true" />

A tak wygląda wykonanie ostatniego kodu.

[kliknij na obrazek aby powiększyć]

6. List

Kontrolka List jest pionową listą umożliwiającą wyświetlanie danych z wykorzystaniem właściwości dataProvider (dostawcy danych). Dostawca danych to zbiór obiektów, taki jak Array, czy ArrayCollection. Aby utworzyć pionową listę musimy skorzystać ze znacznika <mx:List>. Dla przykładu jako dostawcę danych użyjemy ArrayCollection, ponieważ jakakolwiek zmiana danych będzie widoczna w komponencie. Natomiast nie dzieje się tak, gdybyśmy wybrali zwykły obiekt Array. Wypełnia on komponent danymi jednorazowo i nie aktualizuje w przypadku zmian.

Stwórzmy najpierw tablicę obiektów:

    <mx:ArrayCollection id="array1">
        <mx:Object label="Item1" data="Jan"/>
        <mx:Object label="Item2" data="Marian"/>
        <mx:Object label="Item3" data="Krystyna"/>
    </mx:ArrayCollection>

A teraz kontrolkę List:

    <mx:List id="list1" dataProvider="{array1}" />

Wykonanie powyższego kodu spowoduje wyświetlenie kontrolki z trzema elementami Item1, Item2 i Item3.

Flash Player rozpoznał etykietę i dlatego zostały wyświetlone wartości label. A co by się stało, gdyby nie było tej właściwości? Otóż, Flash Player nie będzie wiedział, którą właściwość wyświetlić. Pokaże, że używamy obiektu wyświetlając dane następująco:

Aby temu zapobiec należy skorzystać z atrybutu labelField, a jako wartość nadać nazwę właściwości obiektu. W naszym przypadku będzie to data.

    <mx:List id="list1" dataProvider="{array1}" 
        labelField="data" />

Co się teraz wyświetli, to pewnie jest jasne. Zobaczmy:

Możemy również wyświetlać dane za pomocą funkcji napisanej w języku ActionScript. W tym celu zamiast atrybutu labelField, musimy skorzystać z właściwości labelFunction, a jako wartość przypisać nazwę funkcji. Funkcja przyjmuje minimum jeden argument typu Object i musi zwracać łańcuch znakowy. Ten sposób jest bardzo przydatny, gdy chcemy manipulować danymi.

    <mx:Script>
    <![CDATA[
        private function labelF(item:Object):String {
            return item.label + ", " + item.data;
        }
    ]]>
    </mx:Script>
 
    <mx:List id="list1" dataProvider="{array1}" 
        labelFunction="labelF" />

Tym razem wykonanie kodu spowoduje wyświetlenie wszystkich elementów tablicy ArrayCollection.

7. TextArea

Kontrolki TextArea możemy używać w celu wyświetlania tekstu, czy też edytowania i wpisywania tekstu, pod warunkiem, że wartość atrybutu editable jest ustawiona na true. Właściwość restrict umożliwia ograniczenie znaków jakie możemy wprowadzić. Podobne działanie ma właściwość maxChars, która umożliwia określenie maksymalnej ilości znaków.

Jeżeli tekst nie mieści się w polu tekstowy, to automatycznie pojawiają się poziome i pionowe paski przewijania. Nie dzieje się tak w przypadku, gdy wartość właściwości horizontalScrollPolicy i verticalScrollPolicy zostanie ustawiona na off.

Z komponentu możemy korzystać, gdy wymagane jest wielowierszowe pole tekstowe, np. jako pole komentarza w formularzu.

Warto wspomnieć, że mamy możliwość sformatowania tekstu w kodzie HTML za pomocą atrybutu htmlText.

Aby utworzyć pole tekstowe musimy użyć znacznika <mx:TextArea>, a do wyświetlenia zwykłego tekstu atrybutu text.

    <mx:TextArea id="text2" text="Hello World!" />

A tak wygląda nasze pole tekstowe:

W kolejnych częściach kursu:

• Wstęp,
• Flex Builder 3 - tworzenie projektu cz.1,
• Flex Builder 3 - tworzenie projektu cz.2,
• Praktyczne komponenty - m.in. ApplicationControlBar, Button, DataGrid, Image,
• użycie stylów do zmiany wyglądu aplikacji,
• użycie techniki Drag and Drop,
• biblioteka AMFPHP,
• aplikacja "przeglądarka zdjęć".