Flex Builde - Parte 1

Add to Favourites

Post to:

Comments

Presentation Transcript

Adobe Flex Builder 3 : Adobe Flex Builder 3 Claiton Luis Perin

Objetivos : Objetivos Conhecer o Adobe Flex Builder 3 Criar, rodar e salvar arquivos de aplicação

Iniciando o Desenvolvimeno : Iniciando o Desenvolvimeno Antes de construir um edifício, a fundação precisa ser feita.

Criando um projeto e uma Aplicação MXML : Criando um projeto e uma Aplicação MXML Para criarmos uma aplicação Flex, primeiro precisamos criar um projeto no Flex Builder, qual deve fornecer uma estrutura inicial para o desenvolvimento da nossa aplicação. Projeto: Coleção de arquivos e pastas que ajudam a organizar o trabalho. Há dois modos para se trabalhar com o FB. Source Design

Criando um projeto e uma Aplicação MXML : Criando um projeto e uma Aplicação MXML

MXMLNS : MXMLNS xmlns:mx=http://www.adobe.com/2006/mxml Como vimos antes, o xmlns é o responsável por informar que o prefixo “mx” será associado a um determinado conjunto de tags. O valor do atributo que se parece com uma URL(Universal Resource Identifer) é na verdade o URI na terminologia XML.

MXMLNS : MXMLNS mxml-manifest.xml

MXMLNS : MXMLNS Parte do arquivo é mostrado na seguinte figura.

Entendendo a área de trabalho do Flex Builder 3 : Entendendo a área de trabalho do Flex Builder 3 Editor View problems View Navigator

Criando um projeto e uma Aplicação MXML : Criando um projeto e uma Aplicação MXML Feche o editor atual Abra o editor contendo o arquivo index.mxml da view Navigator clicando duas vezes sobre o nome do arquivo. Faça o editor se expandir em largura e comprimento clicando duas vezes sobre a tab editor. Volte o editor a seu tamanho anterior fazendo novamente duplo-clique na tab. Clique no botão Design mode no editor para visualizar a aplicação em modo Design.

Criando um projeto e uma Aplicação MXML : Criando um projeto e uma Aplicação MXML Retorne ao modo Source Feche a view Navigator clicando no x na tab Navigator. Abra novamente a view Navigator escolhendo Window > Flex Navigator Clique o botão Open Perspective e escolha perspectiva Flex Debugging. Uma perspectiva nada mais é que um layout de views que usaremos de forma repetitiva. Retorne à perspectiva Flex Development.

Criando um projeto e uma Aplicação MXML : Criando um projeto e uma Aplicação MXML Mostrando o número de linhas. (Caso o número de linhas não esteja presente, ative-as no menu window> Preferences> General> Text Editors> Show line numbers)

Rodando sua Aplicação : Rodando sua Aplicação Abra o menu Project! Assegure-se de que a Opção Build Automatically esteja marcada. Rode a aplicação clicando no botão Run.

Rodando sua Aplicação : Rodando sua Aplicação O que aconteceu quando você apertou o botão Run? MXML ActionScript SWF

Rodando sua Aplicação : Rodando sua Aplicação Adicione uma tag posicionando o cursor entre as tags . Adicione o símbolo menor que (<) e depois adicione mx, seguido por dois pontos (:). Uma lista com várias tags serão apresentadas. Precione a letra L e selecione Label, após precione enter ou clique duas vezes.

Rodando sua Aplicação : Rodando sua Aplicação Pressione a barra de espaço e você terá uma lista de opções, incluindo propriedades e métodos, os quais poderemos usar com a teg . Seta a propriedade text da tag para “Minha primeira aplicação”. Termine a tag com barra invertida (/) e um símbolo de maior que (>).

Verificando versões : Verificando versões Mude a propriedade texto da tag label e salve o arquivo. Clique com o botão direito do editor e no menu context escolha Replace With> Local History. Uma grande caixa de diálogo devera aparecer. Ao lado esquerdo da caixa, teremos a versão atual do nosso programa. Ao lado direito, teremos a versão antiga do nosso programa. Apenas as últimas 50 versões de seu arquivo é mantida por padrão, mas este número pode ser alterado conforme a necessidade.

Verificando versões : Verificando versões

Verificando erros : Verificando erros Intencionalmente, introduza um erro na página, trocando a tag para , salve o arquivo e veja onde o erro é reportado.

Trabalhando em modo Design : Trabalhando em modo Design Escolha File> New> MXML Application. Na caixa de diálogo que se abre, no campo Filename coloque index2, e escolha para o campo Layout horizontal.

Trabalhando em modo Design : Trabalhando em modo Design Layout (absolute, horizontal e vertical)

Trabalhando em modo Design : Trabalhando em modo Design Uma diferença entre o controle Label e o Text , é que o Text pode assumir múltiplas linhas de texto. Isso não se aplica ao Label. Apenas uma tag é permitida por aplicação. Certifique-se de que todos os três arquivos contenham apenas o código esqueleto, conforme apresentado abaixo: