Alert control
Flex / Flex Builder, Flex Builder No Comments »Todos componentes Flex podem chamar o método estatico show() da classe para abrir a caixa de diálogo modal pop up com uma mensagem e um título opcional, botões, e ícones. O exemplo seguinte mostra um controle Alert personalizado:
O controle Alert fecha quando você selecionar um botão no controle, ou pressionar a tecla de Escape.
O método Alert.show() tem a seguinte sintaxe:
public static show(
text:String,
title:String = null,
flags:uint = mx.controls.Alert.OK,
parent:Sprite = null,
clickListener:Function = null,
iconClass:Class = null,
defaultButton:uint = mx.controls.Alert.OK) : Alert
Este método retorna um objeto Alert control object.
A tabela seguinte descreve os argumentos do método show():
| text | (Requerido) Especifica o texto da mensagem da caixa de diálogo |
| title | Especifica o título de caixa de diálogo. Se omitido, exibe uma barra de título em branco. |
| flags | Especifica o botão(ões) para exibir no caixa de diálogo. As opções são como segue: Mx.controls.Alert.OK botão OK Mx.controls.Alert.YES botão SIM Mx.controls.Alert.NO botão NÂO Mx.controls.Alert.CANCEL botão CANCELA Cada opção é um valor bit e pode ser combinada com outras opções usando o operador “|”. Os botões aparecerão na ordem listadas aqui não importando a ordem que você especifica-os em seu código. O valor padrão é mx.controls.Alert.OK. |
| parent | O objeto pai do controle Alert |
| clickListener | Especifica o listener(ouvinte) para o evento clique dos botões. O objeto event passado para este manipulador é uma instância da classe CloseEvent. O objeto event contém o campo detail, que é fixado para a bandeira do botão que foi clicado (mx.controls.Alert.OK, mx.controls.Alert.CANCEL, mx.controls.Alert.YES, ou mx.controls.Alert.NO). |
| iconClass | Especifica um ícone para exibir à esquerda do texto da mensagem na caixa de diálogo |
| defaultButton | Especifica o botão padrão usando um dos valores válidos para o argumento flags. Iste é o botão que é selecionado quando o usuário apertar o Enter. O valor padrão é Alert.OK. Apertando as teclas de fuga, o botão Cancel ou No da mesma maneira que se você o clicasse. |
Para usar o controle Alert, você primeiro importa a classe Alert em sua aplicação. Então chame o método show(), como o exemplo seguinte mostra:
<?xml version="1.0"?>
<!-- controlsalertAlertSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:TextInput id="myInput" width="150" text=""/>
<mx:Button id="myButton" label="Copy Text" click="myText.text = myInput.text;
Alert.show('Text Copied!', 'Alert Box', mx.controls.Alert.OK);"/>
<mx:TextInput id="myText"/>
</mx:Application>
Neste exemplo, selecionando o Botão o texto do TextInput é copiado para a TextArea, e exibe o Alerta.
Você também pode definir um evento listener(ouvinte) para o controle Button, como o exemplo seguinte mostra:
<?xml version=”1.0″?>
<!– controls\alert\AlertSimpleEvent.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function alertListener():void {
myText.text = myInput.text;
Alert.show(”Text Copied!”, “Alert Box”, Alert.OK);
}
]]>
</mx:Script>
<mx:TextInput id=”myInput”
width=”150″
text=”"/>
<mx:Button id=”myButton”
label=”Copy Text”
click=”alertListener();”/>
<mx:TextInput id=”myText”/>
</mx:Application>
NOTA
Depois da caixa de diálogo do método show()ser criada, O Flex continua com o processo de sua aplicação; não espera pelo usuário fechar o caixa de diálogo.
Dimensionando o controle Alert
O controle automaticamente muda as propriedades de tamanhos para ajustar seu texto, botões, e ícone. Você pode explicitamente mudar o tamanho de um Alert usando o objeto Alert retornado do método show(), como o exemplo seguinte mostra:
<?xml version=”1.0″?>
<!– controls\alert\AlertSize.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
// Define variable to hold the Alert object.
public var myAlert:Alert;
private function openAlert():void {
myAlert = Alert.show(”Copy Text?”, “Alert”,
Alert.OK | Alert.CANCEL);
// Set the height and width of the Alert control.
myAlert.height=150;
myAlert.width=150;
}
]]>
</mx:Script>
<mx:TextInput id=”myInput”
width=”150″
text=”"/>
<mx:Button id=”myButton”
label=”Copy Text”
click=”openAlert();”/>
<mx:TextInput id=”myText”/>
</mx:Application>
Neste exemplo, você fixa a propriedades altura e a largura do objeto Alert para tamanho do controle.
Usando event listeners com o Alert
O próximo exemplo adiciona um event listener ao controle da caixa de diálogo. Um event listener permite a você apresentar processo quando o usuário selecionar um botão do controle de Alerta. O event object passou para o event listenet é de tipo.
No próximo exemplo, você só copia o texto quando o usuário selecionar o botão OK no controle de Alerta:
<?xml version=”1.0″?>
<!– controls\alert\AlertEvent.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
private function alertListener(eventObj:CloseEvent):void {
// Check to see if the OK button was pressed.
if (eventObj.detail==Alert.OK) {
myText.text = myInput.text;
}
}
]]>
</mx:Script>
<mx:TextInput id=”myInput”
width=”150″
text=”" />
<mx:Button id=”myButton”
label=”Copy Text”
click=’Alert.show(”Copy Text?”, “Alert”,
Alert.OK | Alert.CANCEL, this,
alertListener, null, Alert.OK);’/>
<mx:TextInput id=”myText”/>
</mx:Application>
Neste exemplo, você define um event listener para o controle Alert. Dentro do corpo do event listener, você determina que botão foi apertado examinando a propriedade detail do objeto event. O objeto event é uma instância da classe CloseEvent. Se o usuário apertou o botão OK, copie o texto. Se o usuário apertou qualquer outro botão, ou apertou a tecla Esc, não copie o texto.
Especificando um icone para o Alert
Você pode incluir um ícone no controle que aparece à esquerda do Alerta. Este exemplo modifica o exemplo da seção prévia para adicionar a tag embed metadata para importar o ícone.
<?xml version=”1.0″?>
<!– controls\alert\AlertIcon.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;[Embed(source=”assets/alertIcon.jpg”)]
[Bindable]
public var iconSymbol:Class;
private function alertListener(eventObj:CloseEvent):void {
// Check to see if the OK button was pressed.
if (eventObj.detail==Alert.OK) {
myText.text = myInput.text;
}
}
]]>
</mx:Script>
<mx:TextInput id=”myInput”
width=”150″
text=”"/>
<mx:Button id=”myButton”
label=”Copy Text”
click=’Alert.show(”Copy Text?”, “Alert”,
Alert.OK | Alert.CANCEL, this,
alertListener, iconSymbol, Alert.OK );’/>
<mx:TextInput id=”myText”/>
</mx:Application>
