Usare il componente Button

Il componente Button è un pulsante di forma rettangolare ridimensionabile che l'utente può premere usando il mouse o la barra spaziatrice per avviare un'azione all'interno dell'applicazione. Potete aggiungere un'icona personalizzata a un componente Button e modificarne il comportamento da pulsante di comando a pulsante di tipo premuto/non premuto. Un pulsante di tipo premuto/non premuto rimane premuto quando viene scelto e ritorna nello stato normale (non premuto) se viene scelto nuovamente.

Il componente Button è una parte fondamentale di qualsiasi form e applicazione Web. È possibile utilizzare i pulsanti ovunque si desideri che l'utente esegua un'operazione. Ad esempio, la maggior parte dei form dispone di un pulsante Invia. Un altro esempio è quello dei pulsanti Avanti e Indietro disponibili nelle presentazioni.

Interazione dell'utente con il componente Button

Un pulsante può essere abilitato o disabilitato in un'applicazione. Nello stato disabilitato, non può ricevere input dal mouse o dalla tastiera. Un pulsante abilitato invece può ricevere input dal mouse o dalla tastiera. Quando un'istanza Button è attiva, è possibile utilizzare i seguenti tasti per controllarla:

Chiave

Descrizione

Maiusc+Tab

Attiva l'oggetto precedente.

Barra spaziatrice

Preme o rilascia il pulsante e attiva l'evento click .

Tab

Attiva l'oggetto successivo.

Invio

Attiva l'oggetto successivo se un pulsante è impostato come predefinito per FocusManager.

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 .

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

Nota: se le dimensioni dell'icona sono maggiori di quelle del pulsante, l'icona si estende oltre i bordi del pulsante.

Per definire un pulsante come pulsante di comando predefinito di un'applicazione, ovvero il pulsante che riceve l'evento click quando l'utente preme Invio, impostate FocusManager.defaultButton . Ad esempio, nel codice seguente viene impostata come pulsante predefinito un'istanza Button chiamata submitButton . 

FocusManager.defaultButton = submitButton;

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

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

L'accessibilità per il componente viene attivata una sola volta, indipendentemente dal numero di istanze del componente.

Parametri del componente Button

Potete impostare i seguenti parametri di creazione nella finestra di ispezione Proprietà (Finestra > Proprietà > Proprietà) o nella finestra di ispezione dei componenti (Finestra > Finestra di ispezione dei componenti) per ogni istanza Button: emphasized , label , labelPlacement , selected e toggle . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Quando assegnate un valore a questi parametri, impostate lo stato iniziale della proprietà nell'applicazione. Se impostate la proprietà in ActionScript, il valore impostato nel parametro viene ignorato. Per informazioni sui valori che potete impostare per questi parametri, vedete la classe Button nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Creare un'applicazione con il componente Button

La procedura seguente indica come aggiungere un componente Button a un'applicazione durante la creazione. In questo esempio, il componente Button modifica lo stato di un componente ColorPicker quando fate clic su di esso.

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

  2. Trascinate un componente Button dal pannello Componenti allo stage e immettete i seguenti valori per tale componente nella finestra di ispezione Proprietà:

    • Inserite il nome di istanza aButton .

    • Inserite Show per il parametro label.

  3. Aggiungete un componente ColorPicker allo stage e assegnategli il nome di istanza aCp .

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

    aCp.visible = false; 
 
aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
     
    switch(event.currentTarget.label) { 
        case "Show": 
            aCp.visible = true; 
            aButton.label = "Disable"; 
            break; 
        case "Disable": 
            aCp.enabled = false; 
            aButton.label = "Enable"; 
            break; 
        case "Enable": 
            aCp.enabled = true; 
            aButton.label = "Hide"; 
            break; 
        case "Hide": 
            aCp.visible = false; 
            aButton.label = "Show"; 
            break; 
    } 
}

    La seconda riga di codice consente di registrare clickHandler() come funzione di gestione degli eventi per l'evento MouseEvent.CLICK . L'evento si verifica quando l'utente fa clic su Button, causando l'esecuzione di una delle seguenti azioni da parte della funzione clickHandler() , a seconda del valore di Button:

    • “Show” rende visibile il componente ColorPicker e cambia l'etichetta di Button in “Disable”.

    • “Disable” disattiva il componente ColorPicker e cambia l'etichetta di Button in “Enable”.

    • “Enable” attiva il componente ColorPicker e cambia l'etichetta di Button in “Hide”.

    • “Hide” rende invisibile il componente ColorPicker e cambia l'etichetta di Button in “Show”.

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

Creare un'applicazione con il componente Button

Con la procedura seguente viene creato un componente Button di tipo premuto/non premuto usando ActionScript e viene visualizzato il tipo di evento nel pannello Output quando si fa clic su Button. Nell'esempio viene creata l'istanza Button richiamando la funzione di costruzione della classe; l'istanza viene quindi aggiunta allo stage chiamando il metodo addChild() .

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

  2. Trascinate il componente Button dal pannello Componenti al pannello Libreria del documento corrente.

    Questa operazione aggiunge il componente alla libreria senza renderlo visibile nell'applicazione.

  3. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi inserite il codice seguente per creare un'istanza Button: 

    import fl.controls.Button; 
 
var aButton:Button = new Button(); 
addChild(aButton); 
aButton.label = "Click me"; 
aButton.toggle =true;  
aButton.move(50, 50);

    Il metodo move() consente di posizionare il pulsante in corrispondenza della posizione 50 (coordinata x), 50 (coordinata y) nello stage.

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

    aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    trace("Event type: " + event.type); 
}

  5. Selezionare Controllo > Prova filmato.

    Quando fate clic sul pulsante, viene visualizzato il messaggio “Event type: click” nel pannello Output.