Categoria: flex

Gente, no post anterior eu coloquei o exemplo de como se validar um combobox utilizando o NumberValidator. Aparentemente estava tudo ok, mas eu não conseguia obter a tão sonhada borda vermelha!

Além disso, eu não conseguia nunca validar o meu conteúdo. Fiz então uma caça as bruxas para achar o problema.

.a primeira coisa foi procurar no google (kkkk)! Achei algumas coisas, mas nada que resolvesse meu problema.

.defini no meu combo o parâmetro errorString. Aí a borda vermelha começou a parecer, colocando a mensagem definida no meu errorString. Mas, apesar do avanço, ainda não conseguia que meu componente fosse válido… a borda ficava eternamente..

.defini todas as strings de erro do meu NumberValidator para descobrir qual erro eu estava tendo.

	<mx:NumberValidator id="languageValidator"
		source="{language}"
		lowerThanMinError="{resourceManager.getString('ApplicationResource','REQUIRED_FIELD')}"
		property="selectedIndex"
		allowNegative="true"
		maxValue="1000"
		domain="int"
		decimalPointCountError="11111111"
		exceedsMaxError="2222222"
		integerError="33333333333"
		invalidCharError="44444444"
		invalidFormatCharsError="55555555555"
		negativeError="666666666"
		precisionError="77777777"
		separationError="99999999999"
		requiredFieldError="0000000000000000"
		minValue="0" />

Pronto, descobri o problema: ele sempre me voltava erro com a mensagem “5555555555555″, ou seja, invalidFormatCharsError. O que seria esse erro? Algum parâmetro de formatação do seu NumberValidator está com problemas. (?!?)
Bem, ao incluir os seguintes parâmetros, resolvi o problema:

				decimalSeparator="."
				thousandsSeparator=","
				precision="-1"

Qual a minha conclusão? Vocês podem notar que estou usando o resourceManager na minha mensagem de erro, ou seja, estou trabalhando com internacionalizaçao. Acredito eu que na mudança do locale para pt_BR, o numberValidator se perdeu. Sendo assim, meu NumberValidator final ficou:

	<mx:NumberValidator id="languageValidator"
		source="{language}"
		lowerThanMinError="{resourceManager.getString('ApplicationResource','REQUIRED_FIELD')}"
		property="selectedIndex"
		allowNegative="true"
		maxValue="1000"
		domain="int"
		decimalSeparator="{resourceManager.getString('ApplicationResource','DECIMAL_SEPARATOR')}"
		thousandsSeparator="{resourceManager.getString('ApplicationResource','THOUSANDS_SEPARATOR')}"
		precision="-1"
		minValue="0" />

Gente,

Depois irei fazer um tutorial completo sobre validators no flex! Por enquanto, vou só dar a dica de como validar a seleção de um combobox com o NumberValidator.

private function validateForm():Boolean{
       country.validateNow();
	if(countryValidator.validate().type == ValidationResultEvent.INVALID){
		return false;
	}
return true;
}

private function test():void{
	if(validateForm()){
		Alert.show("OK");
	}else{
Alert.show("NOK");}
}

	<mx:ComboBox dataProvider="{model.countries}" id="country" />
	<mx:Button click="test()" label="testar" />

	<mx:NumberValidator id="countryValidator"
		source="{country}"
		lowerThanMinError="Este campo é obrigatório"
		property="selectedIndex"
		minValue="0" />

Olá,

Gostaria de compartilhar com você uma “descoberta”: a propriedade Prompt que existe no componente Combobox!

Tempos atrás eu fiquei atrás de uma maneira para incluir um elemento apenas informativo no meu dataprovider, algo como: “selecione seu estado”, “selecione sua cidade” , etc.. Ou até mesmo deixar um campo vazio.

Bem, para evitar o primeiro elemento do dataprovider como default foi simples: comboboxid.selectedIndex = -1;

Para colocar textos explicativos, utilize a propriedade PROMPT! Pronto, algo bem simples!

Eu não costumo ler documentação, prefiro aprender tudo na marra e quando preciso.. O problema é passar por coisas assim, que te levam tempo…

Fica a dica!

Para mascarar campos texto no Flex, utilize o component Adobe Masked TextInput, disponível em http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1049969#.

Para a sua aplicação ficar com uma cara mais “web”, é interessante customizar também as popups (TitleWindow). Para isso, você precisa alterar a Skin.

Segue um exemplo de como colocar uma imagem como background:

TitleWindow{
border-skin: Embed("bg_squared.jpg");
}

