Flex/ JQuery

Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex – Parte 3

Continuando com a série de posts sobre JQuery para desenvolvedores Flex, começo com um tema bem pertinente, formulários, já que é o calcanhar de aquiles de qualquer sistema que trafegue ou manipule dados.

Formulários

Dar-se com formulários é um caso muito sempre discutido em todas as instancias de linguagens de programação, seja ela para Desktop ou Web. Ninguém concorda com a API e acaba criando alguns mecanismos extras.

Não é diferente no Flex e nem tampouco no JQuery. Existem coisas em ambas que umas deveriam ser implementadas, para ficar igual.

Os formulários no Flex estão indo muito bem nessa versão 4.x do SDK, já que estão sempre em constante evolução, coisa que nas versões 3.x era bem divertida e tinha complementos bases que ajudavam bastante.

No JQuery

Veja esse exemplo simples.

jquery_forms

Embora o JQuery seja um complemento de manipulação ao HTML e CSS, ele traz uma série de funções pré-dispostas que facilita bastante o trabalho nesse exato momento de enviar os dados.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
<title>JQuery e formulários</title>
 
 
<script type="text/javascript">
 
	$(document).ready(function() {
 
			// pegar valores do form e jogar em um alert
 
			$("#enviar").click(function(e) {
                	pegarValores();
            });
 
    });
 
	function pegarValores(){
			var resposta = $("#meuform").serialize();
		return alert(resposta);
	}
</script>
 
</head>
 
 
<body>
	<form id="meuform" style="width:240px;">
    	<p>
    	  <label>Usuario</label>
    	  <input id="login" name="login" type="text" size="10" maxlength="10">
   	  </p>
    	<p>
    	  <label>Senha</label>
    	  <input id="senha" name="senha" type="password" size="10" maxlength="10">
  	  </p>
      <p>
      	<a id="enviar" class="medium button green">Entrar</a>
      </p>
    </form>
</body>
</html>

Incrivelmente simples, passo o #id do formulário e executo a função serialize(). É fantástico, com uma função simples eu consigo fazer isso. Se eu fosse fazer no Flex, eu teria que criar minha classe própria para isso.

O que o serialize() realmente faz, ele faz um loop no form, pega cada campo e seu label correspondente caso exista e traz para mim os valores formatados em queryString já prontinhos para usar em qualquer um de seus métodos para trafegar dados. Se eu quiser implementar mais posso usar o serializeArray(), e ele me retorna em Array a resposta.

No Flex
Então se você cria forms básicos no Flex você faria uma função para coletar aquelas informações e envia elas para um servidor via HTTPService, RemoteObject, WebServices ou DataServices.
Querendo ou não se você for partir para um framework MVC,MVP você usaria o mecanismo automático do framework para cuidar disso.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			import com.riacycle.form.FormUtil;
 
			import mx.controls.Alert;
			protected function pegarValores(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				Alert.show(FormUtil.serialize(meuform));
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Form id="meuform" x="201" y="87" width="256" height="128">
		<s:FormItem label="Usuario">
			<s:TextInput maxChars="10"/>
		</s:FormItem>
		<s:FormItem label="Senha">
			<s:TextInput displayAsPassword="true" maxChars="10"/>
		</s:FormItem>
	</s:Form>
	<s:Button x="349" y="223" label="Entrar" click="pegarValores(event)"/>
 
</s:Application>

Claro, utilizando a seguinte classe, cedida gentilmente pela RIACycle.

////////////////////////////////////////////////////////////////////////////////
//
//  RIACYCLE INC. LTDA BRAZIL
//  Copyright 2011 RIACycle Inc. LTDA
//  All Rights Reserved.
//
//  NOTICE: RIACycle Inc. permits you to use, modify, and distribute this file
//  in accordance with the terms of the license agreement accompanying it.
//	Code Licensed by MPL http://www.opensource.org/licenses/MPL-1.1
//
// Author: Igor Costa
//
////////////////////////////////////////////////////////////////////////////////
 
package com.riacycle.form
{
	import mx.core.IVisualElement;
	import mx.core.IVisualElementContainer;
	import mx.core.UIComponent;
 
	import spark.components.Form;
 
	public class FormUtil
	{
		public function FormUtil()
		{
		}
		/**
		 * @public
		 * Retorna em QueryString os campos de um formulário padrão do flex
		 * @return String
		 * @see spark.components.Form
		 * */
		public static function serialize(value:Form):String
		{
 
			var query:String;
			for (var i:int = 0 ;i <= value.numElements-1;i++)
			{
				var item:IVisualElementContainer = value.getElementAt(i) as IVisualElementContainer;
 
				for (var j:int = 0; j<=item.numElements-1;j++)
				{
					var input:UIComponent = item.getElementAt(j) as UIComponent;
 
					if(i <= value.numElements-1)
						query += item['label'] + "=" + input['text'] +'&';
				}
			}
			return String(query).substr(4,query.length-5); // remove o label do Form para title e remove o ultimo &
		}
	}
}

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *