Thumbnails no WCM

É comum você ver uma notícia em alguns sites da internet e no final, ou qualquer outro ponto da página, existir um menu com várias fotos onde você clica para vê-las ampliadas. Isso é muito bom, pois evita que sejam mostradas várias fotos na página deixando ela muito grande e se o usuário não quer ver nenhuma das fotos tem a opção de não clicar.

O objetivo deste post é demonstrar como pode ser utilizando esse recurso dentro do Workplace Web Content Management. Esse exemplo que estarei colocando aqui é uma das possibilidades existentes, mais outras que podem ser exploradas. No final do post nós teremos uma página como a da figura abaixo.

Figura 01 - Tela final da notícia com thumbnails de imagens no final

Modelo usado

A proposição que estarei demonstrando aqui é baseada na seguinte estrutura:

Figura 02 - Estrutura para apresentação do conteúdo

Conteúdo
No conteúdo iremos trabalhar com dois tipos. O primeiro é o próprio conteúdo da notícia e o segundo são os conteúdos de imagens. A ligação entre os conteúdos será feita através da keyword, ou seja, tanto o conteúdo de notícia como os conteúdos de foto deverão ter a mesma keyword. No exemplo acima, a keyword que estou utilizando é "noticia001". Lembre-se que para cada conteúdo de notícia a keyword deverá ser diferente.

Montagem
A montagem do conteúdo para mostrar a página é bem simples. Em qualquer lugar do nosso site estaremos mostrando o link para o documento de notícia, quando um usuário clicar no link da notícia o WCM irá montar a apresentação do documento. Dentro da apresentação do documento é feita uma chamada ao menu de imagens (MENU - Imagens) e este estará verificando quais documentos de imagem tem a mesma keyword que o documento corrente.

Apresentação
Na apresentação será mostrado a notícia e um menu com todas as imagens relacionadas a o conteúdo corrente.

Template de Autoria

Nesse exemplo eu construí dois templates de autoria, um para a notícia e outro para as imagens, abaixo você poderá ver cada um dos templates:

Template de autoria para a notícia	Template de autoria para a imagem
Identification Nessa parte do formulário só fiz uma pequena descrição de como deverá ser preenchido o título do documento. Uma item que sempre gosto de usar é colocar o tipo do conteúdo em maiúsculo antes do nome do conteúdo, isso facilita achar o conteúdo dentro do WCM. Profile Como o nosso link entre notícias e imagens será a keyworkd, eu deixei o campo habilitado e com uma pequena descrição de como deve ser preenchido. Content Em content eu criei três campos. Título da notícia (Title - Text): É o campo que estarei utilizando para inserir o título da notícia. Descrição da notícia (Summary - Text): É o campo que contem uma pequena descrição da notícia. Notícia (Body - RichText): É onde será colocada a notícia.	Identification Usei o mesmo conceito do template de notícia, a identificação para esse conteúdo será PHOTO. Profile Como na notícia o campo deve ser preenchido com uma keyword existente em um conteúdo de notícia para que exista o link. Content Em content eu criei três campos. Título da foto (Title-image - Text): É o campo que estarei utilizando para inserir o título da imagem. Descrição da foto (Summary-image - Text): É o campo que contem uma pequena descrição da foto. Foto (Photo-Image - FileResource): É o campo utilizando para fazer o upload da foto. Eu não usei o campo tipo Image para ter um pouco mais de liberdade para o tratamento das fotos na apresentação.

Tabela 01 - Templates de autoria

Menu

O menu é a parte fundamental do nosso processo, é com ele que iremos ligar uma notícia com as imagens. Como disse anteriormente, para ligar uma notícia com as imagens vou estar utilizando a keyword dos documentos. Como sabemos o componente de menu tem várias regras de pesquisa para achar os documentos, inclusive por keyword.

Figura 03 - Menu para mostrar as imagens

Para a apresentação dos itens encontrados as opções e códigos são mostrados baixo:

Imagem	Código/Descição
	Na identificação do Menu utilizei o princípio de colocar o tipo do componente antes do nome. Quando colocamos a tag do wcm dentro de um HTML isso ajuda a identificar com qual tipo de componente estamos trabalhando.
	Essa é a chave do exemplo. A query que utilizei para o menu foi baseada em keywords, ou seja, quando abrir um conteúdo de notícia o menu irá pegar a keyword desse e pesquisar quais são os documentos que tem a mesma keyword, excluído o documento corrente.
	Por fim a apresentação. A ordem eu deixei Ascendente e o primeiro resultado da ordenação é pelo título do documento. Em resultados por página eu mandei mostrar até 100 imagens, o que acho suficiente. Abaixo está o código de cada sessão. Header <div id="photo_strip"> <h1>Fotos</h1> <div id="container"> <ul> Design for each menu search result <li><a href="<Placeholder tag="noprefixhref"/>" target="_blank"><img src="<Element context="autoFill" type="content" key="photo-image"/>" alt="" title="" height=64></a><p><Element context="autoFill" type="content" key="title-image"/></p></li> Footer </ul> </div> </div> Detalhes sobre a apresentação Para mostrar as imagens como na figura 01, estou utilizando um estilo especial, estarei falando um pouco mais abaixo sobre isso, e a Tags HTML que modifico para trabalhar com as imagens na horizontal são a <ul> e <li>. A imagem que o menu mostra não foi redimensionada por um programa gráfico, eu estou fazendo isso diretamente no HTML utilizando height=64. Fazendo esse exemplo eu descobri que se dimensionar somente a altura ou a largura o próprio browser acertar a imagem, nesse caso estou deixando a altura com 64 pixels e o browser irá dimensionar a largura para mim. Se o usuário quiser ver a imagem em tamanho maior poderá clicar sobre ela e será aberta uma nova janela com a imagem em tamanho natural.

Tabela 02 - Apresentação dos itens selecionados pelo menu.

Presentation Template - Notícia

No presentation template da notícia eu incluí a chamada do menu que acabamos de construir.

Figura 04 - Template de apresentação da notícia.

Imagem

Código/Descição

<html> <head> <Component id="17a4ed0045944938a692f6333a5ed22d:NC9ERU1PL0NTUyAtIEludHJhbmV0" name="DEMO/CSS - Intranet"/> </head> <body TEXT="Black" BGCOLOR="White" BACKGROUND="" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0"> <Component id="2f424b0045b6e2a08107ad1dea9632c4:NC9ERU1PL0hUTUwgLSBNZW51IEluTGluZSBFZGl0aW9u" name="DEMO/HTML - Menu InLine Edition"/> <span class="news-menu-title" ><Element context="current" type="content" key="Title"/></span><br><br> <span class="news-menu-summary"><Element context="current" type="content" key="Body"/></span> <br><br> <Component id="de80398045c7ddbf8b72afb196d52d04:NC9ERU1PL01FTlUgLSBQaG90b3MgTmV3cw==" name="DEMO/MENU - Photos News"/> </body> </html>

Tabela 03 - Presentation Template PT - News

Presentation Template - Foto

O presentation template da foto é bem simples, mostrando o título, foto e descrição.

Figura 05 - Template de apresentação da notícia.

Imagem

Código/Descição

<html> <head> <Component id="17a4ed0045944938a692f6333a5ed22d:NC9ERU1PL0NTUyAtIEludHJhbmV0" name="DEMO/CSS - Intranet"/> </head> <body TEXT="Black" BGCOLOR="White" BACKGROUND="" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" BOTTOMMARGIN="0"> <Component id="2f424b0045b6e2a08107ad1dea9632c4:NC9ERU1PL0hUTUwgLSBNZW51IEluTGluZSBFZGl0aW9u" name="DEMO/HTML - Menu InLine Edition"/> <span class="news-menu-title" ><Element context="current" type="content" key="Title-image"/></span><br><br> <img src="<Element context="current" type="content" key="photo-image"/>" alt="" title=""><br> <span class="news-menu-summary"><Element context="current" type="content" key="Summary-image"/></span> </body> </html>

Tabela 04 - Presentation Template PT - Photo News

StyleSheet

Um outro ponto fundamental é a apresentação. Existem várias maneira de mostrar as imagens junto com o documento, mas a que escolhi foi listar todas as imagens e botar uma barra de rolagem abaixo destas imagens. O código que estarei utilizando agora, eu encontrei no site CSSplay. Esse site é muito bom e traz vários tipos de layout trabalhando somente com CSS.

Style	Descição
#photo_strip {         width : 800px;         margin-left : 15px; } #photo_strip h1 {         text-align : center;         padding : 0;         margin : 0;         width : 800px;         height : 38px;         line-height : 35px;         color : #555;         font-weight : normal;         font-size : 20px;         border-bottom : 1px solid #888; }	Photo_Strip serve para dimensionar a área onde estarei mostrado as imagens.
#container {         margin : 0;         padding : 0;         height : 430px;         overflow : auto;         color : #222;         background : #fff; } #container ul {         margin : 0;         padding : 0;         list-style : none;         white-space : nowrap;         display : table-row; } #container ul li {         display : table-cell;         padding : 0 15px;         background : #fff;         border-bottom : 1px solid #888;         vertical-align : top; } #container ul li img {         border : 1px solid #555;         margin : 30px 0 10px 0; }	Container é a alteração do design para as tags ul e li.

Tabela 05 - StyleSheet

Criação do Conteúdo

Com todo o design pronto vou criar um notícia e colocar 6 fotos vinculadas a ela. No campo keyword da notícia e das fotos estarei utilizando a palavra "controlesdejogos", que será a chave para o link do conteúdo de notícia com as fotos.

Abaixo você poderá ver a publicação da notícia e o campo keyword preenchido.

Figura 06 - Crianção do conteúdo de notícia

Na tela abaixo está sendo feita a publicação de uma das fotos e novamente você poderá ver o campo keyword preenchido com o mesmo valor colocado no conteúdo de notícia. Eu fiz 6 publicações de fotos dessa mesma forma, mudando somente o título.

Figura 07 - Crianção do conteúdo de foto (segunda foto)

Tanto as fotos quanto a notícia passaram por todo o processo de aprovação do WCM que eu defini. Após se publicado o resultado final ficou da seguinte forma:

Figura 08 - Visualização da notícia publicada

Por último eu cliquei sobre uma das fotos para vê-la em tamanho real.

Figura 09 - Visualozação da foto em tamanho natural

Como disse no início deste post isso é uma maneira de estar vinculando várias fotos a um documento. Mais informações sobre o WCM você poderá encontrar no Infocenter ou no site do produto.

Lotus Connections

Esse é uma semana muito importante, está previsto para o dia 29/06 o lançamento do Lotus Connections e do Lotus Quickr. Hoje eu não vou falar muito sobre os produtos, só vou postar um vídeo do Connections que dá uma pequena ideia de seu potencial. Nas próximas semanas estarei escrevendo um pouco mais sobre cada um desses produtos.

Sonho de consumo

Todo mundo tem um sonho de consumo dos mais diversos possíveis, ultimamente o meu sonho de consumo é o iPhone da Apple. A Apple conseguiu reinventar o celular, muitos podem achar que não, mas pelos vídeos que vi, o iPhone fica cada dia mais interessante. Uma notícia que saiu no site da Apple é o suporte a aplicações Web 2.0 desenvolvidas por terceiros, ou seja, você poderá estar criando uma aplicação no padrão Web 2.0, usando standards, para o iPhone e por exemplo de sua aplicação iniciar uma chamada telefônica.

Outro boa idéia utilizada no iPhone é com relação ao e-mail. Você poderá acessar seus e-mails pelo iPhone e o protocolo que ele usa para fazer o acesso a caixa de correio é o POP3 ou IMAP, que são padrões de mercado. Os e-mail que você tiver em seu Lotus Domino poderão ser acessados pelo iPhone, bastando habilitar no servidor a utilização de um desses dois protocolos.

O iPhone também virá com um player para o YouTube!, conexão WiFi (802.11b/g), Bluetooth, entre outras novidades.

Figura 01 - Apple iPhone

Abaixo eu coloquei o link de quatro comerciais do iPhone. Vale a pena ver!!!!

Never been an iPod

How to

Calamari

Watered Down

Lotus Notes R1001

Pessoal, descobri um novo projeto do Lotus Notes, é a versão 1001, parece que essa vai ser matadora. A MS que se cuide!!! :-D

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.

IBM Websphere Dashboard Framework - Parte II

Nessa segunda parte vou estar falando sobre a interface do WDF 6.0 e como configurar o Tomcat, que será nosso servidor de aplicações. Para não perder tempo vamos direto ao assunto.

