Quando comecei a desenvolver em Flex, tive algumas dificuldades para entender por que alguns atributos em MXML não são atributos em ActionScript. O Post de agora, vem explicar um pouco esta diferenciação que a Adobe fez, e mostra algumas facilidades que o MXML traz, ao permitir que eventos e Estilos sejam definidos como atributos no MXML.

MXML == ActionScript
ActionScript é a principal linguagem para o Flash Player. Logicamente você pode criar toda sua aplicação usando apenas uma ou várias classes em ActionScript. Mas devido aos vários benefícios, podemos usar o MXML para deixar a construção bem mais fácil e intuitiva.  O MXML já é uma linguagem que vem facilitar a utilização do ActionScript, mas o resultado final de um MXML é um Action Script.

A tradução de uma linguagem MXML em ActionScript pode ser vista, com uma configuração no Flex. Para isto vá em, Project -> Properties. No canto direito da nova tela. Vá a Flex Compiler.

Em Additional Compiler Arguments, digite o argumento -keep, separado por espaço do argumento anterior.

Quando o projeto for compilado será gerado na pasta raiz do projeto, uma nova pasta com o nome genereted, que conterá todos os ActionScript gerado, pelo MXML, esta pasta é atualizada toda vez que você compila o projeto.

Voltando agora no relacionamento do ActionScript com MXML.

Tags de MXML são Classes em ActionScript

As tags de MXML tornam se classes. Por exemplo criando um Button in MXML, devemos escrever a seguinte linha de código.

<!-- Botão em MXML -->
<mx:button id="okButton"> </mx:button>

Depois de compilado este código será equivalente a:

// Botão em ActionScript 3.0
import mx.controls.Button;
    
public function init():void{
    var okButton:Button = new Button();
    addChild(okButton);
}

Atributos são propriedades

Quando você adiciona atributos a tag, basicamente você esta mudando propriedade daquela instancia do componente. Por exemplo quando mudamos a Label do Botão em MXML teríamos.

<!-- MXML -->
<mx:Button id="okButton" label="Ok" />

Que seria equivalente a:

// em ActionScript
import mx.controls.Button;

var okButton:Button = new Button();
okButton.label = "Ok";
addChild(okButton);

Atributos são Estilos

Uma grande confusão é feita, quando temos que mudar estilos em Action Script. Estilo são propriedades especiais do Flex, e são usadas para controlar a aparência do componente. Enquanto um estilo é considerado propriedade no MXML em ActionScript as coisas ficam um pouco diferente, neste temos que trabalhar de maneira diferente usando os metodos gstStyle() e Setstyle(). Por exemplo para arredondarmos o canto dos botões devemos usar a propriedade  cornerRadius.

Em MXML temos:

<!-- MXML -->
<mx:Button id="okButton" cornerRadius="14"/>

Seguindo a Lógica do tópico, acima iríamos fazer “okButton.cornerRadius=14”, mas você perceberá um erro do compilador, uma vez que ele não var achar a propriedade cornerRadius. Ao invés disso devemos usar o método SetStyle. Este método tem dois parâmetros o primeiro o estilo da propriedade, e o segundo o valor que queremos definir.

// ActionScript
import mx.controls.Button;

var okButton:Button = new Button();
okButton.setStyle("cornerRadius", 14);
addChild(okButton);

Atributos são EventListeners

EventListeners, é a solução encontrado pelo desenvolvedor para dizer quando acontece alguma interação com ele, como um click de mouse. EM MXML já temos pronto o atributo para ouvir este evento. Isto não acontece com em Action Script onde temos que chamar o método addEventListener para ai sim definir qual evento usar, e conseqüentemente qual método iremos chamar

<!-- MXML -->
<mx:Button id="okButton" click="doSomething"/>

fazendo  em ActionScript, teríamos, “okButton.click = doSomething()”. Mas novamente teríamos um Erro. Em ActionScript devemos Usar o addEventListener, assim ficaria:

// ActionScript
import mx.controls.Button;

var okButton:Button = new Button();
okButton.addEventListener(MouseEvent.CLICK, doSomething);
addChild(okButton);

Até a próxima.