Criando seu primeiro aplicativo desktop Flex AIR no Flash Builder

O Flex Builder inclui ferramentas para desenvolver e empacotar aplicativos AIR.

Você começa a criar aplicativos AIR no Flash Builder ou Flex Builder da mesma forma que cria projetos de aplicativo com base no Flex: definindo um novo projeto.

1. Abra o Flash Builder.

2. Selecione Arquivo > Novo > Projeto Flex.

3. Insira o nome do projeto: AIRHelloWorld.

4. No Flex, os aplicativos AIR são considerados um tipo de aplicativo. Você tem duas opções de tipos:

   • um aplicativo da web que executa no Adobe® Flash® Player

   • um aplicativo de computador pessoal que executa no Adobe AIR

   Selecione Desktop como tipo de aplicativo.

5. Clique em Concluir para criar o projeto.

Os projetos do AIR consistem inicialmente em dois arquivos: o arquivo MXML principal e o arquivo XML do aplicativo (conhecido como arquivo de descrição do aplicativo). O último arquivo especifica as propriedades do aplicativo.

Para obter mais informações, consulte Desenvolvimento de aplicativos do AIR com Flash Builder.

Para gravar o código do aplicativo "Hello World", você edita o arquivo MXML do aplicativo (AIRHelloWorld.mxml), que é aberto no editor. (Se o arquivo não estiver aberto, use o Navegador de Projeto para abri-lo.)

Os aplicativos Flex AIR no desktop estão contidos na tag WindowedApplication de MXML. A tag WindowedApplication de MXML cria uma janela simples que inclui controles básicos de janela, como barra de título e o botão fechar.

1. Acrescente um atributo title ao componente WindowedApplication e atribua-o ao valor "Hello World":

   ?xml version="1.0" encoding="utf-8"?> 
   <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          title="Hello World"> 
   </s:WindowedApplication>

2. Acrescente um componente Label ao aplicativo (coloque-o dentro da tag WindowedApplication), ajuste a propriedade text do componente Label como "Hello AIR" e ajuste as restrições de layout para mantê-lo centrado, como mostrado abaixo:

   <?xml version="1.0" encoding="utf-8"?> 
   <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          title="Hello World"> 
    
       <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
   </s:WindowedApplication>

3. Acrescente o bloco do estilo a seguir imediatamente depois de abrir a tag WindowedApplication e antes da tag de componente de rótulo que você acabou de inserir:

   <fx:Style> 
       @namespace s "library://ns.adobe.com/flex/spark"; 
       s|WindowedApplication 
       { 
        
   skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
           background-color:#999999; 
           background-alpha:"0.7"; 
       }          
   </fx:Style>

Essas configurações de estilo se aplicam a todo o aplicativo, garantindo um plano de fundo da janela um cinza levemente transparente.

O código do aplicativo agora se parece com o seguinte:

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       title="Hello World"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

Em seguida, você vai alterar algumas configurações no descritor do aplicativo para permitir que o aplicativo seja transparente:

Para testar o código do aplicativo que você escreveu, execute-o no modo de depuração.

1. Clique no botão Depurar na barra de ferramentas principal do

   Você também pode selecionar o comando Executar > Depurar > AIRHelloWorld.

   O aplicativo AIR resultante deve ter a aparência do exemplo a seguir:

   Visualizar gráfico inteiro

2. Usando as propriedades horizontalCenter e verrticalCenter do controle Label, o texto é colocado no centro da janela. Move ou redimensione a janela como você faria em qualquer outro aplicativo do computador.

Agora você está pronto para empacotar o aplicativo "Hello World" em um arquivo AIR para distribuição. O arquivo AIR é um arquivo de compactação que contém os arquivos do aplicativo, os quais são todos arquivos contidos na pasta bin do projeto. Neste exemplo simples, esses arquivos são os arquivos SWF e XML do aplicativo. Você distribui o pacote do AIR aos usuários, que então o utilizam para instalar o aplicativo. Uma etapa necessária neste processo é assiná-lo digitalmente.

1. Garanta que o aplicativo não contenha erros de compilação e seja executado como esperado.

2. Selecione Projeto > Exportar versão da compilação.

3. Verifique se o projeto AIRHelloWorld e o aplicativo AIRHelloWorld.mxml estão listados no projeto e no aplicativo.

4. Selecione a opção Exportar como pacote assinado do AIR. Em seguida, clique em Avançar.

5. Se você já tiver um certificado digital, clique em Procurar para localizá-lo e selecioná-lo.

6. Se precisar criar um novo certificado digital autoassinado, selecione Criar.

7. Insira as informações necessárias e clique em OK.

8. Clique em Concluir para gerar o pacote do AIR, que se chama AIRHelloWorld.air.

Agora você pode instalar e executar o aplicativo do Navegador de Projeto no Flash Builder ou no sistema de arquivos clicando duas vezes no arquivo AIR.