Salve galera,
Hoje vou mostrar um pequeno “Hello World!” no Adobe Air para quem quer começar a descobrir a ferramenta.

Uma das grandes vantagens do Adobe Air é o fato de você construir programas para desktop e ele rodar em qualquer sistema operacional utilizando tecnologias conhecidas da Web como Html, Ajax e Flash.
Não vou me ater a detalhes pequenos da ferramenta, como linguagem que usa, onde ficam os componentes, quais são, etc. Vou levar para um lado mais prático para construirmos o exemplo de maneira rápida. Caso passe algo em branco para quem está começando por favor, é só entrar em contato.

Vou usar Adobe Flash Builder, que é a nova versão do Adobe Flex lançada em Março desse ano.
Você pode fazer o download da ferramenta no site da Adobe neste Link.
O Flex traz a integração com desenvolvimento para o Adobe Air desde o Flex 3.

Crie um novo projeto Flex clicando com o botão direito do mouse dentro da janela Package explorer selecionando New > Flex Project como na imagem abaixo.

É aberta uma janela onde você dá um nome de sua preferência para o seu projeto e seleciona o tipo da aplicação em Application type. Como nosso objetivo é o Air, selecione Desktop (runs in Adobe Air). Veja a imagem.

Se você já tem um pouco mais de experiência com a ferramenta pode alterar o caminho do projeto e outras opções, caso contrário mantenha o padrão para não ter dor de cabeça.
Após clicar em Finish, é criado seu projeto e aberto o arquivo principal da sua aplicação que tem o mesmo nome que você deu ao projeto.

Você se depara com a Aba Source onde temos o código MXML usado pelo Flex e a Aba Design que vai facilitar na montagem da cara da sua aplicação. É para lá que vamos, onde no Centro, que chamamos de palco, temos uma preview da sua aplicação (que está em branco), e do lado direito a janela de propriedades e de aparência.

Assim que você troca para o modo design na primeira vez, já vem selecionado o componente Window Application, que seria para o Air como a tag body para o HTML. Na lateral direita, a janela de propiedades mostra as cores do Background e do Preloader.

Primeiro vamos mudar a cor de fundo. Para isso, clique no branco que está na propriedade Background. Ao fazer isso é exibida uma color picker onde você pode escolher a cor de sua preferência. Eu fiquei com um preto.

Ao clicar em Ok você já vê a cor mudar na parte do Design.

Certo. Na lateral esquerda, abaixo da janela Package Explorer, temos as opções dos componentes. Eles são organizados em pastas para facilitar sua localização. Dando uma rodada por eles você encontra dentro da pasta Controls o componente Label. Confira Imagem.

Clique e arraste esse componente para cima da sua aplicação. Você verá um sinal de mais no Mouse indicando que será adicionado. Ao soltar o componente ali você vê um texto escrito em sua aplicação.

Dependendo a cor que você escolheu para o seu fundo, você não vai ver nada.
A cor padrão da fonte do componente Label é preta. Você pode mudar essa cor na caixa de propriedades na lateral direita, da mesma forma que fez com o fundo. Atenção, o componente deve estar selecionado para que as propiedades dele apareçam.

Após mudar a cor da fonte, para branco no meu caso, já alterei o tamanho da fonte para 36 para visualizar melhor.

Ficando assim, confira:

Agora só falta mudar o texto.
Para isso você tem a opção de dar dois cliques em cima do componente ou usar a caixa Text na janela de propriedades. Escreva o texto de sua preferência. O componente será adaptado para o tamanho do seu texto, mas você pode facilmente alterar seu tamanho puxando seus cantos dentro do palco. Da mesma maneira você pode posicionar o componente dentro da aplicação como preferir arrastando ele com o Mouse. A minha ficou dessa forma.

Agora é salvar (Ctrl + s) e rodar a sua aplicação para ver como ela vai funcionar.
Para isso Clique no botão Run (é como um Play) que fica acima da janela Package Explorer.

Feito! O seu aplicativo irá abrir com o texto conforme você montou.

Está feito a sua aplicação em Air usando o Adobe Flash Builder.
Procure experimentar outros componentes e suas propriedades para ver como ficam.

Dúvidas? Só entrar em contato.
Abraços!!

Be Sociable, Share!

•