Criando seu primeiro aplicativo desktop Flex AIR no Flash Builder

Para ver uma ilustração rápida e prática de como funciona o Adobe® AIR®, use estas instruções para criar e empacotar um aplicativo simples "Hello World" do AIR baseado no arquivo SWF, usando o Adobe® Flash® Builder.

Caso ainda não o tenha feito, efetue o download e instale o Flash Builder. Além disso, baixe e instale a versão mais recente do Adobe AIR, que está localizada aqui: www.adobe.com/go/air_br.

Crie um projeto do AIR

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.

Gravação do código do aplicativo AIR

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:

  1. No painel de navegação do Flex, localize o arquivo de descrição do aplicativo no diretório de origem do projeto. Se você chamou o seu projeto de AIRHelloWorld, esse arquivo se chama AIRHelloWorld-app.xml.

  2. Clique duas vezes no arquivo de descrição do aplicativo para editá-lo no Flash Builder.

  3. No código XML, localize as linhas comentadas para as propriedades systemChrome e transparent (da propriedade initialWindow). Retire os comentários. (Retire os delimitadores de comentário "<!--" e "-->" delimitadores de comentário.)

  4. Defina o valor de texto da propriedade systemChrome como none, como aparece a seguir:

    <systemChrome>none</systemChrome>
  5. Defina o valor de texto da propriedade transparent como true, como aparece a seguir:

    <transparent>true</transparent>
  6. Salve o arquivo.

Teste do aplicativo AIR

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:

  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.

Nota: Se o aplicativo não for compilado, conserte a sintaxe ou os erros de digitação que você inseriu de forma inadvertida no código. Os erros e advertências são exibidos na visualização Problemas no Flash Builder.

Empacotamento, assinatura e execução do aplicativo AIR

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.