|
O componente RadioButton permite que o usuário seja forçado a fazer uma única escolha em um conjunto de opções. Esse componente deve ser usado em um grupo de, pelo menos duas ocorrências de RadioButton. Apenas um membro do grupo pode ser selecionado, em qualquer momento determinado. Selecionar um botão de rádio em um grupo cancela a seleção do botão de rádio selecionado atualmente no grupo. Defina o parâmetro
groupName
para indicar o grupo ao qual o botão de opção pertence.
Um botão de opção é parte fundamental de vários aplicativos de formulário na Web. Você poderá usar os botões de opção sempre que quiser que um usuário faça uma única escolha em um grupo de opções. Por exemplo, use os botões de opção em um formulário para perguntar qual cartão de crédito um usuário deseja usar.
Interação do usuário com o componente RadioButton
Um botão de opção pode ser ativado ou desativado. Um botão de opção desativado não recebe entradas de mouse nem de teclado. Quando o usuário clica em um grupo do componente RadioButton ou o acessa por meio da tecla tab, apenas o botão de opção selecionado recebe o foco. Em seguida, o usuário poderá utilizar as seguintes teclas para controlá-lo:
|
Tecla
|
Descrição
|
|
Seta para cima/seta para esquerda
|
A seleção é movida para o botão de opção anterior no grupo de botões de opção.
|
|
Seta para baixo/seta para direita
|
A seleção é movida para o próximo botão de opção no grupo de botões de opção.
|
|
Tabulação
|
Move o foco do grupo de botões de opção para o próximo componente.
|
Para obter mais informações sobre o controle do foco, consulte a interface IFocusManager e a classe FocusManager na
Referência do ActionScript 3.0
para Flash Professional
e
Trabalho com o FocusManager
.
Uma visualização ao vivo de cada ocorrência de RadioButton no Palco reflete as alterações feitas nos parâmetros no Inspetor de propriedades ou no Inspetor de componentes durante a criação. No entanto, a exclusão mútua da seleção não é exibida na visualização ao vivo. Se você definir o parâmetro selecionado como
true
para dois botões de opção do mesmo grupo, eles aparecerão selecionados mesmo que somente a última ocorrência criada apareça selecionada em tempo de execução. Para obter mais informações, consulte
Parâmetros do componente RadioButton
.
Quando você adicionar o componente RadioButton a um aplicativo, poderá torná-lo acessível a um leitor de tela adicionando as seguintes linhas de código:
import fl.accessibility.RadioButtonAccImpl;
RadioButtonAccImpl.enableAccessibility();
A acessibilidade de um componente é ativada somente uma vez, independentemente de quantas ocorrências do componente existem. Para obter mais informações, consulte o Capítulo 18, “Criação de conteúdo acessível”, em Uso do Flash
.
Parâmetros do componente RadioButton
Você pode definir os seguintes parâmetros de autoria no Inspetor de propriedades ou no Inspetor de componentes de cada instância do componente RadioButton:
groupName, label, LabelPlacement, selected
e
value
. Cada um desses parâmetros tem uma propriedade ActionScript correspondente de mesmo nome. Para obter informações sobre os possíveis valores desses parâmetros, consulte a classe RadioButton na
Referência do ActionScript 3.0
para Flash Professional
.
Você pode escrever o ActionScript para definir as opções adicionais das ocorrências de RadioButton usando os métodos, as propriedades e os eventos da classe RadioButton.
Criar um aplicativo com o componente RadioButton
O procedimento a seguir explica como adicionar um componente RadioButton a um aplicativo durante a criação. Neste exemplo, os RadioButtons são usados para apresentar uma pergunta sim-ou-não. Os dados do RadioButton são exibidos em uma TextArea.
-
Crie um novo documento Flash (ActionScript 3.0).
-
Arraste dois componentes RadioButton do painel Componentes para o Palco.
-
Selecione o primeiro botão de opção. No Inspetor de propriedades, atribua a ele o nome de ocorrência
yesRb
e o nome de grupo
rbGroup.
-
Selecione o segundo botão de opção. No Inspetor de propriedades, atribua a ele o nome de ocorrência
noRb
e o nome de grupo
rbGroup.
-
Arraste um componente TextArea do painel Componentes para o Palco e atribua a ele o nome de ocorrência
aTa
.
-
Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript:
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;
}
-
Selecione Controlar > Testar filme para executar o aplicativo.
Criar um RadioButton por meio do ActionScript
Este exemplo usa o ActionScript para criar três RadioButtons para as cores vermelho, azul e verde, e desenha uma caixa cinza. A propriedade
value
de cada RadioButton especifica o valor hexadecimal da cor associada ao botão. Quando um usuário clica em um dos RadioButtons, a função
clickHandler()
chama
drawBox()
, passando a cor da propriedade
value
do RadioButton para colorir a caixa.
-
Crie um novo documento Flash (ActionScript 3.0).
-
Arraste o componente RadioButton para o painel Biblioteca.
-
Abra o painel Ações, selecione Quadro 1 na Linha do tempo principal e digite o seguinte código do ActionScript:
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();
}
-
Selecione Controlar > Testar filme para executar o aplicativo.
Para obter mais informações, consulte a classe RadioButton na
Referência do ActionScript 3.0
para Flash Professional
.
|
|
|