Interface

Após ter feita a instalação com sucesso, o WDF está pronto para ser utilizado, para acessar basta ir em START -> Programs -> IBM Websphere -> Portlet Factory -> Designer. Quando você inicia o programa, já aparece uma mensagem que algumas pessoas que não utilizam o Eclipse podem ficar se perguntando "o que é esse workspace?". Nessa tela é solicitada onde fica a área de trabalho do Eclipse, ou seja, você irá apontar para um diretório ou poderá deixar o valor default que será utilizado para armazenar os dados da área de trabalho. No meu caso eu criei um diretório no drive "D" do meu computador com o nome "D:\IBM\projetos\workspace". Para evitar que toda vez o Eclipse pergunte isso, basta marcar a opção "Use this as the default and do not ask again".

Figura 1 - Workspace Launcher

Quando o Eclipse abre pela primeira vez aparece a tela de Welcome. Para entrar na interface clique sobre o ícone que representa uma seta.

Figura 2 - Tela de Welcome no Eclipse 3.2

Um conceito utilizado dentro do Eclipse é a utilização de perspectivas, ou seja, maneiras diferentes de ver a tela conforme o projeto que você está trabalhando. O WDF possui a sua própria perspectiva que é instalada no Eclipse. Se essa perspectiva não estiver ativa, o próprio Eclipse altera quando você cria um novo projeto baseado em WDF.

Figura 3 - Perspectiva do WDF no Eclipse 3.2

Na figura 3 podemos ver algumas marcações que são explicadas abaixo:

• O número 1 representa o Project Explorer. Nele são apresentados os projetos que você tem em seu workspace.
• O número 2 é o Outline. Quando você cria um projeto e adiciona um model (iremos falar sobre model na parte III) ao projeto é nessa área que você adiciona os builders.
• O número 3 é a Área Principal de Trabalho, ou seja, onde você irá trabalhar com os Builder Call Editors.
• O número 4 é onde os erros/tarefas do projeto são apresentados
• O número 5 é o menu de perspectiva. Como disse quando estamos trabalhando com um projeto do WDF, a perspectiva já é selecionada para esse modelo, mas você pode estar alterando para a perspectiva java para ver a diferença.

Esses são os principais pontos da interface Eclipse + WDF. Nesse ponto eu vou dar uma quebrada para falar um pouco do Tomcat e depois continuamos a trabalhar com o WDF.

TOMCAT

Para quem não sabe, o Tomcat é um Web Aplication Server desenvolvido pela The Apache Software Fundation (www.apache.org) que suporta Java Servlet e JavaServer Pages e seu desenvolvimento é feito de uma maneira colaborativa, onde qualquer programador ao redor do mundo pode estar participando deste projeto.

Um pergunta que pode estar passando por sua cabeça "Por que utilizar o Tomcat, nós não estamos desenvolvendo portlets para o Websphere Portal?". Isso é verdade, o resultado final desses posts será um portlet que estaremos colocando dentro do Websphere Portal, mas a utilização do Tomcat vai nos ajudar no desenvolvimento pois não estarei instalando um Websphere Portal em minha máquina, isso eu já tenho pronto em um servidor e só para vocês terem uma idéia o Websphere Portal necessita de no mínimo 2Gb de memória RAM para rodar e nem todos desenvolvedores tem isso em suas máquinas. Um outra opção que poderia estar utilizando seria o Websphere Application Server, que é mais leve que o Webphere Portal, mas como realmente eu estou querendo otimizar recursos vou de Tomcat. Um ponto importante é que o Tomcat é suportado pela IBM somente para a máquina do desenvolvedor, ou seja, se você pegar um projeto feito no WDF e quiser instalar em um Tomcat de produção isso não é suportado.

A instalação do Tomcat é muito simples, basta baixar o código da página tomcat.apache,org e descompactar o servidor dentro de um diretório a sua escolha. Um detalhe importante é sobre a versão, o WDF suporta somente a versão 5.5.23 do Tomcat.

Figura 4 - Página de Download do Tomcat 5.5.23

Você deve baixar o Core do Tomcat e pode pegar, por exemplo, o arquivo .zip como é mostrado na figura 4.

