Aprendendo o fundamental sobre Flex
Aprendendo o fundamental sobre FlexSalve comunidade MXStudio! Deixa eu me apresentar: Meu nome é Alex Figueiredo da Silva, tenho 17 anos, moro em Bauru – SP e essa é minha primeira coluna aqui pro MXStudio. Vamos ao que interessa. O que é Flex?Macromedia Flex é uma tecnologia voltada para aplicações RIA. No Flex usamos uma linguagem de marcação, o MXML que é baseada no XML, para definir a interface da aplicação e o ActionScript para a parte lógica. As aplicações Flex levam a extensão .mxml e podem ser criadas em qualquer editor de texto comum, como o Bloco de Notas. Para visualizar uma aplicação MXML, o usuário faz a requisição pelo seu Browser: http://www.site.com.br/arquivo.mxml. Quando o servidor recebe a requisição o Flex Server compila o arquivo MXML para um SWF, que será rodado no Flash Player; salva o arquivo SWF na máquina do cliente e abre o SWF a partir da máquina do cliente. Arquivos utilizados nesta coluna:Link : cadastro_mxstudio.mxml Link: <mx:Application xmlns:mx=http://www.macromedia.com/2003/mxml>
<mx:Panel> <mx:Button label=”Clique aqui” /> </mx:Panel> </mx:Application> Para nossas colunas, iremos utilizar o Macromedia Flex Builder, que é um ambiente rico de desenvolvimento com editor visual e menu rápido de acesso aos componentes do Flex e sua documentação. Instalando o Flex Server Para funcionar, o Flex Server precisa estar rodando em um servidor Java. Vamos ver aqui como instalar o Flex Server e integrá-lo com o JRun da Macromedia.  Quando você vai instalar a versão trial do Flex Server 1.5, ele permite que você instale automaticamente uma versão developer do JRun 4, e configura o Flex nele.  É só isso! Agora vamos ao Flex Builder. Antes de começarmos a ‘brincar de Flex’, precisamos definir um site no Flex Builder. Um site é um conjunto de arquivos, que podem ser MXML, AS e imagens. Para o nosso site vamos ter uma pasta local, que é de onde serão editados seus arquivos, e uma pasta remota, que é onde seus arquivos serão compilados e rodados.  Precisamos informar ao Flex o nome do nosso site, a pasta local, a pasta remota, e a sua URL.  Agora quando você salva um arquivo MXML, o Flex Builder vai salvá-lo na sua pasta local, e quando você for testá-lo, ele cria uma cópia do arquivo na pasta do servidor e o compila. Agora sim, vamos a parte legal! Criando uma Aplicação FlexVamos começar criando nossa primeira aplicação do Flex. Na tela principal clique em New Flex Application. Vamos nos familiarizar com o programa. Vamos ver os painéis que mais usaremos.  O painel Insert contém atalhos para todos os componentes do Flex, divididos por categorias.  1 – Contém os botões que altera o modo de visualização para Código, Design, e Split. No modo Código, você edita as tags da aplicação. É mais ou menos como no HTML mesmo. Veja um exemplo básico: <?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.macromedia.com/2003/mxml”> <mx:Panel title=”Lista de usuários”> <mx:ControlBar> </mx:Application> A primeira linha do documento deve ser uma declaração de um XML. A segunda linha do código é uma tag com o container padrão. Container é o componente responsável pela interface da aplicação. Se o nosso componente for um container, podemos adicionar outros componentes dentro dele. Veremos mais sobre containers logo mais. No modo Design, podemos criar nossa aplicação e visualizar como ela ficará. Criar aplicações nesse modo é extremamente prático. Tudo que temos a fazer é ir arrastando os componentes do menu Insert até a área de desenvolvimento. Veja como fica o código acima, no modo Design.  2 – Contém os botões Run e Debug que servem para testarmos nossa aplicação. Ao clicarmos nesses botões, o Flex compila o arquivo e os visualiza, como num Browser. A diferença básica deles, é que Run ele só roda a aplicação e Debug ele nos oferece diversos painéis para verificação de erros, como o Output, por exemplo. 3 – Standard altera a visualização dos componentes para o modo padrão. Dessa forma você pode ver exatamente como ficará a aplicação. Expanded adiciona bordas aos seus componentes, facilitando assim a identificação e a criação do layout. Se esse painel não estiver visível, pressione F9 para abri-lo. Nele temos acesso a todas as propriedades, eventos e estilos de nossos componentes. Basta selecionar o componente no modo Design.  Agora que já conhecemos os painéis que mais usaremos, vamos aprender um pouco sobre containers. Como eu vimos antes, containers são componentes responsáveis somente pela parte visual da aplicação. Servem para alinhar, dividir ou separar em blocos. Existem dois tipos de containers os de layout e os navigator. Os containers de layout são usados para alinhar e posicionar controls, ou até mesmo outros containers. Os containers navigator servem para controlar a navegação. Veja abaixo exemplos. 
Vamos entender como funcionam aqui alguns containers: HBox: serve para organizar os componentes em uma única linha horizontal. <mx:HBox>
<mx:Button label=”Button 1″ /> <mx:Button label=”Button 2″ /> <mx:Button label=”Button 3″ /> </mx:HBox>
VBox: serve para organizar os componentes em uma única linha vertical. <mx:VBox>
<mx:Button label=”Button 1″ /> <mx:Button label=”Button 2″ /> <mx:Button label=”Button 3″ /> </mx:VBox>
Canvas: serve para organizar os componentes em uma espécie de ?stage?, onde você os posiciona através das propriedades x e y. <mx:Canvas width=”232″ height=”131″>
<mx:Button x=”26″ y=”25″ label=”Button 2″ /> <mx:Button x=”71″ y=”67″ label=”Button 3″ /> <mx:Button x=”121″ y=”35″ label=”Button 1″ /> </mx:Canvas>
Panel: é uma espécie de janela, com uma barra de título, e uma área pro conteúdo. <mx:Panel title=”Aprendendo Flex – MXStudio”>
<mx:Form> <mx:FormItem label=”Nome:”> <mx:TextInput /> </mx:FormItem> <mx:FormItem label=”Descriçao:”> <mx:TextArea width=”159″ height=”90″ borderStyle=”inset” /> </mx:FormItem> </mx:Form> </mx:Panel>
ControlBar: é uma barra que adicionamos no nosso Panel, e depois podemos adicionar controls e containers nela. <mx:Panel title=”Aprendendo Flex – MXStudio”>
<mx:Form> <mx:FormItem label=”Nome:”> <mx:TextInput /> </mx:FormItem> <mx:FormItem label=”Descriçao:”> <mx:TextArea width=”159″ height=”90″ borderStyle=”inset” /> </mx:FormItem> </mx:Form> <mx:ControlBar> <mx:Button label=”Adicionar” /> <mx:Button label=”Apagar” /> </mx:ControlBar> </mx:Panel>
Form: Formulários são muitos utilizados na internet hoje. Consistem em campos onde o usuário entra com dados. Dentro do container Form, existe o container chamado FormItem que serve para criar uma item no nosso formulário. Olhando a figura fica fácil de entender. <mx:Panel title=”Cadastre-se em nossa Newslleter”>
<mx:Form> <mx:FormItem label=” Nome:” required=”true”> <mx:TextInput /> </mx:FormItem> <mx:FormItem label=”E-mail” required=”true”> <mx:TextInput /> </mx:FormItem> </mx:Form> <mx:ControlBar> <mx:Button label=”Adicionar” /> <mx:Button label=”Remover” /> </mx:ControlBar> </mx:Panel>
Nós podemos utilizar um container dentro de outro. Crie um novo documento MXML, salve-o como ‘cadastro_mxstudio’.  Agora arraste um Panel para dentro do HBox e depois um ControlBar para dentro do Panel.  Não se preocupe em ajustar o tamanho dos componentes por enquanto. O Flex os adapta conforme necessário. Agora arraste um container Form para dentro do painel, e em seguida arraste dois FormItem para dentro do container Form. Arraste um textInput – que é um control e ficam na aba de controls do menu Insert – para dentro de cada um dos FormItem. Agora arraste dois botões – que também é um control – para dentro da ControlBar. Veremos mais sobre controls na próxima coluna. Sua aplicação deve estar com essa aparência.  Mude para o modo Code para nós editarmos as propriedades dos componentes. Veja o que você deve mudar: <?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.macromedia.com/2003/mxml”> <mx:HBox> <mx:Panel title=”Newslleter MXStudio”> <mx:Form> <mx:FormItem label=” Nome:”> <mx:TextInput /> </mx:FormItem> <mx:FormItem required=”true”label=”E-mail:”> <mx:TextInput /> </mx:FormItem> </mx:Form> <mx:ControlBar> <mx:Button required=”true”label=”Adicionar” /> <mx:Button label=”Remover” /> </mx:ControlBar> </mx:Panel> </mx:HBox> </mx:Application> - title é uma propriedade dos containers tipo Panel. É o texto que aparece na barra de título do Painel. - label é uma propriedade que quase todos os containers possuem. No caso do FormItem é o texto que aparece antes do campo de entrada, indicando ao usuário o que ele tem que escrever ali. - required serve para indicar ao usuário que aquele campo é obrigatório. Quando true, adiciona um ?*? ao lado do label do FormItem. Salve o arquivo e depois clique em Run para ver o resultado. Bom galera, é isso… vou ficando por aqui. |
Escrito por Alex_Figueiredo
on maio 8, 2005. Arquivado em Flex.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
7 respostas a Aprendendo o fundamental sobre Flex
Deixe uma resposta
Autor do Artigo
Alex Figueiredo
Os links para as imagens não está correto. Veja as propriedades da rimeira:
http://www.mxstudio.com.br/imagens_artigos/http://www.mxstudio.com.br/webgerenciador/colunas/fundamento_flex/flex_01.jpg
Olá villas,
Obrigado por avisar. Já corrigi o problema.
Abraços
Muito Útil o Post, Parabéns!
só um detalhe:
o flex é da ADOBE e não da MACROMEDIA
Como que o cara faz um tutorial ensinando os fundamentos do Flex, se nem ele nao sabe de onde surgiu
mas vlw a iniciativa
Antes de criticar o kra , vejam que ele ta apresentando o flex 1.5 (2003) que realmente era macromedia e ele fez esse post a mais de 2 anos atras …
O pessoal nunca nem ouviu falar de Macromedia e vem me criticar.
E saudade dos meus 17 anos =)