Criação do seu primeiro aplicativo do AIR baseado em HTML com o SDK do AIR

Para uma ver uma ilustração rápida e prática de como funciona o Adobe® AIR®, use essas instruções para criar e empacotar um aplicativo simples "Hello World" do AIR baseado em HTML.

Para começar, você deve ter instalado o runtime e configurar o SDK do AIR. Você via usar o AIR Debug Launcher (ADL) e a AIR Developer Tool (ADT) neste tutorial. O ADL e o ADT são programas utilitários de linha de comando e podem ser encontrados no diretório bin do SDK do AIR (consulte Instalação do SDK do AIR ). Este tutorial parte do princípio de que você já está familiarizado com os programas em execução da linha de comando e sabe como configurar as variáveis do ambiente do caminho necessário para o seu sistema operacional.

Nota: Se você for um usuário do Adobe ® Dreamweaver®, leia Criação do primeiro aplicativo do AIR baseado em HTML com o Dreamweaver .
Nota: Os aplicativos do AIR baseados em HTML só podem ser desenvolvidos para os perfis desktop e extendedDesktop. O perfil móvel não é compatível.

Criar os arquivos do projeto

Cada projeto do AIR baseado em HTML deve conter os dois arquivos a seguir: um arquivo descritor do aplicativo, que especifica os metadados do aplicativo, e uma página HTML de nível superior. Além desses arquivos necessários, este projeto inclui um arquivo de código em JavaScript, AIRAliases.js , que define as variáveis alias para as classes API do AIR.

  1. Crie um diretório chamado HelloWorld para conter os arquivos de projeto.

  2. Crie um arquivo XML, chamado HelloWorld-app.xml .

  3. Crie um arquivo HTML chamado HelloWorld.html .

  4. Copie AIRAliases.js da pasta de estruturas do SDK do AIR no diretório do projeto.

Criar o arquivo descritor do aplicativo do AIR

Para começar a desenvolver seu aplicativo do AIR, crie um arquivo descritor do aplicativo XML com a seguinte estrutura: 

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

  1. Abra HelloWorld-app.xml para edição.

  2. Acrescente o elemento raiz <application> , incluindo o atributo de espaço de nome do AIR:

    <application xmlns="http://ns.adobe.com/air/application/2.7"> O último segmento do namespace, “2.7”, especifica a versão do runtime requerida pelo aplicativo.

  3. Acrescente o elemento <id> :

    <id>examples.html.HelloWorld</id> O id do aplicativo identifica exclusivamente seu aplicativo junto com o ID de editor (que o AIR cria do certificado usado para assinar o pacote do aplicativo). O ID de aplicativo é usada para instalação, acesso ao diretório privado de armazenamento do sistema de arquivos, acesso ao armazenamento criptografado privado e comunicação entre aplicativos.

  4. Acrescente o elemento <versionNumber> :

    <versionNumber>0.1</versionNumber> Ajuda os usuários a determinar qual versão do aplicativo eles estão instalando.

    Nota: Se você estiver utilizando o AIR 2 ou anterior, deverá utilizar o elemento <version> em vez do elemento <versionNumber> .

  5. Acrescente o elemento <filename> :

    <filename>HelloWorld</filename> O nome usado para o executável do aplicativo, diretório de instalação e outras referências ao aplicativo no sistema operacional.

  6. Acrescente o elemento <initialWindow> que contém os seguintes elementos filho para especificar as propriedades da janela inicial do seu aplicativo:

    <content>HelloWorld.html</content> Identifica o arquivo HTML raiz que o AIR deve carregar.

    <visible>true</visible> Torna a janela visível imediatamente.

    <width>400</width> Ajusta a largura da janela (em pixels).

    <height>200</height> Ajusta a altura da janela.

  7. Salve o arquivo. O arquivo descritor completo do aplicativo deve se parecer com o seguinte: 

    <?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/2.7"> 
    <id>examples.html.HelloWorld</id> 
    <versionNumber>0.1</versionNumber> 
    <filename>HelloWorld</filename> 
    <initialWindow> 
        <content>HelloWorld.html</content> 
        <visible>true</visible> 
        <width>400</width> 
        <height>200</height> 
    </initialWindow> 
</application>

Este exemplo só define algumas propriedades possíveis do aplicativo. Para ver o conjunto completo de propriedades do aplicativo, que lhe permitem especificar coisas como cromo e tamanho da janela, transparência, diretório padrão de instalação, tipos de arquivo associados e ícones do aplicativo, consulte Arquivos descritores do aplicativo do AIR .

Criar a página HTML do aplicativo

Agora você precisa criar uma página HTML simples que serve como arquivo principal para o aplicativo do AIR.

  1. Abra o arquivo HelloWorld.html para edição. Acrescente o seguinte código HTML: 

    <html> 
