Recentemente precisei criar um script que recebesse um array de valores e selecionasse todos os itens de uma Tree cujo labelField fosse igual a algum dos elementos do array, após ter muito trabalho para montar tal script resolvi extender a Tree e deixar o script ainda mais maleável incluindo a possibilidade de procurar por outras propriedades dos itens além do labelField e até mesmo passar uma função para ser usada para decidir se o item deve ser selecionado.

Segue o código que eu criei, com certeza ele pode ser melhorado e otimizado portanto se alguem tiver alguma dica por favor poste um comentário.

package com.wordpress.bobfernandes
{
import mx.collections.ArrayCollection;
import mx.controls.Tree;
import mx.events.FlexEvent;

[Bindable]
public class AdvancedTree extends Tree
{
private var i:int;
private var indice:int

//esse ArrayCollection será usado como dataProvider da Tree
private var _dados:ArrayCollection = new ArrayCollection();

public function AdvancedTree()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, init);
}
private function init(event:FlexEvent):void
{
dataProvider = _dados;
}
//função set usada para garantir o refresh e a atualização da tree
public function set dados(value:ArrayCollection):void
{
_dados = value;
_dados.refresh();
dataProvider = _dados;
}
public function get dados():ArrayCollection
{
return _dados;
}

// método público que seleciona itens por label
// recebe um array de valores a serem procurados
public function selecionarPorLabel(valuesToFind:Array):void
{
selecionarPorPropriedade(valuesToFind, labelField);
}

// é esse método que possibilita procurar
// por outra propriedade diferente da definida no labelField
// e também passar uma função para ser usada na decisão da seleção
public function selecionarPorPropriedade(valuesToFind:Array, prop:String, funcao:Function = null):void
{
// Limpa a lista de indices selecionados
selectedIndices = new Array();
// Seta o início para zero
indice = 0;
if(funcao == null)
{
// se nenhuma função for passada usa a comparar()
funcao = comparar;
}
// é necessário expandir toda a árvore
// pois o índice de um item varia se
// os itens anteriores estão abertos ou não
expandAll();
selectItems(valuesToFind, dados, prop, funcao);
}
// função auxiliar para adicionar um determinado indice
// a lista de índices selecionados
private function adicionaIndexAosSelecionados(value:int):void
{
// um push no selectedIndices não funciona
// pois o processamento é feito na função set
// por isso temos que setar o selectedIndices
var arr:Array = new Array();
if(selectedIndices != null)
{
// guarda o selectedIndices atual
arr = selectedIndices;
}
// adiciona o valor
arr.push(value);
// seta o selectedIndices para a nova array
selectedIndices = arr;
}
// função básica para usar como comparação
private function comparar(item:Object, stringToCompare:String, propriedade:String):Boolean
{
var retorno:Boolean = false;
if(item[propriedade] != null)
{
if(item[propriedade].toString() == stringToCompare.toString())
{
retorno = true;
}
}
return retorno;
}
// função para expandir todos os nós da Tree
private function expandAll():void
{
for(i = 0; i < dados.length; i++)
{
expandItem(dados[i], true, true);
expandChildrenOf(dados[i], true);
}
}
// função recursiva que varre a Tree
private function selectItems(valuesToFind:Array, collection:ArrayCollection, propToCompare:String, compareFunction:Function):void
{
for(var k:int = 0; k < collection.length; k++)
{
for(i = 0; i < valuesToFind.length; i++)
{
var linha:String = valuesToFind[i];
if(compareFunction(collection[k], linha, propToCompare))
{
adicionaIndexAosSelecionados(indice);
}
}
indice++;
// lembre-se que para usar um arrayCollection como dataProvider
// as propriedades que tem filhos devem obrigatóriamente se chamar “children”
var Children:ArrayCollection = collection[k].children as ArrayCollection;
if(Children != null)
{
selectItems(valuesToFind, Children, propToCompare, compareFunction);
}
}
}
}
}

Na hora de usar o componente faça como um Tree normal a única diferença é que ao invés de setar a propriedade dataProvider diretamente sete a propriedade dados:

<utils:AdvancedTree
id=”idDaTree”
labelField=”propiedadeParaUsarComoLabel”
dados=”{seuArrayCollection}”
width=”100%” height=”100%”
allowMultipleSelection=”true”
/>

Para fazer a seleção use algo como:
idDaTree.selecionarPorLabel(arrayDeValoresASeremSelecionados);

Atualmente estou trabalhando em um projeto com uma arquitetura que inclui um servidor BEA Aqualogic e nos deparamos com um problema que parecia ser bem severo: O flex não conseguia enxergar um SOAPError gerado pelo ServiceBus, isso é um bug reportado no bug track da Adobe, nas pesquisas que fizemos as únicas soluções envolviam utilizar ou BlazeDS ou LCDS que no nosso caso eram soluções inaceitáveis (por conta de regras e arquiteturas definidas pelo cliente).

Após um brainstorm com nosso arquiteto e o pessoal dos dataServices e webServices chegamos a conclusão de que isso na verdade não é um erro ou bug do flex pois o header padrão para um erro de SOAP é 500 que é um http error, portanto a solução foi alterar no ServiceBus o gerenciamento de erro para que ao invés de disparar um erro com header 500 disparar um erro com header 200 e voilá o flex recebeu o erro como um SOAPError e as mensagens de erro geradas pelo dataService chegaram bonitinhas no Flex.

Fica aí a dica de como fazer para receber um SOAPError no flex.

Esse é o segundo post da série sobre AdvancedDataGrid no primeiro post eu dei uma dica bem útil para quem quer utilizar o hierarchicalData com dados vindos de um RemoteObject.

O componente HierarchicalData não tem um método refres(), para conseguir essa função é necessário extender a classe HierarchicalData, eis o código:

package com.wordpress.bobfernandes.beans
{
import mx.collections.HierarchicalData;
import mx.events.CollectionEvent;
import mx.events.CollectionEventKind;

public class RefreshHieararchicalData extends HierarchicalData
{
// O truque é sobrescrever o set source
// para que seja disparado um CollectionEvent do tipo reset
override public function set source(value:Object):void
{
super.source = value;
var event:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
event.kind = CollectionEventKind.RESET;
dispatchEvent(event);
}
}
}

Na hora de usar faça assim:

<mx:dataProvider>
<beans:RefreshHieararchicalData id=”UmIdRelevante” source=”{SeuArrayCollection}”/>
</mx:dataProvider>

No próximo post eu mostrarei um exemplo de ADG com ItemRenderer.

Esse é o primeiro post de uma série que pretendo escrever sobre o AdvancedDataGrid, quem não ficou empolgado quando viu pela primeira vez algo sobre o ADG? E quem não ficou decepcionado quando tentou usar pela primeira vez o ADG? Se você respondeu sim para as duas perguntas saiba que você não está sozinho, a primeira vista ele parece o componente dos sonhos mas na hora de usar ele rapidamente vira o componente dos pesadelos.

Bem vamos ao que interessa, esse primeiro post vai ser só uma dica muito simples mas que faz toda a diferença, quando a origem dos dados é um arrayCollection vindo de um RemoteObject para poder usar o hierarchicalData todos os objetos que são filhos de outro objeto tem que se chamar “children” ou ter o mesmo nome que tem que ser indicado na propriedade childrenField.

No próximo post da série irei mostrar como dar refresh em uma hierarchicalData.

Estou me desligando da empresa onde vinha trabalhando e estou em busca de emprego.
Se alguém tiver uma indicação será muito bem vinda.
Tenho bastante conhecimento de Flex, ColdFusion e SQL entre outras coisas e tabém tenho inglês fluente, clique aqui para ver meu currículo.

