Adobe Flex/Wprowadzenie do języka MXML

Wprowadzenie
Wprowadzenie do języka MXML

Ogólnie o MXML

Pisząc aplikacje w technologi Flex korzystamy z dwóch języków: Action Script oraz MXML. MXML jest to język znaczników oparty na XML opisujący układ elementów interfejsu użytkownika jak i elementy niewizualne takie jak tablice, zmienne, efekty czy obiekty dostępu do danych. Język MXML jest podobny w swej strukturze do HTML, oferując tagi, które służą do bezpośredniego dostępu do właściwości obiektów reprezentowanych przez znaczniki. Flex definiuje dwa zestawy składników: MX i Spark. Składniki MX zostały wprowadzone w wersji Flex 3.0 a Spark od wersji 4.0 i nie są kompatybilne z wersjami wcześniejszymi ale za to oferują nowe możliwości skórkowania i nowe właściwości.

Ponieważ MXML jest oparty na strukturze XML możesz pisać swoje aplikacje w dowolnym edytorze tekstowym i kompilować je używając darmowego kompilatora zawartego w Flex SDK. Tak jak każdy plik XML aplikacje Flex zaczynają się od tagu deklarującego strukturę pliku i kodowanie znaków:

   <?xml version="1.0" encoding="utf-8"?>

Kolejnym elementem każdej aplikacji jest znacznik, który definiuje główny kontener i pozwala definiować w sobie pozostałe jej elementy:

   <s:Application>

Znacznik ten dodatkowo określa tzw. przestrzenie nazw. We Flexie standardowo dostępne są 3 przestrzenie nazw:

xmlns:fx="http://ns.adobe.com/mxml/2009" Przestrzeń nazw dla elementów najwyższego poziomu ActionScript, takich jak Object czy Array oraz znaczników wbudowanych w kompilator MXML, takich jak <fx:Script>.
xmlns:mx="library://ns.adobe.com/flex/mx" Przestrzeń nazw dla zestawu komponentów MX.
xmlns:s="library://ns.adobe.com/flex/spark" Przestrzeń nazw dla zestawu komponentów Spark.

Związek pomiędzy MXML a Action Script

Używając znaczników MXML należy wiedzieć iż są one w wynikowym programie realizowane jako obiekty klas języka Action Script i z poziomu Action Script mamy dostęp do tych obiektów. Poniższy znacznik:

   <s:Button label="Wyślij" id="przycisk"/>

zostanie zamieniony na obiekt typu Button, właściwość label zainicjalizuje etykietę tego przycisku, a właściwość id to jego nazwa widoczna z poziomu Action Script pozwalająca na operowanie tym obiektem. Wykonując kod:

   przycisk.label = "inna etykieta";

etykieta obiektu zostanie zmieniona zarówno w aplikacji jak i bezpośrednio na ekranie. Każdy tag w MXML odpowiada jakiejś właściwości, zdarzeniu lub stylowi obiektu w Action Script.

Korzystanie z MXML

Struktura języka MXML jako, iż zbudowana na strukturze XML jest łatwa do opanowania i oferuje wiele możliwości w tworzeniu interesujących nas elementów. Najbardziej oczywistym rozwiązaniem wydaje się tworzenie obiektów w MXML poprzez nadawanie wartości ich właściwościom poprzez tagi, tak jak miało to miejsce w przykładzie powyżej. Jednak nie jest to jedyna możliwość. Składnia MXML umożliwia również inicjalizację właściwości poprzez dodanie do znacznika dzieci:

   <s:Button>
      <s:label>Wyślij</s:label>
      <s:id>przycisk</s:id>
   </s:Buton>

Tworzymy w ten sposób obiekt identyczny jak w przykładzie powyżej korzystając z innej metody inicjalizacji właściwości. Metoda ta czasami jest konieczna czego przykładem jest typ tablicowy Array. Przykładowe tworzenie tablicy w MXML może wyglądać następująco:

   <s:Array>
      <s:String>jakiś tekst</s:String>
      <s:String>inny tekst</s:String>
      <s:String>jeszcze inny tekst</s:String>
   </s:Array>

Innym przykładem takiej inicjalizacji właściwości jest przypisanie danych, których nie mamy wcześniej zdefiniowanych do obiektu:

   <s:List>
      <s:dataProvider>
         <s:ArrayCollection>
            <s:String>jakiś tekst</s:String>
            <s:String>inny tekst</s:String>
            <s:String>jeszcze inny tekst</s:String>
         </s:ArrayCollection>
      </s:dataProvider>
   </s:List>

W ten sposób stworzymy i wyświetlimy na ekranie listę z elementami zawartymi w obiekcie ArrayCollection choć oczywiście możliwe jest stworzenie tablicy w Action Script i przypisanie jej do właściwości dataProvider obiektu tak jak na przykładzie poniżej:

   // w aplikacji, w częsci Action Script definiujemy tablicę i nazywamy ją 'tablica'
   <s:List dataProvider="{tablica}">

Czemu nazwa 'tablica' została umieszczona w nawiasach {} ? Ponieważ w ten sposób informujemy kompilator, iż źródłem danych dla listy nie ma być string 'tablica' lecz obiekt o takiej nazwie.