http://www.devcastzone.com/course,wprowadzenie-do-technologii-flex Devcast "Wprowadzenie do technologii Flex" jest przeznaczone dla osób, które chcą poznać metody tworzenia aplikacji graficznych w technologii Adobe Flex 4 przy użyciu języków ActionScript i MXML. W trakcie szkolenia są omawiane metody tworzenia interfejsów graficznych za pomocą języka MXML. Jest też przedstawione wprowadzenie do języka ActionScript, dzięki któremu uczestnik może bez problemu wykonać wszystkie dalsze przykłady opisane w szkoleniu. Ponadto uczestnik zapozna się z metodami wiązania kolekcji danych, a także podstawowymi efektami graficznymi. Zostaną także omówione podstawowe metody wykorzystania frameworka Adobe AIR.

1. Wprowadzenie do technologii
Flex
Materiały pochodzą ze strony:
www.devcastzone.com
copyright BNS MEDIA
www.devcastzone.com

2. Podstawowe komponenty
graficzne
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com

3. Treśd modułu
1. Idea istnienia kontrolek
2. Komponent graficzny – klasa UIComponent
3. Przycisk (Button)
4. Pole tekstowe (TextInput)
5. Pole rozwijane (ComboBox)
6. Lista (List)
7. Pole zaznaczane (CheckBox)
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 3

4. Treśd modułu
8. Pole typu radio
9. Pojemniki – zasady działania
10. Rodzaje pojemników
11. Rodzaje układów graficznych
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 4

5. Idea istnienia kontrolek
• Kontrolka to komponent graficzny wielorazowego
użytku
• Kontrolki stanowią „klocki”, z których tworzy się
interfejsy graficzne (UI)
• Podstawowe rodzaje kontrolek występują w różnych
technologiach i na ogół mają zbliżone działanie
• Wszystkie kontrolki są klasami
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 5

6. Komponent graficzny – klasa UIComponent
• Podstawowy komponent – klasa bazowa dla innych
kontrolek – UIComponent
• Nie ma własnego wyglądu, ale zawiera
funkcjonalnośd i dane wspólne dla wszystkich
kontrolek
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 6

7. Komponent graficzny – elementy składowe
Kontrolka
(UIComponent)
Właściwości Metody Style
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 7

8. Komponent graficzny – elementy składowe
• Właściwości i metody kontrolki – elementy znane z
programowania obiektowego
• Style kontrolki – specjalne atrybuty, które są
związane z wyglądem kontrolki
• Style najlepiej jest określad w kodzie MXML
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 8

9. Kluczowe elementy klasy UIComponent
• x, y – współrzędne kontrolki w obrębie pojemnika
(np. okna)
• width, height – szerokośd i wysokośd kontrolki
• visible – widocznośd kontrolki (true/false – czy
jest wyświetlana)
• includeInLayout – rezerwacja miejsca dla
kontrolki w układzie graficznym (true/false)
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 9

10. Kluczowe elementy klasy UIComponent
• id – identyfikator kontrolki (unikalny w obrębie
pojemnika)
• parent – odwołanie (referencja) do pojemnika-
rodzica
• numChildren – liczba kontrolek-dzieci (dotyczy
kontrolek pojemników)
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 10

11. Przycisk – s:Button
• Przycisk służy do wywołania poleceo przez
użytkownika, np.:
o akceptowania wprowadzonych danych
o anulowania wykonywanej operacji
o zamknięcia aplikacji
• Główne elementy:
o właściwośd label (tekst przycisku)
o zdarzenie click
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 11

12. Przycisk – przykład
<s:Button id="przycisk" label="OK"
click="przycisk_clickHandler(event)"/>
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 12

13. Pole tekstowe – s:TextInput
• Pole tekstowe pozwala na wprowadzenie przez
użytkownika tekstu
• Tekst może byd też ustawiony z poziomu kodu
• Może byd wykorzystywane do wprowadzenia hasła
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 13

14. Pole tekstowe – s:TextInput
• Kluczowe elementy:
o text – zawartośd pola tekstowego
o maxChars – maksymalna dopuszczalna liczba znaków do
wprowadzenia
o displayAsPassword – określa, czy jest to pole hasła
(true/false) – czy zamiast znaków są wyświetlane gwiazdki
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 14

15. Pole tekstowe – przykład
<s:TextInput displayAsPassword="true" id="pole"
text="Wpisz tekst..." maxChars="10" />
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 15

16. Pole kombo – s:ComboBox
• Składa się z pola tekstowego i rozwijanej listy
dostępnych wartości
• Użytkownik może wybrad wartośd z listy lub wpisad
tekst w pole
• Kontrolka zorientowana na dane – lista dostępnych
wartości może byd dynamicznie wiązana
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 16

17. Pole kombo – s:ComboBox
• dataProvider – lista wartości wyświetlanych w polu
kombo
• selectedIndex – indeks zaznaczonego elementu
• selectedItem – zaznaczony obiekt (element kolekcji z
właściwości dataProvider)
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 17

18. Pole kombo – przykład
<s:ComboBox id="kombo"
change="kombo_changeHandler(event)">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Czerwony</fx:String>
<fx:String>Zielony</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:ComboBox>
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 18

19. Pole listy – s:List
• Lista pozwala na wybór jednej lub wielu wartości z
pewnego zbioru
• Brak pola tekstowego, jak w polu kombo
• Zajmuje więcej miejsca, niż pole kombo
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 19

20. Pole listy – s:List
• dataProvieder – lista wartości wyświetlanych w polu
listy
• selectedIndices – lista indeksów zaznaczonych
elementów
• selectedItems – lista zaznaczonych elementów
• allowMultipleSelection – określa tryb listy (true –
wielokrotny; false – jednokrotny wybór)
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 20

21. Pole listy – przykład
<s:List id="lista" allowMultipleSelection="true">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>Niebieski</fx:String>
<fx:String>Czarny</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:List>
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 21

22. Pole zaznaczane – s:CheckBox
• Kontrolka udostępnia pole do
zaznaczania/odznaczania, co pozwala na wybór
wartości logicznej prawda/fałsz
• Może byd używane pojedynczo lub w grupach
• Kluczowe elementy:
o selected – stan zaznaczenia (true/false)
o label – opis pola
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 22

23. Pole zaznaczane – przykład
<s:CheckBox id="akceptacja" selected="true" label="Czy
zgadzasz się na warunki umowy?" />
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 23

24. Pole radio – s:RadioButton
• Jest używane w grupach (pojedyncze pole radio nie
ma sensu)
• Pozwala na wybór tylko jednej wartości z całego
zbioru
• Wybór innego pola (zaznaczenie go) powoduje
automatyczne odznaczenie pola aktualnie
zaznaczonego
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 24

25. Pole radio – s:RadioButton
• Kluczowe elementy:
o selected – określa, czy dane pole jest zaznaczone
o groupName – definiuje nazwę grupy, do której należy
dane pole. Tylko jedno pole w obrębie danej grupie może
byd zaznaczone
o label – opis pola
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 25

26. Pole radio – przykład
<s:RadioButton id="niepelnoletni"
groupName="pelnoletniosc" label="Niepełnoletni" />
<s:RadioButton id="pelnoletni"
groupName="pelnoletniosc" label="Pełnoletni" />
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 26

27. Pojemniki
• Pojemnik jest kontrolką, której głównym zadaniem
jest przechowywanie innych kontrolek
• Pojemnik zarządza wyświetlaniem kontrolek
• Pojemniki można zagnieżdżad
• Głównym pojemnikiem jest okno
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 27

28. Pojemniki
• Właściwości pojemnika mają wpływ na właściwości
jego dzieci
• Ukrycie pojemnika (visible=false) spowoduje
ukrycie wszystkich jego kontrolek
• Każdy pojemnik może korzystad z układów
graficznych. Układy decydują o sposobie
rozmieszczenia kontrolek w pojemniku
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 28

29. Pojemniki – przykłady
• Group – podstawowy pojemnik, nie narzuca
dodatkowego wyglądu
• BorderContainer – pojemnik z obramowaniem
• Panel – pojemnik z paskiem tytułowym i
obramowaniem
• TitleWindow – pojemnik wykorzystywany do
wyświetlania w formie okna wyskakującego (pop-up)
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 29

30. Układy graficzne (layouty)
• Każdy pojemnik może skorzystad z jednego z
dostępnych układów
• Układ określa sposób rozmieszczania kontrolek w
obrębie pojemnika
• Brak układu oznacza wykorzystanie układu
domyślnego – BasicLayout
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 30

31. Układy graficzne (layouty)
• BasicLayout:
o położenie kontrolek określają ich współrzędne x i y
o jeśli dwie kontrolki się pokrywają, wyświetlana jest ta
zadeklarowana najpóźniej
o układ domyślny
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 31

32. Układy graficzne (layouty)
• VerticalLayout
o kontrolki są rozmieszczane pionowo, jedna pod drugą (od
góry do dołu)
• HorizontalLayout
o kontrolki są rozmieszczane poziomo, jedna obok drugiej
(od lewej do prawej)
• TileLayout
o kontrolki są rozmieszczane w układzie siatki
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 32

33. Układy graficzne (layouty)
• Dla grup (s:Group) o rozmieszczeniu
poziomym/pionowym stworzone „skróty”:
o s:VGroup – grupa, w której elementy są rozmieszczane
pionowo
o s:HGroup – grupa, w której elementy są rozmieszczane
poziomo
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 33

