Wprowadzenie do technologii Flex

825 views
739 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
825
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wprowadzenie do technologii Flex

  1. 1. Wprowadzenie do technologii Flex Materiały pochodzą ze strony: www.devcastzone.comcopyright BNS MEDIA www.devcastzone.com
  2. 2. Podstawowe komponenty graficzne Wprowadzenie do technologii Flexcopyright BNS MEDIA www.devcastzone.com
  3. 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 Flexcopyright BNS MEDIA www.devcastzone.com 3
  4. 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 Flexcopyright BNS MEDIA www.devcastzone.com 4
  5. 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 Flexcopyright BNS MEDIA www.devcastzone.com 5
  6. 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 Flexcopyright BNS MEDIA www.devcastzone.com 6
  7. 7. Komponent graficzny – elementy składowe Kontrolka (UIComponent) Właściwości Metody Style Wprowadzenie do technologii Flexcopyright BNS MEDIA www.devcastzone.com 7
  8. 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 Flexcopyright BNS MEDIA www.devcastzone.com 8
  9. 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 Flexcopyright BNS MEDIA www.devcastzone.com 9
  10. 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 Flexcopyright BNS MEDIA www.devcastzone.com 10
  11. 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 Flexcopyright BNS MEDIA www.devcastzone.com 11
  12. 12. Przycisk – przykład <s:Button id="przycisk" label="OK" click="przycisk_clickHandler(event)"/> Wprowadzenie do technologii Flexcopyright BNS MEDIA www.devcastzone.com 12
  13. 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 Flexcopyright BNS MEDIA www.devcastzone.com 13
  14. 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 Flexcopyright BNS MEDIA www.devcastzone.com 14
  15. 15. Pole tekstowe – przykład <s:TextInput displayAsPassword="true" id="pole" text="Wpisz tekst..." maxChars="10" /> Wprowadzenie do technologii Flexcopyright BNS MEDIA www.devcastzone.com 15
  16. 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 Flexcopyright BNS MEDIA www.devcastzone.com 16
  17. 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 Flexcopyright BNS MEDIA www.devcastzone.com 17
  18. 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 Flexcopyright BNS MEDIA www.devcastzone.com 18
  19. 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 Flexcopyright BNS MEDIA www.devcastzone.com 19
  20. 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 Flexcopyright BNS MEDIA www.devcastzone.com 20
  21. 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 Flexcopyright BNS MEDIA www.devcastzone.com 21
  22. 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 Flexcopyright BNS MEDIA www.devcastzone.com 22
  23. 23. Pole zaznaczane – przykład <s:CheckBox id="akceptacja" selected="true" label="Czy zgadzasz się na warunki umowy?" /> Wprowadzenie do technologii Flexcopyright BNS MEDIA www.devcastzone.com 23
  24. 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 Flexcopyright BNS MEDIA www.devcastzone.com 24
  25. 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 Flexcopyright BNS MEDIA www.devcastzone.com 25
  26. 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 Flexcopyright BNS MEDIA www.devcastzone.com 26
  27. 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 Flexcopyright BNS MEDIA www.devcastzone.com 27
  28. 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 Flexcopyright BNS MEDIA www.devcastzone.com 28
  29. 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 Flexcopyright BNS MEDIA www.devcastzone.com 29
  30. 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 Flexcopyright BNS MEDIA www.devcastzone.com 30
  31. 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 Flexcopyright BNS MEDIA www.devcastzone.com 31
  32. 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 Flexcopyright BNS MEDIA www.devcastzone.com 32
  33. 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 Flexcopyright BNS MEDIA www.devcastzone.com 33
  34. 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 Flexcopyright BNS MEDIA www.devcastzone.com 34
  35. 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 Flexcopyright BNS MEDIA www.devcastzone.com 35
  36. 36. Układy graficzne – przykłady <s:Group> <s:Button label="Przycisk 1" /> <s:Button label="Przycisk 2" /> </s:Group> Wprowadzenie do technologii Flexcopyright BNS MEDIA www.devcastzone.com 36
  37. 37. Wprowadzenie do technologii Flex – programpeł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 Hibernatecopyright BNS MEDIA www.devcastzone.com 37
  38. 38. Wprowadzenie do technologii Flex – programpeł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 Hibernatecopyright BNS MEDIA www.devcastzone.com 38
  39. 39. Wprowadzenie do technologii Flex – programpeł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 Hibernatecopyright BNS MEDIA www.devcastzone.com 39
  40. 40. Wprowadzenie do technologii Flex – programpeł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 Hibernatecopyright BNS MEDIA www.devcastzone.com 40
  41. 41. Wprowadzenie do technologii Flex – programpeł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 Hibernatecopyright BNS MEDIA www.devcastzone.com 41
  42. 42. Wprowadzenie do technologii Flex http://www.devcastzone.com/course,wprowadzenie-do- technologii-flex Zapraszamy Tworzenie aplikacji z użyciem biblioteki Hibernatecopyright BNS MEDIA www.devcastzone.com 42

×