Utilizando o Cairngorm em um aplicação flex, temos bem definido o conceito de “Command”. No “Command” definimos os métodos que irão fazer a ponte com nossos serviços (seja HttpService, RemoteObject, etc)

Basicamente teremos 3 métodos:

1) o que irá executar, fazer a chamada do serviço (geralmente passando a bola para um Delegate);

2)o que irá tratar o resultando;

3)o que irá tratar as exceções.

Quando você utiliza o AMFPHP (ou Blaze …) você deve adotar uma forma de tratamento de erros.  Exemplo: Você pode tratar todas as exceções dentro do seu serviço php e na sua aplicação flex fazer verificações do tipo “é null então faço isso, nao é, faço aquilo…”, ou você pode simplesmente jogar os erros para a su aplicação flex e dentro do método específico, ver o qu fazer.

Já vi por aí várias formas para tratar os erros java (utilizando blaze) dentro do Flex, mas infelizmente não obtive muito êxito. O maior problema era pegar exatamente a mensagem que eu “jogava” para aplicação.

Bem, no php foi bem mais simples. Abaixo segue um exemplo:

Suponha que você deseja realizar o cadastro de um novo usuário, mas você deseja diferenciar erros comuns (genéricos) ,de banco de dados, dos erros envolvendo duplicidade de registro. Neste caso é interessante você diferenciar apenas as mensagens de erro que você  ”joga” para a aplicação flex, e no “Command” você apenas manda exibir.

Tudo bem..Mas como fazer isso?

Extremamente simples:

Código PHP: (classe UserService.php)

...
if($rest == 1){
throw new Exception("Email ou Usuário já cadastrado(s)!");
}
if($res == 2){

throw new Exception("Erro de BD!");

}

....

Código Flex: (NovoUsuarioCommand.as)

…

public function fault( event : Object ) : void

{

Application.application.enabled = true;

Alert.show(String(event.fault.faultString));

}

...
<div>

Queria que meus popups em uma aplicação flex pudessem ser minimizadas. Procurei bastante e vi algumas sugestões: uma delas seria utilizar a biblioteca de mdi que está atualmente no flexlib.

Bem, não era bem isso que eu gostaria..Por sorte achei um componente que redimensiona a TitleWindow. Tive um puco de trabalho pra achar o código fonte, já que muitas das paginas estavam “expiradas”.

O link para do componente dentro da adobe é:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1207017

Abaixo segue o demo (acesse o código fonte com o botão direito):

ATENÇÃO:

1) O css é vital nessa aplicação! Se você não configurar as skins do botões, eles não irão aparecer!!!!

2)Eu não utilizei com o PopupManager, pois tive alguns problemas com outro componente. Não fiz o teste..Caso você vá utilizar o PopupManager e a funcção centerPopup, olhar nos comentários da página “oficial”, pois é preciso fazer uma alteração para que funcione corretamente.

Existem vários softwares gratuitos que você pode incluir no seu site. Uma ferramente muito interessante que estou colocando no e2 é o flexchatroom. Você pode incluir uma sala utilizando um iFrame ou como um object.

O único problema nessa solução é que a sala está em inglês! Seria interessante se eles adaptassem para outros idiomas!

Fica aí a dica e logo vocês vão poder conferir dentro do próprio e2.

Quem utiliza flex já deve ter sentido a necessidade de carregar uma página web dentro da aplicação.  O problema é: Como fazer isso?

Existem dois códigos “principais” rodando por ai, o do Christophe Coenraets e do Brian Deitte (que nada mais é que uma versão melhorada do primeiro).

Eu estava utilizando a versão do Deitte, mas havia um problema que não conseguia resolver:  ao colocar o iFrame dentro de um Panel, Popup ou qualquer coisa que eu pudesse mover, o meu componente movia, mas o iframe ficava estático.

Por exemplo: se o popup fosse renderizado no canto da página, qando eu o movesse para o centro, eu via uma popup “vazia” e o iFrame continuava no canto.

Esse erro acontecia em todos os browsers.

Bem, mas já há uma solução pra isso!!!

Está hospedado no google code o projeto flex-iframe, que é a terceira versão do código inicial.

Fiz alguns testes e está funcionando perfeitamente dentro de popups.

Visite a página do projeto em http://code.google.com/p/flex-iframe/

As vezes a aplicação flex desenvolvida fica maior que a área do browser. Como então habilitar scrolls? Se você estiver usando o FB e os arquivos htmls gerados por ele, vc precisa editar o template index.template.html:

Alteração 1:

<style>body { margin: 0px; overflow:hidden }</style>

para:

<style>body { margin: 0px;  }</style>

<body scroll="no">

<body scroll="yes">