A instalação é muito simples, como já mencionei, basta extrair o arquivo para um diretório que você queira. No meu ambiente eu extrai o Tomcat no diretório "d:\tomcat".

Figura 5 - Descompactando o Tomcat 5.5.23

Um pré-requisito desta versão é o JRE, você pode estar baixando do site java.com. Antes de iniciar o Tomcat devemos configurar o JRE_HOME, que pode ser feita de duas maneiras, ou em uma variável de ambiente do windows ou via comando de linha, no meu caso eu decidi fazer via comando de linha e acabei criando dois arquivos .bat para iniciar e parar o Tomcat..

Iniciar o TOMCAT (Start TOMCAT.bat)	Parar o TOMCAT (Stop TOMCAT.bat)
@ECHO OFF set JRE_HOME=C:\Program Files\Java\jre1.6.0_01 d: cd\tomcat\apache-tomcat-5.5.23\bin call startup.bat @Echo ON	@ECHO OFF set JRE_HOME=C:\Program Files\Java\jre1.6.0_01 d: cd\tomcat\apache-tomcat-5.5.23\bin call shutdown.bat @Echo ON

Após iniciar o Tomcat aparece uma janela de command com o status do servidor.

Figura 6 - Iniciando o Tomcat

Esses são os principais pontos para colocar o Tomcat em funcionamento, maiores informações podem ser encontradas no site do Tomcat.

Criando um projeto no WDF

Vamos agora voltar ao WDF para criar um novo projeto. O primeiro passo é a criação de um projeto dentro do WDF e para isso basta clicar no botão NEW e escolher a opção PROJECT...




Clique na opção Websphere Portlet Factory e selecione WebSphere Portlet Factory Project.



Dê um nome para o seu projeto, aqui utilizarei o nome EXEMPLO, clique em NEXT.



Essa é uma parte muito importante, onde você irá selecionar quais recursos do WDF irão fazer parte de seu projeto. Os recursos que selecionei foram:

WebSphere Dashboard Framework -> Dashboard Framework	É a base do WDF, deverá ser selecionado sempre.
WebSphere Dashboard Framework -> GreenPoint Web Chart Builder	Adiciona os builders para desenvolvimento de Web Chart.
Integration Extension -> Excel Extension	Adiciona builders para trabalhar com planilhas Excel.
Charting	Selecionado automaticamente quando a opção GreenPoint Web Chart Builder é selecionada.

Obs.: Se você quiser adicionar novos elementos a um projeto criado basta utilizar a tela de configuração do projeto.

Clique em NEXT para continuar.



Nessa próxima janela são mostradas as informações do projeto incluindo bibliotecas que serão utilizadas. Clique em NEXT.



Na tela a seguir será feita a configuração de qual servidor de aplicativos e de portal estaremos utilizando para deployment. Para adicionar os servidores é necessário clicar no botão Add...



Para o servidor de aplicações, entre com o nome, o tipo e a localização do diretório webapps no Tomcat.



Como não tenho um servidor de portal na minha máquina, estarei colocando que o deployment será em um diretório local. Com isso quando eu quiser instalar os portlets no Websphere Portal eu preciso entrar na interface de administração. Se eu tivesse instalado um Portal nessa máquina, o deployment poderia ser feito automaticamente.



Voltando a tela de Deployment Configuration, selecione as configurações que você criou. Lembre-se que essa configuração é feita uma única vez, ou seja, qualquer outro projeto que você venha a criar poderá utilizar a mesma configuração. Clique em Finish para criar seu projeto.



Na criação, o WDF irá perguntar se você deseja adicionar alguns arquivos .jar. Clique em Yes.



Após a criação, o WDF irá perguntar se você irá querer fazer o Deploy do projeto. Clique em Yes e aguarde a execução do processo ou clique em Run in Background.



Após a criação do projeto você verá uma tela parecida a que está abaixo. Existe um arquivo chamado Readme_deshboard.txt que contem um endereço e uma licença, isso é para baixar o WebCharts3D, um programa que pode ser utilizado para a customizações dos gráficos no Dashboard. Para o nosso exemplo na parte III nós estaremos utilizando esse utilitário.



Com isso terminamos a segunda parte. Na última parte desse artigo vamos estar criando um mapa do Brasil com alertas.