<head> 
    <title>Hello World</title> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

  2. Na seção <head> do HTML, importe o arquivo AIRAliases.js : 

    <script src="AIRAliases.js" type="text/javascript"></script>

    O AIR define uma propriedade chamada runtime no objeto da janela HTML. A propriedade de runtime fornece acesso às classes incorporadas do AIR, usando o nome do pacote totalmente qualificado da classe. Por exemplo, para criar um objeto File do AIR, você poderia acrescentar a instrução seguinte em JavaScript: 

    var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

    O arquivo AIRAliases.js define os aliases convenientes para as APIs mais úteis do AIR. Usando o AIRAliases.js , você poderia encurtar a referência ao arquivo File para o seguinte: 

    var textFile = new air.File("app:/textfile.txt");

  3. Abaixo da tag de script AIRAliases, acrescente outra tag de script contendo uma função de JavaScript para lidar com o evento onLoad : 

    <script type="text/javascript"> 
function appLoad(){ 
    air.trace("Hello World"); 
} 
</script>

    A função appLoad() simplesmente chama a função air.trace() . A mensagem do traçado é impressa no console de comando quando você executa o aplicativo usando o ADL. As instruções de traçado podem ser muito úteis para depuração.

  4. Salve o arquivo.

Seu arquivo HelloWorld.html deve se parecer com o seguinte: 

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

Testar o aplicativo

Para executar e testar o aplicativo da linha de comando, use o utilitário AIR Debug Launcher (ADL). O executável ADL pode ser encontrado no diretório bin do SDK do AIR. Se você ainda não configurou o SDK do AIR, consulte Instalação do SDK do AIR .

  1. Abra um console ou shell de comando. Troque para o diretório que você criou para este projeto.

  2. Execute o seguinte comando: 

    adl HelloWorld-app.xml

    É aberta uma janela do AIR, exibindo seu aplicativo. Além disso, a janela de console exibe a mensagem que resulta da chamada air.trace() .

    Para mais informações, consulte Arquivos descritores do aplicativo do AIR .

Criar o arquivo de instalação do AIR

Quando seu aplicativo é executado com sucesso, você pode usar o utilitário ADT para empacotar o aplicativo em um arquivo de instalação do AIR. Um arquivo de instalação do AIR é um arquivo de compactação que contém todos os arquivos do aplicativo, que você pode distribuir para seus usuários. Você deve instalar o Adobe AIR antes de instalar um arquivo AIR empacotado.

Para garantir a segurança do aplicativo, todos os arquivos de instalação do AIR devem ser digitalmente assinados. Para fins de desenvolvimento, você pode gerar um certificado básico autoassinado com o ADT ou outra ferramenta de geração de certificados. Também é possível comprar um certificado comercial com assinatura de código de uma autoridade de certificado comercial como a VeriSign ou a Thawte. Quando os usuários instalam um arquivo AIR autoassinado, o editor é exibido como "desconhecido" durante o processo de instalação. Isso ocorre porque um certificado autoassinado só garante que o arquivo AIR não tenha sido alterado desde sua criação. Não há nada que impeça alguém de autoassinar um arquivo AIR disfarçado e apresentá-lo como seu aplicativo. Para os arquivos AIR liberados ao público, um certificado comercial verificável é altamente recomendado. Para uma visão geral de questões de segurança do AIR, consulte Segurança do AIR (para desenvolvedores em ActionScript) ou AIR security (para desenvolvedores em HTML).

Gerar um certificado autoassinado e par de chaves

No prompt de comando, insira o comando a seguir (o executável ADT está no diretório bin do SDK do AIR): 
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

O ADT gera um arquivo de keystore chamado sampleCert.pfx que contém um certificado e uma chave privada relacionada.

Este exemplo usa o número mínimo de atributos que podem ser definidos para um certificado. O tipo de chave deve ser 1024-RSA ou 2048-RSA (consulte Assinatura de aplicativos AIR ).

Criar o arquivo de instalação do AIR

No prompt de comando, digite o seguinte comando (em uma única linha): 
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

Você terá que fornecer a senha do arquivo do keystore.

O argumento HelloWorld.air é o arquivo AIR que o ADT produz. HelloWorld-app.xml é o arquivo descritor do aplicativo. Os argumentos subsequentes são os arquivos usados pelo seu aplicativo. Esse exemplo só usa dois arquivos, mas você pode incluir qualquer número de arquivos e diretórios. O ADT verifica se o principal arquivo de conteúdo (HelloWorld.html) está incluído no pacote, mas se você esquecer de incluir AIRAliases.js, seu aplicativo simplesmente não funcionará.

Depois da criação do pacote AIR, você pode instalar e executar o aplicativo clicando duas vezes no arquivo de pacote Você também pode digitar o nome do arquivo AIR como comando em um shell ou janela de comando.

Próximas etapas

No AIR, o código de HTML e JavaScript geralmente se comporta da mesma forma que se comportaria em um navegador típico. (Na verdade, o AIR usa o mesmo mecanismo de renderização WebKit usado pelo navegador da Web Safari.) No entanto, há algumas diferenças importantes que você deve entender ao desenvolver aplicativos HTML no AIR. Para mais informações sobre estas diferenças e outros tópicos importantes, consulte Programming HTML and JavaScript .