Impostazione di stili

Gli stili di un componente specificano in genere i valori per gli skin, le icone, la formattazione del testo e il riempimento usati da Flash per disegnare i vari stati del componente. Ad esempio, il componente Button viene disegnato con uno skin diverso per mostrare lo stato premuto (che corrisponde a quando si fa clic con il mouse sul componente), rispetto allo skin usato per mostrare lo stato non premuto o normale. Viene usato uno skin diverso anche quando lo stato del componente è disattivato, ovvero quando la proprietà enabled è impostata su false .

Gli stili per i componenti possono essere impostati a livello di documento, classe e istanza. Inoltre, alcune proprietà di stile possono essere ereditate da un componente principale. Ad esempio, il componente List eredita gli stili di ScrollBar, poiché eredita dalla classe BaseScrollPane.

Gli stili consentono di personalizzare un componente nei modi seguenti:

  • Impostando gli stili in un'istanza di un componente. Potete modificare le proprietà di colore e testo di un'unica istanza di componente. Questo metodo può risultare efficace in alcune situazioni, tuttavia può richiedere un certo dispendio di tempo nei casi in cui sia necessario impostare le singole proprietà di tutti i componenti presenti in un documento.

  • Impostando gli stili per tutti i componenti di un dato tipo in un documento. Per applicare un aspetto coerente a tutti i componenti di un dato tipo, ad esempio tutti i componenti CheckBox o Button di un documento, potete impostare gli stili a livello di componente.

    I valori delle proprietà di stile impostati per i contenitori vengono ereditati dai componenti in essi contenuti.

    Le modifiche apportate alle proprietà di stile non vengono visualizzate in Flash quando si visualizzano i componenti nello stage con la funzione Anteprima dal vivo.

Nozioni fondamentali sulle impostazioni di stile

Di seguito vengono descritti alcuni punti chiave sull'uso degli stili:

Ereditarietà
Per impostazione predefinita, l'elemento secondario di un componente eredita uno stile dal componente principale. Non è possibile impostare l'ereditarietà degli stili in ActionScript.

Precedenza
Se lo stile di un componente viene impostato in più modi, viene usato automaticamente il primo stile rilevato da Flash in base all'ordine di precedenza. Gli stili vengono cercati fino a quando non viene trovato un valore, secondo l'ordine seguente:

  1. Viene cercata una proprietà di stile nell'istanza di componente.

  2. Se lo stile è ereditario, viene cercato nella gerarchia principale un valore ereditato.

  3. Viene cercato lo stile nel componente.

  4. Viene cercata un'impostazione globale in StyleManager.

  5. Se la proprietà non è ancora definita, assume il valore undefined .

Accesso agli stili predefiniti di un componente

Potete accedere agli stili predefiniti di un componente usando il metodo statico getStyleDefinition() per la classe del componente. Ad esempio, il codice seguente consente di recuperare gli stili predefiniti del componente ComboBox e di visualizzare i valori predefiniti delle proprietà buttonWidth e downArrowDownSkin : 

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

Impostazione e recupero degli stili in un'istanza di componente

Qualsiasi istanza di componente UI può chiamare direttamente i metodi setStyle() e getStyle() per impostare o recuperare uno stile. La sintassi seguente imposta uno stile e il valore di un'istanza di componente: 

instanceName.setStyle("styleName", value);

Questa sintassi recupera uno stile per un'istanza di componente: 

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

Il metodo getStyle() restituisce il tipo Object poiché è in grado di restituire più stili con tipi di dati diversi. Ad esempio, il codice seguente imposta lo stile di carattere per un'istanza TextArea ( aTa ), quindi lo recupera usando il metodo getStyle() . In questo esempio, il valore restituito viene inserito in un oggetto TextFormat per assegnarlo a una variabile TextFormat. Senza l'inserimento, il compilatore genera un errore a causa del tentativo di assegnare forzatamente una variabile Object a una variabile 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);

Usare l'oggetto TextFormat per impostare le proprietà di testo

L'oggetto TextFormat consente di formattare il testo di un'istanza di componente. L'oggetto TextFormat dispone di proprietà che consentono di specificare le caratteristiche del testo quali bold , bullet , color , font , italic , size e molte altre. Potete impostare queste proprietà nell'oggetto TextFormat, quindi chiamare il metodo setStyle() per applicarle a un'istanza del componente. Ad esempio, il codice seguente imposta le proprietà font , size e bold di un oggetto TextFormat e le applica a un'istanza del componente 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);

Nella figura seguente è illustrato l'effetto di queste impostazioni su un pulsante con l'etichetta Submit:

Pulsante con nuovo stile textFormat applicato all'etichetta

Le proprietà di stile impostate in un'istanza di componente mediante il metodo setStyle() hanno la priorità più elevata e sostituiscono tutte le altre impostazioni di stile. L'impostazione di un numero elevato di proprietà mediante il metodo setStyle() per un'unica istanza di componente causa tuttavia il rallentamento del rendering del componente in fase di runtime.

Impostazione di uno stile per tutte le istanze di un componente

Potete accedere agli stili predefiniti per tutte le istanze di un componente usando il metodo statico setComponentStyle() per la classe StyleManager. Ad esempio, potete impostare il colore del testo su rosso per tutte le istanze Button trascinando prima un componente Button nello stage, quindi aggiungendo il codice ActionScript seguente al pannello Azioni sul fotogramma 1 della linea temporale: 

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

Tutte le istanze di Button aggiunte successivamente allo stage avranno delle etichette rosse.

Impostare uno stile per tutti i componenti

Potete impostare uno stile per tutti i componenti usando il metodo statico setStyle() della classe StyleManager.

  1. Trascinate nello stage un componente List e assegnategli il nome di istanza aList .

  2. Trascinate nello stage un componente Button e assegnategli il nome di istanza aButton .

  3. Premete F9 o selezionate Azioni dal menu Finestra per aprire il pannello Azioni (se non è già aperto), quindi immettete il codice seguente nel fotogramma 1 della linea temporale per impostare il colore del testo su rosso per tutti i componenti. 

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

  4. Aggiungete il codice seguente nel pannello Azioni per inserire il testo nel componente List. 

    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. Selezionate Controllo > Prova filmato o premete Ctrl+Invio per compilare il codice e provare il contenuto. Il testo nell'etichetta del pulsante e nell'elenco sarà di colore rosso.