Exemplo básico de formulário com Flex


Olá pessoal, tenho tido experimentos com o Adobe Flex, inclusive com a IDE Adobe Flex Builder, que torna ainda mais fácil a integração dos objetos e do código, otimizando e deixando de maneira mais dinâmica a criação de novos aplicativos.

Bom o que eu irei deixar aqui no blog é apenas um exemplo para aqueles que assim como eu estão engatinhando no Flex, pode ser um exemplo simples, porém a idéia aqui é trazer o conceito do Flex, pois como toda outra linguagem tem conceitos diferenciados, bem como outras linguagens, como Java, PHP, ASP, entre outras.

Para aqueles que já conhecem os formulários HTML e a manipulação dos dados do Javascript, notará semelhança entre ambas as linguagens, mesmo porque elas são de mesma origem, ou seja, da parte de marcação no caso do Flex a linguagem é o MXML (utilizando a mesma estrutura de tags do XML), e o Action Script 3.0 (que possui similidariedades do javascript, c, java, etc.).

Bom o algoritmo aqui é simples, nós iremos criar um formulário de texto, o qual iremos inputar valores que serão agregados em uma variável de tipo String, e um botão para acionar a função para que se abra uma tela de alerta, contendo o valor da variável inputada no campo.

Vamos ao código:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” height=”110″ width=”275″>

<mx:TextInput id=”msg” x=”-5″ y=”31″/>
<mx:Button label=”Exibir” click=”mensagem()” x=”163″ y=”31″/>

<mx:Script>
<![CDATA[
import mx.controls.Alert;

var texto:String;

private function mensagem()
{
texto = msg.text;
Alert.show (texto)
}
]]>
</mx:Script>

</mx:Application>

Agora vamos explicar o código:

Toda aplicação Flex inicia com a tag <mx: Application> e fecha com a mesma, por padrão no Flex Builder ele já vem no topo do código, portanto não se preocupe.

Para que se crie um formulário, utiliza-se a tag <mx:TextInput id=”<nome do campo>”>;

O botão é gerado a partir da tag, <mx:Button label=”<nome e ou referência do botão>” click=”<evento para chamar uma função(similiar o onclick do javascript)>”

Bom até aqui vimos o MXML, agora veremos o Action Script, para isso nós utilizamos as tags:

<mx:Script>

<![CDATA[

Código ActionScript aqui

]]>

</mx:Script>

Bom, até aqui nada de novo, mas há detalhes aqui que fazem toda a diferença!

Para gerar um alerta como no javascript, no Flex devemos importar o obejto da biblioteca, assim como fazemos no Java, pois a linguagem é muito voltada a orientação a objetos. Para isso nós fizemos assim:

import mx.controls.Alert;

Há modificações na declaração de variáveis, no exemplo que estamos expondo aqui, variável texto é declarada como String, desta maneira:

var texto:String;

A variável tem como sufixo os dois pontos “:” aliada com o tipo de variável, no caso do Flex, podem existir estas possilidades:

int = Para valores numéricos inteiros;

Number = Para Números Reais;

String = Para textos.

Após isso fizemos o método com o intuito de exibir a mensagem, contendo os dados obtidos através do formulário:

private function mensagem()

{

texto = msg.text;
Alert.show (texto)
}

Se caso você seguiu estes passos o resultado será este, como  foto abaixo:

Bom espero tê-los ajudados, aproveitando o gancho, muitos dos conceitos que estou desenvolvendo devo a este livro:

de Autoria de Daniel Pace Schmitz,  que é colunista do site Imasters, contendo principais conceitos e com exemplos muito bons, de forma clara e muito bem comentada, adquiri o meu na Saraiva MegaStore do Center Norte, mas creio que deve ter nas melhoers livrarias também, pois é da editora Brasport.

Fiquem com Deus

Abraços,

Thiago Cantero Mari Monteiro

, ,

  1. Nenhum comentário ainda.
(não será publicado)

Spam Protection by WP-SpamFree