Integrando o Flash ao SQL Server

Olá pessoal. Na coluna desta semana vou comentar sobre um projeto que estive envolvido e que necessitava de uma integração entre um Flash e os dados armazenados no SQL Server.

Conceitualmente a aplicação era simples. Consistia de um relatório em uma página web que trazia valores de ligações telefônicas, total de minutos, TMR (Tempo Médio de Retenção) e um percentual das ligações. Estas informações deveriam ser listadas para cada estado do Brasil. Para montar esta página uma página ASP (o antigo, não o ASP.NET) simples foi desenvolvida. Esta página se conectava na base de dados, enviava uma instrução SELECT e depois montava uma tabela HTML simples. A Figura 1 apresenta o exemplo da página.

Figura 1. Página ASP que traz os dados do relatório por estado.

Até aqui tudo bem. Porém, como os dados retornados pela página são separados por estado, surgiu a necessidade de montar um mapa dinâmico que, quando o usuário passar o mouse sobre o estado, a informação seja retornada. O mapa também deveria ser colorido de acordo com a quantidade percentual de ligações do estado.

A primeira idéia foi utilizar o novo Reporting Services para realizar esta tarefa. Porém esta ferramenta, apesar de conter muitos recursos, ainda não permite nenhum tipo de integração com flash ou HTML. Na verdade, o Reporting Services apenas permite mostrar dados com os poucos controles que existem em sua toolbox, como a Figura 2 apresenta. Como alternativa, o desenvolvedor pode tentar montar um CRI (Custom Report Item) para suprir suas necessidades, porém esta opção não é viável, uma vez que um CRI apenas permite trabalhar com imagens. Além disso, montar um CRI para o Reporting Services é razoavelmente complexo.

Figura 2. A limitada toolbox do Reporting Services.

Neste ponto partiu-se então para uma conversa com o designer, que seria responsável pela elaboração do mapa do Brasil em flash. Após algumas discussões a equipe chegou à seguinte conclusão: a aplicação ASP iria retornar os dados da tabela e deveria montar uma lista de variáveis e valores (no formato variável=valor) como se fosse uma URL. Uma vez que esta lista seja montada, ela seria concatenada com o nome do flash na tag <embed src=.”…”>. Deste modo, o designer pode recuperar os valores através da função LoadVariables() do ActionScript, que é a linguagem de programação do Flash. Para quem deseja obter mais informações sobre LoadVariables(), o designer me recomendou o seguinte artigo:

http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=565

Um exemplo tag <embed> que faz a chamada ao arquivo Flash (.swf) ficaria assim então:

....
<embed src="mapa_brasil.swf?ACP=0.27&AC_M=284.27&AC_T=155&AC_R=1.83&ALP=1.28&AL_M=1341.68&AL_T=731&AL_R=1.84..." quality="high" bgcolor="#ffffff" width="550" height="400" name="mapa_brasil" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
....

Onde para cada estado os seguintes parâmetros deveriam ser passados:

<UF>P = valor percentual (será utilizado para a cor)

<UF>_M= valor da minutagem

<UF>_T = quantidade de ligações

<UF>_R = valor do TMR

Para o exemplo acima podemos notar que as variáveis do estado do Acre (AC) ficaram assim:

ACP = 0.27

AC_M = 284.27

AC_T = 155

AC_R = 1.83

É importante lembrar que o total também foi especificado como um parâmetro. Ainda faltava definir como seria a codificação das cores dos estados. Após uma conversa com o usuário do relatório, ele apresentou a tabela mostrada na Figura 3.

Figura 3. Código de cores do estado de acordo com o percentual.

Com estas informações em mãos a equipe começou o desenvolvimento. A página ASP não continua muita complexidade: primeiro ela se conectava na base, recuperava os dados da base por meio de uma instrução SELECT e depois montava o relatório. Um loop adicional foi elaborado para montar a string com os dados, para que ela possa ser passada para a aplicação Flash.

Para a aplicação Flash foi necessário primeiro desenvolver um frame contendo o mapa do Brasil com os estados delineados. Em seguida, para cada estado foi feito um objeto, pois os evento onMouseOver e onMouseOut foram utilizados para mostrar e esconder os dados de cada estado, respectivamente. Por fim, em um dos frames iniciais foi programada a leitura dos parâmetros e a colocação destes valores em um array que será lido para os eventos de cada objeto. Também foi implementada uma função simples que verifica qual é a cor do estado, de acordo com seu valor percentual. O resultado final pode ser visto na Figura 4, que contém um exemplo do flash dinâmico.

Clique aqui para visualizar.

Com este efeito os usuários ficaram bem satisfeitos. Além disso, a integração com um mapa em flash não apenas facilitou a visualização de dados mas também acrescentou interatividade, pois o usuário agora pode verificar os detalhes apenas passando o mouse sobre o estado. Novas modificações foram implementadas futuramente, como um link para cada estado, mas isso já é material para outra coluna.

Para fazer o download dos arquivos utilizados (páginas ASP, arquivo FLA, arquivo HTML de teste e arquivo SWF) basta fazer um clique aqui.

Abraços!