Ustawianie stylów

Style składnika określają wartości jego karnacji, ikon, formatowania tekstu i szerokości wypełnienia podczas rysowania przez program Flash składnika w różnych stanach. Na przykład, w programie Flash przycisk rysowany jest z inną karnacją, aby pokazać, że znajduje się on w stanie down; stan ten występuje w momencie kliknięcia myszą na przycisku, po czym przycisk powraca on do stanu up lub stanu normalnego. W programie inna karnacja używana jest także dla stanu „wyłączony” przez ustawienie właściwości enabled na wartość false .

Style składników można ustawiać na poziomach dokumentu, klasy i instancji. Ponadto niektóre właściwości stylu mogą być dziedziczone ze składnika nadrzędnego. Na przykład składnik List dziedziczy style ScrollBar, dziedzicząc po BaseScrollPane.

W celu dostosowania składnika można ustawić style w jeden z następujących sposobów:

  • Należy ustawić style dla instancji składnika. Właściwości koloru i tekstu można zmieniać dla pojedynczej instancji składnika. W niektórych sytuacjach jest to wydajna metoda, jednak może być ona czasochłonna, jeśli konieczne jest oddzielne ustawienie właściwości dla wszystkich składników dokumentu.

  • Należy ustawić w dokumencie style dla wszystkich składników danego typu. Jeśli dla wszystkich składników danego typu zastosowany ma zostać zgodny wygląd, np. dla wszystkich składników CheckBox lub Button w dokumencie, należy ustawić style na poziomie składnika.

    Wartości dla właściwości stylu ustawione w kontenerach dziedziczone są przez zawarte w nim składniki.

    Zmiany dokonane we właściwościach stylu nie są prezentowane w programie Flash podczas wyświetlania składników na stole montażowym za pomocą funkcji Podgląd aktywny.

Informacje o ustawieniach stylu

Poniżej przedstawiono kilka najważniejszych zasad dotyczących używania stylów:

Dziedziczenie
Składnik podrzędny należy ustawić tak, aby dziedziczył styl od składnika nadrzędnego. W języku ActionScript nie można ustawić dziedziczenia dla stylów.

Pierwszeństwo
Jeśli styl składnika został ustawiony na więcej niż jeden sposób, w programie Flash użyty zostanie pierwszy napotkany styl według pierwszeństwa. W programie Flash style wyszukiwane są, aż do momentu znalezienia wartości w następującej kolejności:

  1. Właściwość stylu wyszukiwana jest przez program Flash w instancji składnika.

  2. Jeśli styl jest jednym z dziedziczących stylów, dziedziczona wartość wyszukiwana będzie w programie Flash w hierarchii składnika nadrzędnego.

  3. Styl wyszukiwany jest przez program Flash w składniku.

  4. Ustawienie globalne wyszukiwane jest przez program Flash w klasie StyleManager.

  5. Jeśli właściwość pozostaje wciąż niezdefiniowana, wartością właściwości jest undefined .

Uzyskiwanie dostępu do domyślnych stylów składnika

Dostęp do stylów domyślnych składnika można uzyskać za pomocą metody statycznej getStyleDefinition() klasy składnika. Na przykład, w poniższym kodzie dla składnika ComboBox pobierane są style domyślne i wyświetlane są wartości domyślne dla właściwości buttonWidth i downArrowDownSkin : 

import fl.controls.ComboBox; 
var styleObj:Object = ComboBox.getStyleDefinition(); 
trace(styleObj.buttonWidth); // 24 
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

Ustawianie i pobieranie stylów instancji składnika

Dowolna instancja składnika interfejsu użytkownika może bezpośrednio wywoływać metody setStyle() i getStyle() w celu ustawienia lub pobrania stylu. Następująca składania ustawia styl i wartość dla instancji składnika: 

instanceName.setStyle("styleName", value);

Składnia służąca do pobierania stylu dla instancji składnika: 

var a_style:Object = new Object(); 
a_style = instanceName.getStyle("styleName");

Należy zauważyć, że metoda getStyle() zwraca typ Object, ponieważ może zwracać wiele stylów o różnych typach danych. Na przykład, poniższy kod ustawia styl czcionki dla instancji TextArea ( aTa ), a następnie pobiera go za pomocą metody getStyle() . W przykładzie zwrócona wartość rzutowana jest na obiekt TextFormat w celu przypisania jej do zmiennej TextFormat. Brak rzutowania spowodowałby, że kompilator zgłosi błąd powodowany próbą sprowadzenia zmiennej Object do zmiennej TextFormat. 

import flash.text.TextFormat; 
 
var tf:TextFormat = new TextFormat(); 
tf.font = "Georgia"; 
aTa.setStyle("textFormat",tf); 
aTa.text = "Hello World!"; 
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; 
trace(aStyle.font);

Korzystanie z obiektu TextFormat w celu ustawiania właściwości tekstu

Obiekt TextFormat służy do formatowania tekstu instancji składnika. Obiekt TextFormat ma właściwości, które umożliwiają określenie własności tekstu takich, jak bold , bullet , color , font , italic , size i kilka innych. Właściwości te można ustawić w obiekcie TextFormat, a następnie wywołać metodę setStyle() w celu zastosowania ich w instancji składnika. Na przykład, poniższy kod ustawia właściwości font , size i bold obiektu TextFormat i stosuje je w instancji Button: 

/* Create a new TextFormat object to set text formatting properties. */ 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.size = 16; 
tf.bold = true; 
a_button.setStyle("textFormat", tf);

Na poniższej ilustracji przedstawiono efekt tych ustawień dla przycisku z etykietą Submit:

Przycisk z nowym stylem textFormat zastosowanym do jego etykiety

Właściwości stylu ustawione w instancji składnika za pomocą metody setStyle() mają najwyższy priorytet i przesłaniają wszystkie pozostałe ustawienia stylu. Jednak im więcej właściwości zostanie ustawionych za pomocą metody setStyle() dla pojedynczej instancji składnika, tym wolniej składnik ten będzie renderowany w czasie wykonywania.

Ustawianie stylów dla wszystkich instancji składnika

Styl dla wszystkich instancji klasy składnika można ustawić za pomocą metody statycznej setComponentStyle() klasy StyleManager. Na przykład, dla wszystkich składników Button można ustawić czerwony kolor tekstu przez przeciągnięcie składnika Button na stół montażowy, a następnie dodanie poniższego kodu ActionScript do panelu Operacje klatki nr 1 na osi czasu: 

import fl.managers.StyleManager; 
import fl.controls.Button; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setComponentStyle(Button, "textFormat", tf);

Wszystkie składniki Button kolejno dodawane na stole montażowym będą miały czerwone etykiety.

Ustawianie stylu dla wszystkich składników

Styl dla wszystkich składników można ustawić za pomocą metody statycznej setStyle() klasy StyleManager.

  1. Przeciągnij składnik List na stół montażowy i nadaj instancji nazwę aList .

  2. Przeciągnij składnik Button na stół montażowy i nadaj instancji nazwę aButton .

  3. Naciśnij klawisz F9 lub wybierz opcję Operacje z menu Okno, aby otworzyć panel Operacje, jeśli nie jest on jeszcze otwarty, i wprowadź poniższy kod do klatki nr·1 na osi czasu, aby ustawić czerwony kolor tekstu dla wszystkich składników: 

    import fl.managers.StyleManager; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setStyle("textFormat", tf);

  4. Dodaj poniższy kod w panelu Operacje, aby wypełnić składnik List tekstem. 

    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;

  5. Wybierz opcje Sterowanie > Testuj film lub naciśnij klawisze Ctrl+Enter, aby skompilować kod i przetestować jego zawartość. Tekst w etykiecie przycisku i na liście powinien być czerwony.