Stijlen instellen

Hier volgen een aantal belangrijke aanwijzingen over het gebruik van stijlen:

Overerving

Een onderliggende component wordt ingesteld om een stijl van de bovenliggende component te overerven. U kunt binnen ActionScript geen overerving voor stijlen instellen.

Prioriteit

Wanneer een componentstijl op meer dan één manier wordt ingesteld, gebruikt Flash de eerste stijl die het tegenkomt volgens de prioriteitsvolgorde. Flash zoekt in de volgende volgorde naar stijlen, tot het een waarde vindt:

1. Flash zoekt naar een stijleigenschap in de componentinstantie.

2. Als de stijl een van de overervende stijlen is, zoekt Flash in de bovenliggende hiërarchie naar een overerfde waarde.

3. Flash zoekt naar de stijl in de component.

4. Flash zoekt naar een algemene instelling in StyleManager.

5. Als de eigenschap nog steeds niet is gedefinieerd, krijgt de eigenschap de waarde undefined .

U kunt de standaardstijlen voor een component benaderen met de statische methode getStyleDefinition() voor de componentklasse. De volgende code haalt bijvoorbeeld de standaardstijlen voor de component ComboBox op en geeft de standaardwaarden voor de eigenschappen buttonWidth en downArrowDownSkin weer:

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

Elke instantie van een UI-component kan de methoden setStyle() en getStyle() direct aanroepen om een stijl in te stellen of op te halen. Met de volgende syntaxis stelt u een stijl en waarde voor een componentinstantie in:

instanceName.setStyle("styleName", value);

Met deze syntaxis haalt u een stijl voor een componentinstantie op:

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

De methode getStyle() retourneert het type Object omdat het meerdere stijlen met verschillende gegevenstypen kan retourneren. De volgende code stelt bijvoorbeeld de tekenstijl voor een instantie TextArea ( aTa ) in en haalt deze vervolgens op met de methode getStyle() . In het voorbeeld wordt de geretourneerde waarde naar een object TextFormat gecast om het toe te wijzen aan een variabele TextFormat. Zonder de cast zou de compiler een fout geven voor een poging om een variabele Object naar een variabele TextFormat te brengen.

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);

/* 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);

U kunt een stijl voor alle instanties van een componentklasse instellen met de statische methode setComponentStyle() van de klasse StyleManager. U kunt bijvoorbeeld de kleur van tekst voor alle Buttons op rood instellen door eerst een Button naar het werkgebied te slepen en vervolgens in het deelvenster Handelingen de volgende ActionScript-code aan frame 1 van de tijdlijn toe te voegen:

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

Alle Buttons die u vervolgens aan het werkgebied toevoegt krijgen rode labels.

U kunt een stijl instellen voor alle componenten met behulp van de statische methode setStyle() van de klasse StyleManager.

1. Sleep een component List naar het werkgebied en geef deze de instantienaam aList .

2. Sleep een component Button naar het werkgebied en geef deze de instantienaam aButton .

3. Druk op F9 of selecteer Handelingen in het menu Venster om het deelvenster Handelingen te openen als het niet al open is, en voer de volgende code in frame 1 van de tijdlijn in om de tekstkleur in te stellen op rood voor alle componenten:

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

4. Voeg de volgende code toe aan het deelvenster Handelingen om de lijst met tekst te vullen.

   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. Selecteer Besturing > Film testen of druk op Ctrl+Enter om de code te compileren en de inhoud te testen. De tekst in zowel het knoplabel als de lijst zou nu rood moeten zijn.