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
Criando um projeto e uma Aplicação MXML : Criando um projeto e uma Aplicação MXML
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:
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: