Korzystanie ze składnika List

Składnik List to przewijalne pole listy, na którym można wybrać jedną lub większą ilość opcji. Lista (składnik List) może również zawierać elementy graficzne, również inne składniki. W celu dodawania elementów widocznych na liście należy użyć okna dialogowego Wartości, jakie pojawia się po kliknięciu etykiet lub pól parametrów danych. W celu dodawania elementów do listy można również korzystać z metod List.addItem() i List.addItemAt() .

Składnik List korzysta z indeksu, w którym element z indeksem 0 jest najwyższym elementem wyświetlanym. Podczas dodawania, usuwania lub zastępowania elementów listy za pomocą metod i właściwości klasy List konieczne może być określenie indeksu dla elementu listy.

Posługiwanie się składnikiem List

Istnieje możliwość skonfigurowania listy, na której użytkownicy będą mogli wybierać jedną wartość lub większą liczbę wartości. Na przykład: użytkownik odwiedzający stronę WWW sklepu elektronicznego musi wybrać elementy do kupienia. Lista zawiera 30 elementów; użytkownik przewija listę elementów i wybiera element, klikając go.

Możliwe jest również zaprojektowanie listy (składnik List), która będzie korzystała z niestandardowych klipów jako wierszy, dzięki czemu użytkownik będzie miał dostęp do większej liczby informacji. Na przykład: w aplikacji e-mail każda skrzynka pocztowa może być składnikiem List, a każdy wiersz może zawierać ikony, które będą określały priorytet i status.

Składnik List staje się aktywny, gdy zostanie kliknięty lub wybrany za pomocą klawisza Tab — do kontrolowania tego składnika można używać następujących klawiszy:

Klucz

Opis

Klawisze alfanumeryczne

Przeskok do kolejnego elementu, którego pierwszy znak etykiety to Key.getAscii() .

Control

Klawisz przełączania, który umożliwia nieciągłe zaznaczanie i usuwanie zaznaczenia wielu opcji, nawet jeśli nie następują po sobie.

Strzałka w dół

Przesuwa zaznaczenie w dół o jeden element.

Home

Przesuwa zaznaczenie na górę listy.

Page Down

Przesuwa zaznaczenie w dół o jedną stronę.

Page Up

Przesuwa zaznaczenie w górę o jedną stronę.

Shift

Umożliwia zaznaczanie ciągłe.

Strzałka w górę

Przesuwa zaznaczenie w górę o jeden element.

Uwaga: Wielkości przewijania są określone w pikselach, a nie w wierszach.
Uwaga: Wielkość strony stosowana po naciśnięciu klawisza Page Up i Page Down jest o jeden mniejsza niż liczba elementów, które mieszczą się na obszarze wyświetlania. Przykład: przewijanie stron w liście rozwijanej, z której wyświetlanych jest dziesięć wierszy, powoduje wyświetlanie elementów 0-9, 9-18, 18-27, itd. — jeden element jest wyświetlany na obydwu sąsiednich stronach.

Więcej informacji na temat sterowania aktywnością zawiera opis interfejsu IFocusManager oraz opis klasy FocusManager w Skorowidzu języka ActionScript 3.0 dla programu Flash Professional oraz w sekcji Praca z klasą FocusManager .

Podgląd aktywny każdej instancji List na stole montażowym odzwierciedla zmiany dokonane w parametrach w Inspektorze właściwości oraz Inspektorze składników podczas tworzenia.

Po dodaniu składnika List do aplikacji można go udostępnić dla czytnika ekranu, dodając do kodu ActionScript następujące wiersze: 

import fl.accessibility.ListAccImpl; 
 
ListAccImpl.enableAccessibility();

Ułatwienia dostępu włącza się dla danego składnika tylko raz, niezależnie od liczby instancji składnika. Więcej informacji zawiera rozdział 18, “Tworzenie treści dostępnych dla użytkowników niepełnosprawnych”, w podręczniku Korzystanie z programu Flash .

Parametry składnika List

Dla każdej instancji składnika List można w Inspektorze właściwości lub w Inspektorze składników ustawić następujące parametry tworzenia treści: allowMultipleSelection , dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize i verticalScrollPolicy . Dla każdego z tych parametrów istnieje odpowiednia właściwość ActionScript o takiej samej nazwie. Więcej informacji na temat możliwych wartości tych parametrów zawiera opis klasy List w Skorowidzu języka ActionScript 3.0 dla programu Flash Professional . Informacje o używaniu parametru dataProvider zawiera sekcja Korzystanie z parametru dataProvider .

Tworzenie aplikacji ze składnikiem List

Poniższe przykłady przedstawiają sposób dodania składnika List do aplikacji podczas tworzenia.

Dodawanie prostego składnika List do aplikacji

W tym przykładzie składnik List zawiera etykiety, które identyfikują modele samochodów oraz pola danych, które zawierają ceny.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik List z panelu Składniki na stół montażowy.

  3. W Inspektorze właściwości wykonaj następujące kroki:

    • Wprowadź dla instancji nazwę aList .

    • Do Sz (szerokość) przypisz wartość 200 .

  4. Użyj narzędzia Tekst, aby utworzyć pole tekstowe poniżej aList i nadać mu nazwę aTf .

  5. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod ActionScript: 

    import fl.controls.List; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
// Create these items in the Property inspector when data and label 
// parameters are available. 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

    W tym kodzie metoda addItem() służy do wypełnienia składnika aList trzema elementami — do każdego z tych elementów przypisywana jest pojedyncza wartość label , która jest widoczna na liście, oraz wartość data . Po wybraniu elementu w składniku List detektor zdarzeń wywołuje funkcję showData() , która wyświetla wartość data dla wybranego elementu.

  6. Wybierz polecenia Sterowanie > Testuj film, aby skompilować i uruchomić aplikację.

Wypełnianie instancji List za pomocą dostawcy danych

W tym przykładzie przedstawiono tworzenie składnika List modeli samochodów i ich cen. W przykładzie składnik List jest wypełniany przez dostawcę danych, a nie przez metodę addItem() .

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik List z panelu Składniki na stół montażowy.

  3. W Inspektorze właściwości wykonaj następujące kroki:

    • Wprowadź dla instancji nazwę aList .

    • Do Sz (szerokość) przypisz wartość 200 .

  4. Użyj narzędzia Tekst, aby utworzyć pole tekstowe poniżej aList i nadać mu nazwę aTf .

  5. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod ActionScript: 

    import fl.controls.List; 
import fl.data.DataProvider; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
var cars:Array = [ 
{label:"1956 Chevy (Cherry Red)", data:35000}, 
{label:"1966 Mustang (Classic)", data:27000}, 
{label:"1976 Volvo (Xcllnt Cond)", data:17000}, 
]; 
aList.dataProvider = new DataProvider(cars); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

  6. Wybierz polecenia Sterowanie > Testuj film, wyświetlić składnik List z jego elementami.

Korzystanie ze składnika List w celu kontrolowania instancji MovieClip

W poniższym przykładzie przedstawiono tworzenie składnika List nazw kolorów — po wybraniu nazwy kolor zostaje zastosowany do obiektu MovieClip.

  1. Utwórz dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik List z panelu Składniki na stół montażowy i określ dla niego następujące wartości w Inspektorze właściwości:

    • Dla nazwy instancji wprowadź aList .

    • Wprowadź 60 dla wartości W.

    • Wprowadź 100 dla wartości X.

    • Wprowadź 150 dla wartości Y.

  3. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod ActionScript: 

    aList.addItem({label:"Blue", data:0x0000CC}); 
aList.addItem({label:"Green", data:0x00CC00}); 
aList.addItem({label:"Yellow", data:0xFFFF00}); 
aList.addItem({label:"Orange", data:0xFF6600}); 
aList.addItem({label:"Black", data:0x000000}); 
 
var aBox:MovieClip = new MovieClip(); 
addChild(aBox); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) { 
    drawBox(aBox, event.target.selectedItem.data); 
}; 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(225, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.

  5. Klikaj kolory w składniku List, aby wyświetlić je w obiekcie MovieClip.

Tworzenie instancji składnika List przy użyciu kodu ActionScript:

W tym przykładzie przy użyciu kodu ActionScript tworzona jest prosta lista, która jest następnie zapełniana przy użyciu metody addItem() .

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik List z panelu Składniki do panelu Biblioteka.

  3. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod ActionScript: 

    import fl.controls.List; 
 
var aList:List = new List(); 
aList.addItem({label:"One", data:1}); 
aList.addItem({label:"Two", data:2}); 
aList.addItem({label:"Three", data:3}); 
aList.addItem({label:"Four", data:4}); 
aList.addItem({label:"Five", data:5}); 
aList.setSize(60, 40); 
aList.move(200,200); 
addChild(aList); 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event):void { 
    trace(event.target.selectedItem.data); 
}

  4. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.