Luis Carlos Quinhone -Designer / Developer

Para criar um pop-up window, use o método PopUpManager’s createPopUp(). O método createPopUp() tem a seguinte sintaxe:

public static createPopUp(parent:DisplayObject, class:Class,modal:Boolean = false) : IFlexDisplayObject

O método tem o seguinte argumento

Argumento -> Descrição
parent -> Uma referência à uma janela para aparecer em cima.

class -> Uma referência à classe de objeto que você quer criar, tipicamente um componente de MXML personalizado que implementa um recipiente de TitleWindow

modal -> (Opcional) Um valor Booleano que indica se a janela é modal, e leva toda entrada do mouse até que seja fechado (true), ou se a interação tem permissão para com outros controles enquanto a janela é exibida (falso). O valor padrão é falsa.

Você também pode criar janela pop-up passando uma instância de uma classe TitleWindow ou componente customizado de addPopUp do método PopUpManager().

Definindo um componente de TitleWindow personalizado

Um dos modos mais comuns de criar um recipiente de TitleWindow é definir-lo como um componente de MXML personalizado.

·Você define o recipiente de TitleWindow, seus manipuladores de evento, e todas as seus filhos no componente personalizado.

·Você usa o createPopUp do método PopUpManager() e removePopUp() para criar e remover o recipiente de TitleWindow.

O código de exemplo seguinte define um componente de MyLoginForm TitleWindow personalizado que é usado como janela pop-up:

<?xml version=”1.0″?><mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”doInit();”>    <mx:Script>        <![CDATA[            import mx.managers.PopUpManager;        

            private function doInit():void {                // Centraliza o TitleWindow                // acima do controle que criou-o.

                PopUpManager.centerPopUp(this);            }           

            private function processLogin():void {                // Verifica credenciais (não mostradas) então remove o pop-up.

                PopUpManager.removePopUp(this);            }

        ]]>    </mx:Script>    <mx:Form>        <mx:FormItem label=”User Name”>            <mx:TextInput id=”username” width=”100%”/>        </mx:FormItem>        <mx:FormItem label=”Password”>            <mx:TextInput id=”password” displayAsPassword=”true” width=”100%”/>        </mx:FormItem>    </mx:Form>    <mx:HBox>        <mx:Button click=”processLogin();” label=”OK”/>        <mx:Button click=”PopUpManager.removePopUp(this);” label=”Cancel”/>    </mx:HBox></mx:TitleWindow>

Este arquivo, chamado MyLoginForm.mxml, define um recipiente de TitleWindow usando a tag <mx:TitleWindow>. O recipiente de TitleWindow define dois controles TextInput, para nome de usuário e senha, e dois controles de Botão, para enviar o formulário e para fechar o recipiente de TitleWindow. Este exemplo não inclui o código para verificar o nome de usuário e senha no evento submitForm()

Neste exemplo, você processa os dados do formulário em um evento do componente de MyLoginForm.mxml. Para fazer este componente mais reutilizável, você pode definir os evento em sua aplicação principal. Este permite a você criar um formulário genérica que deixa a manipulação de dados para a aplicação que usa o formulário. Para um exemplo que define os eventos na aplicação principal, veja. Using TitleWindow and PopUpManager events.

Usando o PopUpManager para criar o pop-up TitleWindow

Para criar pop-up, você chama o createPopUp do método PopUpManager() e passe-o como parent, o nome da classe que cria o pop-up, e o valor Booleano modal. O código da aplicação principal seguinte cria o recipiente de TitleWindow definido em Defining a custom TitleWindow component:

