Luis Carlos Quinhone -Designer / Developer

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():

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>

Traduzido da documentação oficial do ©Adobe ©Flex