Quero aproveitar também pra deixar um abraço e meu desejo de sucesso pra toda equipe da NetSar. Pedro Sena, Jhonny Everson, Douglas Dalber, Marcelo e Fábio Vedovelli, gostei muito de trampar com vocês, essa equipe é show!

Desde já agradeço qualquer indicação!

Só para manter o post atualizado, já faz um mês que estou trabalhando na META em um projeto dentro da VIVO. O projeto consiste na reformulação do sistema de vendas da VIVO EMPRESAS cuja interface está sendo feita totalmente em flex.

A carga horária é mutio puxada (esse mês fiz 307 horas), para quem estiver interessado em dados sobre o mercado de trabalho em flex meu contrato é de PJ, R$ 40,00 a hora, hora aberta.

No breve período em que estive procurando emprego eu pude comprovar que o mercado está bastante aquecido e com déficit de profissionais, principalmente com experiência. O flex está começando a entrar nas grandes empresas e isso deve aumentar ainda mais a demanda. Outra coisa que pude comprovar é que ferramentas como a Catho realmente funcionam para a área de TI.

Recentemente estava precisando validar se uma data é maior que a outra, então criei esta classezinha simples que estende a Validators, ela recebe duas datas e compara e primeira com a segunda, se a segunda não for maior que a primeira ela coloca a mensagem de erro na segunda, segue o código.

package com.wordpress.bobfernandes
{
import mx.validators.ValidationResult;
import mx.validators.Validator;

public class SequenceDatesValidator extends Validator
{
// Define o Array para o retorno do doValidation().
private var results:Array;
public var errorMessage:String = ‘Sequencia de datas inválida’;
public var firstDate:Date = new Date();
public var secondDate:Date = new Date();

// Construtor.
public function SequenceDatesValidator() {
// chama o construtor da Validator.
super();
}

// Quando se estende a classe validator temos que sobreescrever essa função
override protected function doValidation(value:Object):Array {

// Variáveis para guardar as datas
var smallerDate:Date = firstDate;
var biggerDate:Date = secondDate;

// Zera o results Array.
results = [];

// Chama o doValidation() da classe Validator.
results = super.doValidation(value);
// Damos um Return se tiver erros.
if (results.length > 0)
return results;

// É aqui que fazemos a validação.
if (smallerDate.getTime() > biggerDate.getTime()) {
results.push(new ValidationResult(true, null, ‘invalidSequence’, errorMessage));
return results;
}
return results;
}
}
}

Na hora de usar é só inserir o seguinte:

<validators:SequenceDatesValidator id=”datesValidator”
errorMessage=”Data de retorno maior que data de saída”
source=”{IdDoCampoComADataQueDeveSerMaior}”
property=”selectedDate”
trigger=”{IdDoCampoComADataQueDeveSerMenor}”
triggerEvent=”change”
firstDate=”{IdDoCampoComADataQueDeveSerMenor.selectedDate}”
secondDate=”{IdDoCampoComADataQueDeveSerMaior.selectedDate}”/>

Essa mesma lógica pode ser usada para comparar outros dois campos, por exemplo quando temos que checar se dois campos de senha são iguais.

Esse post é um extensão do screenCast que o Fábio Vedovelli postou sobre upload de arquivos com o flex.
O post original pode ser visto aqui.

Esse screenCast do Fábio foi o ponto de partida para uma discussão sobre segurança no upload de arquivos com o flex na lista flex-brasil.

Se quiser vá direto ao screenCast:
Extensão do post do Ved sobre upload – segurança

Não entrarei na parte server-side do aspecto de segurança, mesmo porque esse script pode ser usado com uma infinidade de liguagens server-side e cada uma delas tem seu modo de lidar com essa questão, mas não vá achando que não é necessário uma verificação server-side, muito pelo contrário, em se tratando de upload de arquivos É EXTREMAMENTE, IMPRETERIVELMENTE, OBRIGATORIAMENTE NECESSÁRIO IMPLEMENTAR UMA POLITICA DE SEGURANÇA SERVER-SIDE.

