IBM Websphere Dashboard Framework - Parte III

Esta é a última parte sobre o Websphere Dashboard Framework 6.0. Nesse post estarei demonstrando como criar um gráfico baseado no mapa do Brasil e como colocar indicadores no mapa. Esse tipo de requerimento é sempre solicitado pelas empresas, pois é possível ter uma visão fácil de qual região ou estado esta com problemas em um determinado KPI. Neste exemplo, eu escolhi como KPI o valor total de vendas de uma organização no Brasil e para cada estado será mostrado uma das cores de indicação, que são:

• Verde = Tudo vai bem
• Amarelo = Atenção
• Vermelho = Problema

Bom a primeira coisa que precisamos é trabalhar com o mapa do Brasil para mapear os estados.

WebCharts3D

O WebCharts3D é um produto que podemos estar utilizando com o WDF 6.0. Na parte II eu comentei sobre o arquivo Readme_deshboard.txt que contem o endereço de download e número de licença do WebCharts3D. Eu não vou colocar nada sobre a instalação desse produto por ser muito simples.

Após o término da instalação do WebCharts3D são disponibilizados 2 aplicativos, o WebCharts3D Chart Designer e o Map Editor. O primeiro é utilizado para customizar os modelos de gráficos do WDF, que poderei estar escrevendo em um outro post caso seja necessário. Hoje nós iremos trabalhar com o Map Editor, que é um aplicativo para fazer o mapeamento de uma figura.

O primeiro passo para conseguirmos trabalhar com o Map Editor é termos um mapa do Brasil e detalhe, em preto e branco. Eu tive algum problema para achar um mapa legal e em preto e branco, mas no final usando um editor gráfico consegui acertar isso. Abaixo eu anexei o mapa que utilizei para ficar mais fácil caso vocês queiram fazer esse tipo gráfico.

Figura 1 - Mapa do Brasil em Preto e Branco

As linhas do mapa devem ser de preferência finas para facilitar o trabalho do Map Editor. Quando o aplicativo for fazer a identificação das áreas do mapa é importante observar se não há áreas perdidas no mapa, ou seja, um circulo é considerado uma área e um circulo com um corte ao meio são consideradas duas áreas.

Com o mapa pronto podemos iniciar o Map Editor. A interface dele é bem simples o que facilita muito. O primeiro passo após estar com o aplicativo aberto é adicionar o mapa do Brasil, para isso pressione o botão marcado na figura abaixo e mande abrir seu mapa (.gif).



Com o mapa dentro do aplicativo, já podemos começar a trabalhar. O mapeamento dos estados é feito de maneira automática pelo Map Editor, basta clicar o botão da direita sobre o mapa e selecionar a opção Build image outline.



Após clicar sobre a opção anterior, o Map Editor irá mostrar a janela abaixo. O motivo de trabalhar com o mapa em preto e branco é que devemos definir qual é a cor da linha que será usada para a criação das áreas e sendo nossa figura em duas cores fica bem mais fácil. Selecione a cor e clique em OK.



Você verá que o mapa ficou em cor de rosa e com a bordas em azul. No lado esquerdo da tela aparece um item chamado Outline. Nesse ponto já temos nossas áreas definidas, so precisando nomear cada uma delas.



Expandindo o Outline você verá vários símbolos com a seguinte forma {...}. Se você clicar sobre um deles verá que está referenciando uma área do mapa. Para nomear, basta clicar com o botão da direita sobre esse símbolo e escolher a opção Group. Após criar um grupo coloque um nome de fácil identificação, como por exemplo a sigla dos estados. Lembre-se que um grupo pode ter mais de uma área.



Após terminar de criar os grupos você pode mudar o nome do Outline para, por exemplo, BRASIL. Veja como ficou a figura abaixo.




Para salvar vá em File -> Save e grave com extensão .map.

Criando o Indicador no Websphere Dashboard Framework

Antes de começar a desenvolver esse Indicador, não esqueça de iniciar o servidor Tomcat.

Nesse exemplo eu vou estar utilizando uma planilha excel como fonte de dados para o meu indicador. Abaixo você pode ver a planilha.

figura 2 - Planilha Excel

Com a planilha e o mapa prontos, o próximo passo é estar incluindo eles dentro do nosso projeto, para isso eu crei duas pastas. Para a planilha eu criei uma pasta dentro de /WebContent/WEB-INF/ com o nome Planilhas Excel e arrastei a planilha para dentro dela. Já o mapa eu coloquei em uma pasta dentro de /WebContent/WEB-INF/solutions/dashboard/chartstyles/maps chamada Brazil. Uma outra pasta que criei foi dentro de /models com o nome Excel, dentro desta pasta estarei colocando todos os models que trabalham com fonte de dados Excel.

Agora já podemos criar nosso model, que é um container de Builders. Para criar basta clicar o botão da direita sobre o projeto e selecionar as opções NEW -> WebSphere Portlet Factory Model.



Selecione em qual projeto será criado o model, no nosso caso será o projeto Exemplo. Clique em NEXT para continuar.



Você pode estar usando um dos modelos para a criação de seu model, muitos desses tem wizards que facilitam a conexão com Banco de Dados, por exemplo. No nosso caso estaremos utilizando um modelo em branco, então selecione a opção Empty e clique em NEXT.



