Primeiramente eu gostaria de me desculpar pela minha ausência. Estive muito ocupado nas últimas semanas, e a coluna atrasou. A correria por aqui ainda não acabou, mas vou continuar escrevendo. Vamos à coluna.
Meus planos eram de mostrar aos poucos como funciona o Flex, o uso de containers, controls e etc. Tenho visto ultimamente no fórum que os usuários querem alguma coisa mais avançada, que isso tudo eles já sabem. Bom, como eu acho que não vou ter muito tempo pra ficar naquela didática toda, vamos partir pra parte interessante! Daqui pra frente, nossas colunas serão um pouco mais avançadas.
Criando uma aplicação rica com o Flex ? Parte 1
Para seguir essa coluna, você precisa saber:

• Montar o layout da aplicação com containers e controls;
• Utilizar ActionScript no Flex;
• Usar DataBindings no Flex;

Leia as colunas anteriores para ficar por dentro do assunto, caso você ainda não saiba.
Nessa coluna você vai aprender:

• Como gravar e acessa informações em um banco de dados com Coldfusion, via Webservice;
• Como utilizar o DataGrid;
• Como utilizar o Alert;

Vamos fazer uma aplicação que lista os usuários cadastrados no banco de dados, e nos permite adicionar e alterar dados. Monte uma aplicação como essa:

Para este exemplo, vou utilizar uma tabela do Access.

Baixe aqui o arquivo MXML com a aplicação montada e o arquivo do banco de dados.
Vamos começar com o ColdFusion. Crie um componente do ColdFusion (CFC) e salve como webservice.cfc.

Vamos criar uma função que vai selecionar os dados no banco, para depois mandá-los ao Flex.

Criamos uma função com o nome Selecionar e definimos o seu tipo de acesso para remote para podermos acessá-la do Flex mais tarde, e o returntype para any, que é o tipo de objeto que a função vai retornar.
Depois criamos uma query que seleciona os usuários no banco e em seguida um return para que a função retorne os dados selecionados do banco.
Agora vamos criar o Webservice no Flex. Adicione as tags abaixo logo após a <mx:Application>:

- wsdl é o caminho absoluto de onde está o nosso componente, no meu caso, no meu localhost;
- showBusyCursor faz com que o cursor do mouse seja trocado por outro para mostrar ao usuário que os dados estão sendo baixados;
Dentro da tag Webservice, criamos uma operação com o MESMO NOME da função que criamos no ColdFusion.
Pronto! Criamos o nosso Webservice. Fácil, né?
Agora vamos criar uma função em AS para chamar a nossa operação do WS. Adicione o código abaixo depois da tag </mx:WebService>:

Agora adicione na sua tag <mx:Application>:

- initialize é um evento que é chamado assim que a Aplicação iniciar. Portanto, quando a aplicação inicia, ele entra na função selecionarUsuarios() que por sua vez chama a operação Selecionar do nosso Webservice, através do método send();
Agora vamos mostrar os dados no nosso DataGrid. Procure a tag e altere:

Fizemos um DataBinding para fazer com que o dataProvider do nosso Grid receba o result da nossa operação.
Se você testar sua aplicação agora vai ver que os usuários cadastrados no banco são exibidos no DataGrid! =)
Agora vamos fazer a parte de cadastro. Volte ao seu CFC e adicione a função abaixo.

Nessa função temos três argument que são os dados que vão vir do formulário do Flex e inseridos no banco. Pronto! De volta ao Flex…
Procure pela tag do seu Webservice para adicionarmos mais uma operação.

Nessa operação, nós usamos o request para mandar ao ColdFusion os dados necessários para se fazer o cadastro. Dentro do request, usamos bindings, que mandam o conteúdo dos campos de texto em nosso formulário.

Precisamos agora fazer com que o usuário receba uma confirmação de que o novo usuário foi cadastrado. Para isso vamos usar o Alert. Procure sua tag Script e adicione a seguinte função:

- alert cria uma caixa de diálogo com um aviso, como no JavaScript.
Em seguida chamamos novamente a função que pega todos os usuários cadastrados, para que o nosso Grid seja atualizado.
Agora vamos fazer com que essa função seja chamada assim que o Webservice receber um resultado da operação. Altere o seguinte na sua operação:

Agora precisamos criar uma função que chame a nossa operação.

Agora vamos chamar essa função no evento click do nosso botão Salvar. Procure pela tag do botão e adicione o seguinte:

Assim que o usuário clicar no botão, ele vai chamar a função que vai acionar o Webservice e cadastrar o usuário no banco de dados. Depois o ColdFusion vai mandar uma resposta pro Flex, que por sua vez vai chamar a função usuarioCadastrado(), que vai mostrar um alerta e atualizar o Grid. Ufa! =)
Teste sua aplicação de novo…
Bom galera, é isso! Na próxima coluna vamos criar as funções para atualizar, buscar e deletar dados na tabela, e vamos criar um Validator para o nosso formulário.
Qualquer dúvida acesse o fórum, ou mande um e-mail para alex.silva@ltia.fc.unesp.br.

Aprendendo o fundamental sobre Flex

Salve 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:
download versão Flash Paper

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 Flex

Vamos 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:

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.

VBox: serve para organizar os componentes em uma única linha vertical.

Canvas: serve para organizar os componentes em uma espécie de ?stage?, onde você os posiciona através das propriedades x e y.

Panel: é uma espécie de janela, com uma barra de título, e uma área pro conteúdo.

ControlBar: é uma barra que adicionamos no nosso Panel, e depois podemos adicionar controls e containers nela.

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.

Nós podemos utilizar um container dentro de outro.
Para testar tudo isso, vamos fazer um formulário de newslleter simples, que não salva dado nenhum, vai servir apenas para estudo.

Crie um novo documento MXML, salve-o como ‘cadastro_mxstudio’.
No modo Design e Expanded, arraste um componente HBox na aplicação.

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:

- 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.
Na próxima coluna veremos alguns containers do tipo Navigator e falaremos sobre controls. Até lá… ]]> http://www.mxstudio.com.br/desenvolvimento/flex/aprendendo_o_fundamental_sobre_flex/feed/ 7