Tendo dito isso, vamos ao que se pode fazer para aumentar a segurança no upload de arquivos por parte do flex. A idéia é passar junto com o arquivo algum tipo de dado para ser usado para verificação pelo servidor, esse dado pode ser uma senha, o login e a senha do usuário que esta fazendo o upload, um captcha ou qualquer outra informação para subsidiar a política de segurança que você vai implementar no servidor.

Esse método também pode ser usado para enviar informações para outros fins como por exemplo o id de um produto ao qual o arquivo está relacionado para ser inserido no banco.

Bom, vamos ao código, o que vai fazer o truque é a classe “URLVariables” é através dela que passaremos os dados, vamos inserir dentro da função que faz o upload, que no nosso caso é a “onSelect” o seguinte código:

var urlVars:URLVariables = new URLVariables();
urlVars.stringParaComparacao = ‘uma string qualquer’;
request.data = urlVars;
request.method = URLRequestMethod.POST;

A função onSelect ficará assim:

private function onSelect(e:Event):void{

var request:URLRequest = new URLRequest(‘../../upload.php’);
var urlVars:URLVariables = new URLVariables();
urlVars.stringParaComparacao = ‘uma string qualquer’;
request.data = urlVars;
request.method = URLRequestMethod.POST;
fr.upload(request);
//pb.visible = true;

}

O truque é criar uma URLVariables, e adicionar a ela propriedades como se fosse um objeto qualquer e o segundo pulo do gato é setar essa URLVariables como a propriedade “data” da nossa URLRequest.

Na parte server-side nós recuperamos esses dados como se tivessem sido enviados por um formulário usando post. Minha linguagem server-side de origem é o ColdFusion, e no CF eu usaria “#form.stringParaComparacao #”, mas como o Ved fez o post em php vou tentar fazer em php, o código do upload.php ficará assim:

if($_POST['stringParaComparacao'] == ‘uma string qualquer’)
{

$move = move_uploaded_file($_FILES['Filedata']['tmp_name'], “arquivos/”.$_FILES['Filedata']['name']);
chmod(“arquivos/”.$_FILES['Filedata']['name'], 0777);

}

Obviamente no mundo real você não usaria uma string hard-coded como estou usando nesse tutorial e nem usaria isso como o único método de segurança server-side, mas para o intiuto de mostrar a parte do flex é isso.

Assista ao screenCast deste post:
Extensão do post do Ved sobre upload – segurança

Post Original do Ved

Para os leitores de Sampa, ou que estiverem por aqui nesse final de semana:

Show com Macy Gray e Herbie Hancock em São Paulo – Domingo, 1 de junho, às 15 horas, no Parque Villa Lobos. Avenida Prof. Fonseca Rodrigues, 1655 – Pinheiros. Entrada Franca

Juro que esse tipo de post será tão raro quanto o alinhamento dos planetas, ou melhor, tão raro quanto uma oportunidade dessas!
Mas como grande fã de ambos não consegui me conter.

Nesse terceiro post da série sobre flex library eu irei falar sobre como usar o metatag [IconFile] para alterar o ícone que aparece ao lado dos componentes na aba components do modo design.

Se você não sabe o que é, pra que serve ou como criar uma biblioteca flex de uma lida nos primeiros posts dessa série:
Biblioteca flex parte 1 – Criando uma biblioteca

Como de custume, se você preferir vá direto para o screenCast deste post:
Biblioteca flex parte 5 – usando o [IconFile] metatag

A princípio pode parecer perda de tempo criar ícones para seus componentes, mas quando sua biblioteca começar a ficar grande você vai ver que facilita bastante na hora de achar o componente desejado na lista de custom da aba de components do modo design do flex builder.

O que eu costumo fazer é, quando sobra um tempinho, pegar todos os componentes da minha biblioteca que estão sem ícone e criar ícones para eles, normalmente eu parto dos ícones do flex para criar meus ícones.

No exemplo desse tutorial nós criamos uma extensão do DateField e como o visual do nosso componente é igual ao DeteField nós iremos usar o próprio icone do DateField. Você pode encontrar os ícones utilizados nos componentes do flex, assim como todas as classes, na pasta:
SeuFlex\sdks\3.0.0\frameworks\projects\framework\src\mx\

Eu vou começar copiando esse arquivo para uma pasta “assets” que eu criei dentro da minha biblioteca.

Em seguida vou adicionar a seguinte linha logo acima da declaração da classe DateFieldPt:
[IconFile("assets/DateField.png")]

O código do componente ficará assim:

package com.wordpress.bobfernandes.util.controls {

import mx.controls.DateField;
import mx.formatters.DateFormatter;

[IconFile("assets/DateField.png")]

public class DateFieldPt extends DateField{

public var ptFormatter:DateFormatter = new DateFormatter();
public function DateFieldPt() {

super();

monthNames =

['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outbro', 'Novembro', 'Dezembro'];

dayNames =

['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'];

yearNavigationEnabled = true;
formatString = ‘DD/MM/YYYY’
ptFormatter.formatString = “DD/MM/YYYY”;

}
public function get datePt():String{

return ptFormatter.format(selectedDate);

}

}

}

O próximo passo é configurar nossa biblioteca para incluir esse arquivo (DateField.png) na compilação assim como fizemos quando criamos nosso componente.
Para isso acesse as propriedades da biblioteca e vá em “Flex Library build Path” (vide parte 2) , clique na aba assets e selecione o arquivo DateField.png.
Esse processo deve ser feito para qualquer assets que você for usar na sua biblioteca como por exemplo o ícone de um botão.

Agora é só compilar novamente sua biblioteca e abrir um página do projeto que a utiliza em modo design para ver o ícone ao lado do seu componente.

Assista ao screenCast deste post:
Biblioteca flex parte 5 – usando o [IconFile] metatag

Esse é o qurto post dessa série sobre bibliotecas, se você não sabe o que são bibliotecas flex vá para o primeiro post da série:
Biblioteca flex Parte 1 – Criando uma biblioteca

E se você preferir pode ir direto ao screenCast deste post:
Biblioteca flex Parte 4 – Adicionando a um projeto

Nesse post eu vou mostrar como adicionar sua biblioteca a um projeto.

Agora que sua biblioteca está compilada só falta inclui-la em quantos projetos você quiser utiliza-la.
Para isso existem 3 opções:
1- Copiar manualmente o arquivo swc (que foi criado na pasta bin quando compilamos a biblioteca) para a pasta lib do projeto.
2- Acessar as propriedades do projeto e ir em “flex Build Path” e na aba “Library Path”, clicar em “Add SWC” e navegar até a pasta bin da biblioteca e seleciona o arquivo swc.

3- Ir na “Labrary Path” do seu projeto, como na opção 2. Clicar em “Add Project” e selecionar a biblioteca na lista que será apresentada.

Eu prefiro a opção 3 porque quando você adiciona uma biblioteca dessa maneira o flex builder detecta alterações na biblioteca quando você tenta compilar um projeto que a utiliza, assim se você mexer na biblioteca e der um build no projeto ele compila a biblioteca e depois o projeto, eliminando a necessidade de dar os dois builds na mão (caso você use a opção 2) ou ter que dar um build na biblioteca, copiar o swc pra pasta lib do projetoe dar um build no projeto (caso você use a opção 1).

Pronto, agora basta abrir uma tela do seu projeto no modo design que o seu componente estará a sua disposição entre os componentes customizados, e quando você adiciona-lo à sua tela ele aparecerá como se fosse um componente feito em mxml.

Assista ao screenCast deste post:
Biblioteca flex Parte 4 – Adicionando a um projeto

No próximo post explicarei como adicionar um ícone ao nosso componente para se exibido na aba de components do design view do flex builder.