Usare il componente CheckBox

Un componente CheckBox è una casella quadrata che può essere selezionata o deselezionata. Quando è selezionata, nella casella è visualizzato un segno di spunta. Al componente CheckBox potete aggiungere un'etichetta di testo a sinistra, a destra, sopra o sotto.

Potete usare i componenti CheckBox per ottenere una serie di valori true o false che non si escludano a vicenda. Ad esempio, in un'applicazione che raccoglie informazioni sul tipo di auto che si desidera acquistare, possono essere usati componenti CheckBox per la selezione delle caratteristiche.

Interazione dell'utente con il componente CheckBox

Un componente CheckBox può essere abilitato o disabilitato in un'applicazione. Se è abilitato e l'utente fa clic su di esso o sulla relativa etichetta, il componente viene attivato e visualizza l'aspetto corrispondente allo stato premuto. Se l'utente sposta il puntatore fuori dall'area di delimitazione del componente CheckBox o dall'etichetta tenendo premuto contemporaneamente il pulsante del mouse, l'aspetto del componente torna allo stato originale e rimane attivo. Lo stato di un componente CheckBox non cambia finché non si rilascia il pulsante del mouse. Inoltre, questo componente ha due stati disabilitato, selezionato e deselezionato, che usano rispettivamente selectedDisabledSkin e disabledSkin e non consentono alcuna interazione mediante il mouse o la tastiera.

Se un componente CheckBox è disabilitato, tale stato viene visualizzato indipendentemente dall'azione dell'utente. Quando è disattivato, un componente CheckBox non può ricevere input dal mouse o dalla tastiera.

Un'istanza CheckBox viene attivata se un utente fa clic su di essa oppure se si sposta su di essa con il tasto di tabulazione. Una volta attivata l'istanza CheckBox, è possibile utilizzare i seguenti tasti per controllarla:

Chiave

Descrizione

Maiusc+Tab

Attiva l'elemento precedente.

Barra spaziatrice

Seleziona o deseleziona il componente e attiva l'evento change .

Tab

Attiva l'elemento successivo.

Per ulteriori informazioni sul controllo dell'attivazione, vedete Operazioni con FocusManager e la classe FocusManager nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Un'anteprima dal vivo di ogni istanza CheckBox riflette le modifiche apportate ai parametri nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti durante la creazione.

Quando aggiungete il componente CheckBox a un'applicazione, potete renderlo accessibile a uno screen reader aggiungendo le seguenti righe di codice ActionScript: 

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

Attivare l'accessibilità per il componente una sola volta, indipendentemente dal numero di istanze del componente.

Parametri del componente CheckBox

I seguenti parametri di creazione possono essere impostati per ogni istanza del componente CheckBox: label , labelPlacement e selected . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Per informazioni sui valori che potete impostare per questi parametri, vedete la classe CheckBox nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Creare un'applicazione mediante il componente CheckBox

Nella procedura seguente viene descritto come aggiungere un componente CheckBox a un'applicazione durante la creazione, usando un estratto dal form di un'applicazione di gestione prestiti. Nel form viene chiesto se il richiedente è proprietario di una casa ed è incluso un componente CheckBox mediante il quale l'utente può rispondere affermativamente (“yes”). In caso di risposta affermativa, vengono presentati due pulsanti di scelta che l'utente userà per indicare il valore relativo della casa.

Creare un'applicazione mediante il componente CheckBox

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinare il componente CheckBox dal pannello Componenti allo stage.

  3. Nella finestra di ispezione Proprietà, effettuare le operazioni seguenti:

    • Inserite homeCh come nome dell'istanza.

    • Inserite 140 come valore della larghezza (W).

    • Inserite “Own your home?” per il parametro label.

  4. Trascinate due componenti RadioButton dal pannello Componenti allo stage e posizionateli sotto e a destra del componente CheckBox. Immettete i seguenti valori per tali componenti nella finestra di ispezione Proprietà:

    • Inserite underRb e overRb come nomi di istanza.

    • Inserite 120 per il parametro W (larghezza) di entrambi i componenti RadioButton.

    • Immettete Under $500,000? per il parametro label di underRb .

    • Immettete Over $500,000? per il parametro label di overRb .

    • Inserite valueGrp per il parametro groupName di entrambi i componenti RadioButton.

  5. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    homeCh.addEventListener(MouseEvent.CLICK, clickHandler); 
underRb.enabled = false; 
overRb.enabled = false; 
 
function clickHandler(event:MouseEvent):void { 
    underRb.enabled = event.target.selected; 
    overRb.enabled = event.target.selected;     
}

    Questo codice crea un gestore di eventi per un evento CLICK che attiva i componenti RadioButton underRb e overRb se il componente CheckBox homeCh è selezionato e li disattiva se homeCh non è selezionato. Per ulteriori informazioni, vedete la classe MouseEvent nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

  6. Selezionare Controllo > Prova filmato.

Nell'esempio seguente viene duplicata l'applicazione precedente, creando invece i componenti CheckBox e RadioButton con ActionScript.

Creare un componente CheckBox mediante ActionScript

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate il componente CheckBox e il componente RadioButton dal pannello Componenti al pannello Libreria del documento corrente. Se il pannello Libreria non è aperto, premete Ctrl+L o selezionate Finestra > Libreria per aprirlo.

    In questo modo i componenti sono disponibili per l'applicazione, ma non vengono collocati nello stage.

  3. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi inserite il codice seguente per creare e posizionare le istanze dei componenti: 

    import fl.controls.CheckBox; 
import fl.controls.RadioButton; 
 
var homeCh:CheckBox = new CheckBox(); 
var underRb:RadioButton = new RadioButton(); 
var overRb:RadioButton = new RadioButton(); 
addChild(homeCh); 
addChild(underRb); 
addChild(overRb); 
underRb.groupName = "valueGrp"; 
overRb.groupName = "valueGrp"; 
homeCh.move(200, 100); 
homeCh.width = 120; 
homeCh.label = "Own your home?"; 
underRb.move(220, 130); 
underRb.enabled = false; 
underRb.width = 120; 
underRb.label = "Under $500,000?"; 
overRb.move(220, 150); 
overRb.enabled = false; 
overRb.width = 120; 
overRb.label = "Over $500,000?";

    Questo codice usa le funzioni di costruzione CheckBox() e RadioButton() per creare i componenti e il metodo addChild() per inserirli nello stage, mentre per posizionarli sullo stage usa il metodo move() .

  4. A questo punto, aggiungere il codice ActionScript seguente per creare un listener di eventi e una funzione di gestione degli eventi: 

    homeCh.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    underRb.enabled = event.target.selected; 
    overRb.enabled = event.target.selected;     
}

    Questo codice crea un gestore di eventi per l'evento CLICK che attiva i pulsanti di scelta underRb e overRb se il componente CheckBox homeCh è selezionato e li disattiva se homeCh non è selezionato. Per ulteriori informazioni, vedete la classe MouseEvent nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

  5. Selezionare Controllo > Prova filmato.