Usare il componente RadioButton

Il componente RadioButton consente all'utente di selezionare una singola opzione tra una serie di possibilità. Questo componente deve essere usato in un gruppo di almeno due istanze RadioButton. Solo un membro del gruppo può essere selezionato in un determinato momento. La selezione di un pulsante di scelta in un gruppo deseleziona il pulsante di scelta attualmente selezionato nel gruppo stesso. Potete impostare il parametro groupName per indicare a quale gruppo appartiene un pulsante di scelta.

Un pulsante di scelta è una parte essenziale di molte applicazioni basate su form presenti sul Web. È possibile utilizzare pulsanti di scelta ovunque si desideri che l'utente effettui una scelta da un gruppo di opzioni. Ad esempio, è possibile utilizzare pulsanti di scelta in un form per chiedere quale tipo di carta di credito il cliente intende utilizzare.

Interazione dell'utente con il componente RadioButton

Un pulsante di scelta può essere abilitato o disabilitato. Se è disabilitato, un pulsante di scelta non può ricevere input dal mouse o dalla tastiera. Quando l'utente fa clic o preme il tasto Tab per spostarsi in un gruppo di componenti RadioButton, solo il pulsante di scelta selezionato viene reso attivo. Una volta attivato, potete usare i tasti seguenti per controllarlo:

Chiave

Descrizione

Freccia su/freccia sinistra

La selezione si sposta sul pulsante di scelta precedente all'interno del gruppo di pulsanti di scelta.

Freccia giù/freccia destra

La selezione si sposta sul pulsante di scelta successivo all'interno del gruppo di pulsanti di scelta.

Tab

Sposta la selezione dal gruppo di pulsanti di scelta al componente successivo.

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

Sullo stage, un'anteprima dal vivo di ogni istanza del componente RadioButton consente di visualizzare le modifiche apportate ai parametri nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti durante la creazione. Tuttavia, la reciproca esclusione di selezione non viene visualizzata nell'anteprima dal vivo. Se impostate il parametro selected su true per due pulsanti di scelta dello stesso gruppo, entrambi sono visualizzati come selezionati anche se solo l'ultima istanza creata appare selezionata in fase di runtime. Per ulteriori informazioni, vedete Parametri del componente RadioButton .

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

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

Attivare l'accessibilità per il componente una sola volta, indipendentemente dal numero di istanze del componente. Per ulteriori informazioni, vedete il Capitolo 18, “Creazione di contenuto accessibile”, nella guida Uso di Flash .

Parametri del componente RadioButton

I seguenti parametri di creazione possono essere impostati per ogni istanza del componente RadioButton nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: groupName, label, LabelPlacement, selected e value . 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 RadioButton nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

È possibile creare codice ActionScript per impostare opzioni aggiuntive per le istanze RadioButton utilizzando i metodi, le proprietà e gli eventi della classe RadioButton.

Creare un'applicazione con il componente RadioButton

La procedura seguente indica come aggiungere componenti RadioButton a un'applicazione durante la creazione. In questo esempio, i componenti RadioButton vengono usati per presentare una domanda affermativa/negativa. I dati dal componente RadioButton vengono visualizzati in un componente TextArea.

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

  2. Trascinare due componenti RadioButton dal pannello Componenti allo stage.

  3. Selezionate il primo pulsante di scelta. Nella finestra di ispezione Proprietà, assegnate al pulsante il nome di istanza yesRb e il nome di gruppo rbGroup .

  4. Selezionate il secondo pulsante di scelta. Nella finestra di ispezione Proprietà, assegnate al pulsante il nome di istanza noRb e il nome di gruppo rbGroup .

  5. Trascinate un componente TextArea dal pannello Componenti allo stage e assegnategli il nome di istanza aTa .

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

    yesRb.label = "Yes"; 
yesRb.value = "For"; 
noRb.label = "No"; 
noRb.value = "Against"; 
 
yesRb.move(50, 100); 
noRb.move(100, 100); 
aTa.move(50, 30); 
noRb.addEventListener(MouseEvent.CLICK, clickHandler); 
yesRb.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    aTa.text = event.target.value; 
}

  7. Selezionate Controllo > Prova filmato per eseguire l'applicazione.

Creare un componente RadioButton mediante ActionScript

Nell'esempio seguente viene usato ActionScript per creare tre componenti RadioButton per i colori rosso, blu e verde e per disegnare una casella grigia. Nella proprietà value di ogni componente RadioButton è specificato il valore esadecimale per il colore associato al pulsante. Quando un utente fa clic su uno dei componenti RadioButton, la funzione clickHandler() chiama il metodo drawBox() , passando il colore dalla proprietà value di RadioButton da applicare alla casella.

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

  2. Trascinate il componente RadioButton nel pannello Libreria.

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

    import fl.controls.RadioButton; 
import fl.controls.RadioButtonGroup; 
 
var redRb:RadioButton = new RadioButton(); 
var blueRb:RadioButton = new RadioButton(); 
var greenRb:RadioButton = new RadioButton(); 
var rbGrp:RadioButtonGroup = new RadioButtonGroup("colorGrp"); 
 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xCCCCCC); 
 
addChild(redRb); 
addChild(blueRb); 
addChild(greenRb); 
addChild(aBox); 
 
redRb.label = "Red"; 
redRb.value = 0xFF0000; 
blueRb.label = "Blue"; 
blueRb.value = 0x0000FF; 
greenRb.label = "Green"; 
greenRb.value = 0x00FF00; 
redRb.group = blueRb.group = greenRb.group = rbGrp; 
redRb.move(100, 260); 
blueRb.move(150, 260); 
greenRb.move(200, 260); 
 
rbGrp.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    drawBox(aBox, event.target.selection.value); 
} 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(125, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. Selezionate Controllo > Prova filmato per eseguire l'applicazione.

    Per ulteriori informazioni, vedete la classe RadioButton nella Guida di riferimento di ActionScript 3.0 per Flash Professional .