34. Układy graficzne – przykłady
<s:BorderContainer>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Button label="Przycisk 1" />
<s:Button label="Przycisk 2" />
</s:BorderContainer>
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 34

35. Układy graficzne – przykłady
<s:Panel title="Panel">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:Button label="Przycisk 1" />
<s:Button label="Przycisk 2" />
</s:Panel>
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 35

36. Układy graficzne – przykłady
<s:Group>
<s:Button label="Przycisk 1" />
<s:Button label="Przycisk 2" />
</s:Group>
Wprowadzenie do technologii Flex
copyright BNS MEDIA
www.devcastzone.com 36

37. Wprowadzenie do technologii Flex – program
pełnego szkolenia
1. Wstęp
o Aplikacje RIA
o RIA a biblioteki języka JavaScript
o Adobe Flex
o Środowisko programistyczne Flash Builder
o Tworzenie nowego projektu
o Tryb edycji kodu (Source)
o Obsługa podstawowych zdarzeo
o Dokumentacja
2. Język tworzenia interfejsu graficznego MXML
o Języki wykorzystywane w aplikacjach Flex
o MXML a ActionScript – organizacja projektów
o Zasady tworzenia dokumentów (M)XML
o Struktura dokumentu MXML
o Wyrażenia dynamiczne
o Zasady łączenia kodu MXML i ActionScript
Tworzenie aplikacji z użyciem biblioteki Hibernate
copyright BNS MEDIA
www.devcastzone.com 37

38. Wprowadzenie do technologii Flex – program
pełnego szkolenia
3. Język programowania aplikacji Flex ActionScript
o Zmienne i typy danych
o Komentarze
o Operatory
o Instrukcja warunkowa
o Pętla while
o Pętla for
o Funkcje
o Podstawy programowania obiektowego
o Pola i metody klas
o Konstruktory
o Pakiety
o Dziedziczenie
o Modyfikatory dostępu
o Właściwości
Tworzenie aplikacji z użyciem biblioteki Hibernate
copyright BNS MEDIA
www.devcastzone.com 38

39. Wprowadzenie do technologii Flex – program
pełnego szkolenia
4. Podstawowe komponenty graficzne
o Idea istnienia kontrolek
o Komponent graficzny – klasa UIComponent
o Przycisk (Button)
o Pole tekstowe (TextInput)
o Pole rozwijane (ComboBox)
o Lista (List)
o Pole zaznaczane (CheckBox)
o Pole typu radio
o Pojemniki – zasady działania
o Rodzaje pojemników
o Rodzaje układów graficznych
5. Kolekcje danych
o Sens istnienia kolekcji danych
o Tablice
o Pętla for each..in
o Słowniki
o Pętla for..in
o Kolekcja tablicowa (ArrayCollection)
Tworzenie aplikacji z użyciem biblioteki Hibernate
copyright BNS MEDIA
www.devcastzone.com 39

40. Wprowadzenie do technologii Flex – program
pełnego szkolenia
6. Wiązanie danych
o Obsługa danych we Fleksie
o Wiązanie danych – zasada działania
o Wiązanie danych a podatnośd na zmiany
o Atrybut [Bindable]
o Wiązanie złożonych struktur danych
o Kontrolka mx:DataGrid
o Wiązanie dwukierunkowe
7. Podstawowe elementy graficzne
o Style
o Filtry – ogólny sposób użycia
o DropShadowFilter (filtr cienia)
o BlurFilter (filtr rozmycia)
o Animacje – zasada działania
o Prosta animacja właściwości
o Animacja wieloelementowa
Tworzenie aplikacji z użyciem biblioteki Hibernate
copyright BNS MEDIA
www.devcastzone.com 40

41. Wprowadzenie do technologii Flex – program
pełnego szkolenia
8. Flex a Adobe AIR
o Adobe AIR – co, jak, dlaczego
o Adobe AIR a tradycyjne aplikacje webowe
o Różnice w tworzeniu obu rodzajów aplikacji
o Wdrażanie aplikacji AIR
9. Obsługa danych – baza SQLite
o Systemy zarządzania bazami danych (SZBD)
o SZBD a SQLite
o Dostęp do pliku bazy
o Nawiązywanie połączenia
o Wykonywanie zapytao w trybie synchronicznym
o Wykonywanie zapytao w trybie asynchronicznym
Tworzenie aplikacji z użyciem biblioteki Hibernate
copyright BNS MEDIA
www.devcastzone.com 41

42. Wprowadzenie do technologii Flex
http://www.devcastzone.com/course,wprowadzenie-do-
technologii-flex
Zapraszamy
Tworzenie aplikacji z użyciem biblioteki Hibernate
copyright BNS MEDIA
www.devcastzone.com 42