Sep
21st
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
