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).

W tym momencie warto wspomnieć, że Flex 4 ma następującą deklarację:

 <s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"  
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx">

Jak widzimy została rozszerzona przestrzeń nazw. Atrybuty wewnątrz definiują przedrostek fx, s, mx.


Wróćmy teraz do omówienia drugiego atrybutu layout="absolute". Określa on, w jaki sposób strona aplikacji układa swoje elementy potomne. W układzie bezwzględnym absolute, programista wyznacza współrzędne x i y wszystkich elementów potomnych aplikacji. Innymi możliwymi rodzajami układu są poziomy horizontal i pionowy vertical. Układ poziomy oznacza, ze wszystkie elementy potomne aplikacji są układane na stronie jeden obok drugiego, a w układzie pionowym jeden pod drugim. Ostatnia linia kodu </mx:Application> zamyka uchwyt aplikacji.
Zanim przejdziemy do uruchomienia aplikacji dodajmy znacznik <mx:Label>. Nasz kod wygląda teraz następująco:

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

 <mx:Label text="Hello World!" fontWeight="bold" 
  height="120" width="200" x="300" y="100" />

 </mx:Application>

Aby uruchomić naszą aplikację klikamy w przycisk Run (uruchom) albo kombinację klawiszy CTRL+F11.

W otwartym oknie przeglądarki został wyświetlony tekst Hello World.

Często w większych aplikacjach stosuje się komentarze. Są bardzo pomocne, gdy po jakimś czasie zaglądamy do kodu i chcemy znaleźć, np. interesującą nas funkcję. W komentarzu umieszczamy opis działania funkcji, jakie ma parametry, itd. Komentarze są ignorowane przez kompilator i nie mają żadnego wpływu na działanie aplikacji. Mogą one być umieszczone w dowolnym miejscu naszego kodu. Rozróżniamy dwa rodzaje komentarzy:

1. jednoliniowy //:
   

    //to jest komentarz umieszczony w jednej linii

2. blokowy /* */:
   

    /*to jest komentarz
    umieszczony w bloku,
    czyli wieloliniowy */

Ciekawostka:
Jak będzie wyglądał znacznik Label we Flex'ie 4, gdy zdefiniujemy go następująco:
<s:label fontsize="24" fontweight="bold" text="Hello World!"> ?


Dla chętnych:
Dodać do aplikacji znaczniki np. <mx:Canvas>, <mx:Panel>, <mx:Text>, <mx:TextArea>, <mx:TextInput> i zapoznać się z ich atrybutami.








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ęć".