Aula 1.1 - Espaço de trabalho e manipulação de arquivos no Flash Builder 4.

Aula 1.1 - Espaço de trabalho e manipulação de arquivos no Flash Builder 4.

Introdução

O curso Flex 4 consiste de diversos exercícios que ao serem desenvolvidos vão facilitando o caminho de aprendizagem do software Flash Builder 4, da linguagem MXML e da linguagem ActionScript 3.

Os exercícios incluem arquivos com o projeto inicial para serem desenvolvidos pelo leitor e ao final de cada tutorial é disponibilizado o arquivo do exercício resolvido para quem não conseguiu resolver o exercício poder identificar onde errou.

Este exercício irá guiá-lo através do processo de importação dos arquivos dos exercícios individuais.

Depois que você importar o exercício, você compilará e executará uma aplicação Flex, como a mostrada na figura 1, e verá o arquivo .SWF e o arquivo .HTML no diretório bin-debug

Você vai aprender a criar o aplicativo e preenchê-lo com os dados nos exercícios seguintes.

Figura 1: Preview da aplicação do tutorial.

Objetivo da aula

I. Visualizando o espaço de trabalho padrão.

Nesta seção veremos o espaço de trabalho padrão do Flash Builder.

Abra o Flash Builder

Se for a primeira vez que você abre o Flash Builder, o ambiente deve ser semelhante ao mostrado na Figura 2. Note que a página inicial (start page) do Flex é aberta no modo do Editor e painéis diferentes o rodeiam. Esses painéis podem ser abertos e fechados ou movidos dentro da interface do usuário para criar um ambiente de desenvolvimento personalizado. Mais painéis podem ser abertos selecionando-os a partir do menu Window.

Figura 2: Vista do espaço de trabalho padrão do Flash Builder 4

Você verá estes painéis e muitos outros no decorrer deste curso.

II. Usando o exercício do arquivo .ZIP como um projeto Flash Builder

Cada exercício em arquivo .ZIP fornecido no início dos exercícios desta série inclui um arquivo .FXP, que é um arquivo "Flash Project Builder". Nesta seção você vai importar um arquivo FXP para o Flash Builder 4 e compilará o aplicativo para vê-lo em um navegador.

1. Se ainda não baixou, baixe o arquivo ex1_01_inicial.zip

2. Extraia o arquivo em seu computador. Você verá um arquivo ex1_01_inicial.fxp

3. No Flash Builder, selecione File > Import Flex Project (FXP), veja figura 3.

Figura 3: Selecionando e importando arquivo .FXP

4. A seguir marque File clique no botão Browse.

5. Localize em seu computador o arquivo ex1_01_inicial.fxp selecione-o e clique em Open.

6. Clique em Finish.

7. No painel "Package Explorer", clique na seta para expandir a pasta "src", em seguida repita o processo para a pasta (default package), finalmente dê duplo clique no arquivo "ex1_01_inicial.mxml" para abrí-lo.

8. Clique na aba "Source" e veja o código MXML para o aplicativo.

Observe alguns comentários MXML que definem seções para colocação do código: Styles, Script, Declarations e UI Components.

Você usará esses comentários durante o curso de Flex para manter seu código organizado.

9. Clique no botão "Run" para executar o aplicativo (veja a figura 4).

Figura 4: Clique no botão "Run".

10. Observe que a URL aponta para C:\Users\antonio\Documents\Flex4Dia1\ex1_01_solution\bin-debug\ex1_01_inicial.html (veja Figura 5).

Figura 5: Observe a URL do aplicativo Flex.

Nota: O diretório que você vê aqui não é o diretório de instalação do aplicativo pronto. É a pasta padrão que o Flash Builder cria em seu diretório de usuário para armazenar seus arquivos de projetos.

11. Retorne ao Flash Builder

12. No painel Package Explorer, dentro do projeto ex1_01_solution expanda a pasta bin-debug.

13. Localize o ex1_01_inicial.swf e ex1_01_inicial.html (figura 6). O arquivo .SWF é o aplicativo Flex compilado que é acessado dentro do arquivo .HTML no seu browser.

Figura 6: Expandindo a pasta bin-debug para visualizar os arquivos SWF e HTML.

III. Usando o exercício do arquivo .ZIP como espaço de trabalho do Flash Builder

Você aprendeu anteriormente que o diretório criado no diretório do usuário do sistema é o local padrão onde os arquivos de seu projeto são criados. Esta localização é chamada mais exatamente um espaço de trabalho (workspace). Você pode criar inúmeros espaços de trabalho para manter seus projetos organizados logicamente.

1. No Flash Builder selecione File > Switch Workspace > Other.

2. Clique no botão Browse e nevegue até o local da pasta recém descompactada.

3. Clique no botão OK (Windows) ou Choose button (Mac OS X).

4. Clique OK.

Ao seguir esses passos o Flash Builder fechará e reabrirá no novo espaço de trabalho.

IV. Criando um novo projeto.

Nessa seção aprenderemos a criar um novo projeto flex no Flash Builder.

1. Selecione File > New Project

2. No assistente de novo projeto flex, na caixa Project name digite RequisitarVeiculos (veja figura 9)

Figura 7: Criando novo projeto - Project name

3. Clique em Next.

4. Repare que a pasta Output folder é automaticamente configurada para a pasta bin-debug (veja figura 10).

Figura 8: Pasta Output.

5. Clique em Next.

Observe que o arquivo Main application é automaticamente nomeado com o mesmo nome do projeto. Neste caso o arquivo é chamado de "RequisitarVeiculos.mxml" (figura 12)

Figura 9: A Main Application é nomeada com o nome do projeto.

6. Clique em Finish.

Você verá o projeto RequisitarVeiculos no painel Package Explorer e o arquivo RequisitarVeiculos.mxml aberto a direita no painel de edição de código e design (figura 13).

Figura 10: RequisitarVeiculos.mxml aberto no Package Explorer..

Conhecimentos adquiridos

Nesse tutorial você aprendeu como importar projetos, compilar uma aplicação, usar o espaço de trabalho e criar um novo projeto no Flash Builder 4.

Agora já sabemos como responder, por exemplo as perguntas abaixo: