3. Instalando e usando o Flash Builder 4

Aprendo Fácil - Adobe Flex 4

Instalando o Flash Builder e Flash Player.

Agora vamos ver opções de configuração e versões do Flash Builder e as diferenças entre as ferramentas de instalação e pastas de projetos. Terminaremos a aula vendo uma visão geral do Flash Player e Flash Player Debugger.

O Flash Builder 4, anteriormente conhecido como Flex Builder, é um produto comercial da Adobe para criar aplicativos Flash utilizando o framework Flex. Esta ferramenta inclui tudo que que vem no Flex SDK e no Flex Framework além de características exclusivas para aumentar sua produtividade.

O Flash Builder é baseado na plataforma de desenvolvimento open source Eclipse.

Eclipse é baseado no software originalmente lançado pela IBM e centenas de plugins para o ambiente têm sido criados para suporte aos desenvolvedores de software, trabalhando em muitas linguagens de programação diferentes, incluindo ColdFusion, PHP e Java.

As versões do Flash Builder

O Flash Builder está disponível em duas versões: Standard e Premium.

A versão Standard tem a maioria dos recursos que os desenvolvedores precisam para acelerar e apoiar o seu desenvolvimento Flex.

A versão Premium é destinado a construção de aplicações críticas e inclui todas as funcionalidades da versão Standard, mais recursos para usuários empresariais, incluindo perfis de memória e desempenho e testes automatizados.

O suporte de visualização de dados no Flash Builder Premium permite-lhe criar gráficos, dashboards e relatórios visuais ricos com agrupamento complexo e apresenta resumo desses elementos.

Depois de ter instalado o Flash Builder e começar a utilizá-lo, haverá momentos em que você precisará fazer a distinção entre a pasta de instalação do Flash Builder e a pasta onde os arquivos de código são armazenados por padrão.

Este é o diretório de instalação padrão no meu computador Windows.

Figura 1: Pasta de instalação do aplicativo Flash Builder

Quando você expande a pasta SDKs, você verá que duas versões do framework Flex estão disponíveis nesta versão do Flash Builder.

O Flash Builder 4 usa o SDK no diretório 4.0.0.

Figura 2: SDK no diretório 4.0.0

A seguir você aprenderá a organizar seu código em pastas de projetos e workspaces.

Por hora, basta notar que o local padrão para o código não é o diretório de instalação do Flash Builder.

Por padrão, em uma máquina Windows, o Flash Builder armazena o código do Adobe Flash Builder 4 dentro do diretório de usuário.

Figura 3: Vista do espaço de trabalho criado dentro da pasta do usuário.

Nota: No Mac, os arquivos ficam na pasta Documents > Adobe Flash Builder

Usando o Flash Builder 4

Quando você abre o Flash Builder pela primeira vez, você verá a "Start Page".

Figura 4: Página inicial do Flash Builder e nome de seus painéis principais, também chamados de "views".

A página inicial oferece links para tutoriais e outros recursos úteis.

Ela pode ser fechada e caso queira ter acesso a ela basta ir em Help > Flash Builder Start Page.

As tabs do Flash podem ser minimizadas/maximizadas com duplo clique sobre elas.

Vamos começar aprendendo algumas terminologias básicas.

Estes painéis na interface são chamados de called views, algo como pontos de vista.

O código de área principal é chamado de Editor e permite alternar entre as visualizações de código (Source) e visual (Design) são chamados de modo Source e modo Design.

A maneira que os pontos de vista (painéis) são definidos podem ser alterados.

Cada configuração é chamada de perspectiva.

Se você não quiser ver todos as perspectivas, você pode redimensioná-las.

Se você tem uma preferência por seu próprio layout, você pode reorganizar os painéis, arrastando-os e salvando as alterações usando Window > Perspective > Save Perspective As option.

O painel Package Explorer exibe todos os arquivos e pastas de seus projetos e será atualizada automaticamente cada vez que você adicionar, excluir ou modificar um recurso.

O Problem view mostra os erros e mensagens de advertência com base no seu código.

O Outline view apresenta visão hierárquica de todos os elementos presentes no arquivo mxml. Você pode clicar em um elemento para localizá-lo no código.

Um projeto do Flash Builder é um agrupamento de recursos que juntos formam uma aplicação Flex.

Para criarmos um projeto selecionamos File > New > Flex Project

Figura 5: Criando um novo projeto no Flash Builder.

Na caixa de diálogo "New Flex Project" devemos usar no nome do projeto apenas números e letras e, por convenção sem separar as palavras e usando a primeira letra em maiúsculo (upper camel case).

Ao clicar em Finish um arquivo mxml é criado com o mesmo nome dado ao projeto.

Diferenças entre Worspace e Workbench

Workbench é o ambiente de desenvolvimento do Flash Builder.

Workspace é um diretório de sistema de arquivo que contém todos os arquivos e pastas do projeto no Eclipse.

Você pode ver a localização padrão do workspace no Flash Builder selecionando o menu File > Switch Workspace > Other

Criar workspaces (espaços de trabalho) é uma forma útil de organizar logicamente seus projetos Flex para clientes diferentes ou outros fins.

Criando Workspace (Espaço de trabalho).

Primeiro criamos uma pasta no drive C com um nome que identifique nosso projeto, por exemplo "FlexDia1". Dentro dessa pasta criamos uma subpasta chamada "Aula1".

Para mudar o workspace padrão e fazê-lo apontar para esse novo local, selecionamos File > Switch Workspace > Other e navegamos até a subpasta "Aula1" e clicamos em OK.

O Flash Builder fechará e reabrirá no novo espaço de trabalho.

Para mudar a aparência padrão do Flash Builder você deve selecionar Window > Preferences. Por exemplo, para mudar o tamanho da fonte do Editor de código, devemos selecionar General > Appearance > Colors and Fonts > Basic > Text Font e clicar no botão Change. Podemos alterar outras aparências, como recuo do código. Para isso clicamos em: Flash Builder> Indentation > ActionScript.

Exportando projetos

Se você trabalha em um ambiente de equipe ou tem a necessidade de enviar um projeto Flex para alguém, você pode criar um arquivo de projeto do Flex. Para isso clique com o botão direito do mouse sobre o projeto e selecione "Export".

Ao fazer isso será criado um arquivo com extensão .fxp no local escolhido por você.

Comentários

No Flex comentários para código MXML segue a mesma estrutura dos comentários em HTML. Eles devem começar com um sinal de menor, um ponto de exclamação e dois hifens, para fechar o comentário usamos dois hifens e o sinal de maior, veja:

<!--Isso é um comentário em código MXML -->

Você pode colocar todo o código de uma tag MXML em uma única linha, mas é prática comum separar cada propriedade em sua própria linha para a facilitar revisões, mas trata-se puramente de preferência pessoal.