<?xml version=”1.0″?><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>    <mx:Script>        <![CDATA[            // Importa o PopUpManager.            import mx.managers.PopUpManager;            import mx.core.IFlexDisplayObject;

            private function showLogin():void {                // Cria um container TitleWindow non-modal.                var helpWindow:IFlexDisplayObject = PopUpManager.createPopUp(this, MyLoginForm, false);    }

       ]]>    </mx:Script>    

    <mx:VBox width=”300″ height=”300″>        <mx:Button click=”showLogin();” label=”Login”/>    </mx:VBox></mx:Application>

Neste exemplo, quando o usuário selecionar o botão de Login, o evento para o click evento usa o método createPopUp() criar um recipiente de TitleWindow, passando para ele o nome do arquivo MyLoginForm.mxml como o nome da classe.

Freqüentemente, você lança o valor de retorno do método createPopUp() para TitleWindow de forma que você pode manipular as propriedades do pop-up TitleWindow, como a versão seguinte do método showLogin() do exemplo seguinte:        

// A declaração de importação adicional para usar o recipiente de TitleWindow.        import mx.containers.TitleWindow;

        private function showLogin():void {           // Crie o recipiente de TitleWindow.            var helpWindow:TitleWindow = TitleWindow(PopUpManager.createPopUp(this, MyLoginForm, false));            // Adicione título para o title bar.            helpWindow.title=”Enter Login Information”;            // Faz o título ficar ligeiramente transparente.            helpWindow.setStyle(”borderAlpha”, 0.9);// Adicione um botão fechar.// Para fechar o recipiente, você deve também lidar com o evento close.

            helpWindow.showCloseButton=true;        }

Eu sempre os faço complicados mais do que eles precisam ser, mas é muito divertido, eu não posso evitar. Indiferentemente, aqui é um exemplo de 2 formulários de login construídos em Flex 2. Um uso simples de state para representar o principal, logging em, e state de erro que um formulário de login típico pode mostrar. O segundo faz exatamente a mesma coisa, baseado em quase o mesmo código, mas tem a adição de transições. Onde “estados” são mudanças para o componente quando for uma circunstância diferente, “transições” são mudanças entre esses estados. O componente do Flex tem estados, mas uma transição imediatamente muda de um estado até a próxima visualização. Se você adicionar transições, você tem controle de uma mudança do estado até um outro estado.

Ambos os exemplos abaixo são simples. Se você clicar submit, incapacitará os campos, e então irá para um estado de erro. Depois de 2 segundos, reajustará. Se você preencher algo para o username e senha, irá para um estado de sucesso em vez de um estado de erro. O topo usa uma tag do estado dentro de um componente de MXML. A parte inferior faz o mesmo com a adição de tags de transição para animar entre aqueles estados.

Tão mencionado, o código básico é exatamente o mesmo com 3 modificações entre Login.mxml, e Login2.mxml.

Eu removi a configuração da cor de borda para vermelha da tag do estado de erro, e coloquei-a na transição desde que eu desejei controle do tempo de quando ficou vermelho.

1. O logging no estado em Login2.mxml adiciona um SWFLoader que carrega uma animação.

2. O Login2.mxml não reseta ele mesmo 2 segundos depois do estado de erro ser mostrado. Ao invés, eu tenho o final da transição chama uma função para fazer isto. Este dá a transição bastante tempo para terminar antes de um novo estado ser mostrado.

3. Nós tivemos que usar ou destruir & criar este material manualmente, sem DisplayList se você não se importa, no Flex 1/1.5.

A habilidade de ter o mesmo componente representando seu estado declarativamente como também tem controle de como aquela mudança de estados é incrível! Em um mundo ideal, você pode comentar fora das tags de transição, e o componente ainda trabalhará; só que terá mudanças abruptas. Para mim, se você conseguir um design adequado/arquitetura de informações envolvidas, a experiência em ter transições apropriadas para guiar a atenção de usuários vs. mudanças de GUI abruptas.

Por que obscurecer coisas fora? Importância no degrade, e permita a profundidade de efeito de campo para permitir ao usuário enfocar mais no conteúdo.

Por que mostrar animações carregando? Para construir a confiança do usuário que a aplicação está “fazendo algo” vs. parecendo quebrada.

Nota:
Para ver o exemplo em funcionamento visite o site onde eu tirei o artigo para traduzir (Inglês), inclusive lá tem o download do fonte.
http://www.jessewarden.com/archives/2007/01/flex_2_states_t.html

Você pode usar o Flex Builder para criar um view state para uma aplicação ou um componente definido em um arquivo MXML. Primeiro, você cria um estado básico para a aplicação ou componente, e então você cria um segundo estado baseado no estado básico. Para criar um estado:

1. Usando as ferramentas de do Flex Builder, planeje o layout do estado básico de sua aplicação ou componente.

2. Na view state (windows>State), clique no botão new state na barra de ferramentas.

A caixa de diálogo New State aparece. A opção padrão é básico para a nova view state inicial.

3. Entre com um nome para o novo estado, e clique OK. O nome do novo estado aparece nos States view.

4. Use as ferramentas de layout no Flex Builder para modificar a aparência do estado. Você pode editar, movimento, adicionar, ou apagar componentes. Como você faz mudanças, as mudanças definidas no novo estado se tornam parte do código MXML.

5. Defina um manipulador de evento que deixa o usuário trocar para o novo estado.

Criando um state baseado em um state existente

Você pode usarFlex Builder para criar um estado baseado em um estado que não é o estado básico. Para criar um estado baseado em outro estado:

1. Assegure que o arquivo MXML contém pelo menos um estado que não é o estado básico. Para mais informações, vejam “Criar um state view”

2. Na view state (windows>state), cliquem no botão New State. A caixa de diálogo New State aparece.

3. Entre com um nome para o novo estado.

4. Do menu pop-up Based On, selecione o estado em que vai basear o novo estado. Na lista pop-up que vai aparecer selecione o state definido no documento atual.

5. Clique OK. O novo estado aparece na State view.

6. Use as ferramentas de layout do Flex Builder para modificar o layout. Você pode modificar movimento, adicionar, ou apagar componentes. Quando você faz mudanças para o estado, elas são registradas no MXML.

7. Defina um manipulador de evento para trocar para o novo estado.

Definindo um modelo de dadosVocê pode definir um modelo de dados em uma tag de MXML, uma função ActionScript, ou uma classe ActionScript. Em geral, você devia usar modelos baseados em mxml para estruturas de dados simples, e usar ActionScript para estruturas mais complexas e lógica de negócios Cliente-side.

NOTA:
As tags <mx:Model> e <mx:XML> são tags compiladas pelo Flex e não corresponde diretamente a classe ActionScript. O Adobe Flex 2 Language Reference contém informações sobre estas tags e outras tags do compilador.

Você pode colocar uma tag <mx:Model> ou uma tag <mx:XML> em um arquivo de aplicação de Flex ou em um arquivo de componente de MXML. A tag deve ter um valor de iD, e ele não pode ser a tag raiz de um componente de MXML.

A tag <mx:Model>

O tipo mais comum de modelo baseado em MXML é a tag <mx:Model>, que é compilada em um Objeto de ActionScript, ou uma árvore de objetos quando seus dados estiverem em uma hierarquia, sem informações de tipo. As folhas de Objeto Tree são valores scalar . Porque modelos que são definidos em <mx:Model> não contêm nenhuma informações de tipo ou lógica de negócios, você deve usar eles só para os casos mais simples. Defina modelos em classes ActionScript quando você precisar das propriedades digitadas ou você quiser adicionar lógica de negócios. O exemplo seguinte mostra um modelo de empregado declarado em um <mx:Model><mx:Model id=”employeemodel”>

<employee>
<name>
<first/>
<last/>
</name>
<department/>
<email/>
</employee>
</mx:Model>

Uma tag filha <mx:Model>sem valor é considerada nula. Se você quiser uma série vazia ao invés, você pode usar uma expressão que liga como o valor da tag, como o exemplo seguinte mostra:
<mx:Model id=”employeemodel”>

<employee>
<name>
<first>{”"}</first>
<last>{”"}</last>
</name>
<!–departamento é nulo–>
<department/>
<!–email é nulo–>
<email/>
</employee>
</mx:Model>:Model>

Se você fornecer uma instância de uma tag filha em um <mx:Model>, Não existe nenhum modo para o Flex saber se você pretende que ele será um array ou uma instância de propriedade única. Você pode trabalhar ao redor desta limitação usando um <mx:Object> em vez de um <mx:Model> e declarando um <mx:Array> dentro do <mx:Object>, como o exemplo seguinte mostra. O <mx:Object> e o <mx:Array> declaram Objeto de ActionScript e objetos de Array, respectivamente. Você pode também usar uma classe ActionScript para trabalhar em torno da mesma limitação do <mx:Model>. <mx:Object id=”model1″>

<employees>
<mx:Object>
<mx:Array>
<name>
<mx:Object>
<first>
<mx:String></mx:String>
</first>
<last>
<mx:String></mx:String>
</last>
</mx:Object>
</name>
<department>
<mx:String></mx:String>
</department>
<email>
<mx:String></mx:String>
</email>
</mx:Object>
</employees>
</mx:Array>
</mx:Object>

NOTA DO TRADUTOR
Apesar de o original inglês estar assim, é possível que haja um erro no fechamento das tags </employees> e </array> (ainda não testei)

Você pode usar um modelo de dados para armazenar aplicação-dados específicos. Um modelo de dados é um objeto de ActionScript que fornece propriedades para armazenar dados, e opcionalmente contém métodos para funcionalidade adicional. Os modelos de dados fornecem um caminho para armazenar dados na aplicação de Flex antes de ser enviado para o servidor, ou armazenar dados enviados do servidor antes de usar-lo na aplicação.

Você pode declarar um modelo de dados simples que não exige métodos em uma tag <mx:Model>, <mx:XML>, ou <mx:XMLList>.

O exemplo seguinte mostra uma aplicação que contém TextInput para entrar em informações de contato pessoal e um modelo de dados, representada pela tag <mx:Model>, para armazenar as informações de contato:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<!– Um modelo de dados chamado “contact” lojas de informações de contato. A propriedade de texto de cada TextInput mostrado acima é passado para um campo do modelo de dados. –>
<mx:Model id=”contact”>
<info>
<homePhone>{homePhoneInput.text}</homePhone>
<cellPhone>{cellPhoneInput.text}</cellPhone>
<email>{emailInput.text}</email>
</info>
</mx:Model>
<mx:Panel title=”My Application” paddingTop=”10″ paddingBottom=”10″
paddingLeft=”10″ paddingRight=”10″ >
<mx:TextInput id=”homePhoneInput”
text=”This isn’t a valid phone number.”/>
<mx:TextInput id=”cellPhoneInput” text=”(999)999-999″/>
<mx:TextInput id=”emailInput” text=”me@somewhere.net”/>
</mx:Panel>
</mx:Application>

Serviços Remote-procedure-call (RPC) deixam sua aplicação interagir com servidores remotos para fornecer dados para suas aplicações, ou a sua aplicação enviar dados para um servidor. O flex é projetado para interagir com vários tipos de serviços de RPC que fornecem acesso a local e remoto server-side. Por exemplo, uma aplicação de Flex pode conectar a um serviço da web que usa o Simple Object Access Protocol (SOAP), um objeto de Java que reside no mesmo servidor de aplicação como Flex usando AMF, ou um URL de HTTP que retorna para XML. AMF é o protocolo usado em Flash Remoting MX. Os componentes de MXML que fornecem acesso de dados são chamados componentes de RPC. MXML inclui os tipos seguintes de componentes de RPC:

• WebService fornece acesso SOA baseado em serviços da web
• HTTPService fornece acesso a HTTP URLs que retornam dados
• RemoteObject fornece acesso a objetos Java usando o protocolo de AMF (Flex Data Service)

O exemplo seguinte mostra uma aplicação que chama um serviço da web que fornece informações de tempo, e exibe a temperatura atual para um dado CEP. A aplicação liga o cep que um usuário entra em um controle TextInput para um parâmetro de entrada no serviço da web. Liga o valor da temperatura atual contido no serviço da web resulta para uma TextArea.

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:WebService id=”WeatherService” wsdl=”http://example.com/ws/WeatherService?wsdl” useProxy=”false”>
<mx:operation name=”GetWeather”>
<mx:request>
<zipCode>
{zip.text}
</zipCode>
</mx:request>
</mx:operation>
</mx:WebService>

<mx:Panel title=”Minha Aplicação” paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>
<mx:TextInput id=”zip” width=”200″ text=”Código Postal por favor?”/>
<mx:Button width=”120″ label=”Get Weather” click=”WeatherService.GetWeather.send();”/>
<mx:Label text=”Local:”/>
<mx:TextArea text=”{WeatherService.GetWeather.lastResult.Location}”/>
<mx:Label text=”Temperatura:”/>
<mx:TextArea text=”{WeatherService.GetWeather.lastResult.CurrentTemp}”/>
</mx:Panel>
</mx:Application>

Usando MXML para ativar código run-time

As aplicações de flex são dirigidas de run-time eventos, como quando um usuário selecionar um controle de Botão. Você pode especificar event listeners, que consistam em código para manipulação de eventos run-time, nas propriedades de evento de tag de MXML. Por exemplo, a tag <mx:Button> tem propriedade de evento CLICK em que você pode especificar código ActionScript que executa quando o controle de Botão for clicado em tempo de execução. Você pode especifica códigos simples de event listener diretamente em propriedades de evento. Para usar código mais complexo, você pode especificar o nome de uma função ActionScript definido em uma tag <mx:Script>. O exemplo seguinte mostra a uma aplicação que contém um controle de Botão e um controle TextArea. A propriedade CLICK do Botão contém um event listeners simples que fixa o valor do controle TextArea é propriedade de texto para o texto Hello World

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” themeColor=”haloSilver” backgroundGradientColors=”[#c0c0c0, #eeeeee]”>
<mx:Panel title=”My Application” paddingTop=”10″ paddingBottom=”10″
paddingLeft=”10″ paddingRight=”10″>
<mx:TextArea id=”textarea1″/>
<mx:Button label=”Submit” click=”textarea1.text=’Hello World’;”/>
</mx:Panel>
</mx:Application>

A seguinte imagem mostra a aplicação rodando no browser:

O exemplo seguinte mostra ao código para uma versão da aplicação em que o event listener está contido em uma função ActionScript em uma tag <mx:Script>:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
private function hello():void {
textarea1.text=”Hello World”;
}
]]>

</mx:Script>

<mx:Panel title=”My Application” paddingTop=”10″ paddingBottom=”10″
paddingLeft=”10″ paddingRight=”10″ >
<mx:TextArea id=”textarea1″/>
<mx:Button label=”Submit” click=”hello();”/>
< /mx:Panel>
</mx:Application>

Usando a propriedade iD com tags MXML

Com algumas exceções (vejam “regras de tags MXML” na página 52 na versão original em inglês), uma tag de MXML tem uma propriedade ID opcional, que deve ser única dentro do MXML. Se uma tag tem uma propriedade ID, você pode referenciar o objeto correspondente em ActionScript. No exemplo seguinte, resultados de um pedido de serviço da web são localizados na função writeToLog:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:VBox>
<mx:TextInput id=”myText” text=”Hello World!” />
<mx:Button id=”mybutton” label=”Get Weather” click=”writeToLog();”/> </mx:VBox>

<mx:Script>
<![CDATA[

private function writeToLog():void {

trace(myText.text);

}
]]>

</mx:Script>
</mx:Application>

Este código pede para o compilador de MXML autogerar uma variável pública chamada myText que contém uma referência para aquela instância de TextInput. Esta variável deixa você acessar a instância de componente em ActionScript. Você pode explicitamente se referir ao controle TextInput com sua iD de referência em qualquer classe ActionScript ou script block. Referindo-se à instância do componente, você pode modificar suas propriedades e chamar seus métodos. Porque cada valor iD em um MXML é diferente, todos os objetos em um arquivo são parte do mesmo layout. Vocês não qualifica um objeto provendo referência ao seu pai com anotação de ponto, como em myVBox.myText.text.

Atingindo uma interface de usuário usando containers

No Flex, modo design view, componentes de interface de usuário representam a view. A linguagem MXML suporta dois tipos de componentes de interface de usuário: Controls e containers. Os controles são forma de elementos, como buttons, text Fields, e list boxes. Os recipientes são regiões retangulares da tela que contém controles e outros recipientes. Você usa componentes de recipiente para atingir uma interface de usuário, e para controlar navegação de usuário pela aplicação. Os exemplos de recipientes de layout incluem o recipiente de HBox para atingir componentes filhos horizontalmente, o recipiente de VBox para atingir componentes filhos verticalmente, e o recipiente de Grid para atingirem componentes filhos em linhas e colunas. Os exemplos de recipientes de navegação incluem o recipiente de TabNavigator para criar tabbed panels, o recipiente de navegação Accordion para criar painéis desmontáveis, e o recipiente de navegação ViewStack para atingirem painéis em cima de um ao outro. A classe de Recipiente é a classe básica de todos Flex Container Classes. Os recipientes que estendem a classe de Recipiente adicionam sua própria funcionalidade para atingir componentes filhos. As propriedades típicas de uma tag de recipiente incluem iD, largura, e altura. A imagem seguinte mostra um exemplo de aplicação Flex que contém um controle de Lista no lado esquerdo da interface de usuário e um recipiente de TabNavigator à direita. Ambos os controles são incluso em um recipiente de Painel:

Use o seguinte código para implementar essa aplicação:

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Panel title=”My Application” paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>
<mx:HBox>
<mx:List>
<mx:dataProvider> List control TabNavigator container Panel
containerDeveloping applications 27
<mx:Array>
<mx:String>Item 1</mx:String>
<mx:String>Item 2</mx:String>
<mx:String>Item 3</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:List
<mx:TabNavigator borderStyle=”solid”>
<mx:VBox label=”Pane1″ width=”300″ height=”150″>
<mx:TextArea text=”Hello World”/>
<mx:Button label=”Submit”/>
</mx:VBox>
<mx:VBox label=”Pane2″ width=”300″ height=”150″> </mx:VBox>
</mx:TabNavigator>
</mx:HBox>
</mx:Panel>
</mx:Application>

O controle List e TabNavigator são atingidos lado a lado porque eles estão em um HBox. Os controles no TabNavigator são atingidos de cima para baixo porque eles estão em um recipiente VBox

Adicionando controles de interface de usuário

O flex inclui uma seleção grande de componentes de interface de usuário, como Button, TextInput, e ComboBox. Depois de você definir o plano e navegação de sua aplicação usando componentes de recipiente, você adiciona os controles de interface de usuário. O exemplo seguinte contém um recipiente HBox (caixa horizontal) com dois controles filhos, um TextInput e um Botão. Um recipiente HBox atinge seus filhos horizontalmente.

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:HBox>
<mx:TextInput id=”myText”/>
<mx:Button click=”storeZipInDatabase(myText.text)”/>
</mx:HBox>
</mx:Application>

As propriedades típicas de uma tag incluem ID, width, height, fontSize, color, event listeners para eventos como click e change, e efeitos triggers como showEffect e rollOverEffect

Sobre XML encoding

A primeira linha do documento especifica uma declaração opcional da versão de XML. É uma boa prática incluir informações de encoding que especifica como o arquivo MXML é codificado. Muitos editores deixam você selecionar a opções de codificação de um arquivo. Em sistemas operacionais Nortes-americano, ISO-8859-1 é o formato de codificação dominante, e a maioria de programas usam aquele formato à revelia. Você pode usar o UTF-8 para assegurar compatibilidade no máximo de plataforma. UTF-8 fornece um número sem igual para todo caracter em um arquivo, e ele é plataforma, programa, e idioma-independente. Se você especificar um formato de codificação, deve combinar o arquivo codificado que você usa. O exemplo seguinte mostra a uma tag de declaração de XML que especifica o formato UTF-8:

<?xml version=”1.0″ encoding=”utf-8″?>

Sobre o <mx:Application>

Além de ser a tag raiz de uma aplicação Flex, a tag <mx:Application> representa um recipiente de Aplicação. Um recipiente é um componente de interface dos usuários que contém outros componentes e tem regras de layout embutida para posicionamento de seus componentes filhos. À revelia, um recipiente de Aplicação atinge seus filhos verticalmente de cima para baixo. Você pode aninhar outros tipos de recipientes dentro de um recipiente de Aplicação, como o recipiente de Painel mostrado acima, para posicionar componentes de interface de usuários de acordo com os outros.

Sobre propriedades das tags MXML

As propriedades de uma tag MXML, como o texto, propriedades fontWeight, e fontSize da tag <mx:Label>, deixam você declarativamente configurar o estado inicial do componente. Você pode usar código ActionScript em uma tag <mx:Script> para mudar o estado de um componente em tempo de execução.

Compilando MXML para um arquivo SWF

Você pode desenvolver sua aplicação como um aquivo compilado SWF ou, se você tiver Adobe Data Service, você pode desenvolver sua aplicação como um conjunto de MXML e arquivos AS. Se você estiver usando Flex Builder, você compila e executa o arquivo SWF de dentro Flex Builder. Depois de sua aplicação executar corretamente, você desenvolve copiando-o para um diretório em seu servidor web ou servidor de aplicação. Os usuários então acessam o SWF desenvolvido fazendo um pedido de HTTP no form:

http://hostname/path/filename.swf

O Flex também fornece um comando-linha compilador MXML, mxmlc, isso deixa você compilar arquivos MXML. Você pode usar mxmlc para compilar hello.mxml de uma linha de comando, como mostra o exemplo seguinte:

cd flexInstallDir/bin mxmlc –show-actionscript-warnings=true –strict=true -file-specs c:/appDir/hello.mxml

Neste exemplo, flexInstallDir é o diretório da instalação do Flex, e appDir é o diretório contendo hello.mxml. O resultante SWF, hello.swf, é gravado no mesmo diretório do hello.mxml.