Iii informatyka, studia stacjonarne Laboratorium 6 Temat: Wykorzystanie komponentów do prezentacji I zarządzania danymi



Pobieranie 37.52 Kb.
Data08.05.2016
Rozmiar37.52 Kb.
Przedmiot: Środowiska Programowania Aplikacji Wirtualnych i Multimedialnych

III Informatyka, studia stacjonarne
Laboratorium 6

Temat: Wykorzystanie komponentów do prezentacji i zarządzania danymi

  • Wiązanie danych,

  • Elementy renderujące i edycyjne w architekturach Halo i Spark.

Instalator Adobe Flash Builder 4.6 znajdziesz pod adresem http://www.adobe.com/support/downloads/detail.jsp?ftpID=5517

Wiązanie danych
Wiązanie danych (ang. data binding) jest to proces polegający na powiązaniu właściwości (źródłowej) pewnego obiektu z właściwością (docelową) innego.

Adobe Flex dostarcza kilku sposobów wiązania danych, a najpopularniejszy z nich polega na wykorzystaniu metatagu [Bindable].

Flex zajmie się automatycznym przekopiowaniem danych (do właściwości docelowej), w przypadku gdy właściwość źródłowa się zmieni.


Elementy renderujące i edycyjne w Halo
Elementy renderujące i edycyjne umożliwiają przejęcie kontroli nad sposobem wyświetlania danych i interakcji z komórkami komponentów bazujących na listach. Na komórki mogą składać się grafiki, tekst oraz komponenty graficzne, a także dodatkowy kod dostosowujący sposób wyświetlania danych.

Elementy te określa się dla komponentów bazujących na listach przez ustawienie ich właściwości itemRenderer lub itemEditor. Elementy renderujące wyświetlają dane bez możliwości ich modyfikowania, przeważnie w formie tekstu lub obrazu. Elementy edycyjne są stosowane do modyfikowania danych i udostępniają w tym celu użytkownikom interaktywne kontrolki takie jak CheckBox, czy TextInput. Tego samego komponentu można użyć jako elementu renderującego i edytora poprzez ustawienie flagi rendrerIsEditor.


W przypadku komponentu DataGrid, wygląd poszczególnych kolumn definiuje się wewnątrz tagu DataGridColumn.

Aby powiązać właściwość obiektu dostawcy danych (dataProvider) z konkretną komórką komponentu DataGrid, należy ustawić właściwość dataField.

Jeśli wykorzystujemy elementy edycyjne musimy określić (za pomocą właściwości editorDataField) tę właściwość kontrolki (używanej do edycji danych), która odpowiada za przechowywanie danych. W przypadku Checkbox jest to właściwość selected, natomiast TextInput właściwość text.

Aby włączyć możliwość edycji danych należy, na poziomie głównej kontrolki, ustawić flagę editable.




//[Bindable]

public var dataArray:Array = new Array();
private function appendData():void{

dataArray = new Array();

dataArray.push({workDay:true, title:'Poniedziałek'});

dataArray.push({workDay:true, title:'Wtorek'});

dataArray.push({workDay:true, title:'Środa'});

dataArray.push({workDay:true, title:'Czwartek'});

dataArray.push({workDay:true, title:'Piątek'});

dataArray.push({workDay:false, title:'Sobota'});

dataArray.push({workDay:false, title:'Niedziela'});

}







headerText="Pracujący"

itemRenderer="mx.controls.CheckBox"

rendererIsEditor="true"

width="50" />

dataField="title"/>









Zadanie 1 (4 pkt). Utwórz tabelę prezentującą dane zawarte w kolekcji obiektów o właściwościach:


  1. data:Date, wydarzenie:String, Boolean:ważne,

  2. imię:String, punkty:int, zdał:Boolean,

  3. nazwa_przedmiotu:String, rok_prod:Date, unikat:Boolean, opis:String, ocena:int.

Każda kolumna tabeli powinna posiadać element renderujący i edycyjny, oparte na odpowiednich standardowych kontrolkach.
Własne złożone elementy renderujące i edycyjne
Największą kontrolę nad sposobem wyświetlania pozycji danych można uzyskać poprzez utworzenie własnych (złożonych) elementów renderujących lub edycyjnych. Aby tego dokonać, należy takie elementy umieścić wewnątrz tagu fx:Component.

Właściwość data, jest uchwytem do pojedynczego obiektu znajdującego się w kolekcji będącej dostawcą danych (ang. data provider)






workDay="true" title="Poniedziałek"/>































Zadanie2 (3 pkt). Wykorzystując komponent

  1. mx:HorizontalList

  2. mx:List,

  3. mx:TileList,

i wyświetl na nim zawartość katalogu /food (dostarczony do ćwiczeń). Wyświetlone elementy powinny być obrazkami (Image).



Wskazówki:

  • Użyj elementu Renderującego,

  • Dynamicznie zmodyfikuj dostawcę danych – dataProvider,

  • wykorzystaj funkcję getDirectoryListing() klasy File.



Umieszczanie elementów renderujących i edycyjnych w zewnętrznych plikach
Elementy renderujące i edycyjne można tworzyć jako osobne komponenty zapisane w zewnętrznych plikach. Dzięki takiemu podejściu zarządzanie nimi jest dużo prostsze. Ponadto można ich powtórnie użyć w innych aplikacjach. Aby osiągnąć ten sam efekt za pomocą oddzielnego komponentu, należy przenieść kod otoczony znacznikiem do osobnego pliku MXML.
Adobe Flex Builder automatyzuje proces tworzenia nowego komponentu – wystarczy tylko nacisnąć kombinację Ctrl+Spacja, gdy kursor znajduje się w miejscu wstawiania wartości dla właściwości itemRenderer lub editorRenderer.

Po wybraniu Create Item Renderer otworzy się okno dialogowe umożliwiające określenie nazwy dla niestandardowego komponentu. Wynikiem działania kreatora (dla komponentu DataGrid) będzie plik z następującą treścią:





xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

focusEnabled="true">



Do tak zdefiniowanego komponentu odwołujemy się za pomocą nazwy pliku. W powyższym przypadku będzie to:



Zadanie4 (3 pkt). Wykorzystując komponent s:DataGrid, uzyskaj efekt zbliżony do tego, znajdującego się na poniższym rysunku. Utwórz niezbędne niestandardowe elementy renderujące, zapisane w zewnętrznych plikach.
Wskazówka:

  • Aby uzyskać nazwę owocu/warzywa wystarczy „odciąć” rozszerzenie nazwy pliku.

  • Skorzystaj z materiałów: http://help.adobe.com/en_US/flex/using/WS0ab2a460655f2dc3-427f401412c60d04dca-7ff3.html








©absta.pl 2019
wyślij wiadomość

    Strona główna