O último passo é selecionar em qual pasta irá ficar o model e informar qual será seu nome. Aqui eu selecionei a pasta Excel, que foi crianda anteriormente, e o nome será BrasilAlert. Clique em Finish para terminar.



Após a criação do model, a tela de Outline é habilitada, e será nessa tela que irão ser colocados todos os builders para esse model. O próximo passo é começar a incluir os Builders e para isso basta clicar no botão Add a Builder Call to the current Model (em vermelho).



Você pode encontrar mais de 100 builders prontos. Nesse nosso projeto nós estaremos lendo dados de uma planilha excel para estar trabalhando com nosso indicador do mapa do Brasil, então o primeiro builder que estaremos utilizando é o Excel Import. Selecione o builder e clique em OK.



Os dados do builder estão na Área Principal de Trabalho e você trabalha com eles como se fossem formulários. O Excel Import lê planilhas que estão dentro do projeto, ou seja, você necessita ter anexado a planilha ao projeto. Os campos preenchidos nesse builder estão marcados em vermelho, como é mostrado na tela abaixo. Após preencher os dados clique em OK. Você verá que na janela Outline irá aparecer a entrada desse builder.



O próximo passo é começar a trabalhar com o builder Map. Abaixo está a descrição dos campos iniciais.

Campo	Descrição
Name	Nome do builder.
Initialization Action	Seleção do DataServices que será executado quando o
Data	Deve-se informar quais são os dados que serão utilizados no indicador, nesse caso é o resultado que vem do DataServices que será executado.
Page Title	Título da página.

A segunda parte desse builder deve ser preenchida da seguinte maneira:

Campo	Descrição
Map File	Mapa que irá ser mostrado. Devemos selecionar o mapa do Brasil que foi colocado no projeto
Column For Region	Coluna do DataServices que representa a região no mapa.
Column For Value	Coluna do DataServices que representa o valor da região.
Match Data Regions With Map	Quando foi criado o mapa, o estado do Rio Grande do Sul ficou mapeado como Map/BRASIL/RS e em nossa planilha a sigla que estamos utilizando é RS. Essa opção é justamente para acertar essas diferenças, ou seja, funciona como se fosse um "de-para".

Na terceira parte do builder os principais campos que são trabalhados estão abaixo:

Campo	Descrição
Chat Format	Quando o gráfico for gerado, qual será o formato apresentado.
Chart Width	Largura do gráfico.
Chart Height	Altura do gráfico.
Chat/Table Page	Nesse campo você pode escolher em apresentar somente o gráfico ou o gráfico mais a tabela.
Create Main Action	Esse é um ponto muito importante desse builder. Quando criamos um programa, sempre temos um método main, que é por onde o programa começa ser executado, no WDF isso também existe e esse campo representa exatamente essa opção.
Page Order And Labels	Aqui você pode estar alterando o nome das páginas do gráfico e tabela.

Agora vamos trabalhar com os indicadores, que é a configuração das cores de status que irão ser apresentadas no mapa conforme os valores das vendas.

Campo	Descrição
Status Options	Aqui você irá criar os status para o indicador.
Indicator Logic	Qual será a logica para identificação dos status.
Thresholds	Para cada status é criada uma regra definindo quando será mostrado.
Default Status	Se não existir nenhum valor para um determinado item do mapa, esse será o status padrão.

Nessa última parte iremos selecionar somente algumas funcionalidades adicionais.

Campo	Descrição
Enable Auto Show/Hide	Habilita a opção de auto mostrar/esconder o botão de ação.
Enable Export to Excel	Habilita a ação de exportar os dados para o formato de planilha excel.
Enable Print Page	Habilita a opção de estar imprimindo o gráfico ou os dados.

Após o preenchimento desses últimos campos clique em OK e salve o projeto.



Clicando no botão de execução você verá o resultado do projeto. Abaixo o mapa e o botão de ações.



Na tela abaixo estamos vendo a tabela de dados que alimenta o gráfico.



A última parte desse projeto é transformar essa aplicação em um Portlet, para isso vamos incluir mais um builder no model, que é o Portlet Adapter. Preencha os três primeiros campos com o nome do portlet e clique em OK.



Com isso nosso projeto já está pronto, só precisando ver o resultado final dentro do Websphere Portal. Como não temos um Portal instalado nesse computador, precisamos fazer um trabalho manual para colocar o portlet dentro do Portal e o primeiro passo é fazer a construção do .war. Para essa tarefa, clique sobre o botão da direita do projeto e clique sobre a opção Build Portlet Factory WAR -> Build Portlet War.



Quando o projeto foi criado, definimos que os arquivos .war seriam gravados no diretório d:\ibm\portlet. Na tela abaixo podemos ver nosso arquivo criado.



Para a instalação da aplicação no portal, basta entra na página de administração e escolher a opção Web Modules, após clique em Install e selecione o nosso EXEMPLO.WAR.



Com o término da instalação coloque o portlet dentro de uma página do portal para visualizar o gráfico.



Esse é um pequeno exemplo de como pode-se utilizar o Websphere Dashboard Framework 6.0 para criar indicadores e gráficos. Lembro várias outras funcionalidades, como os alertas, que não foram trabalhadas nesses posts.